armo-breadboard/src/ResponsiveModeController.js

Edit a live React component's source in real time.

import PropTypes from 'prop-types'
import { PureController } from 'react-controllers'

export default class ResponsiveModeController extends PureController {
  static propTypes = {
    /**
     * The default mode to display upon load when the screen only contains
     * space for a single pane.
     */
    defaultMode: PropTypes.oneOf(['files', 'browser', 'console', 'info']),

    /**
     * Selects the secondary pane to display in the case that the user is
     * viewing the source pane on a small screen, and then the screen
     * expands to allow a second pane.
     */
    defaultSecondary: PropTypes.oneOf(['browser', 'console', 'info']),

    /**
     * The default mode to display in an files tab when it only contains
     * space for a single pane.
     */
    defaultFilesMode: PropTypes.oneOf(['source', 'transformedSource', 'solution']),

    /**
     * The maximum width for which only a single pane will be used.
     */
    maxSinglePaneWidth: PropTypes.number,

    /**
     * The maximum screen height for which only a single pane will be used.
     */
    maxSinglePaneMaxHeight: PropTypes.number,

    /**
     * Current breadboard width.
     */
    width: PropTypes.number,

    /**
     * The maximum possible height to which the breadboard can expand.
     */
    maxHeight: PropTypes.number,
  }

  static defaultProps = {
    defaultSecondary: 'browser',
    defaultMode: 'files',
    defaultFilesMode: 'source',

    maxSinglePaneWidth: 999,
    maxSinglePaneMaxHeight: 650,
  }

  static actions = {
    selectFilesMode(mode) {
      this.setState({ filesPrimary: mode })
    },
    selectSource() {
      this.setState({ filesPrimary: 'source' })
    },
    selectTransformedSource() {
      this.setState({ filesPrimary: 'transformedSource' })
    },
    selectSolution() {
      this.setState({ filesPrimary: 'solution' })
    },

    selectMode(mode) {
      this.setState({ primary: mode })
    },
    selectFiles() {
      this.setState({ primary: 'files' })
    },
    selectBrowser() {
      this.setState({ primary: 'browser' })
    },
    selectConsole() {
      this.setState({ primary: 'console' })
    },
    selectInfo() {
      this.setState({ primary: 'info' })
    },
  }

  constructor(props) {
    super(props)

    this.state = {
      primary: props.defaultMode,
      filesPrimary: props.defaultFilesMode,
    }
  }

  output() {
    const props = this.props
    const { primary, filesPrimary } = this.state

    const modes = {}
    if (props.width !== undefined && props.width <= props.maxSinglePaneWidth) {
      modes[primary] = true
    }
    else {
      modes['files'] = true
      modes[primary === 'files' ? props.defaultSecondary : primary] = true
    }

    const filesModes = {}
    if ((props.maxHeight !== undefined && props.maxHeight <= props.maxSinglePaneMaxHeight) || filesPrimary === 'source') {
      filesModes[filesPrimary] = true
    }
    else {
      filesModes['source'] = true
      filesModes[filesPrimary] = true
    }

    return {
      modeActions: this.actions,
      modes: modes,
      filesModes: filesModes,
    }
  }
}