@instructure/quiz-interactions/src/components/hotspot/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 TargetContainer from '../common/TargetContainer'

import Square from '../common/Square'
import Oval from '../common/Oval'
import Polygon from '../common/Polygon'

const getShape = type => {
  switch (type) {
    case 'square':
      return Square
    case 'oval':
      return Oval
    case 'polygon':
      return Polygon

    default:
      return Square
  }
}

/**
 ---
category: HotSpot
---

  HotSpot Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <HotSpotShow
      itemBody="Which of these players is David Ferrer"
      interactionData={{
        imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
      }}
      scoringData={{
        value: {
          type: 'oval',
          coordinates: [
            { x: 0.6, y: 0.13 },
            { x: 0.7, y: 0.2 }
          ]
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/

export default class HotSpotShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    interactionData: PropTypes.shape({
      imageUrl: PropTypes.string.isRequired,
    }).isRequired,
    scoringData: PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.shape({
          type: PropTypes.oneOf(['square', 'oval', 'polygon']),
          coordinates: PropTypes.arrayOf(
            PropTypes.shape({
              x: PropTypes.number.isRequired,
              y: PropTypes.number.isRequired,
            }),
          ).isRequired,
        }),
        PropTypes.arrayOf(
          PropTypes.shape({
            type: PropTypes.oneOf(['square', 'oval', 'polygon']),
            coordinates: PropTypes.arrayOf(
              PropTypes.shape({
                x: PropTypes.number.isRequired,
                y: PropTypes.number.isRequired,
              }),
            ).isRequired,
          }),
        ),
      ]).isRequired,
    }).isRequired,
  }

  prepareHotspots = () => {
    const {value} = this.props.scoringData
    if (Array.isArray(value)) {
      return value.map(hotspot => ({
        coordinates: hotspot.coordinates,
        drawingType: getShape(hotspot.type),
      }))
    }
    return [{coordinates: value.coordinates, drawingType: getShape(value.type)}]
  }

  render() {
    const hotspots = this.prepareHotspots()

    return (
      <ItemBodyWrapper itemBody={this.props.itemBody}>
        <TargetContainer hotspots={hotspots} url={this.props.interactionData.imageUrl} readOnly />
      </ItemBodyWrapper>
    )
  }
}