@instructure/quiz-interactions/lib/components/matching/Edit/MatchEdit/index.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 _emotion = require("@instructure/emotion");
var _RemoveChoiceButton = _interopRequireDefault(require("../../../common/edit/components/RemoveChoiceButton"));
var _instUIMessages = require("../../../../util/instUIMessages");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _uiView = require("@instructure/ui-view");
var _uiText = require("@instructure/ui-text");
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _quizCommon = require("@instructure/quiz-common");
var _MatchEdit;
/** @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 MatchEdit = exports["default"] = /*#__PURE__*/function (_Component) {
  function MatchEdit() {
    var _this2;
    (0, _classCallCheck2["default"])(this, MatchEdit);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, MatchEdit, [].concat(args));
    // =============
    //   HANDLERS
    // =============
    (0, _defineProperty2["default"])(_this2, "handleAnswerChange", function (event) {
      _this2.props.editAnswer(_this2.props.questionId, event.target.value);
    });
    (0, _defineProperty2["default"])(_this2, "handleAnswerBlur", function (event) {
      _this2.props.editAnswer(_this2.props.questionId, event.target.value.trim());
    });
    (0, _defineProperty2["default"])(_this2, "handleQuestionChange", function (event) {
      _this2.props.editQuestion(_this2.props.questionId, event.target.value);
    });
    (0, _defineProperty2["default"])(_this2, "handleQuestionBlur", function (event) {
      _this2.props.editQuestion(_this2.props.questionId, event.target.value.trim());
    });
    (0, _defineProperty2["default"])(_this2, "handleRemoveMatch", function () {
      _this2.props.removeMatch(_this2.props.questionId);
    });
    // =============
    //   RENDERS
    // =============
    (0, _defineProperty2["default"])(_this2, "renderLabel", function (label, screenReaderContent) {
      return (0, _emotion.jsx)(_uiView.View, null, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, screenReaderContent), (0, _emotion.jsx)(_uiText.Text, {
        "aria-hidden": "true"
      }, label));
    });
    return _this2;
  }
  (0, _inherits2["default"])(MatchEdit, _Component);
  return (0, _createClass2["default"])(MatchEdit, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        hasOnlyOneMatch = _this$props.hasOnlyOneMatch,
        questionBody = _this$props.questionBody,
        answerBody = _this$props.answerBody;
      return (0, _emotion.jsx)(_quizCommon.Flex, {
        direction: "row",
        "data-role": "questionWrapper",
        width: '100%',
        justifyItems: "space-between",
        alignItems: "start"
      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        shouldGrow: true
      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
        renderLabel: this.renderLabel((0, _formatMessage["default"])('Question'), (0, _formatMessage["default"])('Prompt {n, number} question', {
          n: this.props.index + 1
        })),
        isRequired: true,
        defaultValue: questionBody,
        messages: (0, _instUIMessages.toErrors)(this.props.questionErrors),
        onChange: this.handleQuestionChange,
        onBlur: this.handleQuestionBlur,
        "data-automation": "sdk-matching-question"
      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        as: "div",
        shouldGrow: true
      }, (0, _emotion.jsx)("hr", {
        css: {
          marginTop: '48px'
        }
      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        shouldGrow: true
      }, (0, _emotion.jsx)(_quizCommon.Flex, {
        direction: "row",
        width: "100%",
        alignItems: "start",
        gap: "small"
      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        shouldGrow: true
      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
        renderLabel: this.renderLabel((0, _formatMessage["default"])('Answer'), (0, _formatMessage["default"])('Prompt {n, number} answer', {
          n: this.props.index + 1
        })),
        isRequired: true,
        defaultValue: answerBody,
        messages: (0, _instUIMessages.toErrors)(this.props.answerErrors),
        onChange: this.handleAnswerChange,
        onBlur: this.handleAnswerBlur,
        "data-automation": "sdk-matching-answer"
      })), !hasOnlyOneMatch && !this.props.disabled && (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_uiView.View, {
        as: "div",
        margin: "xx-large 0 0 0",
        themeOverride: {
          marginXxLarge: '30px'
        }
      }, (0, _emotion.jsx)(_RemoveChoiceButton["default"], {
        screenReaderText: (0, _formatMessage["default"])('Remove Question/Answer pair: {question} - {answer}', {
          question: questionBody,
          answer: answerBody
        }),
        onRemoveChoice: this.handleRemoveMatch,
        choiceId: this.props.questionId,
        "data-automation": "sdk-matching-delete"
      }))))));
    }
  }]);
}(_react.Component);
_MatchEdit = MatchEdit;
(0, _defineProperty2["default"])(MatchEdit, "displayName", 'MatchEdit');
(0, _defineProperty2["default"])(MatchEdit, "componentId", "Quizzes".concat(_MatchEdit.displayName));
(0, _defineProperty2["default"])(MatchEdit, "propTypes", {
  answerBody: _propTypes["default"].string.isRequired,
  answerErrors: _propTypes["default"].array.isRequired,
  disabled: _propTypes["default"].bool,
  editAnswer: _propTypes["default"].func.isRequired,
  editQuestion: _propTypes["default"].func.isRequired,
  hasOnlyOneMatch: _propTypes["default"].bool.isRequired,
  index: _propTypes["default"].number.isRequired,
  questionBody: _propTypes["default"].string.isRequired,
  questionErrors: _propTypes["default"].array.isRequired,
  questionId: _propTypes["default"].string.isRequired,
  removeMatch: _propTypes["default"].func.isRequired
});
(0, _defineProperty2["default"])(MatchEdit, "defaultProps", {
  disabled: false
});