@instructure/quiz-interactions/src/components/categorization/common/ChoicesList/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 {Text} from '@instructure/ui-text'

import DropTargetContainer from '../DropTargetContainer'
import Pill from '../Pill'
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 ChoicesList extends Component {
  static displayName = 'ChoicesList'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    actionsContent: PropTypes.func,
    distractors: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        itemBody: PropTypes.string.isRequired,
      }),
    ).isRequired,
    isDraggable: PropTypes.bool,
    onDrop: PropTypes.func,
    takeId: PropTypes.string,
    styles: PropTypes.object,
  }

  static defaultProps = {
    actionsContent: void 0,
    isDraggable: void 0,
    onDrop: void 0,
    takeId: '',
  }

  renderChoices = () => (
    <div className="choicesBackground" css={this.props.styles.choicesBackground}>
      {this.props.distractors.map(item => {
        const id = `${item.id}_${this.props.takeId}`
        return (
          <Pill
            key={item.id}
            id={id}
            itemBody={item.itemBody}
            isDraggable={this.props.isDraggable}
            actionsContent={this.props.actionsContent}
          />
        )
      })}
    </div>
  )

  renderChoicesContainer() {
    if (!this.props.distractors.length) {
      return (
        <div className="fs-mask" css={this.props.styles.emptyContainer}>
          <Text color="secondary">{t('Drag Uncategorized Answers Here')}</Text>
        </div>
      )
    }

    if (this.props.isDraggable) {
      return (
        <DropTargetContainer
          onDrop={this.props.onDrop}
          className="fs-mask"
          css={this.props.styles.choicesContainer}
        >
          {this.renderChoices()}
        </DropTargetContainer>
      )
    }

    return (
      <div className="fs-mask" css={this.props.styles.choicesContainer}>
        {this.renderChoices()}
      </div>
    )
  }

  render() {
    return (
      <div css={this.props.styles.mainContainer}>
        <Text color="primary">{t('Possible answers')}</Text>
        {this.renderChoicesContainer()}
      </div>
    )
  }
}