quiz-interactions/lib/components/hotspot/Show/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _quizRce = require("@instructure/quiz-rce");

var _TargetContainer = _interopRequireDefault(require("../common/TargetContainer"));

var _Square = _interopRequireDefault(require("../common/Square"));

var _Oval = _interopRequireDefault(require("../common/Oval"));

var _Polygon = _interopRequireDefault(require("../common/Polygon"));

var getShape = function getShape(type) {
  switch (type) {
    case 'square':
      return _Square.default;

    case 'oval':
      return _Oval.default;

    case 'polygon':
      return _Polygon.default;

    default:
      return _Square.default;
  }
};
/**
 ---
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>
  ```
**/


var HotSpotShow =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(HotSpotShow, _Component);

  function HotSpotShow() {
    (0, _classCallCheck2.default)(this, HotSpotShow);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HotSpotShow).apply(this, arguments));
  }

  (0, _createClass2.default)(HotSpotShow, [{
    key: "render",
    value: function render() {
      var _this$props$scoringDa = this.props.scoringData.value,
          coordinates = _this$props$scoringDa.coordinates,
          type = _this$props$scoringDa.type;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_TargetContainer.default, {
        coordinates: coordinates,
        drawingType: getShape(type),
        url: this.props.interactionData.imageUrl,
        readOnly: true
      }));
    }
  }]);
  HotSpotShow.displayName = "HotSpotShow";
  return HotSpotShow;
}(_react.Component);

exports.default = HotSpotShow;
HotSpotShow.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  interactionData: _propTypes.default.shape({
    imageUrl: _propTypes.default.string.isRequired
  }).isRequired,
  scoringData: _propTypes.default.shape({
    value: _propTypes.default.shape({
      type: _propTypes.default.oneOf(['square', 'oval', 'polygon']),
      coordinates: _propTypes.default.arrayOf(_propTypes.default.shape({
        x: _propTypes.default.number.isRequired,
        y: _propTypes.default.number.isRequired
      })).isRequired
    }).isRequired
  }).isRequired
};