@instructure/quiz-interactions/src/components/true_false/Edit/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

import getOr from 'lodash/fp/getOr'

import t from '@instructure/quiz-i18n/format-message'
import ChoiceBody from '../components/ChoiceBody'
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer'
import QuestionContainer from '../../common/edit/components/QuestionContainer'
import TrueFalseInteractionType from '../../../records/interactions/true_false'
import withEditTools from '../../../util/withEditTools'
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel'
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert'
import {ScreenReaderContent} from '@instructure/ui-a11y-content'
import {FormFieldGroup} from '@instructure/quiz-common/components/FormFieldGroup/index'

const TRUE_VALUE = 'trueChoice'
const FALSE_VALUE = 'falseChoice'

/**
---
category: TrueFalse
---
  True False Edit component

   ```jsx_example
   function Example (props) {
    const exampleProps = {
      itemId: '1',
      itemBody: 'The sun is a star',
      interactionData: {
        trueChoice: 'True',
        falseChoice: 'False'
      },
      scoringData: { value: true }
    }

    return (
      <TrueFalseEdit {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/

@withEditTools
export default class TrueFalseEdit extends Component {
  static interactionType = TrueFalseInteractionType

  static propTypes = {
    additionalOptions: QuestionSettingsContainer.propTypes.additionalOptions,
    calculatorType: PropTypes.string,
    changeItemState: PropTypes.func,
    enableRichContentEditor: PropTypes.bool,
    interactionData: PropTypes.shape({
      trueChoice: PropTypes.string,
      falseChoice: PropTypes.string,
    }).isRequired,
    itemBody: PropTypes.string.isRequired,
    itemId: PropTypes.string,
    onModalClose: PropTypes.func,
    onModalOpen: PropTypes.func,
    oneQuestionAtATime: PropTypes.bool,
    openImportModal: PropTypes.func,
    overrideEditableForRegrading: PropTypes.bool,
    scoringData: PropTypes.shape({
      value: PropTypes.bool,
    }).isRequired,
    setOneQuestionAtATime: PropTypes.func,
    ...withEditTools.injectedProps,
    showCalculatorOption: PropTypes.bool,
    isSurvey: PropTypes.bool,
  }

  static defaultProps = {
    additionalOptions: void 0,
    calculatorType: 'none',
    changeItemState: void 0,
    enableRichContentEditor: true,
    itemId: void 0,
    onModalClose: void 0,
    onModalOpen: void 0,
    oneQuestionAtATime: false,
    openImportModal: void 0,
    overrideEditableForRegrading: false,
    setOneQuestionAtATime: Function.prototype,
    showCalculatorOption: true,
  }

  stemElement = null

  handleCalculatorTypeChange = (e, value) => {
    this.props.changeItemState({
      calculatorType: value,
    })
  }

  handleSelectionUpdate = (event, newChoice) => {
    this.props.changeItemState({
      scoringData: {
        ...this.props.scoringData,
        value: newChoice === TRUE_VALUE,
      },
    })
  }

  handleStemRef = node => {
    this.stemElement = node
  }

  focusErrors = () => {
    const stemErrors = getOr([], 'itemBody', this.props.errors)

    if (stemErrors.length) {
      this.stemElement.focus()
    }
  }

  renderOptionsDescription() {
    return <ScreenReaderContent>{t('True or false options')}</ScreenReaderContent>
  }

  selectedValue() {
    return this.props.scoringData.value ? TRUE_VALUE : FALSE_VALUE
  }

  render() {
    return (
      <div>
        <QuestionContainer
          disabled={this.props.overrideEditableForRegrading}
          enableRichContentEditor={this.props.enableRichContentEditor}
          itemBody={this.props.itemBody}
          onDescriptionChange={this.props.onDescriptionChange}
          onModalClose={this.props.onModalClose}
          onModalOpen={this.props.onModalOpen}
          openImportModal={this.props.openImportModal}
          stemErrors={this.props.getErrors('itemBody')}
          textareaRef={this.handleStemRef}
        >
          <ChoiceBody
            selectedValue={this.selectedValue()}
            falseChoiceLabel={this.props.interactionData.falseChoice}
            name={`edit_interaction_${this.props.itemId}`}
            onSelectionUpdate={this.handleSelectionUpdate}
            trueChoiceLabel={this.props.interactionData.trueChoice}
            itemBody={this.props.itemBody}
            screenreaderOnlyDescription
            hideChoices={this.props.isSurvey}
          />
        </QuestionContainer>
        <QuestionSettingsContainer additionalOptions={this.props.additionalOptions}>
          {this.props.showCalculatorOption && (
            <QuestionSettingsPanel label={t('Options')} defaultExpanded>
              <FormFieldGroup rowSpacing="small" description={this.renderOptionsDescription()}>
                <CalculatorOptionWithOqaatAlert
                  disabled={this.props.overrideEditableForRegrading}
                  calculatorValue={this.props.calculatorType}
                  onCalculatorTypeChange={this.handleCalculatorTypeChange}
                  oqaatChecked={this.props.oneQuestionAtATime}
                  onOqaatChange={this.props.setOneQuestionAtATime}
                />
              </FormFieldGroup>
            </QuestionSettingsPanel>
          )}
        </QuestionSettingsContainer>
      </div>
    )
  }
}