p5.js-web-editor/client/modules/IDE/components/Toolbar.js

123 lines
4 KiB
JavaScript
Raw Normal View History

2016-06-27 19:08:25 +00:00
import React, { PropTypes } from 'react';
2016-08-17 20:09:20 +00:00
import { Link } from 'react-router';
2016-07-22 16:42:38 +00:00
const InlineSVG = require('react-inlinesvg');
2016-06-23 22:29:55 +00:00
const playUrl = require('../../../images/play.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
const stopUrl = require('../../../images/stop.svg');
const preferencesUrl = require('../../../images/preferences.svg');
2016-07-22 16:42:38 +00:00
import classNames from 'classnames';
2016-06-23 22:29:55 +00:00
class Toolbar extends React.Component {
constructor(props) {
super(props);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
}
2016-06-23 22:29:55 +00:00
handleKeyPress(event) {
if (event.key === 'Enter') {
this.props.hideEditProjectName();
}
}
2016-07-31 02:46:48 +00:00
handleProjectNameChange(event) {
this.props.setProjectName(event.target.value);
}
validateProjectName() {
if (this.props.project.name === '') {
this.props.setProjectName(this.originalProjectName);
}
}
render() {
let playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': this.props.isPlaying
});
let stopButtonClass = classNames({
'toolbar__stop-button': true,
'toolbar__stop-button--selected': !this.props.isPlaying
});
let preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': this.props.preferencesIsVisible
});
let nameContainerClass = classNames({
'toolbar__project-name-container': true,
'toolbar__project-name-container--editing': this.props.project.isEditingName
});
return (
<div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button className={stopButtonClass} onClick={this.props.stopSketch} aria-label="stop sketch">
<InlineSVG src={stopUrl} alt="Stop Sketch" />
</button>
<div className={nameContainerClass}>
<a
className="toolbar__project-name"
onClick={() => {
this.originalProjectName = this.props.project.name;
this.props.showEditProjectName();
setTimeout(() => this.refs.projectNameInput.focus(), 0);
}}
>{this.props.project.name}</a>
<input
type="text"
className="toolbar__project-name-input"
value={this.props.project.name}
onChange={this.handleProjectNameChange}
ref="projectNameInput"
onBlur={() => {
this.validateProjectName();
this.props.hideEditProjectName();
}}
onKeyPress={this.handleKeyPress}
/>
{(() => { // eslint-disable-line
if (this.props.owner) {
return (
2016-08-17 20:09:20 +00:00
<p className="toolbar__project-owner">
by <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
</p>
);
}
})()}
</div>
<button
className={preferencesButtonClass}
onClick={this.props.openPreferences}
aria-label="open preferences"
2016-06-27 19:08:25 +00:00
>
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
</button>
2016-06-23 22:29:55 +00:00
</div>
);
}
2016-06-23 22:29:55 +00:00
}
2016-06-27 19:08:25 +00:00
Toolbar.propTypes = {
isPlaying: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
2016-06-27 19:08:25 +00:00
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired,
2016-07-15 15:54:47 +00:00
openPreferences: PropTypes.func.isRequired,
2016-07-15 17:11:50 +00:00
owner: PropTypes.shape({
username: PropTypes.string
}),
project: PropTypes.shape({
name: PropTypes.string.isRequired,
isEditingName: PropTypes.bool
}).isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired
2016-06-27 19:08:25 +00:00
};
2016-06-23 22:29:55 +00:00
export default Toolbar;