diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 08bd6b5561446df26a4968c64d559ce1d0d3f2bc..c2fcd8974bce83a6828e558e2cf4c80a3358c924 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -14,6 +14,7 @@ import ProjectLoader from '../../containers/project-loader.jsx'; import Menu from '../../containers/menu.jsx'; import {MenuItem, MenuSection} from '../menu/menu.jsx'; import ProjectSaver from '../../containers/project-saver.jsx'; +import TurboMode from '../../containers/turbo-mode.jsx'; import {openTipsLibrary} from '../../reducers/modals'; import {setPlayer} from '../../reducers/mode'; @@ -297,15 +298,23 @@ class MenuBar extends React.Component { </MenuItem> </MenuItemTooltip> <MenuSection> - <MenuItemTooltip id="turbo"> - <MenuItem> - <FormattedMessage - defaultMessage="Turbo mode" - description="Menu bar item for toggling turbo mode" - id="gui.menuBar.turboMode" - /> + <TurboMode>{(toggleTurboMode, {turboMode}) => ( + <MenuItem onClick={toggleTurboMode}> + {turboMode ? ( + <FormattedMessage + defaultMessage="Turn off Turbo Mode" + description="Menu bar item for turning off turbo mode" + id="gui.menuBar.turboModeOff" + /> + ) : ( + <FormattedMessage + defaultMessage="Turn on Turbo Mode" + description="Menu bar item for turning on turbo mode" + id="gui.menuBar.turboModeOn" + /> + )} </MenuItem> - </MenuItemTooltip> + )}</TurboMode> </MenuSection> </MenuBarMenu> </div> diff --git a/src/containers/turbo-mode.jsx b/src/containers/turbo-mode.jsx new file mode 100644 index 0000000000000000000000000000000000000000..bde228adeb834595b99cfbc8fae422eb1043cca4 --- /dev/null +++ b/src/containers/turbo-mode.jsx @@ -0,0 +1,60 @@ +import bindAll from 'lodash.bindall'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {connect} from 'react-redux'; + +/** + * Turbo Mode component passes toggleTurboMode function to its child. + * It also includes `turboMode` in the props passed to the children. + * It expects this child to be a function with the signature + * function (turboMode, toggleTurboMode, props) {} + * The component can then be used to attach turbo mode setting functionality + * to any other component: + * + * <TurboMode>{(toggleTurboMode, props) => ( + * <MyCoolComponent + * turboEnabled={props.turboMode} + * onClick={toggleTurboMode} + * {...props} + * /> + * )}</TurboMode> + */ +class TurboMode extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'toggleTurboMode' + ]); + } + toggleTurboMode () { + this.props.vm.setTurboMode(!this.props.turboMode); + } + render () { + const { + /* eslint-disable no-unused-vars */ + children, + vm, + /* eslint-enable no-unused-vars */ + ...props + } = this.props; + return this.props.children(this.toggleTurboMode, props); + } +} + +TurboMode.propTypes = { + children: PropTypes.func, + turboMode: PropTypes.bool, + vm: PropTypes.shape({ + setTurboMode: PropTypes.func + }) +}; + +const mapStateToProps = state => ({ + vm: state.scratchGui.vm, + turboMode: state.scratchGui.vmStatus.turbo +}); + +export default connect( + mapStateToProps, + () => ({}) // omit dispatch prop +)(TurboMode);