@instructure/quiz-interactions/lib/components/multiple_choice/Edit/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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _striptags = _interopRequireDefault(require("striptags"));
var _uuid = require("uuid");
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
var _set = _interopRequireDefault(require("lodash/fp/set"));
var _sortBy = _interopRequireDefault(require("lodash/fp/sortBy"));
var _findIndex = _interopRequireDefault(require("lodash/fp/findIndex"));
var _find = _interopRequireDefault(require("lodash/fp/find"));
var _filter = _interopRequireDefault(require("lodash/fp/filter"));
var _last = _interopRequireDefault(require("lodash/fp/last"));
var _map = _interopRequireDefault(require("lodash/fp/map"));
var _xor = _interopRequireDefault(require("lodash/fp/xor"));
var _remove = _interopRequireDefault(require("lodash/fp/remove"));
var _uiCheckbox = require("@instructure/ui-checkbox");
var _uiRadioInput = require("@instructure/ui-radio-input");
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _ChoiceInput = _interopRequireDefault(require("../../common/edit/components/ChoiceInput"));
var _Footer = _interopRequireDefault(require("../../common/edit/components/Footer"));
var _multiple_choice = _interopRequireDefault(require("../../../records/interactions/multiple_choice"));
var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));
var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));
var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));
var _interactionPoints = _interopRequireDefault(require("../../../util/interactionPoints"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));
var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));
var _quizCommon = require("@instructure/quiz-common");
var _normalizeErrors = require("../../../util/normalizeErrors");
var _class, _MultipleChoiceEdit;
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 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(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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));
}
/**
---
category: MultipleChoice
---
  Multiple Choice Edit component

   ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Who was the first President of the United States?',
      interactionData: {
        choices: [
          { id: 'uuid1', itemBody: 'George Washington', position: 1 },
          { id: 'uuid2', itemBody: 'Alexander Hamilton.', position: 2 },
          { id: 'uuid3', itemBody: 'John Adams', position: 3 },
          { id: 'uuid4', itemBody: 'Thomas Jefferson', position: 4 }
        ]
      },
      properties: {
        varyPointsByAnswer: false,
        shuffleRules: {
          choices: {
            shuffled: true,
            toLock: [0, 1]
          }
        }
      },
      scoringData: {
        value: 'uuid1'
      },
      additionalOptions: [{
        key: 'outcomes',
        title: 'Align to Outcomes',
        component: 'Placeholder'
      }]
    }

    return (
      <MultipleChoiceEdit {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/
var MultipleChoiceEdit = exports["default"] = (0, _withEditTools["default"])(_class = (_MultipleChoiceEdit = /*#__PURE__*/function (_Component) {
  function MultipleChoiceEdit() {
    var _this2;
    (0, _classCallCheck2["default"])(this, MultipleChoiceEdit);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, MultipleChoiceEdit, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "state", {
      expanded: _this2.getChoices().reduce(function (expand, choice) {
        expand[choice.id] = false; // eslint-disable-line no-param-reassign
        return expand;
      }, {})
    });
    (0, _defineProperty2["default"])(_this2, "stemElement", null);
    (0, _defineProperty2["default"])(_this2, "choiceRefs", []);
    (0, _defineProperty2["default"])(_this2, "_timeouts", []);
    (0, _defineProperty2["default"])(_this2, "_choiceWasCreated", false);
    // ===========
    //   HANDLERS
    // ===========
    (0, _defineProperty2["default"])(_this2, "handleAnswerFeedbackToggle", function (choiceId) {
      _this2.setState(function (state) {
        return {
          expanded: Object.assign({}, state.expanded, (0, _defineProperty2["default"])({}, choiceId, !state.expanded[choiceId]))
        };
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleStemRef", function (node) {
      _this2.stemElement = node;
    });
    (0, _defineProperty2["default"])(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleRemoveChoice", function (choiceId, index) {
      _this2.updateFocusOnRemove(index);

      // Update scoringData
      var choices = _this2.getChoices();
      var scoringData = {};
      if (_this2.props.scoringData.value === choiceId) {
        scoringData.value = null;
      }
      if (_this2.shouldVaryPoints()) {
        scoringData.values = (0, _remove["default"])({
          value: choiceId
        }, _this2.props.scoringData.values);
      }
      _this2.updateScoringData(scoringData);

      // Update interactionData and properties
      var shuffleRules = _this2.props.properties.shuffleRules;

      // Move the locks in conjuntion with the answers
      var toLock = (0, _map["default"])(function (value) {
        return value < index ? value : value - 1;
      }, (0, _filter["default"])(function (lock) {
        return lock !== index;
      }, shuffleRules.choices.toLock));
      var localFeedback = Object.assign({}, _this2.props.answerFeedback);
      delete localFeedback[choiceId];
      _this2.props.changeItemState({
        interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
          choices: (0, _remove["default"])({
            id: choiceId
          }, choices)
        }),
        properties: _objectSpread(_objectSpread({}, _this2.props.properties), {}, {
          shuffleRules: (0, _set["default"])('choices.toLock', toLock, shuffleRules)
        }),
        answerFeedback: localFeedback
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleInputChange", function (choiceId, event, _ref) {
      var editorContent = _ref.editorContent;
      var choices = _this2.getChoices();
      var index = (0, _findIndex["default"])({
        id: choiceId
      }, choices);
      _this2.props.changeItemState({
        interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
          choices: (0, _set["default"])("[".concat(index, "].itemBody"), editorContent, choices)
        })
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleCreateChoice", function () {
      var id = _this2.props.newId();
      if (_this2.shouldVaryPoints()) {
        _this2.updateScoringData({
          values: [].concat((0, _toConsumableArray2["default"])(_this2.props.scoringData.values), [{
            value: id,
            points: 0
          }])
        });
      }
      _this2._choiceWasCreated = true;
      _this2.props.changeItemState({
        interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
          choices: [].concat((0, _toConsumableArray2["default"])(_this2.getChoices()), [{
            id: id,
            itemBody: '',
            position: Math.max.apply(Math, [-1].concat((0, _toConsumableArray2["default"])((0, _map["default"])('position', _this2.getChoices())))) + 1
          }])
        })
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleVaryPointsByAnswerChange", function (event) {
      _this2.toggleVaryPointsByAnswer(event);
    });
    (0, _defineProperty2["default"])(_this2, "handleShuffleChange", function (event) {
      _this2.toggleShuffleChoices();
    });
    (0, _defineProperty2["default"])(_this2, "focusErrors", function () {
      var stemErrors = (0, _getOr["default"])([], 'itemBody', _this2.props.errors);
      var groupErrors = (0, _getOr["default"])([], 'scoringData.value', _this2.props.errors);
      var choiceErrors = (0, _getOr["default"])([], 'interactionData.choices', _this2.props.errors);
      var choiceErrorsKeys = Object.keys(choiceErrors).map(Number);
      if (stemErrors.length) {
        _this2.stemElement.focus();
      } else if (groupErrors.length) {
        _this2.choiceRefs[0].focusOnAnswerInput();
      } else if (choiceErrorsKeys.length) {
        var index = Math.min.apply(Math, (0, _toConsumableArray2["default"])(choiceErrorsKeys));
        _this2.choiceRefs[index].focusOnAnswerInput();
      }
    });
    return _this2;
  }
  (0, _inherits2["default"])(MultipleChoiceEdit, _Component);
  return (0, _createClass2["default"])(MultipleChoiceEdit, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._timeouts.forEach(clearTimeout);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this._choiceWasCreated) {
        this._choiceWasCreated = false;
        (0, _last["default"])(this.choiceRefs).focusOnAnswerInput();
      }
    }

    // ===========
    //   HELPERS
    // ===========
  }, {
    key: "getChoices",
    value: function getChoices() {
      return (0, _getOr["default"])([], 'interactionData.choices', this.props);
    }
  }, {
    key: "isShuffled",
    value: function isShuffled() {
      return (0, _getOr["default"])(false, 'properties.shuffleRules.choices.shuffled', this.props);
    }
  }, {
    key: "shouldVaryPoints",
    value: function shouldVaryPoints() {
      return (0, _getOr["default"])(false, 'properties.varyPointsByAnswer', this.props);
    }
  }, {
    key: "isChoiceLocked",
    value: function isChoiceLocked(choiceId) {
      var index = (0, _findIndex["default"])({
        id: choiceId
      }, this.getChoices());
      var lockedChoices = (0, _getOr["default"])(false, 'properties.shuffleRules.choices.toLock', this.props);
      if (lockedChoices) {
        return lockedChoices.includes(index);
      }
      return false;
    }
  }, {
    key: "getScoringDataValues",
    value: function getScoringDataValues() {
      return this.props.scoringData.values || (0, _map["default"])(function (_ref2) {
        var id = _ref2.id;
        return {
          value: id,
          points: 0
        };
      }, this.getChoices());
    }
  }, {
    key: "updateScoringData",
    value: function updateScoringData(changes) {
      var scoringData = Object.assign({}, this.props.scoringData, changes);

      // Only calls pointsChange when necessary
      if (this.shouldVaryPoints()) {
        if (scoringData.values === null) {
          // TODO should values be allowed to be undefined?
          delete scoringData.values;
        }
        // TODO Raising pointsChange with undefined would allow consumer to reset to points of their choice
        this.props.pointsChange((0, _interactionPoints["default"])({
          properties: this.props.properties,
          scoringData: scoringData
        }) || 1);
      }
      this.props.changeItemState({
        scoringData: scoringData
      }, {
        scoringData: changes
      });
    }
  }, {
    key: "updateFocusOnRemove",
    value: function updateFocusOnRemove(index) {
      var _this3 = this;
      if (index === 0) {
        // if removing the first choice, focus on stem
        this.stemElement.focus();
      } else if (this.getChoices().length === 2) {
        // if removing the second choice out of two choices
        this._timeouts = [].concat((0, _toConsumableArray2["default"])(this._timeouts), [setTimeout(function () {
          return _this3.choiceRefs[index - 1].focusLast();
        })]);
      } else {
        // all the other cases
        this.choiceRefs[index - 1].focusLast();
      }
    }
  }, {
    key: "override",
    value: function override() {
      return this.props.overrideEditableForItem || this.props.overrideEditableForRegrading;
    }
  }, {
    key: "toggleVaryPointsByAnswer",
    value: function toggleVaryPointsByAnswer(event) {
      var scoringAlgorithm;
      if (event.target.checked) {
        scoringAlgorithm = 'VaryPointsByAnswer';
        this.updateScoringData({
          values: this.getScoringDataValues()
        });
      } else {
        scoringAlgorithm = 'Equivalence';
        this.updateScoringData({
          values: null
        });
      }
      var update = {
        scoringAlgorithm: scoringAlgorithm,
        properties: {
          varyPointsByAnswer: event.target.checked
        }
      };
      this.props.changeItemState(_objectSpread(_objectSpread({}, update), {}, {
        properties: _objectSpread(_objectSpread({}, this.props.properties), update.properties)
      }), update);
    }
  }, {
    key: "toggleShuffleChoices",
    value: function toggleShuffleChoices() {
      var newShuffled = !this.isShuffled();
      var properties;
      if (this.props.properties.shuffleRules !== void 0) {
        properties = (0, _set["default"])('shuffleRules.choices.shuffled', newShuffled, this.props.properties);
      } else {
        properties = {
          shuffleRules: {
            choices: {
              shuffled: newShuffled
            }
          }
        };
      }
      var messageForScreenreader = newShuffled ? (0, _formatMessage["default"])('Shuffling turned on. Navigate to a choice to lock it in place.') : (0, _formatMessage["default"])('Shuffling turned off.');
      this.props.notifyScreenreader(messageForScreenreader);
      this.props.changeItemState({
        properties: properties
      }, {
        properties: {
          shuffleRules: {
            choices: {
              shuffled: newShuffled
            }
          }
        }
      });
    }
  }, {
    key: "makeAnswerPointsChangeHandler",
    value: function makeAnswerPointsChangeHandler(choiceId) {
      var _this4 = this;
      return function (points) {
        _this4.updateScoringData({
          values: (0, _map["default"])(function (item) {
            return item.value !== choiceId ? item : {
              value: choiceId,
              points: points
            };
          }, _this4.getScoringDataValues())
        });
      };
    }
  }, {
    key: "makeChoiceLockedToggler",
    value: function makeChoiceLockedToggler(choiceId) {
      var _this5 = this;
      return function () {
        var index = (0, _findIndex["default"])({
          id: choiceId
        }, _this5.getChoices());
        var toLock = (0, _xor["default"])([index], _this5.props.properties.shuffleRules.choices.toLock);
        var properties = (0, _set["default"])('shuffleRules.choices.toLock', toLock, _this5.props.properties);
        var messageForScreenreader = _this5.isChoiceLocked(choiceId) ? (0, _formatMessage["default"])('Choice unlocked') : (0, _formatMessage["default"])('Choice locked');
        _this5.props.notifyScreenreader(messageForScreenreader);
        _this5.props.changeItemState({
          properties: properties
        }, {
          properties: {
            shuffleRules: {
              choices: {
                toLock: toLock
              }
            }
          }
        });
      };
    }

    // ===========
    //   RENDERS
    // ===========
  }, {
    key: "renderChoice",
    value: function renderChoice(choice, name, index) {
      var _this6 = this;
      var shouldVaryPoints = this.shouldVaryPoints();
      var disabledFields = [].concat((0, _toConsumableArray2["default"])(this.override() ? ['answerInput'] : []), (0, _toConsumableArray2["default"])(this.props.overrideEditableForRegrading ? ['lockChoiceButton'] : []));
      var choiceInputProps = {
        disabledFields: disabledFields,
        key: choice.id,
        id: choice.id,
        itemBody: choice.itemBody,
        ref: function ref(node) {
          _this6.choiceRefs[index] = node;
        },
        errors: this.props.getErrors("interactionData.choices.".concat(index, ".itemBody")),
        noRCE: !this.props.enableRichContentEditor,
        onAnswerPointsChange: this.makeAnswerPointsChangeHandler(choice.id),
        onInputChange: this.handleInputChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        onRemoveChoice: function onRemoveChoice() {
          return _this6.handleRemoveChoice(choice.id, index);
        },
        parentType: this.props.parentType,
        shouldRenderRemoveChoice: !this.override() && this.getChoices().length !== 1,
        shouldRenderAnswerPoints: shouldVaryPoints,
        shouldRenderAnswerFeedback: !this.override() && this.props.answerFeedbackEnabled,
        openImportModal: this.props.openImportModal,
        readOnlyFields: this.override() ? ['answerInput'] : [],
        handleAnswerFeedbackToggle: this.handleAnswerFeedbackToggle.bind(this),
        expanded: this.state.expanded[choice.id],
        changeItemState: this.props.changeItemState,
        answerFeedback: this.props.answerFeedback,
        notifyScreenreader: this.props.notifyScreenreader,
        removeButtonScreenReaderText: (0, _formatMessage["default"])('Remove Answer Value: { choice }', {
          choice: (0, _striptags["default"])(choice.itemBody)
        }),
        isRequired: true,
        automationData: "sdk-multiple-choice-".concat(index)
      };
      if (shouldVaryPoints) {
        var answerValue = (0, _find["default"])({
          value: choice.id
        }, this.props.scoringData.values) || {};
        choiceInputProps.answerPoints = answerValue.points || 0;
      }
      if (this.isShuffled()) {
        choiceInputProps.showLock = true;
        choiceInputProps.isLocked = this.isChoiceLocked(choice.id);
        choiceInputProps.toggleChoiceLocked = this.makeChoiceLockedToggler(choice.id);
      }
      var labelText = choice.itemBody.trim() === '' ? (0, _formatMessage["default"])('Radio button for blank answer') : (0, _formatMessage["default"])('Radio button for answer { answer }', {
        answer: (0, _striptags["default"])(choice.itemBody)
      });
      var radioName = "".concat(name, "_").concat(choice.id);
      var renderRadioButton = function renderRadioButton() {
        return /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, {
          disabled: _this6.props.overrideEditableForItem,
          onChange: function onChange() {
            return _this6.updateScoringData({
              value: choice.id
            });
          },
          name: radioName,
          label: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, labelText),
          value: choice.id,
          checked: _this6.props.scoringData.value === choice.id
        });
      };
      return /*#__PURE__*/_react["default"].createElement(_ChoiceInput["default"], Object.assign({}, choiceInputProps, {
        renderBeforeComponent: renderRadioButton()
      }));
    }
  }, {
    key: "renderInputGroup",
    value: function renderInputGroup() {
      var _this7 = this;
      var choices = (0, _sortBy["default"])('position', this.getChoices());
      var name = "edit_interaction_".concat(this.props.itemId);
      var errors = [].concat((0, _toConsumableArray2["default"])(this.props.getErrors('interactionData.choices.$errors')), (0, _toConsumableArray2["default"])(this.props.getErrors('scoringData.value')));
      return /*#__PURE__*/_react["default"].createElement(_quizCommon.FormFieldGroup, {
        rowSpacing: "small",
        name: name,
        description: (0, _formatMessage["default"])('Possible answers'),
        messages: (0, _normalizeErrors.normalizeErrors)(errors)
      }, choices.map(function (choice, index) {
        return _this7.renderChoice(choice, name, index);
      }));
    }
  }, {
    key: "renderOptionsDescription",
    value: function renderOptionsDescription() {
      return /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Multiple choice options'));
    }
  }, {
    key: "render",
    value: function render() {
      // clean up the references to ChoiceInputs
      this.choiceRefs = [];
      var varyPointsByAnswerLabel = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, (0, _formatMessage["default"])('Vary points by answer')), /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('New points possible text inputs are displayed for each option when checked')));
      var shuffleChoicesLabel = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, (0, _formatMessage["default"])('Shuffle Choices')), /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Lock distractor position buttons are displayed for each option when checked')));
      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_QuestionContainer["default"], {
        disabled: this.override(),
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.props.onDescriptionChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        readOnly: this.override(),
        stemErrors: this.props.getErrors('itemBody'),
        textareaRef: this.handleStemRef
      }, this.renderInputGroup(), !this.override() && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
        onCreateChoice: this.handleCreateChoice,
        notifyScreenreader: this.props.notifyScreenreader
      })), /*#__PURE__*/_react["default"].createElement(_QuestionSettingsContainer["default"], {
        additionalOptions: this.props.additionalOptions
      }, /*#__PURE__*/_react["default"].createElement(_QuestionSettingsPanel["default"], {
        label: (0, _formatMessage["default"])('Options'),
        defaultExpanded: true
      }, /*#__PURE__*/_react["default"].createElement(_quizCommon.FormFieldGroup, {
        rowSpacing: "small",
        description: this.renderOptionsDescription()
      }, this.props.showCalculatorOption && /*#__PURE__*/_react["default"].createElement(_CalculatorOptionWithOqaatAlert["default"], {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), /*#__PURE__*/_react["default"].createElement(_uiCheckbox.Checkbox, {
        label: varyPointsByAnswerLabel,
        onChange: this.handleVaryPointsByAnswerChange,
        checked: this.shouldVaryPoints(),
        disabled: this.props.overrideEditableForRegrading,
        "data-automation": "sdk-vary-points-by-answer-checkbox"
      }), /*#__PURE__*/_react["default"].createElement(_uiCheckbox.Checkbox, {
        label: shuffleChoicesLabel,
        onChange: this.handleShuffleChange,
        checked: this.isShuffled(),
        disabled: this.props.overrideEditableForRegrading,
        "data-automation": "sdk-multiple-choice-shuffle-choices-checkbox"
      })))));
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_MultipleChoiceEdit, "interactionType", _multiple_choice["default"]), (0, _defineProperty2["default"])(_MultipleChoiceEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: _QuestionSettingsContainer["default"].propTypes.additionalOptions,
  answerFeedbackEnabled: _propTypes["default"].bool,
  answerFeedback: _ChoiceInput["default"].propTypes.answerFeedback,
  calculatorType: _propTypes["default"].string,
  changeItemState: _propTypes["default"].func,
  enableRichContentEditor: _propTypes["default"].bool,
  errors: _propTypes["default"].object,
  // TODO: This appears unused, figure out if we can delete it
  errorsAreShowing: _propTypes["default"].bool,
  interactionData: _propTypes["default"].shape({
    choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      id: _propTypes["default"].string,
      itemBody: _propTypes["default"].string,
      position: _propTypes["default"].number
    }))
  }).isRequired,
  itemBody: _propTypes["default"].string,
  itemId: _propTypes["default"].string,
  newId: _propTypes["default"].func,
  notifyScreenreader: _propTypes["default"].func,
  onModalClose: _propTypes["default"].func,
  onModalOpen: _propTypes["default"].func,
  oneQuestionAtATime: _propTypes["default"].bool,
  overrideEditableForItem: _propTypes["default"].bool,
  overrideEditableForRegrading: _propTypes["default"].bool,
  parentType: _propTypes["default"].string,
  pointsChange: _propTypes["default"].func,
  properties: _propTypes["default"].shape({
    varyPointsByAnswer: _propTypes["default"].bool,
    shuffleRules: _propTypes["default"].shape({
      choices: _propTypes["default"].shape({
        shuffled: _propTypes["default"].bool,
        toLock: _propTypes["default"].arrayOf(_propTypes["default"].number)
      })
    })
  }).isRequired,
  scoringData: _propTypes["default"].shape({
    value: _propTypes["default"].string,
    values: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      value: _propTypes["default"].string,
      points: _propTypes["default"].number
    }))
  }).isRequired,
  openImportModal: _propTypes["default"].func,
  setOneQuestionAtATime: _propTypes["default"].func
}, _withEditTools["default"].injectedProps), {}, {
  showCalculatorOption: _propTypes["default"].bool
})), (0, _defineProperty2["default"])(_MultipleChoiceEdit, "defaultProps", {
  answerFeedbackEnabled: false,
  answerFeedback: {},
  calculatorType: 'none',
  enableRichContentEditor: true,
  newId: _uuid.v4,
  notifyScreenreader: Function.prototype,
  oneQuestionAtATime: false,
  overrideEditableForItem: false,
  overrideEditableForRegrading: false,
  parentType: '',
  pointsChange: Function.prototype,
  additionalOptions: void 0,
  changeItemState: void 0,
  errors: void 0,
  errorsAreShowing: void 0,
  itemBody: void 0,
  itemId: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  setOneQuestionAtATime: void 0,
  showCalculatorOption: true
}), _MultipleChoiceEdit)) || _class;