@instructure/quiz-core 21.1.1 → 21.2.0

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -1,10 +1,14 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _QuizEntryHeader;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -17,35 +21,32 @@ import { jsx, Global } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { IconBankLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { convertFITBtoRich } from "../../../../../../common/util/fitbCopyHelper.js";
-import PositionBox from "../../../../../../common/components/resources/positionBox/PositionBox.js";
-import Item from "../../../../../../common/records/Item.js";
-import ActionButtons from "../../../ActionButtons/index.js";
+import { convertFITBtoRich } from '../../../../../../common/util/fitbCopyHelper';
+import PositionBox from '../../../../../../common/components/resources/positionBox/PositionBox';
+import Item from '../../../../../../common/records/Item';
+import ActionButtons from '../../../ActionButtons';
 import { DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, BUILD_TRAY_OPEN, Flex, TextInput, withStyleOverrides } from '@instructure/quiz-common';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { View } from '@instructure/ui-view';
-var _ref2 = jsx(IconBankLine, null);
 var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizEntryHeader = /*#__PURE__*/function (_Component) {
-  _inherits(QuizEntryHeader, _Component);
-  var _super = _createSuper(QuizEntryHeader);
   function QuizEntryHeader() {
     var _this;
     _classCallCheck(this, QuizEntryHeader);
     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.connectDragSource = function (dragHandle) {
+    _this = _callSuper(this, QuizEntryHeader, [].concat(args));
+    _defineProperty(_this, "connectDragSource", function (dragHandle) {
       if (_this.shouldDisableDragHandle()) {
         return dragHandle;
       }
       return _this.props.connectDragSource(dragHandle);
-    };
-    _this.clearModifications = function () {
+    });
+    _defineProperty(_this, "clearModifications", function () {
       _this.props.clearModifications('items', _this.props.entry.id);
-    };
-    _this.removeTemporaryItem = function () {
+    });
+    _defineProperty(_this, "removeTemporaryItem", function () {
       var remove = function remove() {
         _this.props.hideError(_this.props.guid);
         _this.clearModifications();
@@ -56,91 +57,90 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         });
       };
       _this.props.withConfirm(remove, _this.removalDialogData());
-    };
-    _this.removeNormalItem = function () {
+    });
+    _defineProperty(_this, "removeNormalItem", function () {
       _this.props.withConfirm(partial(_this.props.removeQuizEntry, _this.props.quizId, _this.props.quizEntry), _this.removalDialogData());
-    };
-    _this.removeItem = function (e) {
+    });
+    _defineProperty(_this, "removeItem", function (e) {
       if (_this.props.disabledForRegrade) {
         return null;
       }
       _this.props.entry.isTemporary() ? _this.removeTemporaryItem() : _this.removeNormalItem();
-    };
-    _this.handleTitleChange = function (event) {
+    });
+    _defineProperty(_this, "handleTitleChange", function (event) {
       _this.props.changeItemTitle(_this.props.entry.id, event.target.value);
-    };
-    _this.storeTitleRef = function (el) {
+    });
+    _defineProperty(_this, "storeTitleRef", function (el) {
       _this.titleRef = el;
-    };
-    _this.copyItem = /*#__PURE__*/function () {
+    });
+    _defineProperty(_this, "copyItem", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
         var _this$props, quizId, workingQuizEntry, workingEntry, richFITBEnabled, richFITBInteractionID, msg, validationResult, interactionTypeData;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, quizId = _this$props.quizId, workingQuizEntry = _this$props.workingQuizEntry, workingEntry = _this$props.workingEntry, richFITBEnabled = _this$props.richFITBEnabled, richFITBInteractionID = _this$props.richFITBInteractionID;
-                msg = t('Question {displayPosition} cannot be saved due to invalid input data.', {
-                  displayPosition: _this.props.displayPosition
-                });
-                if (!_this.props.isValid) {
-                  _context.next = 14;
-                  break;
-                }
-                _context.next = 5;
-                return _this.props.successfulSubmit();
-              case 5:
-                validationResult = _context.sent;
-                if (!(validationResult === API_INPUT_VALIDATION_ERROR)) {
-                  _context.next = 9;
-                  break;
-                }
-                _this.props.screenreaderNotification(msg);
-                return _context.abrupt("return");
-              case 9:
-                interactionTypeData = {
-                  answerFeedback: workingEntry.answerFeedback,
-                  calculatorType: workingEntry.calculatorType,
-                  feedback: workingEntry.feedback,
-                  id: workingEntry.interactionType,
-                  interactionData: workingEntry.interactionData,
-                  itemBody: workingEntry.itemBody,
-                  outcomeAlignmentSetGuid: workingEntry.outcomeAlignmentSetGuid,
-                  properties: workingEntry.properties,
-                  scoringAlgorithm: workingEntry.scoringAlgorithm,
-                  scoringData: workingEntry.scoringData,
-                  title: workingEntry.title
-                };
-                if (richFITBEnabled && workingEntry.getInteractionType() instanceof FillBlankInteractionType) {
-                  interactionTypeData = convertFITBtoRich(interactionTypeData, richFITBInteractionID);
-                }
-                _this.props.createTempItem(quizId, Math.round(workingQuizEntry.position + 1), interactionTypeData, workingQuizEntry.stimulusQuizEntryId, workingEntry.stimulusId, workingQuizEntry.pointsPossible);
-                _context.next = 16;
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, quizId = _this$props.quizId, workingQuizEntry = _this$props.workingQuizEntry, workingEntry = _this$props.workingEntry, richFITBEnabled = _this$props.richFITBEnabled, richFITBInteractionID = _this$props.richFITBInteractionID;
+              msg = t('Question {displayPosition} cannot be saved due to invalid input data.', {
+                displayPosition: _this.props.displayPosition
+              });
+              if (!_this.props.isValid) {
+                _context.next = 14;
+                break;
+              }
+              _context.next = 5;
+              return _this.props.successfulSubmit();
+            case 5:
+              validationResult = _context.sent;
+              if (!(validationResult === API_INPUT_VALIDATION_ERROR)) {
+                _context.next = 9;
                 break;
-              case 14:
-                _this.props.screenreaderNotification(msg);
-                _this.props.showError(_this.props.guid);
-              case 16:
-              case "end":
-                return _context.stop();
-            }
+              }
+              _this.props.screenreaderNotification(msg);
+              return _context.abrupt("return");
+            case 9:
+              interactionTypeData = {
+                answerFeedback: workingEntry.answerFeedback,
+                calculatorType: workingEntry.calculatorType,
+                feedback: workingEntry.feedback,
+                id: workingEntry.interactionType,
+                interactionData: workingEntry.interactionData,
+                itemBody: workingEntry.itemBody,
+                outcomeAlignmentSetGuid: workingEntry.outcomeAlignmentSetGuid,
+                properties: workingEntry.properties,
+                scoringAlgorithm: workingEntry.scoringAlgorithm,
+                scoringData: workingEntry.scoringData,
+                title: workingEntry.title
+              };
+              if (richFITBEnabled && workingEntry.getInteractionType() instanceof FillBlankInteractionType) {
+                interactionTypeData = convertFITBtoRich(interactionTypeData, richFITBInteractionID);
+              }
+              _this.props.createTempItem(quizId, Math.round(workingQuizEntry.position + 1), interactionTypeData, workingQuizEntry.stimulusQuizEntryId, workingEntry.stimulusId, workingQuizEntry.pointsPossible);
+              _context.next = 16;
+              break;
+            case 14:
+              _this.props.screenreaderNotification(msg);
+              _this.props.showError(_this.props.guid);
+            case 16:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
       return function (_x) {
         return _ref.apply(this, arguments);
       };
-    }();
-    _this.handleBankClick = function () {
+    }());
+    _defineProperty(_this, "handleBankClick", function () {
       if (_this.props.newActiveBank) {
         var bankId = _this.props.workingQuizEntry.getEntry().id;
         _this.props.newActiveBank(bankId);
         _this.props.setUi(BUILD_TRAY_OPEN, true);
       }
-    };
+    });
     return _this;
   }
