p5.js-web-editor/shared/components/Toolbar/Toolbar.jsx

43 lines
1.4 KiB
React
Raw Normal View History

2016-05-11 17:19:37 +00:00
import React from 'react';
2016-05-12 21:22:54 +00:00
var Isvg = require('react-inlinesvg');
2016-05-11 17:19:37 +00:00
var playUrl = require('../../../images/play.svg');
var logoUrl = require('../../../images/p5js-logo.svg');
2016-05-12 21:22:54 +00:00
var stopUrl = require('../../../images/stop.svg');
2016-06-17 17:37:29 +00:00
var preferencesUrl = require('../../../images/preferences.svg');
2016-05-12 21:40:49 +00:00
var classNames = require('classnames');
2016-05-11 17:19:37 +00:00
class Toolbar extends React.Component {
render() {
2016-05-12 21:40:49 +00:00
let playButtonClass = classNames({
"toolbar__play-button": true,
2016-06-09 23:30:59 +00:00
"toolbar__play-button--selected": this.props.isPlaying
2016-05-12 21:40:49 +00:00
});
2016-06-08 20:35:59 +00:00
let stopButtonClass = classNames({
"toolbar__stop-button": true,
2016-06-09 23:30:59 +00:00
"toolbar__stop-button--selected": !this.props.isPlaying
2016-06-08 20:35:59 +00:00
});
2016-06-17 17:37:29 +00:00
let preferencesButtonClass = classNames({
"toolbar__preferences-button": true,
"toolbar__preferences-button--selected": this.props.isPreferencesShowing
});
2016-05-12 21:40:49 +00:00
2016-05-11 17:19:37 +00:00
return (
<div className="toolbar">
2016-06-03 21:30:40 +00:00
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/>
2016-06-08 20:35:59 +00:00
<button className={playButtonClass} onClick={this.props.startSketch}>
2016-05-12 21:22:54 +00:00
<Isvg src={playUrl} alt="Play Sketch" />
2016-06-08 20:35:59 +00:00
</button>
<button className={stopButtonClass} onClick={this.props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" />
</button>
2016-06-17 17:37:29 +00:00
<button className={preferencesButtonClass} onClick={this.props.togglePreferences}>
<Isvg src={preferencesUrl} alt="Show Preferences" />
</button>
2016-05-11 17:19:37 +00:00
</div>
);
}
}
2016-06-08 20:35:59 +00:00
export default Toolbar;