@instructure/quiz-interactions/src/components/matching/common/Match.js

A React UI component Library for quiz interaction types.

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

import {jsx} from '@instructure/emotion'
import {ScreenReaderContent} from '@instructure/ui-a11y-content'
import {Text} from '@instructure/ui-text'
import MatchSelect from './MatchSelect'

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

import ChoicesList from '../../categorization/common/ChoicesList'
import generateStyle from './styles'
import generateComponentTheme from './theme'
import t from '@instructure/quiz-i18n/format-message'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'

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

  static propTypes = {
    handleResponseUpdate: PropTypes.func,
    interactionData: PropTypes.shape({
      questions: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.string,
          itemBody: PropTypes.string,
        }),
      ),
      answers: PropTypes.arrayOf(PropTypes.string),
    }).isRequired,
    itemBody: PropTypes.string.isRequired,
    selectedAnswers: PropTypes.shape({
      value: PropTypes.objectOf(PropTypes.string),
    }).isRequired,
    readOnly: PropTypes.bool,
    styles: PropTypes.object,
  }

  static defaultProps = {
    handleResponseUpdate: void 0,
    readOnly: false,
  }

  renderQuestion(questionId, index) {
    const {itemBody} = find({id: questionId}, this.props.interactionData.questions)
    return (
      <div css={this.props.styles.item} key={questionId}>
        <div css={this.props.styles.question} data-testid="question">
          <ScreenReaderContent>{t('Prompt {index, number}', {index})}</ScreenReaderContent>
          <Text color="primary">{itemBody}</Text>
        </div>
        <div css={this.props.styles.divider} />
        <div css={this.props.styles.answer} className="fs-mask">
          <MatchSelect
            handleResponseUpdate={this.props.handleResponseUpdate}
            selectedAnswers={this.props.selectedAnswers}
            interaction={this.props.readOnly ? 'readonly' : 'enabled'}
            options={this.props.interactionData.answers}
            questionId={questionId}
            renderLabel={
              <ScreenReaderContent>
                {t('Answer for prompt {index, number} {prompt}', {index, prompt: itemBody})}
              </ScreenReaderContent>
            }
          />
        </div>
      </div>
    )
  }

  render() {
    const distractors = this.props.interactionData.answers.map(answer => ({
      id: answer,
      itemBody: answer,
    }))
    return (
      <ItemBodyWrapper itemBody={this.props.itemBody}>
        <div css={this.props.styles.itemsList}>
          {this.props.interactionData.questions.map(({id}, index) =>
            this.renderQuestion(id, index + 1),
          )}
        </div>
        <div css={this.props.styles.choicesList}>
          <ChoicesList distractors={distractors} />
        </div>
      </ItemBodyWrapper>
    )
  }
}