-  _createClass(QuizEntryHeader, [{
+  _inherits(QuizEntryHeader, _Component);
+  return _createClass(QuizEntryHeader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -160,6 +160,16 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         cancelText: t('Keep Question')
       };
     }
+  }, {
+    key: "isActiveBank",
+    get: function get() {
+      return this.props.quizEntry.isBank && this.props.newActiveBank;
+    }
+  }, {
+    key: "isBankEntry",
+    get: function get() {
+      return this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry;
+    }
   }, {
     key: "getVOText",
     value: function getVOText(verb, displayPosition) {
@@ -174,27 +184,19 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       });
     }
   }, {
-    key: "renderBankedContent",
-    value: function renderBankedContent() {
-      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-        return _ref2;
-      }
+    key: "renderItemName",
+    value: function renderItemName() {
+      return jsx(Text, {
+        size: "small",
+        weight: "normal",
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name);
     }
   }, {
-    key: "renderName",
-    value: function renderName() {
-      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
-      var dataAutomation = 'sdk-quiz-entry-interaction-type';
-      if (!isBank) {
-        return jsx(Text, {
-          size: "small",
-          weight: "normal",
-          "data-automation": dataAutomation
-        }, this.props.name);
-      }
+    key: "renderBankNameButton",
+    value: function renderBankNameButton() {
       return jsx(CondensedButton, {
         size: "small",
-        margin: "0 0 0 x-small",
         onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
@@ -220,14 +222,14 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         renderLabel: jsx(Flex, {
           direction: "column",
           gap: "small"
-        }, jsx(Flex.Item, {
+        }, !this.isBankEntry && jsx(Flex.Item, {
           "aria-hidden": true
-        }, this.renderName()), jsx(Flex.Item, {
+        }, this.renderItemName()), jsx(Flex.Item, {
           "aria-hidden": true
         }, t('Question Title')), jsx(ScreenReaderContent, null, titleLabelText)),
         type: "text",
         onChange: this.handleTitleChange,
-        value: workingEntry.title || '',
+        defaultValue: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
       });
@@ -242,15 +244,27 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       return jsx(Flex, {
         className: "leftHeader",
         direction: "row",
-        justifyItems: "center",
+        alignItems: "center",
         "data-automation": "sdk-quiz-entry-left-header"
       }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), jsx("div", {
-        css: this.props.styles.dividingLine
-      }), this.renderTitleHolder());
+      }), jsx(Flex.Item, {
+        shouldShrink: this.isActiveBank,
+        shouldGrow: !this.isActiveBank
+      }, jsx(Flex, {
+        direction: "row",
+        gap: this.isActiveBank ? 'x-small' : 'medium',
+        themeOverride: {
+          gapMedium: '1.25rem'
+        },
+        alignItems: "center"
+      }, this.isBankEntry && jsx(Flex.Item, null, jsx(IconBankLine, null)), this.isActiveBank ? jsx(Flex.Item, {
+        shouldShrink: true
+      }, this.renderBankNameButton()) : jsx(Flex.Item, {
+        shouldGrow: true
+      }, this.renderTitleHolder()))));
     }
   }, {
     key: "render",
@@ -278,16 +292,18 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       }), jsx(Flex, {
         className: "header",
         direction: "row",
-        gap: "small"
+        alignItems: this.isActiveBank ? 'center' : 'end',
+        gap: "small",
+        justifyItems: "space-between"
       }, jsx(Flex.Item, {
-        shouldShrink: false,
+        shouldShrink: this.isActiveBank,
         shouldGrow: true
-      }, this.renderLeftHeader()), jsx(Flex.Item, null, jsx(ActionButtons, actionButtonProps))));
+      }, this.renderLeftHeader()), jsx(Flex.Item, {
+        padding: this.isActiveBank ? '0' : '0 0 xx-small'
+      }, jsx(ActionButtons, actionButtonProps))));
     }
   }]);
