@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

package/lib/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -0,0 +1,435 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizEntry = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _immutable = require("immutable");
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../../../../../common/components/resources/WarningWrapper/index.js"));
+
+var _warningHelpers = require("../../../../../common/util/warningHelpers.js");
+
+var _QuizEntry = _interopRequireDefault(require("../../../../../common/records/QuizEntry.js"));
+
+var _index2 = _interopRequireDefault(require("../QuizEntryBank/QuizEntryBankShow/index.js"));
+
+var _index3 = _interopRequireDefault(require("../QuizEntryBank/QuizEntryBankEdit/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../../../common/components/resources/item/ItemEdit/index.js"));
+
+var _index5 = _interopRequireDefault(require("../../../../../common/components/resources/item/ItemShow/index.js"));
+
+var _index6 = _interopRequireDefault(require("../../../../../common/components/resources/item/ItemOverride/index.js"));
+
+var _index7 = _interopRequireDefault(require("../../AddToBankOptions/index.js"));
+
+var _index8 = _interopRequireDefault(require("../../../../../common/components/shared/TagDisplay/index.js"));
+
+var _Item = _interopRequireDefault(require("../../../../../common/records/Item.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index9 = _interopRequireDefault(require("../QuizEntryShow/index.js"));
+
+var _index10 = _interopRequireDefault(require("../QuizEntryEdit/index.js"));
+
+var _index11 = _interopRequireDefault(require("../../../../../common/components/resources/stimulus/Stimulus/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'erzHq',
+  template: function template(theme) {
+    return "\n\n.erzHq_cjWK{border-top:".concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";overflow:auto;padding:").concat(theme.footerPadding || 'inherit', "}\n\n.erzHq_fpkp{display:none}\n\n@media print{.erzHq_fpkp{display:inherit}.erzHq_dcyh{display:none}}");
+  },
+  'footer': 'erzHq_cjWK',
+  'sampleItems': 'erzHq_fpkp',
+  'bankItem': 'erzHq_dcyh'
+};
+var QuizEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizEntry, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizEntry);
+
+  function QuizEntry() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizEntry);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.itemOverrideTypes = function () {
+      return ['choice'].concat((0, _toConsumableArray2.default)(_this.props.partialScoringEnabled ? ['multi-answer'] : []));
+    };
+
+    _this.openRegradeModal = function () {
+      if (_this.props.regradingOn) {
+        _this.props.openModal(_quizCommon.REGRADE_MODAL);
+      }
+    };
+
+    _this.renderItemBankingOptions = function () {
+      return /*#__PURE__*/_react.default.createElement(_index7.default, {
+        displayPosition: _this.props.displayPosition,
+        entryType: _this.props.quizEntry.entryType,
+        guid: _this.props.guid,
+        isValid: _this.props.workingEntry.isValid(),
+        openModal: _this.props.openModal,
+        screenreaderNotification: _this.props.screenreaderNotification,
+        showError: _this.props.showError,
+        "data-automation": "sdk-item-banking-options"
+      });
+    };
+
+    _this.storeDndComponentRef = function (node) {
+      _this.dndComponent = node;
+    };
+
+    _this.handleQuizEntryPointsChange = function (points) {
+      _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, points);
+    };
+
+    _this.renderPrintableItemBankSample = function (sampleItem, index) {
+      var quizEntry = _QuizEntry.default.create(sampleItem.toObject());
+
+      var entryMutable = quizEntry.entry.toJS();
+
+      var item = _Item.default.create(entryMutable);
+
+      var overrideProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.props), {}, {
+        quizEntry: quizEntry,
+        entry: item,
+        displayPosition: _this.props.displayPosition + index,
+        interactionTypeName: entryMutable.interactionType.name
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: styles.sampleItems
+      }, /*#__PURE__*/_react.default.createElement(_index9.default, overrideProps, /*#__PURE__*/_react.default.createElement(_index5.default, _this.propsForItem(item))));
+    };
+
+    _this.bankEntryWarningWrapperProps = function () {
+      if (_this.props.quizEntry.entryEditable) {
+        var propsFunc = _this.props.quizEntry.hasStimulus ? _warningHelpers.propsForStimulusBankEntryEditPrompt : _warningHelpers.propsForItemBankEntryEditPrompt;
+        return propsFunc(_this.isEditing(), _this.props.switchOffEditing, function () {
+          var bankEntry = _this.props.quizEntry.getEntry();
+
+          _this.props.setUi(_quizCommon.BUILD_TRAY_OPEN, true);
+
+          _this.props.newActiveBankEntry(bankEntry.id, bankEntry.bankId);
+
+          _this.props.newActiveBank(bankEntry.bankId);
+
+          _this.props.switchOffEditing();
+        });
+      }
+
+      return (0, _warningHelpers.propsForBankEntryUnauthorizedEdit)(_this.isEditing());
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizEntry, [{
+    key: "additionalEditOptions",
+    value: function additionalEditOptions(item) {
+      var options = [];
+
+      if (this.props.quizEntry.entryType === 'Item') {
+        options.push({
+          key: 'banks',
+          title: (0, _formatMessage.default)('Item Banking'),
+          component: this.renderItemBankingOptions()
+        });
+      }
+
+      return options;
+    }
+  }, {
+    key: "propsForItem",
+    value: function propsForItem() {
+      var customItem = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+      var item = customItem || this.props.entry;
+      return {
+        additionalOptions: this.additionalEditOptions(item),
+        entry: item,
+        guid: customItem ? customItem.id : this.props.guid,
+        handleQuizEntryPointsChange: this.handleQuizEntryPointsChange,
+        parentId: this.props.quizId,
+        parentType: _quizCommon.PARENT_TYPE_QUIZ,
+        switchOffEditing: this.props.switchOffEditing,
+        switchOnEditing: this.props.switchOnEditing,
+        title: item.title,
+        initialFocusId: this.props.initialFocusId,
+        validationErrorsFromApi: this.props.validationErrorsFromApi,
+        clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi
+      };
+    }
+  }, {
+    key: "quizEntryProps",
+    value: function quizEntryProps() {
+      var entry = this.props.entry;
+      return Object.assign({
+        entry: entry,
+        openRegradeModal: this.openRegradeModal,
+        name: entry.getInteractionType().name,
+        initialFocusId: this.props.initialFocusId,
+        handleValidationErrorsFromApi: this.props.handleValidationErrorsFromApi,
+        clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi,
+        haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length)
+      }, (0, _pick.default)(this.props, ['displayPosition', 'guid', 'draggingOnBuild', 'newHoverPosition', 'quizEntry', 'quizEntries', 'quizId', 'setUi', 'switchOffEditing', 'switchOnEditing', 'shouldClone', 'scrollKey', 'editQuizEntryToggle', 'onEditQuizEntryToggle', 'stimulusOrientation']));
+    }
+  }, {
+    key: "isEditing",
+    value: function isEditing() {
+      var isTemporary = this.props.entry.isTemporary && this.props.entry.isTemporary();
+      return this.props.isEditing || isTemporary;
+    }
+  }, {
+    key: "renderItem",
+    value: function renderItem() {
+      var isEditing = this.isEditing();
+      var _this$props = this.props,
+          entry = _this$props.entry,
+          shouldClone = _this$props.shouldClone,
+          quizEntry = _this$props.quizEntry;
+      var QuizEntryComponent = isEditing ? _index10.default : _index9.default;
+      var ItemComponent = isEditing && (!entry.isImmutable() || shouldClone) ? _index4.default : _index5.default;
+      var itemProps = this.propsForItem();
+      var quizEntryProps = this.quizEntryProps();
+      var propsForWrapperFunc = quizEntry.isArchivedBankEntry ? _warningHelpers.propsForBankEntryVersioningWrapper : _warningHelpers.propsForItemVersioningWrapper;
+      var propsForItemVersioning = propsForWrapperFunc(entry.isImmutable() || quizEntry.isArchivedBankEntry, shouldClone, (0, _partial.default)(this.props.setUi, _quizCommon.SHOULD_CLONE_ITEM), this.props.switchOffEditing, isEditing, quizEntry.isArchivedBankEntry ? 'info' : 'warning');
+      return /*#__PURE__*/_react.default.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/_react.default.createElement(_index.default, propsForItemVersioning, /*#__PURE__*/_react.default.createElement(ItemComponent, itemProps)));
+    }
+  }, {
+    key: "renderBank",
+    value: function renderBank() {
+      var QuizEntryComponent = this.props.isEditing ? _index10.default : _index9.default;
+      var QuizEntryBankComponent = this.props.isEditing ? _index3.default : _index2.default;
+      var bank = this.props.entry;
+      var bankProps = {
+        title: bank.title,
+        entry: bank,
+        name: bank.title
+      };
+      var sampleItems = this.props.quizEntry.sampleItems;
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankItem
+      }, /*#__PURE__*/_react.default.createElement(QuizEntryComponent, Object.assign({}, this.props, bankProps), /*#__PURE__*/_react.default.createElement(QuizEntryBankComponent, Object.assign({}, this.props, bankProps)))), sampleItems.map(this.renderPrintableItemBankSample));
+    }
+  }, {
+    key: "isOverridable",
+    value: function isOverridable() {
+      if (typeof this.props.entry.getInteractionType !== 'function') return false;
+      return this.itemOverrideTypes().includes(this.props.entry.getInteractionType().slug);
+    }
+  }, {
+    key: "isOverriding",
+    value: function isOverriding() {
+      return this.isOverridable() && this.isEditing();
+    }
+  }, {
+    key: "renderBankEntry",
+    value: function renderBankEntry() {
+      var bankEntryWarningWrapperProps = this.bankEntryWarningWrapperProps();
+
+      if (this.props.quizEntry.hasStimulus) {
+        return this.renderStimulus(this.bankEntryWarningWrapperProps);
+      }
+
+      var overrideProps = {
+        title: this.props.entry.title,
+        isBankedContent: true
+      };
+      var quizEntryProps = Object.assign({}, this.props, overrideProps);
+      var QuizEntryComponent = this.isEditing() ? _index10.default : _index9.default;
+      var itemProps = this.propsForItem();
+      var mergedItem = this.isEditing() ? this.props.quizEntry.getWorkingInstance().getItem() : itemProps.entry;
+      var ItemComponent = this.isOverriding() ? _index6.default : _index5.default;
+      return /*#__PURE__*/_react.default.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, bankEntryWarningWrapperProps, {
+        disableChildren: this.isEditing() && !this.isOverridable()
+      }), /*#__PURE__*/_react.default.createElement(ItemComponent, Object.assign({}, itemProps, {
+        entry: mergedItem,
+        quizEntry: this.props.quizEntry
+      }))), this.renderFooter());
+    }
+  }, {
+    key: "renderStimulus",
+    value: function renderStimulus(bankEntryWarningWrapperProps) {
+      return /*#__PURE__*/_react.default.createElement(_index11.default, {
+        bankEntryWarningWrapperProps: bankEntryWarningWrapperProps,
+        childEntries: this.props.childEntries,
+        displayPosition: this.props.displayPosition,
+        dndRef: this.storeDndComponentRef,
+        guid: this.props.guid,
+        isBankedContent: bankEntryWarningWrapperProps !== void 0,
+        isEditing: this.isEditing(),
+        draggingOnBuild: this.props.draggingOnBuild,
+        newHoverPosition: this.props.newHoverPosition // used for DnD
+        ,
+        propsForQuizEntry: this.props.propsForQuizEntry,
+        quizEntry: this.props.quizEntry,
+        quizEntries: this.props.quizEntries,
+        quizId: this.props.quizId,
+        scrollKey: this.props.scrollKey,
+        shouldClone: this.props.shouldClone,
+        stimulus: this.props.entry,
+        switchOnEditing: this.props.switchOnEditing,
+        switchOffEditing: this.props.switchOffEditing,
+        editStimulusToggle: this.props.editQuizEntryToggle,
+        onEditStimulusToggle: this.props.onEditQuizEntryToggle
+      });
+    }
+  }, {
+    key: "renderTags",
+    value: function renderTags() {
+      return /*#__PURE__*/_react.default.createElement(_index8.default, {
+        tagAssociations: this.props.tagAssociations
+      });
+    }
+  }, {
+    key: "renderFooter",
+    value: function renderFooter() {
+      if (!this.props.useBankTags) {
+        return null;
+      } // Footer currently only contains tags, so don't render if no tags
+
+
+      if (this.props.tagAssociations == null || this.props.tagAssociations.isEmpty()) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.footer
+      }, this.renderTags());
+    }
+  }, {
+    key: "renderQuizEntryByType",
+    value: function renderQuizEntryByType() {
+      if (this.props.quizEntry.isArchivedBankEntry) {
+        if (this.props.quizEntry.hasStimulus) {
+          return this.renderStimulus();
+        } else {
+          return this.renderItem();
+        }
+      }
+
+      if (this.props.quizEntry.isItem) {
+        return this.renderItem();
+      } else if (this.props.quizEntry.isBankEntry) {
+        return this.renderBankEntry();
+      } else if (this.props.quizEntry.isBank) {
+        return this.renderBank();
+      } else if (this.props.quizEntry.isStimulus) {
+        return this.renderStimulus();
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.connectDropTarget( /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: "-1"
+      }, this.renderQuizEntryByType()));
+    }
+  }]);
+  QuizEntry.displayName = "QuizEntry";
+  return QuizEntry;
+}(_react.Component), _class2.propTypes = {
+  changeQuizEntryPoints: _propTypes.default.func.isRequired,
+  childEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record),
+  connectDropTarget: _propTypes.default.func.isRequired,
+  // injected by DnD
+  displayPosition: _propTypes.default.number.isRequired,
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  initialFocusId: _propTypes.default.string,
+  isEditing: _propTypes.default.bool,
+  draggingOnBuild: _propTypes.default.bool,
+  newActiveBank: _propTypes.default.func.isRequired,
+  newActiveBankEntry: _propTypes.default.func.isRequired,
+  newHoverPosition: _propTypes.default.func.isRequired,
+  // used for DnD
+  openModal: _propTypes.default.func.isRequired,
+  partialScoringEnabled: _propTypes.default.bool,
+  propsForQuizEntry: _propTypes.default.func.isRequired,
+  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  regradingOn: _propTypes.default.bool.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  scrollKey: _propTypes.default.string,
+  setUi: _propTypes.default.func.isRequired,
+  shouldClone: _propTypes.default.bool,
+  showError: _propTypes.default.func.isRequired,
+  switchOffEditing: _propTypes.default.func.isRequired,
+  switchOnEditing: _propTypes.default.func.isRequired,
+  tagAssociations: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  useBankTags: _propTypes.default.bool,
+  workingEntry: _reactImmutableProptypes.default.record.isRequired,
+  editQuizEntryToggle: _propTypes.default.bool.isRequired,
+  onEditQuizEntryToggle: _propTypes.default.func.isRequired,
+  handleValidationErrorsFromApi: _propTypes.default.func.isRequired,
+  clearValidationErrorsFromApi: _propTypes.default.func.isRequired,
+  validationErrorsFromApi: _propTypes.default.objectOf(_propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    text: _propTypes.default.string
+  }))),
+  stimulusOrientation: _propTypes.default.string
+}, _class2.defaultProps = {
+  childEntries: (0, _immutable.List)(),
+  draggingAboveHalf: false,
+  draggingOnBuild: false,
+  draggingOver: false,
+  initialFocusId: null,
+  isEditing: false,
+  partialScoringEnabled: false,
+  scrollKey: void 0,
+  shouldClone: false,
+  tagAssociations: (0, _immutable.List)(),
+  useBankTags: false,
+  validationErrorsFromApi: {},
+  stimulusOrientation: null
+}, _temp)) || _class);
+exports.QuizEntry = QuizEntry;
+var _default = QuizEntry;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntry/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      borders = _ref.borders,
+      typography = _ref.typography;
+  return {
+    footerPadding: spacing.small,
+    footerBorderWidth: borders.widthSmall,
+    footerBorderColor: colors.tiara,
+    footerFontSize: typography.fontSizeXSmall
+  };
+}

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _reactRedux = require("../../../../../../common/react-redux.js");
+
+var _modifications = require("../../../../../../common/actions/modifications.js");
+
+var _quizEntries = require("../../../../../api/quizEntries.js");
+
+function mapStateToProps(state, props) {
+  var workingQuizEntry = props.quizEntry.getWorkingInstance();
+  var properties = workingQuizEntry.properties;
+  var sampleNum = properties.get('sampleNum');
+  var selection = sampleNum > 0 ? 'rand' : 'all';
+  return {
+    workingBank: workingQuizEntry.getEntry(),
+    workingQuizEntry: workingQuizEntry,
+    questionSelection: properties.get('selection', selection),
+    sampleNum: sampleNum,
+    pointsPossible: workingQuizEntry.pointsPossible
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, {
+  changeQuizEntryPoints: _modifications.changeQuizEntryPoints,
+  changeQuizEntryProperties: _modifications.changeQuizEntryProperties,
+  changeQuizEntryEntry: _modifications.changeQuizEntryEntry,
+  clearModifications: _modifications.clearModifications,
+  updateQuizEntry: _quizEntries.updateQuizEntry
+})(_presenter.default);
+
+exports.default = _default;