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

package/lib/common/components/resources/stimulus/Stimulus/presenter.js

@@ -0,0 +1,255 @@
+"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.Stimulus = 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 _reactDnd = require("react-dnd");
+
+var _immutable = require("immutable");
+
+var _classnames4 = _interopRequireDefault(require("classnames"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../quiz/AddContent/Popover/index.js"));
+
+var _index2 = _interopRequireDefault(require("../StimulusEdit/index.js"));
+
+var _index3 = _interopRequireDefault(require("../StimulusShow/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../shared/drag_and_drop/DragAndDropZone/index.js"));
+
+var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
+
+var _componentWithOutsideClick = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClick.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index5 = _interopRequireDefault(require("../../../../../building/components/resources/quizEntry/QuizEntry/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fEUId',
+  template: function template(theme) {
+    return "\n\n.fEUId_dRGY{display:flex}\n\n.fEUId_cZDz{border-right:".concat(theme.leftPanelBorderWidth || 'inherit', " solid ").concat(theme.leftPanelBorderColor || 'inherit', "}\n\n.fEUId_cZDz,.fEUId_AmHx{box-sizing:border-box;max-height:105vh;overflow:auto}\n\n.fEUId_AmHx{margin-left:calc(").concat(theme.rightPanelPadding || 'inherit', "*-1);padding-left:").concat(theme.rightPanelPadding || 'inherit', "}\n\n.fEUId_duqv{display:none}\n\n.fEUId_ehcZ{transform:translateZ(0)}\n\n.fEUId_fPOQ{background-color:transparent;border:none;color:inherit;cursor:move;font-size:").concat(theme.dragAndDropHandleFontSize || 'inherit', ";height:0;margin:").concat(theme.dragAndDropHandleMargin || 'inherit', ";margin-top:0;position:relative;z-index:").concat(theme.dragAndDropHandleZIndex || 'inherit', "}\n\n.fEUId_eLmg{width:100%}\n\n.fEUId_dORw{width:50%}\n\n@media print{.fEUId_cZDz,.fEUId_AmHx{max-height:none}}");
+  },
+  'stimulus': 'fEUId_dRGY',
+  'leftPanel': 'fEUId_cZDz',
+  'rightPanel': 'fEUId_AmHx',
+  'hidden': 'fEUId_duqv',
+  'stimulusWrapper': 'fEUId_ehcZ',
+  'dragAndDropHandle': 'fEUId_fPOQ',
+  'quizEntryWrapper': 'fEUId_eLmg',
+  'horizontallyAligned': 'fEUId_dORw'
+};
+var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Stimulus, _Component);
+
+  var _super = (0, _createSuper2.default)(Stimulus);
+
+  function Stimulus() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Stimulus);
+
+    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.openDeleteStimulusModal = function () {
+      var uiData = (0, _immutable.Map)({
+        quizId: _this.props.quizId,
+        stimulusEntry: _this.props.quizEntry,
+        childEntries: _this.props.childEntries
+      });
+
+      _this.props.setUi(_quizCommon.DELETE_STIMULUS_DATA, uiData);
+
+      _this.props.openDeleteStimulusModal();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Stimulus, [{
+    key: "shouldDisableDragHandle",
+    value: function shouldDisableDragHandle() {
+      var _this$props = this.props,
+          quizEntries = _this$props.quizEntries,
+          quizEntry = _this$props.quizEntry;
+      return quizEntries.size === quizEntry.positionSlots + 1;
+    }
+  }, {
+    key: "renderChildQuizEntries",
+    value: function renderChildQuizEntries() {
+      var _this2 = this;
+
+      var nextDisplayPosition = this.props.displayPosition;
+      return this.props.childEntries.toArray().map(function (childEntry, idx) {
+        var displayPosition = nextDisplayPosition;
+        nextDisplayPosition += childEntry.displayPositionSlots;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.quizEntryWrapper,
+          key: childEntry.id
+        }, /*#__PURE__*/_react.default.createElement(_index5.default, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
+          stimulusOrientation: _this2.props.stimulusOrientationEnabled ? _this2.props.stimulus.orientation : null
+        })), !_this2.props.draggingOnBuild && /*#__PURE__*/_react.default.createElement(_index.default, {
+          allowStimulusCreation: false,
+          stimulusId: _this2.props.stimulus.id,
+          parentEntryId: _this2.props.quizEntry.id,
+          quizId: _this2.props.quizId,
+          position: childEntry.position + 1,
+          useStimulusTrigger: idx + 1 === _this2.props.childEntries.size
+        }));
+      });
+    }
+  }, {
+    key: "renderStimulusPanel",
+    value: function renderStimulusPanel() {
+      var StimulusComponent = this.props.isEditing ? _index2.default : _index3.default;
+      var connectDragPreview = this.props.connectDragPreview;
+      return connectDragPreview( /*#__PURE__*/_react.default.createElement("div", {
+        "data-automation": "sdk-stimulus-LeftPanelShow"
+      }, /*#__PURE__*/_react.default.createElement(StimulusComponent, {
+        bankEntryWarningWrapperProps: this.props.bankEntryWarningWrapperProps,
+        connectDragSource: this.props.connectDragSource,
+        displayPosition: this.props.displayPosition,
+        guid: this.props.guid,
+        isBankedContent: this.props.isBankedContent,
+        openDeleteStimulusModal: this.openDeleteStimulusModal,
+        quizEntries: this.props.quizEntries,
+        quizEntry: this.props.quizEntry,
+        quizId: this.props.quizId,
+        scrollKey: this.props.scrollKey,
+        shouldClone: this.props.shouldClone,
+        shouldDisableDragHandle: this.shouldDisableDragHandle(),
+        stimulus: this.props.stimulus,
+        switchOnEditing: this.props.switchOnEditing,
+        switchOffEditing: this.props.switchOffEditing,
+        onEditToggle: this.props.onEditStimulusToggle,
+        shouldFocusOnMount: this.props.editStimulusToggle
+      })));
+    }
+  }, {
+    key: "renderPanels",
+    value: function renderPanels(propsForDnDZone) {
+      var _classnames2;
+
+      var _this$props2 = this.props,
+          stimulus = _this$props2.stimulus,
+          stimulusOrientationEnabled = _this$props2.stimulusOrientationEnabled;
+      var shouldSetHorizontalOrientation = stimulus.orientation === _quizCommon.LEFT || !stimulusOrientationEnabled;
+      var stimulusPanelClass = (0, _classnames4.default)(styles.leftPanel, (0, _defineProperty2.default)({}, styles.horizontallyAligned, shouldSetHorizontalOrientation));
+      var itemsPanelClass = (0, _classnames4.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.horizontallyAligned, shouldSetHorizontalOrientation), (0, _defineProperty2.default)(_classnames2, styles.hidden, stimulus.isTemporary()), (0, _defineProperty2.default)(_classnames2, styles.rightPanel, !stimulus.isTemporary()), _classnames2));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames4.default)((0, _defineProperty2.default)({}, styles.stimulus, shouldSetHorizontalOrientation)),
+        ref: this.props.dndRef,
+        "data-automation": "sdk-stimulus"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: stimulusPanelClass
+      }, this.renderStimulusPanel()), /*#__PURE__*/_react.default.createElement("div", {
+        className: itemsPanelClass
+      }, /*#__PURE__*/_react.default.createElement("div", null), this.renderChildQuizEntries(), /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+        location: "in"
+      })), this.props.childEntries.size === 0 && /*#__PURE__*/_react.default.createElement(_index.default, {
+        allowStimulusCreation: false,
+        stimulusId: this.props.stimulus.id,
+        parentEntryId: this.props.quizEntry.id,
+        quizId: this.props.quizId,
+        position: this.props.quizEntry.position + 1,
+        useStimulusTrigger: true
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var propsForDnDZone = {
+        inStimulus: true,
+        draggingOver: this.props.draggingOver,
+        draggingAboveHalf: this.props.draggingAboveHalf,
+        dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+        location: "above"
+      })), this.renderPanels(propsForDnDZone), /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+        location: "below"
+      })));
+    }
+  }]);
+  Stimulus.displayName = "Stimulus";
+  return Stimulus;
+}(_react.Component), _class2.propTypes = {
+  bankEntryWarningWrapperProps: _propTypes.default.func,
+  childEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  connectDragPreview: _propTypes.default.func.isRequired,
+  connectDragSource: _propTypes.default.func.isRequired,
+  dndRef: _propTypes.default.func,
+  draggingOnBuild: _propTypes.default.bool,
+  draggingOver: _propTypes.default.bool.isRequired,
+  draggingAboveHalf: _propTypes.default.bool.isRequired,
+  dropIntoEmptyStimulus: _propTypes.default.bool,
+  displayPosition: _propTypes.default.number.isRequired,
+  isBankedContent: _propTypes.default.bool,
+  isEditing: _propTypes.default.bool,
+  guid: _propTypes.default.string.isRequired,
+  openDeleteStimulusModal: _propTypes.default.func.isRequired,
+  propsForQuizEntry: _propTypes.default.func.isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  quizEntries: _reactImmutableProptypes.default.list.isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  scrollKey: _propTypes.default.string,
+  setUi: _propTypes.default.func.isRequired,
+  shouldClone: _propTypes.default.bool.isRequired,
+  stimulus: _reactImmutableProptypes.default.record.isRequired,
+  switchOnEditing: _propTypes.default.func.isRequired,
+  switchOffEditing: _propTypes.default.func.isRequired,
+  onEditStimulusToggle: _propTypes.default.func.isRequired,
+  editStimulusToggle: _propTypes.default.bool.isRequired,
+  stimulusOrientationEnabled: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
+  childEntries: (0, _immutable.List)([]),
+  dndRef: function dndRef() {},
+  draggingOnBuild: false,
+  draggingOver: false,
+  draggingAboveHalf: false,
+  dropIntoEmptyStimulus: false,
+  isBankedContent: false,
+  isEditing: false,
+  onEditStimulusToggle: function onEditStimulusToggle() {},
+  scrollKey: ''
+}, _temp)) || _class);
+exports.Stimulus = Stimulus;
+
+var _default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)((0, _componentWithOutsideClick.default)(Stimulus));
+
+exports.default = _default;

