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

package/lib/common/components/shared/drag_and_drop/DragAndDropZone/index.js

@@ -0,0 +1,126 @@
+"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.DragAndDropZone = void 0;
+
+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 _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 _classnames3 = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cSfbM',
+  template: function template(theme) {
+    return "\n\n.cSfbM_ffKt{background-color:".concat(theme.DnDZoneBackgroundColor || 'inherit', ";border:").concat(theme.DnDZoneBorderWidth || 'inherit', " dashed ").concat(theme.DnDZoneBorderColor || 'inherit', ";display:flex;padding:").concat(theme.DnDZonePadding || 'inherit', "}\n\n.cSfbM_ffKt,.cSfbM_dDZW{justify-content:center;width:100%}\n\n.cSfbM_dDZW{background-color:").concat(theme.sidebarDnDZoneBackgroundColor || 'inherit', ";border:").concat(theme.sidebarDnDZoneBorderWidth || 'inherit', " dashed ").concat(theme.sidebarDnDZoneBorderColor || 'inherit', ";color:").concat(theme.sidebarDnDZoneColor || 'inherit', ";margin:").concat(theme.sidebarDnDZoneMargin || 'inherit', ";padding:").concat(theme.sidebarDnDZonePadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cSfbM_dDZW,[dir=rtl] .cSfbM_dDZW{text-align:center}\n\n.cSfbM_dDZW.cSfbM_baAw{margin-left:10%;width:90%}\n\n.cSfbM_gasz{display:flex;flex:1 0 100%;justify-content:center;width:100%}\n\n.cSfbM_bBLs{display:none;width:100%}");
+  },
+  'DnDZone': 'cSfbM_ffKt',
+  'sidebarDnDZone': 'cSfbM_dDZW',
+  'inSidebarStimulus': 'cSfbM_baAw',
+  'wrapper': 'cSfbM_gasz',
+  'hide': 'cSfbM_bBLs'
+};
+var DragAndDropZone = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DragAndDropZone, _Component);
+
+  var _super = (0, _createSuper2.default)(DragAndDropZone);
+
+  function DragAndDropZone() {
+    (0, _classCallCheck2.default)(this, DragAndDropZone);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(DragAndDropZone, [{
+    key: "shouldRender",
+    value: function shouldRender() {
+      var _this$props = this.props,
+          inSidebar = _this$props.inSidebar,
+          sidebarOpen = _this$props.sidebarOpen,
+          inStimulus = _this$props.inStimulus,
+          location = _this$props.location,
+          draggingOver = _this$props.draggingOver,
+          draggingAboveHalf = _this$props.draggingAboveHalf,
+          dropIntoEmptyStimulus = _this$props.dropIntoEmptyStimulus;
+
+      if (inSidebar && !sidebarOpen) {
+        return false;
+      }
+
+      if (inStimulus) {
+        if (location === 'above') {
+          return draggingOver && draggingAboveHalf && !dropIntoEmptyStimulus;
+        } else if (location === 'below') {
+          return draggingOver && !draggingAboveHalf && !dropIntoEmptyStimulus;
+        } else if (location === 'in') {
+          return draggingOver && dropIntoEmptyStimulus;
+        }
+      } else if (location === 'above') {
+        return draggingOver && draggingAboveHalf;
+      } else if (location === 'below') {
+        return draggingOver && !draggingAboveHalf;
+      }
+
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames;
+
+      var _this$props2 = this.props,
+          inSidebar = _this$props2.inSidebar,
+          inStimulus = _this$props2.inStimulus;
+      var style = (0, _classnames3.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.DnDZone, !inSidebar), (0, _defineProperty2.default)(_classnames, styles.sidebarDnDZone, inSidebar), (0, _defineProperty2.default)(_classnames, styles.inSidebarStimulus, inSidebar && inStimulus), _classnames));
+      var wrapper = (0, _classnames3.default)(styles.wrapper, (0, _defineProperty2.default)({}, styles.hide, !this.shouldRender()));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: style
+      }, (0, _formatMessage.default)('Drop Question Here')));
+    }
+  }]);
+  DragAndDropZone.displayName = "DragAndDropZone";
+  return DragAndDropZone;
+}(_react.Component), _class2.propTypes = {
+  draggingAboveHalf: _propTypes.default.bool.isRequired,
+  draggingOver: _propTypes.default.bool.isRequired,
+  dropIntoEmptyStimulus: _propTypes.default.bool,
+  inSidebar: _propTypes.default.bool,
+  inStimulus: _propTypes.default.bool,
+  location: _propTypes.default.oneOf(['above', 'below', 'in']).isRequired,
+  sidebarOpen: _propTypes.default.bool
+}, _class2.defaultProps = {
+  draggingAboveHalf: false,
+  draggingOver: false,
+  dropIntoEmptyStimulus: false,
+  inSidebar: false,
+  inStimulus: false,
+  sidebarOpen: true
+}, _temp)) || _class);
+exports.DragAndDropZone = DragAndDropZone;
+var _default = DragAndDropZone;
+exports.default = _default;

