diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx index 4da2397bf7d881fa61b689ca0ad81c0621132cd0..6e1df46610657d130617940fc103b409eda78a1f 100644 --- a/src/components/stage-header/stage-header.jsx +++ b/src/components/stage-header/stage-header.jsx @@ -42,6 +42,7 @@ const messages = defineMessages({ const StageHeaderComponent = function (props) { const { isFullScreen, + onKeyPress, onSetStageLarge, onSetStageFull, onSetStageUnFull, @@ -58,6 +59,7 @@ const StageHeaderComponent = function (props) { <Button className={styles.stageButton} onClick={onSetStageUnFull} + onKeyPress={onKeyPress} > <img alt={props.intl.formatMessage(messages.unFullStageSizeMessage)} @@ -138,6 +140,7 @@ const StageHeaderComponent = function (props) { StageHeaderComponent.propTypes = { intl: intlShape, isFullScreen: PropTypes.bool.isRequired, + onKeyPress: PropTypes.func.isRequired, onSetStageFull: PropTypes.func.isRequired, onSetStageLarge: PropTypes.func.isRequired, onSetStageUnFull: PropTypes.func.isRequired, diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx index 593851a4104f95f65793129d983a9a3bc920fbaa..724280edd75e212b22dc7363ab77c581a55fadc9 100644 --- a/src/containers/stage-header.jsx +++ b/src/containers/stage-header.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import bindAll from 'lodash.bindall'; import VM from 'scratch-vm'; import {setStageSize, setFullScreen, STAGE_SIZES} from '../reducers/stage-size'; @@ -9,6 +10,23 @@ import StageHeaderComponent from '../components/stage-header/stage-header.jsx'; // eslint-disable-next-line react/prefer-stateless-function class StageHeader extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleKeyPress' + ]); + } + componentDidMount () { + document.addEventListener('keydown', this.handleKeyPress); + } + componentWillUnmount () { + document.removeEventListener('keydown', this.handleKeyPress); + } + handleKeyPress (event) { + if (event.key === 'Escape' && this.props.isFullScreen) { + this.props.onSetStageUnFull(false); + } + } render () { const { ...props @@ -16,12 +34,15 @@ class StageHeader extends React.Component { return ( <StageHeaderComponent {...props} + onKeyPress={this.handleKeyPress} /> ); } } StageHeader.propTypes = { + isFullScreen: PropTypes.bool.isRequired, + onSetStageUnFull: PropTypes.func.isRequired, stageSize: PropTypes.oneOf(Object.keys(STAGE_SIZES)), vm: PropTypes.instanceOf(VM).isRequired };