package/lib/common/components/resources/stimulus/Stimulus/theme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors,
+      borders = _ref.borders;
+  return {
+    leftPanelPadding: spacing.xxSmall,
+    leftPanelBorderWidth: borders.widthSmall,
+    leftPanelBorderColor: colors.tiara,
+    rightPanelPadding: spacing.xSmall,
+    dragAndDropHandleZIndex: '3333',
+    dragAndDropHandleFontSize: typography.fontSizeMedium,
+    dragAndDropHandleMargin: spacing.xSmall
+  };
+}

package/lib/common/components/resources/stimulus/StimulusEdit/index.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 = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var modificationActions = _interopRequireWildcard(require("../../../../actions/modifications.js"));
+
+var quizEntriesApiActions = _interopRequireWildcard(require("../../../../../building/api/quizEntries.js"));
+
+var stimuliApiActions = _interopRequireWildcard(require("../../../../../building/api/stimuli.js"));
+
+var uiActions = _interopRequireWildcard(require("../../../../actions/ui.js"));
+
+var alertActions = _interopRequireWildcard(require("../../../../actions/alerts.js"));
+
+var errorsShowingActions = _interopRequireWildcard(require("../../../../actions/errorsShowing.js"));
+
+var modalActions = _interopRequireWildcard(require("../../../../../common/actions/modal.js"));
+
+var _upload = require("../../../../actions/upload.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state, props) {
+  var addContentPopoverOpen = state.get('editing', (0, _immutable.Map)()).find(function (isEditing, key) {
+    return isEditing && key.includes(_quizCommon.ADD_CONTENT_POPOVER_KEY);
+  });
+  return {
+    addContentPopoverOpen: Boolean(addContentPopoverOpen),
+    nextQuizEntry: state.getIn(['modifications', 'nextQuizEntry'], null),
+    appContainer: state.getIn(['ui', 'appContainer']),
+    workingStimulus: props.stimulus.getWorkingInstance(),
+    workingQuizEntry: props.quizEntry.getWorkingInstance()
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  var modActions = (0, _redux.bindActionCreators)(modificationActions, dispatch);
+  var quizEntryApiActions = (0, _redux.bindActionCreators)(quizEntriesApiActions, dispatch);
+  var stimulusApiActions = (0, _redux.bindActionCreators)(stimuliApiActions, dispatch);
+  var boundErrorsShowingActions = (0, _redux.bindActionCreators)(errorsShowingActions, dispatch);
+  var boundModalActions = (0, _redux.bindActionCreators)(modalActions, dispatch);
+  return {
+    clearTemporaryStimulus: modActions.clearTemporaryStimulus,
+    clearModifications: modActions.clearModifications,
+    clearNextQuizEntry: modActions.clearNextQuizEntry,
+    createQuizEntry: quizEntryApiActions.createQuizEntry,
+    createStimulus: stimulusApiActions.createStimulus,
+    createStimulusAndQuizEntry: quizEntryApiActions.createStimulusAndQuizEntry,
+    createTempItem: modActions.createItem,
+    createTempStimulus: modActions.createStimulus,
+    getQuizEntries: quizEntryApiActions.getQuizEntries,
+    hideError: boundErrorsShowingActions.hideError,
+    openModal: boundModalActions.openModal,
+    screenreaderNotification: (0, _redux.bindActionCreators)(alertActions, dispatch).screenreaderNotification,
+    setUi: (0, _redux.bindActionCreators)(uiActions, dispatch).set,
+    setUploadStatus: (0, _redux.bindActionCreators)(_upload.uploadStatus, dispatch),
+    showError: boundErrorsShowingActions.showError,
+    updateQuizEntry: quizEntryApiActions.updateQuizEntry,
+    updateStimulus: stimulusApiActions.updateStimulus,
+    withConfirm: boundModalActions.withConfirm
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;