package/lib/common/components/shared/drag_and_drop/DragAndDropZone/theme.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      borders = _ref.borders;
+  return {
+    DnDZoneBorderWidth: borders.widthSmall,
+    DnDZoneBorderColor: colors.tiara,
+    DnDZoneBackgroundColor: colors.porcelain,
+    DnDZonePadding: spacing.medium,
+    // sidebar:
+    sidebarDnDZoneBorderWidth: borders.widthSmall,
+    sidebarDnDZoneBorderColor: colors.oxford,
+    sidebarDnDZoneBackgroundColor: colors.porcelain,
+    sidebarDnDZonePadding: spacing.small,
+    sidebarDnDZoneMargin: spacing.xSmall,
+    sidebarDnDZoneColor: colors.licorice
+  };
+}

package/lib/common/components/shared/drag_and_drop/DragHandle/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.mapStateToProps = void 0;
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _makeEditable = _interopRequireDefault(require("../../../../../common/components/shared/functionality/makeEditable.js"));
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _alerts = require("../../../../../common/actions/alerts.js");
+
+var _modifications = require("../../../../../common/actions/modifications.js");
+
+var _quizEntries = require("../../../../../building/api/quizEntries.js");
+
+var _ui = require("../../../../../common/actions/ui.js");
+
+var _modal = require("../../../../../common/actions/modal.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _quizzes = require("../../../../selectors/quizzes.js");
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  var activeQuiz = (0, _quizzes.getActiveQuiz)(state);
+  return {
+    movedInSidebar: state.getIn(['ui', _quizCommon.MOVED_IN_SIDEBAR]),
+    movedQuizEntry: state.getIn(['ui', _quizCommon.MOVED_QUIZ_ENTRY]),
+    quizId: activeQuiz.id
+  };
+};
+
+exports.mapStateToProps = mapStateToProps;
+var mapDispatchToProps = {
+  clearUI: _ui.clear,
+  moveQuizEntry: _quizEntries.moveQuizEntry,
+  moveTemporaryQuizEntry: _modifications.moveTemporaryQuizEntry,
+  openMoveImmutableModal: _modal.openMoveImmutableModal,
+  screenreaderNotification: _alerts.screenreaderNotification,
+  setUI: _ui.set
+};
+
+var _default = (0, _makeEditable.default)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default));
+
+exports.default = _default;

package/lib/common/components/shared/drag_and_drop/DragHandle/presenter.js

