import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import { Link } from 'react-router'; import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import * as IDEActions from '../actions/ide'; import * as preferenceActions from '../actions/preferences'; import * as projectActions from '../actions/project'; import PlayIcon from '../../../images/play.svg'; import StopIcon from '../../../images/stop.svg'; import PreferencesIcon from '../../../images/preferences.svg'; import EditProjectNameIcon from '../../../images/pencil.svg'; class Toolbar extends React.Component { constructor(props) { super(props); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleProjectNameChange = this.handleProjectNameChange.bind(this); this.handleProjectNameSave = this.handleProjectNameSave.bind(this); this.state = { projectNameInputValue: props.project.name, }; } handleKeyPress(event) { if (event.key === 'Enter') { this.props.hideEditProjectName(); this.projectNameInput.blur(); } } handleProjectNameChange(event) { this.setState({ projectNameInputValue: event.target.value }); } handleProjectNameSave() { const newProjectName = this.state.projectNameInputValue.trim(); if (newProjectName.length === 0) { this.setState({ projectNameInputValue: this.props.project.name, }); } else { this.props.setProjectName(newProjectName); this.props.hideEditProjectName(); if (this.props.project.id) { this.props.saveProject(); } } } 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 canEditProjectName = this.canEditProjectName(); const playButtonClass = classNames({ 'toolbar__play-button': true, 'toolbar__play-button--selected': this.props.isPlaying, 'toolbar__play-button--saved': this.props.isSaved, 'toolbar__play-button--unsaved': !this.props.isSaved, 'toolbar__play-button--clone': this.props.unsavedChanges && !canEditProjectName }); 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); }} />
{ this.projectNameInput = element; }} onBlur={this.handleProjectNameSave} onKeyPress={this.handleKeyPress} /> {(() => { // eslint-disable-line if (this.props.owner) { return (

by {this.props.owner.username}

); } })()}
); } } Toolbar.propTypes = { isPlaying: PropTypes.bool.isRequired, unsavedChanges: PropTypes.bool.isRequired, isSaved: 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, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired, startAccessibleSketch: PropTypes.func.isRequired, saveProject: PropTypes.func.isRequired, currentUser: PropTypes.string, t: PropTypes.func.isRequired }; Toolbar.defaultProps = { owner: undefined, currentUser: undefined }; function mapStateToProps(state) { return { autorefresh: state.preferences.autorefresh, currentUser: state.user.username, infiniteLoop: state.ide.infiniteLoop, isPlaying: state.ide.isPlaying, owner: state.project.owner, isSaved: state.project.updatedAt !== '', preferencesIsVisible: state.ide.preferencesIsVisible, project: state.project, unsavedChanges: state.ide.unsavedChanges, }; } const mapDispatchToProps = { ...IDEActions, ...preferenceActions, ...projectActions, }; export const ToolbarComponent = withTranslation()(Toolbar); export default connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent);