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

package/lib/common/components/shared/drag_and_drop/dragAndDropUtils.js

@@ -0,0 +1,403 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBoundsForComponent = getBoundsForComponent;
+exports.posObjFromNonQuizEntry = posObjFromNonQuizEntry;
+exports.onQuizEntryDrop = onQuizEntryDrop;
+exports.collectDrop = collectDrop;
+exports.usingIE = usingIE;
+exports.chooseDragConnection = chooseDragConnection;
+exports.beginQuizEntryDrag = beginQuizEntryDrag;
+exports.endQuizEntryDrag = endQuizEntryDrag;
+exports.collectDrag = collectDrag;
+exports.dragSource = exports.DropTargetCreator = exports.dropTarget = exports.ItemTypes = exports.onQuizEntryHover = exports.posObjFromQuizEntry = void 0;
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _lodash = require("lodash");
+
+var _immutable = require("immutable");
+
+var _reactDnd = require("react-dnd");
+
+var _cachePreviousArgs = _interopRequireDefault(require("../../../util/cachePreviousArgs.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+function getBoundsForComponent(component) {
+  var dndComponent = component.dndComponent ? component.dndComponent : component;
+
+  var DOMNode = _reactDom.default.findDOMNode(dndComponent);
+
+  return DOMNode && DOMNode.getBoundingClientRect() || {};
+}
+
+var posObjFromQuizEntry = (0, _cachePreviousArgs.default)(function (quizEntryDragging, quizEntryHovered, mousePos, component, inSidebar) {
+  var _getBoundsForComponen = getBoundsForComponent(component),
+      top = _getBoundsForComponen.top,
+      bottom = _getBoundsForComponen.bottom,
+      left = _getBoundsForComponen.left,
+      right = _getBoundsForComponen.right;
+
+  var midY = top + (bottom - top) / 2;
+  var midX = left + (right - left) / 2;
+  var onRightHalf = mousePos.x > midX;
+  var aboveHalf = mousePos.y < midY;
+  var deepInsideEntry = mousePos.y > top + 40 && mousePos.y < bottom - 40;
+  var newPositionObj = {
+    position: quizEntryHovered.position,
+    intoEmptyStimulus: false,
+    aboveHalf: aboveHalf,
+    fromAbove: quizEntryHovered.position > quizEntryDragging.position
+  }; // handle dragging items over stimulus
+
+  if (!quizEntryDragging.hasStimulus && quizEntryHovered.hasStimulus && (onRightHalf || inSidebar)) {
+    if (deepInsideEntry && quizEntryHovered.getNestedEntries().size === 0) {
+      newPositionObj.intoEmptyStimulus = true;
+      return newPositionObj;
+    } else if (deepInsideEntry) {
+      // Can return null here, because onHover is called for the stimulus and the nested item
+      // (since both are being hovered at the same time). We only care about the nested item
+      // in this case, so we're basically just ignoring the stimulus.
+      return null;
+    }
+  }
+
+  var draggingStimulusInStimulus = quizEntryDragging.hasStimulus && quizEntryHovered.isInStimulus;
+  var ignoreItemHover = quizEntryHovered.isInStimulus && !deepInsideEntry && !inSidebar;
+
+  if (draggingStimulusInStimulus || ignoreItemHover) {
+    return null;
+  }
+
+  return newPositionObj;
+});
+exports.posObjFromQuizEntry = posObjFromQuizEntry;
+
+function posObjFromNonQuizEntry(quizEntryDragging, startComp, endComp, mousePos, quizEntries) {
+  // check if dropping above all quizEntries
+  var _getBoundsForComponen2 = getBoundsForComponent(startComp),
+      bottom = _getBoundsForComponen2.bottom;
+
+  if (mousePos.y < bottom) {
+    return {
+      position: 1,
+      intoEmptyStimulus: false,
+      aboveHalf: true,
+      fromAbove: false
+    };
+  } // check if dropping below all quizEntries
+
+
+  var _getBoundsForComponen3 = getBoundsForComponent(endComp),
+      top = _getBoundsForComponen3.top;
+
+  if (mousePos.y > top) {
+    var lastQuizEntry = quizEntries.maxBy(function (quizEntry) {
+      return quizEntry.position;
+    });
+    var position = lastQuizEntry.position;
+
+    if (lastQuizEntry.isInStimulus) {
+      var stimulusQuizEntry = quizEntries.find(function (qe) {
+        return qe.id === lastQuizEntry.stimulusQuizEntryId;
+      });
+
+      if (stimulusQuizEntry) {
+        position = stimulusQuizEntry.position;
+      }
+    }
+
+    return {
+      position: position,
+      intoEmptyStimulus: false,
+      aboveHalf: false,
+      fromAbove: position > quizEntryDragging.position
+    };
+  }
+
+  return null;
+}
+
+function createPositionObj(props, monitor, component, inSidebar) {
+  var itemData = monitor.getItem();
+  var mousePos = monitor.getClientOffset() || {};
+  var newPositionObj = null;
+
+  if (props.quizEntry) {
+    newPositionObj = posObjFromQuizEntry(itemData.quizEntry, props.quizEntry, mousePos, component, inSidebar);
+  } else {
+    var startQuizEntries = component.startQuizEntries,
+        endQuizEntries = component.endQuizEntries;
+    newPositionObj = posObjFromNonQuizEntry(itemData.quizEntry, startQuizEntries, endQuizEntries, mousePos, props.quizEntries);
+  }
+
+  return newPositionObj;
+} // createPosition arg is so that tests can stub it
+
+
+var onQuizEntryHover = (0, _lodash.debounce)(function (props, monitor, component, refname) {
+  var createPosition = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : createPositionObj;
+  var inSidebar = refname === _quizCommon.SIDEBAR_ITEM_REF;
+
+  if (inSidebar && !props.sidebarOpen) {
+    return;
+  }
+
+  var itemData = monitor.getItem();
+
+  if (itemData === null) {
+    return;
+  }
+
+  var newPositionObj = createPosition(props, monitor, component, inSidebar);
+  if (newPositionObj === null) return;
+  var samePosition = newPositionObj.position === itemData.position;
+  var sameAboveHalf = newPositionObj.aboveHalf === itemData.aboveHalf;
+  var sameIntoEmptyStimulus = newPositionObj.intoEmptyStimulus === itemData.intoEmptyStimulus;
+
+  if (samePosition && sameAboveHalf && sameIntoEmptyStimulus) {
+    return;
+  } // mutation used here to avoid rerendering on every mouse pixel move
+  // author of React DnD acknoledges shortcomings of mutations but
+  // recommends it here for performance purposes
+
+
+  Object.assign(monitor.getItem(), {
+    position: newPositionObj.position,
+    aboveHalf: newPositionObj.aboveHalf,
+    intoEmptyStimulus: newPositionObj.intoEmptyStimulus
+  });
+  props.newHoverPosition(newPositionObj);
+});
+exports.onQuizEntryHover = onQuizEntryHover;
+
+function positionOfTempItem(quizEntries) {
+  // TODO: replace the use of chain with lodash/fp functions and flow
+  return (0, _lodash.chain)(quizEntries.toJS()).sortBy(function (qe) {
+    return qe.position;
+  }).map(function (qe) {
+    return qe.id;
+  }).indexOf(_quizCommon.TEMPORARY_QUIZ_ENTRY_ID).value() + 1;
+}
+
+function newPositionFromPositionObj(newPositionObj, originalItemPosition) {
+  if (newPositionObj.intoEmptyStimulus) {
+    var offset = newPositionObj.fromAbove ? 0 : 1;
+    return newPositionObj.position + offset;
+  }
+
+  if (newPositionObj.position === originalItemPosition) {
+    return newPositionObj.position;
+  }
+
+  if (newPositionObj.fromAbove && newPositionObj.aboveHalf) {
+    return newPositionObj.position - 1;
+  }
+
+  if (!newPositionObj.fromAbove && !newPositionObj.aboveHalf) {
+    return newPositionObj.position + 1;
+  }
+
+  return newPositionObj.position;
+}
+
+function handleDrop(props, newPosition, newStimulusQuizEntryId, oldStimulusQuizEntryId, itemData, moveTempItem, inSidebar) {
+  var quizEntry = itemData.quizEntry;
+  var stimulusQuizEntryIdChanged = newStimulusQuizEntryId !== oldStimulusQuizEntryId;
+  var isImmutable = quizEntry.isItem ? quizEntry.getEntry().isImmutable() : false;
+
+  if (isImmutable && stimulusQuizEntryIdChanged) {
+    var uiData = (0, _immutable.Map)({
+      movedInSidebar: inSidebar,
+      quizId: props.quizId,
+      position: newPosition,
+      stimulusQuizEntryId: newStimulusQuizEntryId,
+      quizEntryId: quizEntry.id
+    });
+    props.setUi(_quizCommon.MOVE_IMMUTABLE_DATA, uiData);
+    props.openMoveImmutableModal();
+  } else {
+    props.setUi(_quizCommon.MOVED_IN_SIDEBAR, inSidebar);
+    props.moveQuizEntry(props.quizId, newPosition, newStimulusQuizEntryId, quizEntry.id, moveTempItem);
+  }
+}
+
+function onQuizEntryDrop(props, monitor, component, refname) {
+  var inSidebar = refname === _quizCommon.SIDEBAR_ITEM_REF;
+  var handledDrop = monitor.getDropResult() && monitor.getDropResult().handledDrop;
+  var itemData = monitor.getItem();
+  var movingQuizEntry = itemData.quizEntry;
+  var hoveredQuizEntry = props.quizEntry;
+  var dropStimIntoStim = movingQuizEntry.hasStimulus && hoveredQuizEntry && hoveredQuizEntry.isInStimulus;
+
+  if (inSidebar && !props.sidebarOpen || handledDrop || !props.dndPositionObj || dropStimIntoStim) {
+    return {
+      handledDrop: handledDrop || false
+    };
+  }
+
+  var quizEntries = props.quizEntries;
+  var originalItemPosition = movingQuizEntry.position;
+  var newStimulusQuizEntryId = '';
+
+  var findPositionInList = function findPositionInList(quizEntriesList) {
+    var newPositionObj = props.dndPositionObj.toJS() || itemData;
+    var targetQuizEntry = quizEntriesList.find(function (qe) {
+      return qe.position === newPositionObj.position;
+    });
+
+    if (movingQuizEntry.id === targetQuizEntry && targetQuizEntry.id) {
+      return newPositionObj.position;
+    }
+
+    var targetIsStimulus = targetQuizEntry && targetQuizEntry.hasStimulus;
+
+    if (targetIsStimulus && newPositionObj.intoEmptyStimulus) {
+      // into empty
+      newStimulusQuizEntryId = targetQuizEntry.id;
+    } else if (targetIsStimulus && !newPositionObj.intoEmptyStimulus) {
+      // around stimulus
+      newPositionObj.position += newPositionObj.aboveHalf ? 0 : targetQuizEntry.getNestedEntries().size;
+    } else {
+      newStimulusQuizEntryId = targetQuizEntry && targetQuizEntry.stimulusQuizEntryId || '';
+    }
+
+    return newPositionFromPositionObj(newPositionObj, originalItemPosition);
+  };
+
+  if (movingQuizEntry.id === _quizCommon.TEMPORARY_QUIZ_ENTRY_ID) {
+    var newPosition = findPositionInList(quizEntries);
+
+    if (newPosition === originalItemPosition) {
+      return {
+        handledDrop: true
+      };
+    }
+
+    var movingDown = newPosition > originalItemPosition;
+    props.moveTemporaryQuizEntry(newPosition, newStimulusQuizEntryId, movingDown);
+  } else {
+    var quizEntriesWithoutTemp = quizEntries.filterNot(function (qe) {
+      return qe.id === _quizCommon.TEMPORARY_QUIZ_ENTRY_ID;
+    });
+
+    var _newPosition = findPositionInList(quizEntriesWithoutTemp);
+
+    var newPositionIncludingTemp = findPositionInList(quizEntries);
+    var tempItemPosition = positionOfTempItem(quizEntries);
+    var originBelowTemp = originalItemPosition >= tempItemPosition;
+    var originAboveTemp = originalItemPosition < tempItemPosition;
+    var droppedPastTemp = originBelowTemp && newPositionIncludingTemp < tempItemPosition || originAboveTemp && newPositionIncludingTemp > tempItemPosition;
+    var droppedOnTemp = tempItemPosition === newPositionIncludingTemp;
+
+    var moveTempItem = function moveTempItem() {
+      if (droppedPastTemp || droppedOnTemp) {
+        var directionToMoveTempItem = originAboveTemp ? 'up' : 'down';
+
+        var _movingDown = !originAboveTemp;
+
+        props.moveTemporaryQuizEntry(directionToMoveTempItem, newStimulusQuizEntryId, _movingDown);
+      }
+    };
+
+    var oldStimulusQuizEntryId = movingQuizEntry.stimulusQuizEntryId || '';
+    var samePosition = _newPosition === originalItemPosition;
+    var sameStimulus = newStimulusQuizEntryId === oldStimulusQuizEntryId;
+    var stimulusBelowItself = movingQuizEntry.hasStimulus && hoveredQuizEntry && hoveredQuizEntry.id === movingQuizEntry.id && _newPosition === originalItemPosition + movingQuizEntry.positionSlots + (movingQuizEntry.positionSlots ? 1 : 0);
+
+    if (samePosition && sameStimulus || stimulusBelowItself) {
+      moveTempItem();
+      return {
+        handledDrop: true
+      };
+    }
+
+    handleDrop(props, _newPosition, newStimulusQuizEntryId, oldStimulusQuizEntryId, itemData, moveTempItem, inSidebar);
+    return {
+      handledDrop: true
+    };
+  }
+}
+
+function collectDrop(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}
+
+var ItemTypes = {
+  QUIZ_ENTRY: 'quiz_entry'
+};
+exports.ItemTypes = ItemTypes;
+
+var dropTarget = function dropTarget(refname) {
+  return {
+    drop: function drop(props, monitor, component) {
+      return onQuizEntryDrop(props, monitor, component, refname);
+    },
+    hover: function hover(props, monitor, component) {
+      onQuizEntryHover(props, monitor, component, refname);
+    }
+  };
+}; // - ItemTypes.QUIZ_ENTRY associates this component drop target with a name
+// - dropTarget specifies functions React DnD will call for events with this component
+// - collectDrop injects props into component
+
+
+exports.dropTarget = dropTarget;
+
+var DropTargetCreator = function DropTargetCreator(refname) {
+  return (0, _reactDnd.DropTarget)(ItemTypes.QUIZ_ENTRY, dropTarget(refname), collectDrop);
+}; // ///////////////// //
+// DRAG SOURCE STUFF //
+// ///////////////// //
+
+
+exports.DropTargetCreator = DropTargetCreator;
+
+function usingIE() {
+  var windowOverride = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : window;
+  var ua = windowOverride.navigator.userAgent;
+  var edge = ua.includes('Edge/');
+  var ie11 = ua.includes('Trident/');
+  var ie10 = ua.includes('MSIE ');
+  return edge || ie11 || ie10;
+}
+
+function chooseDragConnection(dragSource, dragPreview) {
+  var windowOverride = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : window;
+  return usingIE(windowOverride) ? dragSource : dragPreview;
+}
+
+function beginQuizEntryDrag(props, monitor, component) {
+  return {
+    quizEntry: props.quizEntry
+  };
+}
+
+function endQuizEntryDrag(props, monitor, component) {
+  // to indicate we're no longer dragging
+  props.newHoverPosition({
+    position: -1
+  });
+}
+
+var dragSource = {
+  beginDrag: beginQuizEntryDrag,
+  endDrag: endQuizEntryDrag
+};
+exports.dragSource = dragSource;
+
+function collectDrag(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+}

package/lib/common/components/shared/errors/Errors.js

@@ -0,0 +1,81 @@
+"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.Errors = 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 _immutable = require("immutable");
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eFvbO',
+  template: function template(theme) {
+    return "\n\n.eFvbO_bEOF{align-items:flex-start;display:flex;flex-direction:column}\n\n.eFvbO_ddvR{color:".concat(theme.errorColor || 'inherit', ";flex:1 1 auto;font-family:").concat(theme.errorFontFamily || 'inherit', ";font-size:").concat(theme.errorFontSize || 'inherit', "}");
+  },
+  'errors': 'eFvbO_bEOF',
+  'error': 'eFvbO_ddvR'
+};
+var Errors = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Errors, _Component);
+
+  var _super = (0, _createSuper2.default)(Errors);
+
+  function Errors() {
+    (0, _classCallCheck2.default)(this, Errors);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Errors, [{
+    key: "renderError",
+    value: function renderError(errorText, i) {
+      var key = "error_for_".concat(i);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.error,
+        key: key,
+        "data-automation": "sdk-core-error"
+      }, errorText);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.props.errorList.size === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.errors
+      }, this.props.errorList.toArray().map(this.renderError));
+    }
+  }]);
+  Errors.displayName = "Errors";
+  return Errors;
+}(_react.Component), _class2.propTypes = {
+  errorList: _reactImmutableProptypes.default.list
+}, _class2.defaultProps = {
+  errorList: (0, _immutable.List)()
+}, _temp)) || _class);
+exports.Errors = Errors;
+var _default = Errors;
+exports.default = _default;