@@ -0,0 +1,324 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DragHandle = void 0;
+
+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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _immutable = require("immutable");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiMenu = require("@instructure/ui-menu");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _keyboardClickable = _interopRequireDefault(require("../../../../../common/util/keyboardClickable.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowUpLine, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconMiniArrowUpLine, null);
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconMiniArrowDownLine, null);
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowDownLine, null);
+
+var DragHandle = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DragHandle, _Component);
+
+  var _super = (0, _createSuper2.default)(DragHandle);
+
+  function DragHandle() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, DragHandle);
+
+    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.moveUp = function () {
+      _this.moveToPosition(_this.props.quizEntry.position - 1);
+
+      var msg = (0, _formatMessage.default)('Item moved one space up.');
+
+      _this.props.screenreaderNotification(msg);
+    };
+
+    _this.moveDown = function () {
+      _this.moveToPosition(_this.props.quizEntry.position + 1);
+
+      var msg = (0, _formatMessage.default)('Item moved one space down.');
+
+      _this.props.screenreaderNotification(msg);
+    };
+
+    _this.moveToTop = function () {
+      _this.moveQuizEntry(1, '');
+
+      var msg = (0, _formatMessage.default)('Item moved to top of assessment.');
+
+      _this.props.screenreaderNotification(msg);
+    };
+
+    _this.moveToBottom = function () {
+      _this.moveQuizEntry(_this.props.quizEntries.size, '');
+
+      var msg = (0, _formatMessage.default)('Item moved to bottom of assessment.');
+
+      _this.props.screenreaderNotification(msg);
+    };
+
+    _this.handleTriggerRef = function (node) {
+      _this.triggerRef = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(DragHandle, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.conditionalFocus();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.conditionalFocus();
+    }
+  }, {
+    key: "conditionalFocus",
+    value: function conditionalFocus() {
+      var matchingQuizEntryId = this.props.movedQuizEntry === this.props.quizEntry.id;
+      var matchingLocation = this.props.onSidebar === this.props.movedInSidebar;
+
+      if (matchingQuizEntryId && matchingLocation) {
+        this.triggerRef && this.triggerRef.focus();
+        this.props.clearUI(_quizCommon.MOVED_QUIZ_ENTRY);
+        this.props.clearUI(_quizCommon.MOVED_IN_SIDEBAR);
+      }
+    }
+  }, {
+    key: "isFirstItem",
+    value: function isFirstItem() {
+      return this.props.quizEntry.position === 1;
+    }
+  }, {
+    key: "isLastItem",
+    value: function isLastItem() {
+      var _this$props = this.props,
+          quizEntry = _this$props.quizEntry,
+          quizEntries = _this$props.quizEntries;
+      var numItems = quizEntry.hasStimulus ? quizEntry.getNestedEntries().size : 0;
+      var position = quizEntry.position + numItems;
+      return position === quizEntries.size;
+    }
+  }, {
+    key: "handleMove",
+    value: function handleMove(position, stimulusQuizEntryId) {
+      var _this$props2 = this.props,
+          quizEntry = _this$props2.quizEntry,
+          quizId = _this$props2.quizId;
+      var stimulusQuizEntryIdChanged = stimulusQuizEntryId !== quizEntry.stimulusQuizEntryId;
+      var isImmutable = quizEntry.isItem ? quizEntry.getEntry().isImmutable() : false;
+
+      if (isImmutable && stimulusQuizEntryIdChanged) {
+        var uiData = (0, _immutable.Map)({
+          movedInSidebar: this.props.onSidebar,
+          quizId: quizId,
+          position: position,
+          stimulusQuizEntryId: stimulusQuizEntryId,
+          quizEntryId: quizEntry.id
+        });
+        this.props.setUI(_quizCommon.MOVE_IMMUTABLE_DATA, uiData);
+        this.props.openMoveImmutableModal();
+      } else {
+        this.props.setUI(_quizCommon.MOVED_IN_SIDEBAR, this.props.onSidebar);
+        this.props.moveQuizEntry(quizId, position, stimulusQuizEntryId, quizEntry.id);
+      }
+    }
+  }, {
+    key: "moveQuizEntry",
+    value: function moveQuizEntry(position, stimulusQuizEntryId) {
+      this.props.quizEntry.isTemporary ? this.props.moveTemporaryQuizEntry(position, stimulusQuizEntryId) : this.handleMove(position, stimulusQuizEntryId);
+    }
+  }, {
+    key: "moveToPosition",
+    value: function moveToPosition(position) {
+      var quizEntry = this.props.quizEntry;
+      var movingDown = position > quizEntry.position;
+      var newPosition = position;
+
+      if (movingDown && quizEntry.hasStimulus) {
+        newPosition = position + quizEntry.getNestedEntries().size;
+      }
+
+      var targetQuizEntry = this.props.quizEntries.find(function (qe) {
+        return qe.position === newPosition;
+      });
+
+      if (targetQuizEntry === void 0) {
+        var newPos = movingDown ? this.props.quizEntries.size : 1;
+        this.moveQuizEntry(newPos, '');
+        return;
+      }
+
+      var inStimulus = quizEntry.isInStimulus;
+      var targetInStimulus = targetQuizEntry.isInStimulus;
+      var losingStimulusQuizEntryId = inStimulus && !targetInStimulus;
+      var receivingStimulusQuizEntryId = !inStimulus && targetInStimulus;
+      var newStimulusQuizEntryId = quizEntry.stimulusQuizEntryId; // Handling moving of stimulus groups:
+
+      if (quizEntry.hasStimulus) {
+        if (movingDown && targetQuizEntry.hasStimulus) {
+          newPosition += targetQuizEntry.getNestedEntries().size;
+        } else if (!movingDown && targetInStimulus) {
+          var targetStimulusQuizEntry = this.props.quizEntries.find(function (qe) {
+            return qe.id === targetQuizEntry.stimulusQuizEntryId;
+          });
+          newPosition = position - targetStimulusQuizEntry.getNestedEntries().size;
+        } // This block is for handling moving of items in/out/around stimuli.
+        // For example, when moving down, out of a stimulus group, you don't actually
+        // want the position of the quizEntry to change, you just want to change the
+        // stimulusQuizEntryId, so that it's no longer associated with the stimulus.
+        // There are 4 such cases:
+
+      } else if (targetQuizEntry.hasStimulus && !inStimulus) {
+        newPosition = movingDown ? position : position + 1;
+        newStimulusQuizEntryId = targetQuizEntry.id;
+      } else if (targetQuizEntry.hasStimulus && inStimulus) {
+        newPosition = movingDown ? position - 1 : position;
+        newStimulusQuizEntryId = '';
+      } else if (receivingStimulusQuizEntryId && !movingDown) {
+        newPosition = position + 1;
+        newStimulusQuizEntryId = targetQuizEntry.stimulusQuizEntryId;
+      } else if (losingStimulusQuizEntryId && movingDown) {
+        newPosition = position - 1;
+        newStimulusQuizEntryId = '';
+      }
+
+      this.moveQuizEntry(newPosition, newStimulusQuizEntryId);
+    }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button // must be a button when disabled for the screenreader to read it properly
+      // must be a div when enabled to allow dragging in firefox
+      , {
+        as: this.props.disabled ? 'button' : 'div',
+        variant: "icon",
+        icon: _uiIcons.IconDragHandleLine,
+        size: "small",
+        ref: this.handleTriggerRef,
+        onKeyDown: _keyboardClickable.default,
+        disabled: this.props.disabled,
+        "data-automation": "sdk-drag-handle",
+        cursor: "move"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.MOVE)));
+    }
+  }, {
+    key: "renderMenuItems",
+    value: function renderMenuItems() {
+      var menuItems = [];
+
+      if (!this.isFirstItem()) {
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "toTop",
+          onSelect: this.moveToTop
+        }, _ref, (0, _formatMessage.default)('Move to Top')));
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "moveUp",
+          onSelect: this.moveUp
+        }, _ref2, (0, _formatMessage.default)('Move Up')));
+      }
+
+      if (!this.isLastItem() || this.props.quizEntry.isInStimulus) {
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "moveDown",
+          onSelect: this.moveDown
+        }, _ref3, (0, _formatMessage.default)('Move Down')));
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "toBottom",
+          onSelect: this.moveToBottom
+        }, _ref4, (0, _formatMessage.default)('Move to Bottom')));
+      }
+
+      return menuItems;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var menuItems = this.renderMenuItems();
+
+      if (!this.props.disabled && menuItems.length > 0) {
+        return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
+          trigger: this.renderIcon(),
+          onToggle: this.setFocused,
+          mountNode: this.props.onSidebar ? this.sidebarNav : void 0,
+          placement: this.props.onSidebar ? 'start' : void 0
+        }, menuItems);
+      }
+
+      return this.renderIcon();
+    }
+  }, {
+    key: "sidebarNav",
+    get: function get() {
+      return document.getElementById(_quizCommon.SIDEBAR_NAV_ID);
+    }
+  }]);
+  DragHandle.displayName = "DragHandle";
+  return DragHandle;
+}(_react.Component);
+
+exports.DragHandle = DragHandle;
+DragHandle.propTypes = {
+  clearUI: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  displayPosition: _propTypes.default.number.isRequired,
+  moveTemporaryQuizEntry: _propTypes.default.func.isRequired,
+  moveQuizEntry: _propTypes.default.func.isRequired,
+  movedInSidebar: _propTypes.default.bool,
+  movedQuizEntry: _propTypes.default.string,
+  onSidebar: _propTypes.default.bool,
+  openMoveImmutableModal: _propTypes.default.func.isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  setUI: _propTypes.default.func.isRequired
+};
+DragHandle.defaultProps = {
+  disabled: false,
+  movedQuizEntry: '',
+  movedInSidebar: null,
+  onSidebar: false
+};
+var _default = DragHandle;
+exports.default = _default;