@instructure/quiz-interactions/src/components/numeric/Edit/NumericTypeSelect.js

A React UI component Library for quiz interaction types.

/** @jsx jsx */
import {Component} from 'react'
import PropTypes from 'prop-types'

import {IconButton} from '@instructure/ui-buttons'
import {IconQuestionLine} from '@instructure/ui-icons'
import {jsx} from '@instructure/emotion'

import t from '@instructure/quiz-i18n/format-message'
import {EXACT_RESPONSE, MARGIN_OF_ERROR, PRECISE_RESPONSE, WITHIN_A_RANGE} from './constants'

import generateStyle from './styles'
import {SimpleSelect} from '@instructure/quiz-common/components/SimpleSelect/index'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'

@withStyleOverrides(generateStyle, null)
export default class NumericTypeSelect extends Component {
  static displayName = 'NumericTypeSelect'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    id: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    onClickHelp: PropTypes.func,
    inputRef: PropTypes.func,
    value: PropTypes.oneOf([EXACT_RESPONSE, MARGIN_OF_ERROR, WITHIN_A_RANGE, PRECISE_RESPONSE])
      .isRequired,
    styles: PropTypes.object,
  }

  static defaultProps = {
    onClickHelp: null,
    inputRef: void 0,
  }

  setTypeSelectInputRef = node => {
    this.props.inputRef(this.props.id, node)
  }

  handleChange = (event, {value}) => {
    this.props.onChange(event, {id: this.props.id, type: value})
  }

  renderLabel() {
    const label = t('Requirement')

    // TODO: find a way to do this without custom styles
    return this.props.onClickHelp ? (
      <div css={this.props.styles.labelWithHelp}>
        {label}
        <div css={this.props.styles.helpButton}>
          <IconButton
            renderIcon={IconQuestionLine}
            onClick={this.props.onClickHelp}
            size="small"
            screenReaderLabel={t('Display help dialog for numeric requirement')}
            withBackground={false}
            withBorder={false}
          />
        </div>
      </div>
    ) : (
      label
    )
  }

  render() {
    return (
      <SimpleSelect
        renderLabel={this.renderLabel()}
        onChange={this.handleChange}
        value={this.props.value}
        data-automation="sdk-numeric-type"
        inputRef={this.setTypeSelectInputRef}
      >
        <SimpleSelect.Option id="numeric-type-select-option-exact-response" value={EXACT_RESPONSE}>
          {t('Exact response')}
        </SimpleSelect.Option>
        <SimpleSelect.Option
          id="numeric-type-select-option-margin-of-error"
          value={MARGIN_OF_ERROR}
        >
          {t('Margin of error')}
        </SimpleSelect.Option>
        <SimpleSelect.Option id="numeric-type-select-option-within-a-range" value={WITHIN_A_RANGE}>
          {t('Within a range')}
        </SimpleSelect.Option>
        <SimpleSelect.Option
          id="numeric-type-select-option-precise-response"
          value={PRECISE_RESPONSE}
        >
          {t('Precise response')}
        </SimpleSelect.Option>
      </SimpleSelect>
    )
  }
}