-  QuizEntryHeader.displayName = "QuizEntryHeader";
-  return QuizEntryHeader;
-}(Component), _QuizEntryHeader.displayName = 'QuizEntryHeader', _QuizEntryHeader.componentId = "Quizzes".concat(_QuizEntryHeader.displayName), _QuizEntryHeader.propTypes = {
+}(Component), _defineProperty(_QuizEntryHeader, "displayName", 'QuizEntryHeader'), _defineProperty(_QuizEntryHeader, "componentId", "Quizzes".concat(_QuizEntryHeader.displayName)), _defineProperty(_QuizEntryHeader, "propTypes", {
   changeItemTitle: PropTypes.func.isRequired,
   // from connected component
   clearModifications: PropTypes.func.isRequired,
@@ -325,7 +341,7 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
   workingEntry: ImmutablePropTypes.record.isRequired,
   workingQuizEntry: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
-}, _QuizEntryHeader.defaultProps = {
+}), _defineProperty(_QuizEntryHeader, "defaultProps", {
   disabledForRegrade: false,
   initialFocusId: null,
   name: null,
@@ -333,5 +349,5 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
   richFITBEnabled: false,
   richFITBInteractionID: '',
   shouldClone: false
-}, _QuizEntryHeader)) || _class);
+}), _QuizEntryHeader)) || _class);
 export default QuizEntryHeader;

package/es/building/components/resources/quizEntry/QuizEntryEdit/index.js

@@ -1,17 +1,17 @@
 import { Map } from 'immutable';
 import { bindActionCreators } from 'redux';
-import { connect } from "../../../../../common/react-redux.js";
-import makeEditable from "../../../../../common/components/shared/functionality/makeEditable.js";
-import * as alertActions from "../../../../../common/actions/alerts.js";
-import * as errorsShowingActions from "../../../../../common/actions/errorsShowing.js";
-import * as itemApiActions from "../../../../api/items.js";
-import * as modalActions from "../../../../../common/actions/modal.js";
-import { set as setUI, newActiveBank } from "../../../../../common/actions/ui.js";
-import * as modificationActions from "../../../../../common/actions/modifications.js";
-import * as quizEntryApiActions from "../../../../api/quizEntries.js";
-import { featureOn } from "../../../../../common/util/featureCheck.js";
+import { connect } from '../../../../../common/react-redux';
+import makeEditable from '../../../../../common/components/shared/functionality/makeEditable';
+import * as alertActions from '../../../../../common/actions/alerts';
+import * as errorsShowingActions from '../../../../../common/actions/errorsShowing';
+import * as itemApiActions from '../../../../api/items';
+import * as modalActions from '../../../../../common/actions/modal';
+import { set as setUI, newActiveBank } from '../../../../../common/actions/ui';
+import * as modificationActions from '../../../../../common/actions/modifications';
+import * as quizEntryApiActions from '../../../../api/quizEntries';
+import { featureOn } from '../../../../../common/util/featureCheck';
 import { ADD_CONTENT_POPOVER_KEY } from '@instructure/quiz-common';
-import QuizEntryEdit from "./presenter.js";
+import QuizEntryEdit from './presenter';
 function mapStateToProps(state, props) {
   // Error Related:
   var workingEntry = props.entry.getWorkingInstance();