package/lib/common/components/shared/errors/theme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      typography = _ref.typography;
+  return {
+    errorFontFamily: typography.fontFamily,
+    errorFontSize: typography.fontSizeSmall,
+    errorColor: colors.crimson
+  };
+}

package/lib/common/components/shared/file_selector/FileSelector.js

@@ -0,0 +1,90 @@
+"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.FileSelector = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _immutable = require("immutable");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'flcWS',
+  template: function template(theme) {
+    return "\n\n.flcWS_emRR{background-color:".concat(theme.dropzoneBackgroundColor || 'inherit', ";border:").concat(theme.dropzoneBorderWidth || 'inherit', " dashed ").concat(theme.dropzoneBorderColor || 'inherit', ";cursor:pointer;padding:").concat(theme.dropzonePadding || 'inherit', "}");
+  },
+  'dropzone': 'flcWS_emRR'
+};
+var FileSelector = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(FileSelector, _Component);
+
+  var _super = (0, _createSuper2.default)(FileSelector);
+
+  function FileSelector() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, FileSelector);
+    _this = _super.call(this);
+    _this.onDrop = _this.onDrop.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(FileSelector, [{
+    key: "onDrop",
+    value: function onDrop(files) {
+      this.props.fileHandler((0, _immutable.List)(files));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return this.props.content;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
+        className: styles.dropzone,
+        multiple: this.props.multiple,
+        onDrop: this.onDrop,
+        accept: this.props.acceptAttribute
+      }, this.renderContent()));
+    }
+  }]);
+  FileSelector.displayName = "FileSelector";
+  return FileSelector;
+}(_react.Component), _class2.propTypes = {
+  acceptAttribute: _propTypes.default.string.isRequired,
+  content: _propTypes.default.node.isRequired,
+  fileHandler: _propTypes.default.func.isRequired,
+  multiple: _propTypes.default.bool
+}, _class2.defaultProps = {
+  multiple: false
+}, _temp)) || _class);
+exports.FileSelector = FileSelector;
+var _default = FileSelector;
+exports.default = _default;

package/lib/common/components/shared/file_selector/theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      borders = _ref.borders;
+  return {
+    dropzoneBackgroundColor: colors.porcelain,
+    dropzoneBorderWidth: borders.widthSmall,
+    dropzoneBorderColor: colors.ash,
+    dropzonePadding: spacing.medium
+  };
+}