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

A React UI component Library for quiz interaction types.

/** @jsx jsx */
import {useEffect, useRef} from 'react'
import PropTypes from 'prop-types'
import {useDrag} from 'react-dnd'

import {jsx} from '@instructure/emotion'
import {IconDragHandleLine} from '@instructure/ui-icons'
import {Text} from '@instructure/ui-text'

import {processNewMathInElem} from '@instructure/quiz-rce/components/RichContentRenderer/mathRenderer'

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

function DraggableBlankChoice(props) {
  const {canDrag, id, itemBody, returnChoiceToWordbank, makeStyles, styles} = props

  const choiceRef = useRef(null)

  const [, drag] = useDrag(
    () => ({
      type: 'fitb',
      item: {id, itemBody},
      canDrag,
      end: (draggedItem, monitor) => {
        if (!monitor.didDrop() && returnChoiceToWordbank) {
          returnChoiceToWordbank(draggedItem.id)
        }
      },
    }),
    [id, itemBody, canDrag, returnChoiceToWordbank],
  )

  useEffect(() => {
    makeStyles()
    processNewMathInElem(choiceRef.current)
  })

  return (
    <div ref={drag}>
      <div css={styles.choice} ref={choiceRef}>
        {canDrag && <IconDragHandleLine />}
        <Text color="primary">{itemBody}</Text>
      </div>
    </div>
  )
}

DraggableBlankChoice.displayName = 'DraggableBlankChoice'
DraggableBlankChoice.componentId = `Quizzes${DraggableBlankChoice.displayName}`

DraggableBlankChoice.propTypes = {
  id: PropTypes.string,
  itemBody: PropTypes.string,
  handleDrop: PropTypes.func,
  returnChoiceToWordbank: PropTypes.func,
  printOnly: PropTypes.bool,
  canDrag: PropTypes.bool,
  makeStyles: PropTypes.func,
  styles: PropTypes.object,
}

DraggableBlankChoice.defaultProps = {
  id: undefined,
  itemBody: undefined,
  handleDrop: undefined,
  returnChoiceToWordbank: undefined,
  printOnly: false,
  canDrag: true,
}

export default withStyleOverrides(generateStyle, generateComponentTheme)(DraggableBlankChoice)