quiz-interactions/lib/components/hotspot/Take/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 _getPrototypeOf3 = _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 _Target = _interopRequireDefault(require("./Target"));

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

  HotSpot Take component

   ```jsx_example
   function Example (props) {
    const exampleProps = {
      itemBody: 'Which of these players is David Ferrer',
      interactionData: {
        imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
      },
      userResponse: {
        value: {
          x: 0.3,
          y: 0.3
        }
      }
    }

    return (
      <HotSpotTake {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
var HotSpotTake =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(HotSpotTake, _Component);

  function HotSpotTake() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, HotSpotTake);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HotSpotTake)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleSetCoordinates = function (coordinatesArray) {
      var x = coordinatesArray[0].x / _this.targetContainer.state.imageWidth;
      var y = coordinatesArray[0].y / _this.targetContainer.state.imageHeight;

      _this.props.handleResponseUpdate({
        x: x,
        y: y
      });
    };

    _this.targetContainerRef = function (node) {
      _this.targetContainer = node;
    };

    return _this;
  }

  (0, _createClass2.default)(HotSpotTake, [{
    key: "render",
    // ===========
    //   RENDER
    // ===========
    value: function render() {
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_TargetContainer.default, {
        coordinates: [this.props.userResponse.value],
        drawingType: _Target.default,
        handleSetCoordinates: this.handleSetCoordinates,
        ref: this.targetContainerRef,
        url: this.props.interactionData.imageUrl
      }));
    }
  }]);
  HotSpotTake.displayName = "HotSpotTake";
  return HotSpotTake;
}(_react.Component);

exports.default = HotSpotTake;
HotSpotTake.propTypes = {
  handleResponseUpdate: _propTypes.default.func.isRequired,
  interactionData: _propTypes.default.shape({
    imageUrl: _propTypes.default.string.isRequired
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  userResponse: _propTypes.default.shape({
    value: _propTypes.default.shape({
      x: _propTypes.default.number.isRequired,
      y: _propTypes.default.number.isRequired
    }).isRequired
  }).isRequired
};