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

A React UI component Library for quiz interaction types.

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

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

import OrderGroup from '../common/OrderGroup'

/**
---
category: Ordering
---
  Ordering Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <OrderingShow
      itemBody="Order these characters from tallest to shortest:"
      interactionData={{
        choices: {
          uuid6: { id: 'uuid6', itemBody: 'Gandalf' },
          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: false,
        includeLabels: true,
        topLabel: 'Taller',
        bottomLabel: 'Shorter'
      }}
      scoringData={{
        value: ['uuid6','uuid5','uuid4','uuid3','uuid2','uuid1']
      }}
    />
  </SettingsSwitcher>
  ```
**/
export default class OrderingShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    interactionData: PropTypes.shape({
      choices: PropTypes.objectOf(
        PropTypes.shape({
          id: PropTypes.string.isRequired,
          itemBody: PropTypes.string.isRequired,
        }),
      ).isRequired,
    }).isRequired,
    scoringData: PropTypes.shape({
      value: PropTypes.arrayOf(PropTypes.string).isRequired,
    }).isRequired,
    properties: PropTypes.shape({
      displayAnswersParagraph: PropTypes.bool,
      includeLabels: PropTypes.bool,
      topLabel: PropTypes.string,
      bottomLabel: PropTypes.string,
    }).isRequired,
  }

  render() {
    return (
      <ItemBodyWrapper itemBody={this.props.itemBody}>
        <OrderGroup
          bottomLabel={this.props.properties.bottomLabel}
          choiceOrder={this.props.scoringData.value}
          choices={this.props.interactionData.choices}
          displayAnswersParagraph={this.props.properties.displayAnswersParagraph}
          includeLabels={this.props.properties.includeLabels}
          topLabel={this.props.properties.topLabel}
          readOnly
        />
      </ItemBodyWrapper>
    )
  }
}