r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

add proptypes to toolbar

This commit is contained in:
catarak 2016-06-27 15:08:25 -04:00
parent 29013b99f1
commit 323b48c511
1 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/modules/IDE/components/Toolbar.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { PropTypes } from 'react';
const Isvg = require('react-inlinesvg'); const Isvg = require('react-inlinesvg');
const playUrl = require('../../../images/play.svg'); const playUrl = require('../../../images/play.svg');
@ -7,46 +7,54 @@ const stopUrl = require('../../../images/stop.svg');
const preferencesUrl = require('../../../images/preferences.svg'); const preferencesUrl = require('../../../images/preferences.svg');
const classNames = require('classnames'); const classNames = require('classnames');
class Toolbar extends React.Component { function Toolbar(props) {
render() {
let playButtonClass = classNames({ let playButtonClass = classNames({
'toolbar__play-button': true, 'toolbar__play-button': true,
'toolbar__play-button--selected': this.props.isPlaying 'toolbar__play-button--selected': props.isPlaying
}); });
let stopButtonClass = classNames({ let stopButtonClass = classNames({
'toolbar__stop-button': true, 'toolbar__stop-button': true,
'toolbar__stop-button--selected': !this.props.isPlaying 'toolbar__stop-button--selected': !props.isPlaying
}); });
let preferencesButtonClass = classNames({ let preferencesButtonClass = classNames({
'toolbar__preferences-button': true, 'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': this.props.isPreferencesVisible 'toolbar__preferences-button--selected': props.isPreferencesVisible
}); });
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" /> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={this.props.startSketch}> <button className={playButtonClass} onClick={props.startSketch}>
<Isvg src={playUrl} alt="Play Sketch" /> <Isvg src={playUrl} alt="Play Sketch" />
</button> </button>
<button className={stopButtonClass} onClick={this.props.stopSketch}> <button className={stopButtonClass} onClick={props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" /> <Isvg src={stopUrl} alt="Stop Sketch" />
</button> </button>
<div className="toolbar__project-name-container"> <div className="toolbar__project-name-container">
<span <span
className="toolbar__project-name" className="toolbar__project-name"
onBlur={this.props.setProjectName.bind(this)} onBlur={props.setProjectName.bind(this)}
contentEditable contentEditable
suppressContentEditableWarning suppressContentEditableWarning
> >
{this.props.projectName} {props.projectName}
</span> </span>
</div> </div>
<button className={preferencesButtonClass} onClick={this.props.openPreferences}> <button className={preferencesButtonClass} onClick={props.openPreferences}>
<Isvg src={preferencesUrl} alt="Show Preferences" /> <Isvg src={preferencesUrl} alt="Show Preferences" />
</button> </button>
</div> </div>
); );
}
} }
Toolbar.propTypes = {
isPlaying: PropTypes.bool.isRequired,
isPreferencesVisible: PropTypes.bool.isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired,
projectName: PropTypes.string.isRequired,
openPreferences: PropTypes.func.isRequired
};
export default Toolbar; export default Toolbar;