import React, { PropTypes } from 'react'; import { Link } from 'react-router'; const InlineSVG = require('react-inlinesvg'); 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'); import classNames from 'classnames'; class Toolbar extends React.Component { constructor(props) { super(props); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleProjectNameChange = this.handleProjectNameChange.bind(this); } handleKeyPress(event) { if (event.key === 'Enter') { this.props.hideEditProjectName(); } } 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 (
p5js Logo
{ this.originalProjectName = this.props.project.name; this.props.showEditProjectName(); setTimeout(() => this.refs.projectNameInput.focus(), 0); }} >{this.props.project.name} { this.validateProjectName(); this.props.hideEditProjectName(); }} onKeyPress={this.handleKeyPress} /> {(() => { // eslint-disable-line if (this.props.owner) { return (

by {this.props.owner.username}

); } })()}
); } } Toolbar.propTypes = { isPlaying: PropTypes.bool.isRequired, preferencesIsVisible: PropTypes.bool.isRequired, startSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, startTextOutput: PropTypes.func.isRequired, stopTextOutput: PropTypes.func.isRequired, setProjectName: PropTypes.func.isRequired, openPreferences: PropTypes.func.isRequired, 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 }; export default Toolbar;