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

A React UI component Library for quiz interaction types.

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

import {Text} from '@instructure/ui-text'
import {View} from '@instructure/ui-view'
import {Flex} from '@instructure/quiz-common/components/Flex/index'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
import {jsx} from '@instructure/emotion'

import ChoiceInput from '../../../common/edit/components/ChoiceInput'
import Footer from '../../../common/edit/components/Footer'

import generateStyle from './styles'
import generateComponentTheme from './theme'
import t from '@instructure/quiz-i18n/format-message'
import RemoveChoiceButton from '../../../common/edit/components/RemoveChoiceButton'

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

  static propTypes = {
    createNewDistractor: PropTypes.func.isRequired,
    disabled: PropTypes.bool,
    distractorErrors: PropTypes.func.isRequired,
    distractors: PropTypes.arrayOf(PropTypes.string).isRequired,
    editDistractor: PropTypes.func.isRequired,
    blurDistractor: PropTypes.func.isRequired,
    removeDistractor: PropTypes.func.isRequired,
    notifyScreenreader: PropTypes.func,
    styles: PropTypes.object,
  }

  static defaultProps = {
    notifyScreenreader: () => {},
    disabled: false,
  }

  distractorRefs = {}

  renderDistractor(distractorText, i, focusOnMount) {
    const {distractorErrors} = this.props
    const index = i.toString()

    return (
      <Flex key={i} alignItems="start" data-automation="sdk-matching-distractor">
        <Flex.Item shouldShrink size="24rem">
          <ChoiceInput
            key={index}
            id={index}
            // disabledFields={[]}
            itemBody={distractorText}
            errors={distractorErrors(i)}
            onInputChange={this.props.editDistractor}
            onInputBlur={this.props.blurDistractor}
            ref={node => {
              this.distractorRefs[index] = node
            }}
            renderLabel={t('Distractor')}
            isRequired={true}
            focusOnMount={focusOnMount}
            shouldRenderRemoveChoice={false}
            noRCE
            notifyScreenreader={this.props.notifyScreenreader}
            placeholder={t('Type a distractor')}
            automationData="sdk-matching-distractor-entry"
          />
        </Flex.Item>
        {!this.props.disabled && (
          <View as="div" margin="xx-large 0 0 0" themeOverride={{marginXxLarge: '30px'}}>
            <RemoveChoiceButton
              screenReaderText={t('Remove Distractor: {distractor}', {distractor: distractorText})}
              onRemoveChoice={() => this.props.removeDistractor(index)}
              choiceId={index}
            />
          </View>
        )}
      </Flex>
    )
  }

  renderDistractors() {
    const {distractors} = this.props

    return (
      <Flex direction="column" gap="small" padding="x-small 0 0 0">
        <Flex.Item data-testid="additional-distractor-text">
          <Text color="primary">{t('Additional Distractors')}</Text>
        </Flex.Item>
        <Flex direction="column" gap="small">
          {distractors.map((distractorText, i, source) => {
            const focusOnMount = i + 1 === source.length && !distractorText.itemBody
            return this.renderDistractor(distractorText, i, focusOnMount)
          })}
        </Flex>
        {!this.props.disabled && (
          <Footer
            onCreateChoice={this.props.createNewDistractor}
            buttonText={t('Distractor')}
            screenReaderText={t('Add Distractor')}
            notifyScreenreader={this.props.notifyScreenreader}
            automationData="sdk-add-matching-distractor-button"
          />
        )}
      </Flex>
    )
  }

  render() {
    this.distractorRefs = {}

    return this.renderDistractors()
  }
}