@instructure/quiz-interactions/lib/components/matching/common/Match.js

A React UI component Library for quiz interaction types.

"use strict";

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _find2 = _interopRequireDefault(require("lodash/fp/find"));
var _emotion = require("@instructure/emotion");
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _uiText = require("@instructure/ui-text");
var _MatchSelect = _interopRequireDefault(require("./MatchSelect"));
var _quizRce = require("@instructure/quiz-rce");
var _ChoicesList = _interopRequireDefault(require("../../categorization/common/ChoicesList"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _Match;
/** @jsx jsx */
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = (0, _getPrototypeOf2["default"])(derived);
  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var Match = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Match = /*#__PURE__*/function (_Component) {
  function Match() {
    (0, _classCallCheck2["default"])(this, Match);
    return _callSuper(this, Match, arguments);
  }
  (0, _inherits2["default"])(Match, _Component);
  return (0, _createClass2["default"])(Match, [{
    key: "renderQuestion",
    value: function renderQuestion(questionId, index) {
      var _find = (0, _find2["default"])({
          id: questionId
        }, this.props.interactionData.questions),
        itemBody = _find.itemBody;
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.item,
        key: questionId
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.question,
        "data-testid": "question"
      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Prompt {index, number}', {
        index: index
      })), (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, itemBody)), (0, _emotion.jsx)("div", {
        css: this.props.styles.divider
      }), (0, _emotion.jsx)("div", {
        css: this.props.styles.answer,
        className: "fs-mask"
      }, (0, _emotion.jsx)(_MatchSelect["default"], {
        handleResponseUpdate: this.props.handleResponseUpdate,
        selectedAnswers: this.props.selectedAnswers,
        interaction: this.props.readOnly ? 'readonly' : 'enabled',
        options: this.props.interactionData.answers,
        questionId: questionId,
        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Answer for prompt {index, number} {prompt}', {
          index: index,
          prompt: itemBody
        }))
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var distractors = this.props.interactionData.answers.map(function (answer) {
        return {
          id: answer,
          itemBody: answer
        };
      });
      return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.itemsList
      }, this.props.interactionData.questions.map(function (_ref, index) {
        var id = _ref.id;
        return _this2.renderQuestion(id, index + 1);
      })), (0, _emotion.jsx)("div", {
        css: this.props.styles.choicesList
      }, (0, _emotion.jsx)(_ChoicesList["default"], {
        distractors: distractors
      })));
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_Match, "displayName", 'Match'), (0, _defineProperty2["default"])(_Match, "componentId", "Quizzes".concat(_Match.displayName)), (0, _defineProperty2["default"])(_Match, "propTypes", {
  handleResponseUpdate: _propTypes["default"].func,
  interactionData: _propTypes["default"].shape({
    questions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      id: _propTypes["default"].string,
      itemBody: _propTypes["default"].string
    })),
    answers: _propTypes["default"].arrayOf(_propTypes["default"].string)
  }).isRequired,
  itemBody: _propTypes["default"].string.isRequired,
  selectedAnswers: _propTypes["default"].shape({
    value: _propTypes["default"].objectOf(_propTypes["default"].string)
  }).isRequired,
  readOnly: _propTypes["default"].bool,
  styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_Match, "defaultProps", {
  handleResponseUpdate: void 0,
  readOnly: false
}), _Match)) || _class);