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

76 lines
2.5 KiB
JavaScript
Raw Normal View History

2016-06-27 19:08:25 +00:00
import React, { PropTypes } from 'react';
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
2016-06-27 19:08:25 +00:00
function Toolbar(props) {
let playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': props.isPlaying
});
let stopButtonClass = classNames({
'toolbar__stop-button': true,
'toolbar__stop-button--selected': !props.isPlaying
});
let preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': props.preferencesIsVisible
2016-06-27 19:08:25 +00:00
});
2016-06-23 22:29:55 +00:00
2016-06-27 19:08:25 +00:00
return (
<div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
2016-07-31 02:46:48 +00:00
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
2016-07-22 16:42:38 +00:00
<InlineSVG src={playUrl} alt="Play Sketch" />
2016-06-27 19:08:25 +00:00
</button>
2016-07-31 02:46:48 +00:00
<button className={stopButtonClass} onClick={props.stopSketch} aria-label="stop sketch">
2016-07-22 16:42:38 +00:00
<InlineSVG src={stopUrl} alt="Stop Sketch" />
2016-06-27 19:08:25 +00:00
</button>
<div className="toolbar__project-name-container">
<span
className="toolbar__project-name"
2016-06-27 21:22:54 +00:00
// TODO change this span into an input
2016-07-12 16:25:48 +00:00
onBlur={props.setProjectName.bind(this)} // eslint-disable-line
2016-06-27 19:08:25 +00:00
contentEditable
suppressContentEditableWarning
>
{props.projectName}
</span>
2016-07-15 15:54:47 +00:00
{(() => { // eslint-disable-line
if (props.owner) {
return (
<p className="toolbar__project-owner">by <span>{props.owner.username}</span></p>
);
}
})()}
2016-06-23 22:29:55 +00:00
</div>
2016-07-13 19:23:48 +00:00
<button
className={preferencesButtonClass}
onClick={props.openPreferences}
2016-07-31 02:46:48 +00:00
aria-label="open preferences"
2016-07-13 19:23:48 +00:00
>
2016-07-22 16:42:38 +00:00
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
2016-06-27 19:08:25 +00:00
</button>
</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,
projectName: PropTypes.string.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
})
2016-06-27 19:08:25 +00:00
};
2016-06-23 22:29:55 +00:00
export default Toolbar;