@instructure/quiz-interactions/src/components/ordering/Take/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import striptags from 'striptags'

import findIndex from 'lodash/findIndex'

import {ItemBodyWrapper} from '@instructure/quiz-rce/components/ItemBodyWrapper/index'

import OrderGroup from '../common/OrderGroup'
import ReorderChoiceButton from '../common/ReorderChoiceButton'
import t from '@instructure/quiz-i18n/format-message'

/**
---
category: Ordering
---
  Ordering Take component

   ```jsx_example
   function Example () {
    const props = {
      itemBody: 'Order these characters from tallest to shortest:',
      interactionData: {
        choices: {
          uuid6: { id: 'uuid6', itemBody: 'Gandalf the Grey or Gandalf the White' },
          uuid5: { id: 'uuid5', itemBody: 'Legolas' },
          uuid4: { id: 'uuid4', itemBody: 'Aragorn' },
          uuid3: { id: 'uuid3', itemBody: 'Gimli' },
          uuid2: { id: 'uuid2', itemBody: 'Frodo' },
          uuid1: { id: 'uuid1', itemBody: 'Gollum' },
        }
      },
      properties: {
        displayAnswersParagraph: true,
        includeLabels: true,
        topLabel: 'Taller',
        bottomLabel: 'Shorter'
      },
      userResponse: {
        value: ['uuid5', 'uuid6', 'uuid4', 'uuid3', 'uuid2']
      }
    }

    return (
      <TakeStateProvider>
        <DndProvider backend={HTML5Backend}>
          <OrderingTake {...props} />
        </DndProvider>
      </TakeStateProvider>
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <Example />
  </SettingsSwitcher>
  ```
**/
export default class OrderingTake extends Component {
  static propTypes = {
    handleResponseUpdate: PropTypes.func.isRequired,
    interactionData: PropTypes.shape({
      choices: PropTypes.objectOf(
        PropTypes.shape({
          id: PropTypes.string.isRequired,
          itemBody: PropTypes.string.isRequired,
        }),
      ).isRequired,
    }).isRequired,
    itemBody: PropTypes.string.isRequired,
    properties: PropTypes.shape({
      displayAnswersParagraph: PropTypes.bool,
      includeLabels: PropTypes.bool,
      topLabel: PropTypes.string,
      bottomLabel: PropTypes.string,
    }).isRequired,
    userResponse: PropTypes.shape({
      value: PropTypes.arrayOf(PropTypes.string).isRequired,
    }).isRequired,
  }

  handleMoveChoice = (currI, targetI) => {
    // Create a new array to preserve immutability
    const choices = this.props.userResponse.value.slice(0)
    // remove currI value from choices and insert it at the targetI
    choices.splice(targetI, 0, choices.splice(currI, 1)[0])

    this.props.handleResponseUpdate(choices)
  }

  handleMoveChoiceUp = choiceId => {
    const position = findIndex(this.props.userResponse.value, i => i === choiceId)
    this.handleMoveChoice(position, position - 1)
  }

  handleMoveChoiceDown = choiceId => {
    const position = findIndex(this.props.userResponse.value, i => i === choiceId)
    this.handleMoveChoice(position, position + 1)
  }

  renderActionsContent = (choiceId, isFinalChoice, isFirstChoice, choicePosition) => (
    <ReorderChoiceButton
      buttonSize="small"
      id={choiceId.split('_')[0]}
      isFinalChoice={isFinalChoice}
      isFirstChoice={isFirstChoice}
      onMoveChoiceUp={this.handleMoveChoiceUp}
      onMoveChoiceDown={this.handleMoveChoiceDown}
      screenReaderText={t('Position {position, number}. Reorder Choice: {choice}', {
        position: choicePosition,
        choice: striptags(this.props.interactionData.choices[choiceId.split('_')[0]].itemBody),
      })}
    />
  )

  render() {
    const {userResponse, interactionData, properties} = this.props

    return (
      <ItemBodyWrapper itemBody={this.props.itemBody}>
        <OrderGroup
          actionsContent={this.renderActionsContent}
          bottomLabel={properties.bottomLabel}
          choiceOrder={userResponse.value}
          choices={interactionData.choices}
          displayAnswersParagraph={properties.displayAnswersParagraph}
          includeLabels={properties.includeLabels}
          onMoveChoice={this.handleMoveChoice}
          topLabel={properties.topLabel}
        />
      </ItemBodyWrapper>
    )
  }
}