import React, { PropTypes } from 'react'; import { Link } from 'react-router'; import classNames from 'classnames'; import InlineSVG from 'react-inlinesvg'; const playUrl = require('../../../images/play.svg'); const stopUrl = require('../../../images/stop.svg'); const preferencesUrl = require('../../../images/preferences.svg'); const editProjectNameUrl = require('../../../images/pencil.svg'); 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); } } canEditProjectName() { return (this.props.owner && this.props.owner.username && this.props.owner.username === this.props.currentUser) || !this.props.owner || !this.props.owner.username; } render() { const playButtonClass = classNames({ 'toolbar__play-button': true, 'toolbar__play-button--selected': this.props.isPlaying }); const stopButtonClass = classNames({ 'toolbar__stop-button': true, 'toolbar__stop-button--selected': !this.props.isPlaying }); const preferencesButtonClass = classNames({ 'toolbar__preferences-button': true, 'toolbar__preferences-button--selected': this.props.preferencesIsVisible }); const nameContainerClass = classNames({ 'toolbar__project-name-container': true, 'toolbar__project-name-container--editing': this.props.project.isEditingName }); return (
{ this.props.setAutorefresh(event.target.checked); }} />
{ if (this.canEditProjectName()) { e.preventDefault(); this.originalProjectName = this.props.project.name; this.props.showEditProjectName(); setTimeout(() => this.projectNameInput.focus(), 0); } }} > {this.props.project.name}  { this.canEditProjectName() && } { this.projectNameInput = element; }} onBlur={() => { this.validateProjectName(); this.props.hideEditProjectName(); if (this.props.project.id) { this.props.saveProject(); } }} 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, stopSketch: 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, id: PropTypes.string, }).isRequired, showEditProjectName: PropTypes.func.isRequired, hideEditProjectName: PropTypes.func.isRequired, infiniteLoop: PropTypes.bool.isRequired, autorefresh: PropTypes.bool.isRequired, setAutorefresh: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired, startAccessibleSketch: PropTypes.func.isRequired, saveProject: PropTypes.func.isRequired, currentUser: PropTypes.string }; Toolbar.defaultProps = { owner: undefined, currentUser: undefined }; export default Toolbar;