@instructure/quiz-interactions/lib/components/rich_fill_blank/Edit/WordBankDistractors/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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uuid = require("uuid");
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _quizCommon = require("@instructure/quiz-common");
var _rich_fill_blank = _interopRequireDefault(require("../../../../records/interactions/rich_fill_blank"));
var _ChoiceInput = _interopRequireDefault(require("../../../common/edit/components/ChoiceInput"));
var _Footer = _interopRequireDefault(require("../../../common/edit/components/Footer"));
var _focusHelpers = require("../../../../util/focusHelpers");
var _instUIMessages = require("../../../../util/instUIMessages");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _normalizeErrors = require("../../../../util/normalizeErrors");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 WordBankDistractors = exports["default"] = /*#__PURE__*/function (_Component) {
  function WordBankDistractors() {
    var _this2;
    (0, _classCallCheck2["default"])(this, WordBankDistractors);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, WordBankDistractors, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "distractorRefs", {});
    (0, _defineProperty2["default"])(_this2, "getErrorsForChoice", function (id) {
      var wordBankChoiceIndex = _this2.props.indexForWordBankChoice(id);
      var errors = _this2.props.interactionDataErrors[wordBankChoiceIndex] || {};
      return (0, _instUIMessages.toErrors)(errors.itemBody || []);
    });
    (0, _defineProperty2["default"])(_this2, "onWordBankDistractorInputChange", function (id, e) {
      var wordBankChoiceIndex = _this2.props.indexForWordBankChoice(id);
      var interactionData = (0, _immutabilityHelper["default"])(_this2.props.interactionData, {
        wordBankChoices: (0, _defineProperty2["default"])({}, wordBankChoiceIndex, {
          itemBody: {
            $set: e.target.value
          }
        })
      });
      _this2.props.changeItemState({
        interactionData: interactionData
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleCreateWordBankDistractor", function () {
      var id = (0, _uuid.v4)();
      var newWordBankDistractor = {
        id: id,
        itemBody: ''
      };
      var interactionData = (0, _immutabilityHelper["default"])(_this2.props.interactionData, {
        wordBankChoices: {
          $push: [newWordBankDistractor]
        }
      });
      _this2.props.changeItemState({
        interactionData: interactionData
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleRemoveWordBankDistractor", function (distractorId) {
      var newWordBankChoices = _this2.props.interactionData.wordBankChoices.filter(function (wordBankChoice) {
        return wordBankChoice.id !== distractorId;
      });
      var interactionData = (0, _immutabilityHelper["default"])(_this2.props.interactionData, {
        wordBankChoices: {
          $set: newWordBankChoices
        }
      });
      _this2.props.changeItemState({
        interactionData: interactionData
      });

      // focus handling:
      var nextDistractorId = (0, _focusHelpers.getNextItemIdFromArray)(distractorId, _this2.getWordBankDistractors());
      var nextDistractorRef = _this2.distractorRefs[nextDistractorId];
      if (nextDistractorRef) {
        nextDistractorRef.removeChoicebutton.focus();
      } else {
        _this2.addDistractorRef.focus();
      }
    });
    (0, _defineProperty2["default"])(_this2, "handleRemoveChoice", function (distractorId) {
      return function () {
        _this2.handleRemoveWordBankDistractor(distractorId);
      };
    });
    (0, _defineProperty2["default"])(_this2, "handleDistractorRef", function (distractorId) {
      return function (node) {
        _this2.distractorRefs[distractorId] = node;
      };
    });
    (0, _defineProperty2["default"])(_this2, "handleAddDistractorRef", function (node) {
      _this2.addDistractorRef = node;
    });
    return _this2;
  }
  (0, _inherits2["default"])(WordBankDistractors, _Component);
  return (0, _createClass2["default"])(WordBankDistractors, [{
    key: "getWordBankDistractors",
    value: function getWordBankDistractors() {
      var correctChoiceIds = this.props.scoringData.value.map(function (scoringData) {
        return scoringData.scoringData.choiceId;
      }).filter(function (c) {
        return c;
      });
      return this.props.interactionData.wordBankChoices.filter(function (wordBankChoice) {
        return !correctChoiceIds.includes(wordBankChoice.id);
      });
    }
  }, {
    key: "renderWordBankDistractor",
    value:
    // =============
    //   RENDERING
    // =============

    function renderWordBankDistractor(distractor, focusOnMount) {
      return /*#__PURE__*/_react["default"].createElement(_ChoiceInput["default"], {
        key: distractor.id,
        id: distractor.id,
        renderLabel: (0, _formatMessage["default"])('Distractor'),
        isRequired: true,
        disabledFields: this.props.overrideEditableForRegrading ? ['answerInput'] : [],
        itemBody: distractor.itemBody,
        errors: this.getErrorsForChoice(distractor.id),
        onInputChange: this.onWordBankDistractorInputChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        onRemoveChoice: this.handleRemoveChoice(distractor.id),
        ref: this.handleDistractorRef(distractor.id),
        focusOnMount: focusOnMount,
        shouldRenderRemoveChoice: !this.props.overrideEditableForRegrading,
        noRCE: true,
        notifyScreenreader: this.props.notifyScreenreader
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var noFocusOnFirstTime = true;
      if (!this.props.interactionData.wordBankChoices) return null;
      return /*#__PURE__*/_react["default"].createElement(_quizCommon.FormFieldGroup, {
        description: (0, _formatMessage["default"])('Word Bank Distractors'),
        messages: (0, _normalizeErrors.normalizeErrors)(this.props.interactionDataErrors.$errors)
      }, /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex, {
        direction: "column",
        gap: "small"
      }, /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, null, /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex, {
        direction: "column",
        gap: "small"
      }, this.getWordBankDistractors().map(function (distractor, i, source) {
        var focusOnMount = noFocusOnFirstTime ? noFocusOnFirstTime = !noFocusOnFirstTime : i + 1 === source.length && !distractor.itemBody;
        return _this3.renderWordBankDistractor(distractor, focusOnMount);
      }))), !this.props.overrideEditableForRegrading && /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, null, /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
        ref: this.handleAddDistractorRef,
        onCreateChoice: this.handleCreateWordBankDistractor,
        buttonText: (0, _formatMessage["default"])('Distractor'),
        screenReaderText: (0, _formatMessage["default"])('Add Distractor'),
        notifyScreenreader: this.props.notifyScreenreader
      }))));
    }
  }]);
}(_react.Component);
(0, _defineProperty2["default"])(WordBankDistractors, "interactionType", _rich_fill_blank["default"]);
(0, _defineProperty2["default"])(WordBankDistractors, "propTypes", {
  changeItemState: _propTypes["default"].func.isRequired,
  indexForWordBankChoice: _propTypes["default"].func.isRequired,
  interactionData: _propTypes["default"].shape({
    wordBankChoices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      itemBody: _propTypes["default"].string,
      id: _propTypes["default"].string
    }))
  }).isRequired,
  interactionDataErrors: _propTypes["default"].oneOfType([_propTypes["default"].shape({
    $errors: _propTypes["default"].arrayOf(_propTypes["default"].string)
  }), _propTypes["default"].objectOf(_propTypes["default"].shape({
    itemBody: _propTypes["default"].arrayOf(_propTypes["default"].string)
  }))]).isRequired,
  notifyScreenreader: _propTypes["default"].func.isRequired,
  onModalClose: _propTypes["default"].func,
  onModalOpen: _propTypes["default"].func,
  overrideEditableForRegrading: _propTypes["default"].bool,
  scoringData: _propTypes["default"].shape({
    value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      scoringData: _propTypes["default"].shape({
        choiceId: _propTypes["default"].string
      })
    }))
  }).isRequired
});
(0, _defineProperty2["default"])(WordBankDistractors, "defaultProps", {
  overrideEditableForRegrading: false,
  onModalClose: void 0,
  onModalOpen: void 0,
  scoringData: void 0
});