quiz-interactions/lib/components/multiple_answer/Edit/index.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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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 _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 _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 _uiForms = require("@instructure/ui-forms");

var _uiFormField = require("@instructure/ui-form-field");

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

var _ChoiceInput = _interopRequireDefault(require("../../common/edit/components/ChoiceInput"));

var _ChoiceInputWrapper = _interopRequireDefault(require("../../common/edit/components/ChoiceInputWrapper"));

var _Errors = _interopRequireDefault(require("../../common/edit/components/Errors"));

var _Footer = _interopRequireDefault(require("../../common/edit/components/Footer"));

var _multiple_answer = _interopRequireDefault(require("../../../records/interactions/multiple_answer"));

var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));

var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));

var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));

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

var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));

var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));

var _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 MultipleAnswerEdit =
/**
---
category: MultipleAnswer
---
  Multiple Answer Edit component

   ```jsx_example
   function Example (props) {
    const exampleProps = {
      itemBody: 'Who was in the first cabinet of the USA?',
      interactionData: {
        choices: [
          { id: 'uuid1', position: 1, itemBody: 'Thomas Jefferson' },
          { id: 'uuid2', position: 2, itemBody: 'John Marshall' },
          { id: 'uuid3', position: 3, itemBody: 'John Knox' },
          { id: 'uuid4', position: 4, itemBody: 'Alexander Hamilton' },
          { id: 'uuid5', position: 5, itemBody: 'Aaron Burr' },
          { id: 'uuid6', position: 6, itemBody: 'Ben Franklin' }
        ]
      },
      itemId: '1',
      scoringData: {
        value: ['uuid1', 'uuid3', 'uuid4']
      },
      properties: {
        shuffleRules: {
          choices: {
            shuffled: true,
            toLock: [0, 1]
          }
        }
      }
    }

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

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/
(0, _withEditTools.default)(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(MultipleAnswerEdit, _Component);

  function MultipleAnswerEdit() {
    var _getPrototypeOf2;

    var _this;

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

    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)(MultipleAnswerEdit)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this._choiceWasCreated = false;
    _this.stemElement = null;
    _this.choiceRefs = [];
    _this._timeouts = [];

    _this.handleCalculatorTypeChange = function (e, value) {
      _this.props.changeItemState({
        calculatorType: value
      });
    };

    _this.handleStemRef = function (node) {
      _this.stemElement = node;
    };

    _this.handleRemoveChoice = function (choiceId, index) {
      var choices = _this.getChoices();

      var shuffleRules = _this.props.properties.shuffleRules;

      _this.updateFocusOnRemove(index); // 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));

      _this.props.changeItemState({
        interactionData: _objectSpread({}, _this.props.interactionData, {
          choices: (0, _remove.default)({
            id: choiceId
          }, choices)
        }),
        scoringData: _objectSpread({}, _this.props.scoringData, {
          value: (0, _filter.default)(function (v) {
            return v !== choiceId;
          }, _this.props.scoringData.value)
        }),
        properties: _objectSpread({}, _this.props.properties, {
          shuffleRules: (0, _set.default)('choices.toLock', toLock, shuffleRules)
        })
      });
    };

    _this.handleInputChange = function (choiceId, event, _ref) {
      var editorContent = _ref.editorContent;

      var choices = _this.getChoices();

      var index = (0, _findIndex.default)({
        id: choiceId
      }, choices);

      _this.props.changeItemState({
        interactionData: _objectSpread({}, _this.props.interactionData, {
          choices: (0, _set.default)("[".concat(index, "].itemBody"), editorContent, choices)
        })
      });
    };

    _this.handleCreateChoice = function () {
      _this._choiceWasCreated = true;

      _this.props.changeItemState({
        interactionData: _objectSpread({}, _this.props.interactionData, {
          choices: [].concat((0, _toConsumableArray2.default)(_this.getChoices()), [{
            id: _this.props.newId(),
            itemBody: '',
            position: Math.max.apply(Math, [-1].concat((0, _toConsumableArray2.default)((0, _map.default)('position', _this.getChoices())))) + 1
          }])
        })
      });
    };

    _this.handleShuffleChange = function (event) {
      _this.toggleShuffleChoices();
    };

    return _this;
  }

  (0, _createClass2.default)(MultipleAnswerEdit, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      // prevent timeouts from being called after unmount
      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: "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: "updateFocusOnRemove",
    value: function updateFocusOnRemove(index) {
      var _this2 = 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 _this2.choiceRefs[index - 1].focusLast();
        })]);
      } else {
        // all the other cases
        this.choiceRefs[index - 1].focusLast();
      }
    } // ===========
    //   HANDLERS
    // ===========

  }, {
    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
      });
    }
  }, {
    key: "makeCheckAnswerToggler",
    value: function makeCheckAnswerToggler(choiceId) {
      var _this3 = this;

      return function () {
        _this3.props.changeItemState({
          scoringData: _objectSpread({}, _this3.props.scoringData, {
            value: (0, _xor.default)([choiceId], _this3.props.scoringData.value)
          })
        });
      };
    }
  }, {
    key: "makeChoiceLockedToggler",
    value: function makeChoiceLockedToggler(choiceId) {
      var _this4 = this;

      return function () {
        var index = (0, _findIndex.default)({
          id: choiceId
        }, _this4.getChoices());
        var toLock = (0, _xor.default)([index], _this4.props.properties.shuffleRules.choices.toLock);
        var properties = (0, _set.default)('shuffleRules.choices.toLock', toLock, _this4.props.properties);
        var messageForScreenreader = _this4.isChoiceLocked(choiceId) ? (0, _formatMessage.default)('Distractor unlocked') : (0, _formatMessage.default)('Distractor locked');

        _this4.props.notifyScreenreader(messageForScreenreader);

        _this4.props.changeItemState({
          properties: properties
        });
      };
    } // ===========
    //   RENDERS
    // ===========

  }, {
    key: "renderChoice",
    value: function renderChoice(choice, index) {
      var _this5 = this;

      var choiceErrors = this.props.getErrors("interactionData.choices.".concat(index, ".itemBody"));
      var shouldRenderRemoveChoice = this.getChoices().length !== 1 && !this.props.overrideEditableForRegrading;
      var choiceInputProps = {
        disabledFields: this.props.overrideEditableForRegrading ? ['answerInput', 'lockChoiceButton'] : [],
        errors: choiceErrors,
        id: choice.id,
        ref: function ref(node) {
          _this5.choiceRefs[index] = node;
        },
        itemBody: choice.itemBody,
        noRCE: !this.props.enableRichContentEditor,
        notifyScreenreader: this.props.notifyScreenreader,
        onInputChange: this.handleInputChange,
        onRemoveChoice: function onRemoveChoice() {
          return _this5.handleRemoveChoice(choice.id, index);
        },
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        renderImportModal: this.props.renderImportModal,
        shouldRenderRemoveChoice: shouldRenderRemoveChoice
      };

      if (this.isShuffled()) {
        choiceInputProps.showLock = true;
        choiceInputProps.isLocked = this.isChoiceLocked(choice.id);
        choiceInputProps.toggleChoiceLocked = this.makeChoiceLockedToggler(choice.id);
      }

      var checked = this.props.scoringData.value.includes(choice.id);
      var onCheckboxChange = this.makeCheckAnswerToggler(choice.id);
      var labelText = choice.itemBody.trim() === '' ? (0, _formatMessage.default)('Checkbox for blank distractor') : (0, _formatMessage.default)('Checkbox for distractor { distractor }', {
        distractor: (0, _striptags.default)(choice.itemBody)
      });
      return _react.default.createElement(_ChoiceInputWrapper.default, {
        key: choice.id,
        choiceInput: _react.default.createElement(_ChoiceInput.default, choiceInputProps),
        customInput: _react.default.createElement(_uiForms.Checkbox, {
          onChange: onCheckboxChange,
          checked: checked,
          key: choice.id,
          label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, labelText),
          value: choice.id
        })
      });
    }
  }, {
    key: "renderInputGroup",
    value: function renderInputGroup() {
      var _this6 = 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.$errors')));
      return _react.default.createElement(_Errors.default, {
        errorList: errors
      }, _react.default.createElement(_uiFormField.FormFieldGroup, {
        rowSpacing: "small",
        name: name,
        description: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Group of answer choices'))
      }, choices.map(function (choice, index) {
        return _this6.renderChoice(choice, index);
      })));
    }
  }, {
    key: "renderOptionsDescription",
    value: function renderOptionsDescription() {
      return _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Multiple answer options'));
    }
  }, {
    key: "render",
    value: function render() {
      // clean up the references to ChoiceInputs
      this.choiceRefs = [];
      return _react.default.createElement("div", null, _react.default.createElement(_QuestionContainer.default, {
        disabled: this.props.overrideEditableForRegrading,
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.props.onDescriptionChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        renderImportModal: this.props.renderImportModal,
        stemErrors: this.props.getErrors('itemBody'),
        textareaRef: this.handleStemRef
      }, this.renderInputGroup(), !this.props.overrideEditableForRegrading && _react.default.createElement(_Footer.default, {
        onCreateChoice: this.handleCreateChoice
      })), _react.default.createElement(_QuestionSettingsContainer.default, {
        additionalOptions: this.props.additionalOptions
      }, _react.default.createElement(_QuestionSettingsPanel.default, {
        label: (0, _formatMessage.default)('Options'),
        defaultExpanded: true
      }, _react.default.createElement(_uiFormField.FormFieldGroup, {
        rowSpacing: "small",
        description: this.renderOptionsDescription()
      }, !this.props.hiddenOptions.calculator && _react.default.createElement(_CalculatorOptionWithOqaatAlert.default, {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), _react.default.createElement(_uiForms.Checkbox, {
        label: (0, _formatMessage.default)('Shuffle Choices'),
        onChange: this.handleShuffleChange,
        checked: this.isShuffled(),
        disabled: this.props.overrideEditableForRegrading
      })))));
    }
  }]);
  MultipleAnswerEdit.displayName = "MultipleAnswerEdit";
  return MultipleAnswerEdit;
}(_react.Component), _class2.interactionType = _multiple_answer.default, _class2.propTypes = _objectSpread({
  additionalOptions: _QuestionSettingsContainer.default.propTypes.additionalOptions,
  calculatorType: _propTypes.default.string,
  changeItemState: _propTypes.default.func,
  // TODO: This appears to be unused, can we remove it? Hard to tell with all of the indirection (i.e. withEditTools)
  errors: _propTypes.default.object,
  errorsAreShowing: _propTypes.default.bool,
  enableRichContentEditor: _propTypes.default.bool,
  hiddenOptions: _propTypes.default.shape({
    calculator: _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.isRequired,
  itemId: _propTypes.default.string,
  newId: _propTypes.default.func,
  notifyScreenreader: _propTypes.default.func,
  onModalClose: _propTypes.default.func,
  onModalOpen: _propTypes.default.func,
  oneQuestionAtATime: _propTypes.default.bool,
  overrideEditableForRegrading: _propTypes.default.bool,
  properties: _propTypes.default.shape({
    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.arrayOf(_propTypes.default.string)
  }).isRequired,
  setOneQuestionAtATime: _propTypes.default.func,
  openImportModal: _propTypes.default.func,
  renderImportModal: _propTypes.default.func
}, _withEditTools.default.injectedProps), _class2.defaultProps = {
  calculatorType: 'none',
  enableRichContentEditor: true,
  hiddenOptions: {
    calculator: true
  },
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  newId: _uuid.v4,
  notifyScreenreader: Function.prototype,
  setOneQuestionAtATime: Function.prototype,
  additionalOptions: void 0,
  changeItemState: void 0,
  errors: void 0,
  errorsAreShowing: void 0,
  itemId: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  renderImportModal: void 0
}, _temp)) || _class;

exports.default = MultipleAnswerEdit;