quiz-interactions/lib/components/hotspot/common/TargetContainer/index.js

A React UI component Library for quiz interaction types.

"use strict";

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

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

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

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

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 _reactDom = _interopRequireDefault(require("react-dom"));

var _minBy = _interopRequireDefault(require("lodash/fp/minBy"));

var _uiThemeable = require("@instructure/ui-themeable");

var _classnames2 = _interopRequireDefault(require("classnames"));

var _theme = _interopRequireDefault(require("./theme"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'kQGeI',
  template: function template(theme) {
    return "\n\n.kQGeI_bDdm{align-items:center;display:flex;max-width:100%}\n\n.kQGeI_dzSa{justify-content:center}\n\n.kQGeI_gbbx{justify-content:left}\n\n.kQGeI_eFii{margin-top:".concat(theme.targetContainerMainMargin || 'inherit', ";max-width:calc(100% - 0.01px);position:relative}\n\n.kQGeI_EtBB{max-height:50rem;max-width:100%}\n\n.kQGeI_eVMz{align-items:center;display:inline-block;flex:1;max-width:100%}\n\n.kQGeI_bdRz{cursor:pointer;height:100%;position:relative;width:100%}");
  },
  'targetContainerWrapper': 'kQGeI_bDdm',
  'centerJustify': 'kQGeI_dzSa',
  'leftJustify': 'kQGeI_gbbx',
  'targetContainerMain': 'kQGeI_eFii',
  'image': 'kQGeI_EtBB',
  'mainContainerContentWrapper': 'kQGeI_eVMz',
  'mainContainerContent': 'kQGeI_bdRz'
};
var TargetContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(TargetContainer, _Component);

  function TargetContainer() {
    var _getPrototypeOf2;

    var _this;

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

    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)(TargetContainer)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      imageWidth: 0,
      imageHeight: 0
    };
    _this.canvas = null;
    _this.image = null;

    _this.convertCoordinate = function (item) {
      return {
        x: item.x * _this.state.imageWidth,
        y: item.y * _this.state.imageHeight
      };
    };

    _this.handleCanvasRef = function (node) {
      _this.canvas = node;
    };

    _this.handleImageRef = function (node) {
      _this.image = node;
    };

    _this.updateImageDimensions = function () {
      // ref element (this.image) is not enough to get the updated image dimensions
      var rectObject = _reactDom.default.findDOMNode(_this.image).getBoundingClientRect();

      _this.setState({
        imageWidth: rectObject.width,
        imageHeight: rectObject.height
      });
    };

    _this.handleImageLoad = function (event) {
      _this.setState({
        imageWidth: event.target.offsetWidth,
        imageHeight: event.target.offsetHeight
      });
    };

    return _this;
  }

  (0, _createClass2.default)(TargetContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.updateImageDimensions);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.updateImageDimensions);
    } // ===========
    //   HELPERS
    // ===========

  }, {
    key: "currentCoordinates",
    value: function currentCoordinates() {
      if (this.props.coordinates.length > 0) {
        return this.props.coordinates.map(this.convertCoordinate);
      }
    }
  }, {
    key: "validCoordinates",
    value: function validCoordinates(coordinates) {
      if (!coordinates) return false;
      var x = coordinates.x,
          y = coordinates.y;
      return x != null && y != null; // TODO: bounds checking?
    } // ===========
    //   HANDLERS
    // ===========

  }, {
    key: "renderCanvas",
    // ===========
    //   RENDER
    // ===========
    value: function renderCanvas() {
      var DrawingType = this.props.drawingType;
      return _react.default.createElement(DrawingType, {
        coordinates: this.currentCoordinates() || [],
        readOnly: this.props.readOnly,
        height: this.state.imageHeight,
        handleSetCoordinates: this.props.handleSetCoordinates,
        ref: this.handleCanvasRef,
        width: this.state.imageWidth
      });
    }
  }, {
    key: "renderImage",
    value: function renderImage() {
      return _react.default.createElement("img", {
        alt: (0, _formatMessage.default)('Target Image'),
        className: styles.image,
        onLoad: this.handleImageLoad,
        ref: this.handleImageRef,
        src: this.props.url
      });
    }
  }, {
    key: "renderFeedbackComponents",
    value: function renderFeedbackComponents() {
      if (!this.props.results) {
        return;
      }

      var feedbackCoordinates = this.currentCoordinates();
      var flipResponse = false;
      var responseCoordinates = null;

      if (this.validCoordinates(this.props.userResponseCoordinate)) {
        responseCoordinates = this.convertCoordinate(this.props.userResponseCoordinate);

        if (feedbackCoordinates) {
          var min = (0, _minBy.default)('y', feedbackCoordinates);
          flipResponse = min && responseCoordinates.y > min.y;
        } else {
          flipResponse = true;
        }
      }

      return _react.default.createElement("div", null, this.props.renderUserResponseFeedback(responseCoordinates, flipResponse), this.props.renderScoringDataFeedback(feedbackCoordinates, !flipResponse));
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames;

      var wrapperClasses = (0, _classnames2.default)(styles.targetContainerWrapper, (_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.leftJustify, this.props.justifyContent === 'left'), (0, _defineProperty2.default)(_classnames, styles.centerJustify, this.props.justifyContent === 'center'), _classnames));
      return _react.default.createElement("div", {
        className: wrapperClasses
      }, _react.default.createElement("div", {
        className: styles.targetContainerMain
      }, _react.default.createElement("div", {
        className: styles.mainContainerContentWrapper
      }, _react.default.createElement("div", {
        className: styles.mainContainerContent
      }, this.renderImage(), this.renderCanvas())), this.renderFeedbackComponents()));
    }
  }]);
  TargetContainer.displayName = "TargetContainer";
  return TargetContainer;
}(_react.Component), _class2.propTypes = {
  coordinates: _propTypes.default.array,
  readOnly: _propTypes.default.bool,
  drawingType: _propTypes.default.func,
  handleSetCoordinates: _propTypes.default.func,
  justifyContent: _propTypes.default.oneOf(['left', 'center']),
  renderScoringDataFeedback: _propTypes.default.func,
  renderUserResponseFeedback: _propTypes.default.func,
  results: _propTypes.default.bool,
  url: _propTypes.default.string.isRequired,
  userResponseCoordinate: _propTypes.default.object
}, _class2.defaultProps = {
  coordinates: [],
  justifyContent: 'center',
  readOnly: false,
  results: false,
  drawingType: void 0,
  handleSetCoordinates: void 0,
  renderScoringDataFeedback: void 0,
  renderUserResponseFeedback: void 0,
  userResponseCoordinate: void 0
}, _temp)) || _class);
exports.default = TargetContainer;