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");

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 _find2 = _interopRequireDefault(require("lodash/fp/find"));

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

var _uiA11y = require("@instructure/ui-a11y");

var _uiForms = require("@instructure/ui-forms");

var _uiElements = require("@instructure/ui-elements");

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

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

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

var _dec, _class, _class2, _temp;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var styles = {
  componentId: 'fUozE',
  template: function template(theme) {
    return "\n\n.fUozE_eedU{padding-top:".concat(theme.itemsListPadding || 'inherit', "}\n\n.fUozE_ewEu{align-items:center;display:flex;position:relative}\n\n.fUozE_ewEu>*{flex:0 1 100%;padding:").concat(theme.itemPadding || 'inherit', "}\n\n.fUozE_cSuF{background-color:").concat(theme.questionColor || 'inherit', ";border:").concat(theme.questionBorder || 'inherit', " solid ").concat(theme.questionBorderColor || 'inherit', "}\n\n.fUozE_fxMt{min-width:0;padding-left:0}\n\n.fUozE_fUtg{border-bottom:").concat(theme.dividerBorder || 'inherit', " solid ").concat(theme.dividerBorderColor || 'inherit', ";flex-shrink:1.3;padding:0}");
  },
  'itemsList': 'fUozE_eedU',
  'item': 'fUozE_ewEu',
  'question': 'fUozE_cSuF',
  'answer': 'fUozE_fxMt',
  'divider': 'fUozE_fUtg'
};
var Match = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Match, _Component);

  function Match() {
    var _getPrototypeOf2;

    var _this;

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

    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)(Match)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleChange = function (questionId, option) {
      _this.props.handleResponseUpdate(_objectSpread({}, _this.props.selectedAnswers.value, (0, _defineProperty2.default)({}, questionId, option.value)));
    };

    return _this;
  }

  (0, _createClass2.default)(Match, [{
    key: "renderQuestion",
    value: function renderQuestion(questionId, index) {
      var _this2 = this;

      var responseBody = this.props.selectedAnswers.value[questionId];

      var _find = (0, _find2.default)({
        id: questionId
      }, this.props.interactionData.questions),
          itemBody = _find.itemBody;

      var label = (0, _formatMessage.default)('Prompt {index, number} Answer', {
        index: index
      });
      return _react.default.createElement("div", {
        className: styles.item,
        key: questionId
      }, _react.default.createElement("div", {
        className: styles.question
      }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Prompt {index, number}', {
        index: index
      })), _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, itemBody)), _react.default.createElement("div", {
        className: styles.divider
      }), _react.default.createElement("div", {
        className: styles.answer
      }, _react.default.createElement(_uiForms.Select, {
        editable: true,
        readOnly: this.props.readOnly,
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, label),
        optionsMaxWidth: "30rem",
        selectedOption: responseBody,
        onChange: function onChange(e, option) {
          return _this2.handleChange(questionId, option);
        },
        constrain: "parent"
      }, this.props.interactionData.answers.map(function (answer) {
        return _react.default.createElement("option", {
          key: answer,
          value: answer
        }, answer);
      }))));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement("div", {
        className: styles.itemsList
      }, this.props.interactionData.questions.map(function (_ref, index) {
        var id = _ref.id;
        return _this3.renderQuestion(id, index + 1);
      })));
    }
  }]);
  Match.displayName = "Match";
  return Match;
}(_react.Component), _class2.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
}, _class2.defaultProps = {
  handleResponseUpdate: void 0,
  readOnly: false
}, _temp)) || _class);
exports.default = Match;