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

A React UI component Library for quiz interaction types.

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

import {jsx} from '@instructure/emotion'

import {ItemBodyWrapper} from '@instructure/quiz-rce/components/ItemBodyWrapper/index'

import ChoiceBody from '../components/ChoiceBody'

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

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

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

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
export default class TrueFalseTake extends Component {
  static propTypes = {
    handleResponseUpdate: PropTypes.func.isRequired,
    itemBody: PropTypes.string.isRequired,
    interactionData: PropTypes.shape({
      trueChoice: PropTypes.string,
      falseChoice: PropTypes.string,
    }).isRequired,
    userResponse: PropTypes.shape({
      value: PropTypes.bool,
    }),
    itemId: PropTypes.string,
    styles: PropTypes.object,
  }

  static defaultProps = {
    userResponse: void 0,
    itemId: void 0,
  }

  chosenVal() {
    const {userResponse} = this.props

    if (userResponse && userResponse.value !== void 0) {
      return userResponse.value ? 'trueChoice' : 'falseChoice'
    }
  }

  handleSelectionUpdate = (event, response) => {
    this.props.handleResponseUpdate(response === 'trueChoice')
  }

  render() {
    return (
      <ItemBodyWrapper>
        <div className="fs-mask">
          <ChoiceBody
            selectedValue={this.chosenVal()}
            falseChoiceLabel={this.props.interactionData.falseChoice}
            name={`interaction_${this.props.itemId}`}
            onSelectionUpdate={this.handleSelectionUpdate}
            trueChoiceLabel={this.props.interactionData.trueChoice}
            itemBody={this.props.itemBody}
          />
        </div>
      </ItemBodyWrapper>
    )
  }
}