@instructure/quiz-interactions/src/components/fill_blank/drag_components/Wordbank/index.js

A React UI component Library for quiz interaction types.

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

import {jsx} from '@instructure/emotion'

import DraggableBlankChoice from '../DraggableBlankChoice'

import generateStyle from './styles'
import generateComponentTheme from './theme'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'

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

  static propTypes = {
    blanks: PropTypes.array.isRequired,
    returnChoiceToWordbank: PropTypes.func,
    wordBankChoices: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string,
        itemBody: PropTypes.string,
      }),
    ),
    makeStyles: PropTypes.func,
    styles: PropTypes.object,
  }

  static defaultProps = {
    response: void 0,
    returnChoiceToWordbank: void 0,
    wordBankChoices: void 0,
  }

  componentDidMount() {
    this.props.makeStyles()
  }

  componentDidUpdate() {
    this.props.makeStyles()
  }

  // =============
  //   RENDERING
  // =============

  renderChoice(choice, printOnly = false) {
    return (
      <DraggableBlankChoice
        key={choice.id}
        id={choice.id}
        itemBody={choice.itemBody}
        returnChoiceToWordbank={partial(this.props.returnChoiceToWordbank, null)}
        printOnly={printOnly}
      />
    )
  }

  renderWordbankChoices() {
    return this.props.wordBankChoices.map(choice => {
      return this.renderChoice(choice)
    })
  }

  renderDropdownChoices() {
    const dropdownBlanks = this.props.blanks.filter(blank => blank.answerType === 'dropdown')
    return dropdownBlanks.map(blank => blank.choices.map(choice => this.renderChoice(choice, true)))
  }

  render() {
    // Screenreaders don't even need to know about the wordBank
    return (
      <div className="fs-mask" css={this.props.styles.wordbankWrapper} aria-hidden>
        {this.renderWordbankChoices()}
        {this.renderDropdownChoices()}
      </div>
    )
  }
}