@instructure/quiz-interactions/src/components/fill_blank/drag_components/BlankAnswer/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 {IconButton} from '@instructure/ui-buttons'
import {IconXLine} from '@instructure/ui-icons'

import DraggableBlankChoice from '../DraggableBlankChoice'

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 BlankAnswer extends Component {
  static displayName = 'BlankAnswer'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    choiceId: PropTypes.string.isRequired,
    itemBody: PropTypes.string.isRequired,
    onRemoveAnswer: PropTypes.func.isRequired,
    readOnly: PropTypes.bool,
    styles: PropTypes.object,
  }

  static defaultProps = {
    readOnly: false,
  }

  button = null

  focus() {
    this.button.focus()
  }

  handleClick = (event, ...args) => {
    this.props.onRemoveAnswer(event, ...args)
  }

  handleRef = node => {
    this.button = node
  }

  render() {
    const {itemBody} = this.props

    return (
      <div tabIndex="-1" css={this.props.styles.answerOptionWrapper}>
        <DraggableBlankChoice
          key={this.props.choiceId}
          id={this.props.choiceId}
          itemBody={itemBody}
          canDrag={false}
        />
        <IconButton
          ref={this.handleRef}
          size="small"
          renderIcon={IconXLine}
          withBackground={false}
          withBorder={false}
          onClick={this.handleClick}
          readOnly={this.props.readOnly}
          screenReaderLabel={t('Remove Choice {itemBody}', {itemBody})}
        />
      </div>
    )
  }
}