@instructure/quiz-core 22.17.0 → 22.18.0

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

@@ -1,8 +1,10 @@
-/** @jsx jsx */ function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
+/** @jsx jsx */ function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -33,29 +35,6 @@ function _async_to_generator(fn) {
         });
     };
 }
-function _call_super(_this, derived, args) {
-    derived = _get_prototype_of(derived);
-    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-}
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -69,24 +48,32 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
-    }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-        constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
         }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
@@ -127,36 +114,16 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
-    }
-    return _assert_this_initialized(self);
-}
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
-function _is_native_reflect_construct() {
-    try {
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
-}
-function _ts_decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 function _ts_generator(thisArg, body) {
     var f, y, t, _ = {
@@ -249,10 +216,9 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import React, { Component } from 'react';
+import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { DragSource } from 'react-dnd';
 import pick from 'lodash/pick';
 import first from 'lodash/first';
 import { jsx, Global } from '@instructure/emotion';
@@ -264,372 +230,331 @@ import wrapWithOutsideClickEmotion from '../../../../../common/components/shared
 import { checkClickedNode } from '../../../../../common/util/clickHandlers';
 import QuizEntryEditHeader from './Header';
 import QuizEntryEditFooter from './Footer';
-import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK, withStyleOverrides } from '@instructure/quiz-common';
-import { ItemTypes, dragSource, collectDrag } from '../../../../../common/components/shared/drag_and_drop/dragAndDropUtils';
+import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK } from '@instructure/quiz-common/constants';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
+import { useQuizEntryDragSource } from '../../../../../common/components/shared/drag_and_drop/dragAndDropUtils';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-var QuizEntryEdit = /*#__PURE__*/ function(Component) {
-    "use strict";
-    _inherits(QuizEntryEdit, Component);
-    function QuizEntryEdit() {
-        _class_call_check(this, QuizEntryEdit);
-        var _this;
-        var _this1;
-        _this = _call_super(this, QuizEntryEdit, arguments), _this1 = _this, _define_property(_this1, "state", {
-            canSubmit: true
-        }), _define_property(_this1, "onSubmit", function(e) {
-            var displayPosition = _this1.props.displayPosition;
-            e && e.preventDefault();
-            if (_this1.isValid() && _this1.state.canSubmit) {
-                _this1.successfulSubmit();
-            } else {
-                var msg = t('Item {displayPosition, number} cannot be saved due to invalid input data.', {
-                    displayPosition: displayPosition
-                });
-                _this1.props.screenreaderNotification(msg);
-                _this1.props.showError(_this1.props.guid);
-                _this1.props.clearNextQuizEntry();
-            }
-        }), _define_property(_this1, "createOrUpdateItem", function() {
-            var workingEntry = _this1.props.workingEntry;
-            if (_this1.props.entry.isTemporary()) {
-                return _this1.props.createItem(workingEntry, _this1.props.quizId, 'quiz');
-            } else if (_this1.props.shouldClone) {
-                return _this1.props.createItem(workingEntry, _this1.props.quizId, 'quiz', workingEntry.id);
-            } else if (_this1.props.entry.hasModifications()) {
-                return _this1.props.updateItem(workingEntry, _this1.props.quizId, 'quiz');
-            }
-            return Promise.resolve(_this1.props.entry.toJS());
-        }), _define_property(_this1, "createNextQuizEntry", function() {
-            var _this_props_nextQuizEntry = _this1.props.nextQuizEntry, interactionTypeData = _this_props_nextQuizEntry.interactionTypeData, quizId = _this_props_nextQuizEntry.quizId, position = _this_props_nextQuizEntry.position, stimulusId = _this_props_nextQuizEntry.stimulusId, parentEntryId = _this_props_nextQuizEntry.parentEntryId;
-            if (!interactionTypeData) {
-                _this1.props.createTempStimulus(quizId, position);
-            } else {
-                var defaultInteractionData = interactionTypeData.getDefaultInteractionData();
-                var scoringData = interactionTypeData.getDefaultScoringData(defaultInteractionData);
-                _this1.props.createTempItem(quizId, position, {
-                    id: interactionTypeData.id,
-                    interactionData: defaultInteractionData,
-                    itemBody: interactionTypeData.itemBody,
-                    properties: interactionTypeData.defaultProperties,
-                    scoringAlgorithm: interactionTypeData.scoringAlgorithmDefault,
-                    scoringData: scoringData,
-                    userResponseType: first(interactionTypeData.userResponseTypeOptions)
-                }, parentEntryId, stimulusId);
-            }
-            _this1.props.clearNextQuizEntry();
-        }), _define_property(_this1, "createOrUpdateQuizEntry", function(itemData) {
-            var _this_props = _this1.props, workingEntry = _this_props.workingEntry, workingQuizEntry = _this_props.workingQuizEntry, quizEntry = _this_props.quizEntry, shouldClone = _this_props.shouldClone;
-            if (workingQuizEntry.isTemporary) {
-                return _this1.props.createQuizEntry(_this1.props.quizId, workingEntry.id === TEMPORARY_ITEM_ID ? itemData.id : workingEntry.id, workingQuizEntry.entryType, workingQuizEntry.getProperties(), !_this1.props.addContentPopoverOpen);
-            } else if (shouldClone && (!quizEntry.isBankEntry || quizEntry.isArchivedBankEntry)) {
-                return _this1.props.cloneQuizEntry(_this1.props.quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
-                    entryId: itemData.id,
-                    entryType: quizEntry.isArchivedBankEntry ? quizEntry.getEntry().entryType : quizEntry.entryType
-                }));
-            } else if (_this1.props.quizEntry.hasModifications()) {
-                // if a quiz entry is a bank entry, item.id is not bank entry id
-                // if a quiz entry is not a bank entry, item.id is entry id
-                var entryId = quizEntry.isBankEntry ? workingQuizEntry.entry.get('id') : itemData.id;
-                return _this1.props.updateQuizEntry(_this1.props.quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
-                    entryId: entryId
-                }));
-            }
-            return Promise.resolve(_this1.props.quizEntry);
-        }), _define_property(_this1, "handleApiErrors", function(fetcherError) {
-            return _async_to_generator(function() {
-                return _ts_generator(this, function(_state) {
-                    if (fetcherError.validationErrorsFromApi) {
-                        _this1.props.handleValidationErrorsFromApi(fetcherError.validationErrorsFromApi);
-                    } else {
-                        throw fetcherError;
-                    }
-                    return [
-                        2
-                    ];
-                });
-            })();
-        }), _define_property(_this1, "successfulSubmit", function() {
-            return _async_to_generator(function() {
-                var itemData, fetcherError;
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            _this1.setState({
-                                canSubmit: false
-                            });
-                            _state.label = 1;
-                        case 1:
-                            _state.trys.push([
-                                1,
-                                4,
-                                ,
-                                5
-                            ]);
-                            return [
-                                4,
-                                _this1.createOrUpdateItem()
-                            ];
-                        case 2:
-                            itemData = _state.sent();
-                            return [
-                                4,
-                                _this1.createOrUpdateQuizEntry(itemData)
-                            ];
-                        case 3:
-                            _state.sent();
-                            return [
-                                3,
-                                5
-                            ];
-                        case 4:
-                            fetcherError = _state.sent();
-                            _this1.setState({
-                                canSubmit: true
-                            });
-                            _this1.handleApiErrors(fetcherError);
-                            // When reached, this is always a validation error
-                            return [
-                                2,
-                                API_INPUT_VALIDATION_ERROR
-                            ];
-                        case 5:
-                            _this1.props.hideError(_this1.props.guid);
-                            if (_this1.props.shouldClone) {
-                                _this1.props.openRegradeModal();
-                            }
-                            _this1.clearModifications();
-                            if (_this1.props.nextQuizEntry) {
-                                _this1.createNextQuizEntry();
-                            }
-                            // Delay the switchOffEditing call to prevents the focus from incorrectly
-                            // jumping back to the previous question during the transition between questions.
-                            setTimeout(function() {
-                                _this1.props.switchOffEditing();
-                            });
-                            return [
-                                2
-                            ];
-                    }
-                });
-            })();
-        }), _define_property(_this1, "clearChanges", function() {
-            var fromCancel = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
-            _this1.props.clearValidationErrorsFromApi(CLEAR_ALL_INPUT_VALIDATION_ERRORS);
-            _this1.clearModifications();
-            if (_this1.props.quizEntry.isTemporary) {
-                _this1.props.clearTemporaryItem(_this1.props.quizId);
-                if (fromCancel) {
-                    _this1.props.setUi(DELETED_QUIZ_ENTRY, {
-                        position: Math.ceil(_this1.props.quizEntry.position),
-                        inStimulus: _this1.props.quizEntry.hasStimulus
-                    });
-                }
-            }
-        }), _define_property(_this1, "handleAddToBankContinue", function() {
-            if (_this1.props.workingQuizEntry.isTemporary) {
-                _this1.setState({
-                    canSubmit: false
-                });
-            }
-        }), _define_property(_this1, "handleAddToBank", function(bankEntry) {
-            var workingQuizEntry = _this1.props.workingQuizEntry;
-            if (workingQuizEntry.isTemporary) {
-                _this1.props.createQuizEntry(_this1.props.quizId, bankEntry.id, 'BankEntry', workingQuizEntry.getProperties());
-                _this1.props.clearTemporaryItem(_this1.props.quizId);
-                _this1.clearModifications();
-                _this1.props.switchOffEditing();
-            } else if (_this1.props.shouldClone) {
-                _this1.props.cloneQuizEntry(_this1.props.quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
-                    entryId: bankEntry.id,
-                    entryType: 'BankEntry'
-                }));
-            } else {
-                _this1.props.updateQuizEntry(_this1.props.quizId, workingQuizEntry.id, {
-                    entryId: bankEntry.id,
-                    entryType: 'BankEntry'
-                });
-            }
-        }), _define_property(_this1, "getEntryForBank", function() {
-            var _this_props = _this1.props, entry = _this_props.entry, workingEntry = _this_props.workingEntry, quizId = _this_props.quizId, shouldClone = _this_props.shouldClone;
-            if (entry.isTemporary()) {
-                return _this1.props.createItem(workingEntry, quizId, PARENT_TYPE_ADDING_TO_BANK);
-            } else if (entry.hasModifications()) {
-                if (shouldClone) {
-                    return _this1.props.createItem(workingEntry, quizId);
+var QuizEntryEdit = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var addContentPopoverOpen = props.addContentPopoverOpen, appContainer = props.appContainer, children = props.children, clearModificationsProp = props.clearModifications, clearNextQuizEntry = props.clearNextQuizEntry, clearTemporaryItem = props.clearTemporaryItem, cloneQuizEntry = props.cloneQuizEntry, clearValidationErrorsFromApi = props.clearValidationErrorsFromApi, connectDragPreview = props.connectDragPreview, createItem = props.createItem, createTempItem = props.createTempItem, createTempStimulus = props.createTempStimulus, createQuizEntry = props.createQuizEntry, disabledForRegrade = props.disabledForRegrade, displayPosition = props.displayPosition, draggingAboveHalf = props.draggingAboveHalf, draggingOver = props.draggingOver, entry = props.entry, guid = props.guid, handleValidationErrorsFromApi = props.handleValidationErrorsFromApi, haveValidationErrorsFromApi = props.haveValidationErrorsFromApi, hideError = props.hideError, isOccluded = props.isOccluded, nextQuizEntry = props.nextQuizEntry, openRegradeModal = props.openRegradeModal, onEditQuizEntryToggle = props.onEditQuizEntryToggle, quizEntry = props.quizEntry, quizId = props.quizId, screenreaderNotification = props.screenreaderNotification, setUi = props.setUi, shouldClone = props.shouldClone, showError = props.showError, switchOffEditing = props.switchOffEditing, updateQuizEntry = props.updateQuizEntry, updateItem = props.updateItem, workingEntry = props.workingEntry, workingQuizEntry = props.workingQuizEntry, styles = props.styles;
+    var _useState = _sliced_to_array(useState(true), 2), canSubmit = _useState[0], setCanSubmit = _useState[1];
+    useEffect(function() {
+        setUi(SHOULD_CLONE_ITEM, false);
+        onEditQuizEntryToggle(quizEntry.id);
+        return function() {
+            setUi(SHOULD_CLONE_ITEM, false);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    function clickedOutside() {
+        onSubmit();
+    }
+    function ignoreClickOutsideIf(e) {
+        var _checkClickedNode = checkClickedNode(e, appContainer), isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger, outsideApp = _checkClickedNode.outsideApp;
+        return isOccluded || outsideApp || !isEndEditingTrigger;
+    }
+    // Expose clickedOutside and ignoreClickOutsideIf to the HOC via ref
+    useImperativeHandle(ref, function() {
+        return {
+            clickedOutside: clickedOutside,
+            ignoreClickOutsideIf: ignoreClickOutsideIf
+        };
+    });
+    function onSubmit(e) {
+        e && e.preventDefault();
+        if (isValid() && canSubmit) {
+            successfulSubmit();
+        } else {
+            var msg = t('Item {displayPosition, number} cannot be saved due to invalid input data.', {
+                displayPosition: displayPosition
+            });
+            screenreaderNotification(msg);
+            showError(guid);
+            clearNextQuizEntry();
+        }
+    }
+    function isValid() {
+        return workingEntry.isValid() && workingQuizEntry.isValid();
+    }
+    function createOrUpdateItem() {
+        if (entry.isTemporary()) {
+            return createItem(workingEntry, quizId, 'quiz');
+        } else if (shouldClone) {
+            return createItem(workingEntry, quizId, 'quiz', workingEntry.id);
+        } else if (entry.hasModifications()) {
+            return updateItem(workingEntry, quizId, 'quiz');
+        }
+        return Promise.resolve(entry.toJS());
+    }
+    function createNextQuizEntry() {
+        var interactionTypeData = nextQuizEntry.interactionTypeData, nextQuizId = nextQuizEntry.quizId, position = nextQuizEntry.position, stimulusId = nextQuizEntry.stimulusId, parentEntryId = nextQuizEntry.parentEntryId;
+        if (!interactionTypeData) {
+            createTempStimulus(nextQuizId, position);
+        } else {
+            var defaultInteractionData = interactionTypeData.getDefaultInteractionData();
+            var scoringData = interactionTypeData.getDefaultScoringData(defaultInteractionData);
+            createTempItem(nextQuizId, position, {
+                id: interactionTypeData.id,
+                interactionData: defaultInteractionData,
+                itemBody: interactionTypeData.itemBody,
+                properties: interactionTypeData.defaultProperties,
+                scoringAlgorithm: interactionTypeData.scoringAlgorithmDefault,
+                scoringData: scoringData,
+                userResponseType: first(interactionTypeData.userResponseTypeOptions)
+            }, parentEntryId, stimulusId);
+        }
+        clearNextQuizEntry();
+    }
+    function createOrUpdateQuizEntry(itemData) {
+        if (workingQuizEntry.isTemporary) {
+            return createQuizEntry(quizId, workingEntry.id === TEMPORARY_ITEM_ID ? itemData.id : workingEntry.id, workingQuizEntry.entryType, workingQuizEntry.getProperties(), !addContentPopoverOpen);
+        } else if (shouldClone && (!quizEntry.isBankEntry || quizEntry.isArchivedBankEntry)) {
+            return cloneQuizEntry(quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
+                entryId: itemData.id,
+                entryType: quizEntry.isArchivedBankEntry ? quizEntry.getEntry().entryType : quizEntry.entryType
+            }));
+        } else if (quizEntry.hasModifications()) {
+            // if a quiz entry is a bank entry, item.id is not bank entry id
+            // if a quiz entry is not a bank entry, item.id is entry id
+            var entryId = quizEntry.isBankEntry ? workingQuizEntry.entry.get('id') : itemData.id;
+            return updateQuizEntry(quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
+                entryId: entryId
+            }));
+        }
+        return Promise.resolve(quizEntry);
+    }
+    function handleApiErrors(fetcherError) {
+        return _async_to_generator(function() {
+            return _ts_generator(this, function(_state) {
+                if (fetcherError.validationErrorsFromApi) {
+                    handleValidationErrorsFromApi(fetcherError.validationErrorsFromApi);
                 } else {
-                    return _this1.props.updateItem(workingEntry, quizId);
+                    throw fetcherError;
                 }
-            } else {
-                return Promise.resolve(entry);
-            }
-        }), _define_property(_this1, "connectDragSource", function(dragHandle) {
-            return _this1.props.connectDragSource(dragHandle);
-        }), _define_property(_this1, "clearModifications", function() {
-            _this1.props.clearModifications('items', _this1.props.entry.id);
-            _this1.props.clearModifications('quizEntries', _this1.props.quizEntry.id);
-        }), _define_property(_this1, "shouldDisableSubmit", function() {
-            return Boolean(!_this1.state.canSubmit || _this1.props.haveValidationErrorsFromApi);
-        }), _define_property(_this1, "renderDraggable", function() {
-            var _this_props = _this1.props, connectDragPreview = _this_props.connectDragPreview, draggingOver = _this_props.draggingOver, draggingAboveHalf = _this_props.draggingAboveHalf;
-            var propsForDnDZone = {
-                draggingOver: draggingOver,
-                draggingAboveHalf: draggingAboveHalf
-            };
-            return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(DragAndDropZone, _object_spread_props(_object_spread({}, propsForDnDZone), {
-                location: "above"
-            })), connectDragPreview(_this1.renderForm()), /*#__PURE__*/ jsx(DragAndDropZone, _object_spread_props(_object_spread({}, propsForDnDZone), {
-                location: "below"
-            })));
-        });
-        return _this;
+                return [
+                    2
+                ];
+            });
+        })();
     }
-    _create_class(QuizEntryEdit, [
-        {
-            key: "componentDidMount",
-            value: function componentDidMount() {
-                this.props.onEditQuizEntryToggle(this.props.quizEntry.id);
-            }
-        },
-        {
-            key: "UNSAFE_componentWillMount",
-            value: function UNSAFE_componentWillMount() {
-                this.props.setUi(SHOULD_CLONE_ITEM, false);
-            }
-        },
-        {
-            key: "componentWillUnmount",
-            value: function componentWillUnmount() {
-                this.props.setUi(SHOULD_CLONE_ITEM, false);
-            }
-        },
-        {
-            key: "clickedOutside",
-            value: function clickedOutside() {
-                this.onSubmit();
-            }
-        },
-        {
-            key: "ignoreClickOutsideIf",
-            value: function ignoreClickOutsideIf(e) {
-                var _checkClickedNode = checkClickedNode(e, this.props.appContainer), isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger, outsideApp = _checkClickedNode.outsideApp;
-                return this.props.isOccluded || outsideApp || !isEndEditingTrigger;
-            }
-        },
-        {
-            key: "isValid",
-            value: function isValid() {
-                return this.props.workingEntry.isValid() && this.props.workingQuizEntry.isValid();
-            }
-        },
-        {
-            key: "renderFooter",
-            value: function renderFooter() {
-                var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
-                if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
-                var footerProps = pick(this.props, [
-                    'alternativeRightFooter',
-                    'changeQuizEntryPoints',
-                    'changeQuizEntryProperties',
-                    'clearTemporaryItem',
-                    'displayPosition',
-                    'entry',
-                    'guid',
-                    'initialFocusId',
-                    'itemEditArea',
-                    'openModal',
-                    'quizEntry',
-                    'setUi',
-                    'shouldClone',
-                    'workingQuizEntry'
-                ]);
-                return /*#__PURE__*/ jsx(QuizEntryEditFooter, _object_spread({
-                    clearChanges: this.clearChanges,
-                    isValid: this.isValid(),
-                    successfulSubmit: this.successfulSubmit,
-                    disableSubmit: this.shouldDisableSubmit()
-                }, footerProps));
-            }
-        },
-        {
-            key: "renderAddToBankModal",
-            value: function renderAddToBankModal() {
-                if (!this.props.quizEntry.isItem) return;
-                return /*#__PURE__*/ jsx(AddToBankModal, {
-                    label: t('Add to an Item Bank'),
-                    onContinue: this.handleAddToBankContinue,
-                    onAdd: this.handleAddToBank,
-                    getEntry: this.getEntryForBank,
-                    entryId: this.props.guid,
-                    entryType: this.props.quizEntry.entryType,
-                    quizId: this.props.quizId,
-                    handleValidationErrorsFromApi: this.props.handleValidationErrorsFromApi
+    function successfulSubmit() {
+        return _async_to_generator(function() {
+            var itemData, fetcherError;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        setCanSubmit(false);
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            4,
+                            ,
+                            5
+                        ]);
+                        return [
+                            4,
+                            createOrUpdateItem()
+                        ];
+                    case 2:
+                        itemData = _state.sent();
+                        return [
+                            4,
+                            createOrUpdateQuizEntry(itemData)
+                        ];
+                    case 3:
+                        _state.sent();
+                        return [
+                            3,
+                            5
+                        ];
+                    case 4:
+                        fetcherError = _state.sent();
+                        setCanSubmit(true);
+                        handleApiErrors(fetcherError);
+                        // When reached, this is always a validation error
+                        return [
+                            2,
+                            API_INPUT_VALIDATION_ERROR
+                        ];
+                    case 5:
+                        hideError(guid);
+                        if (shouldClone) {
+                            openRegradeModal();
+                        }
+                        clearModifications();
+                        if (nextQuizEntry) {
+                            createNextQuizEntry();
+                        }
+                        // Delay the switchOffEditing call to prevents the focus from incorrectly
+                        // jumping back to the previous question during the transition between questions.
+                        setTimeout(function() {
+                            switchOffEditing();
+                        });
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    }
+    function clearChanges() {
+        var fromCancel = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+        clearValidationErrorsFromApi(CLEAR_ALL_INPUT_VALIDATION_ERRORS);
+        clearModifications();
+        if (quizEntry.isTemporary) {
+            clearTemporaryItem(quizId);
+            if (fromCancel) {
+                setUi(DELETED_QUIZ_ENTRY, {
+                    position: Math.ceil(quizEntry.position),
+                    inStimulus: quizEntry.hasStimulus
                 });
             }
-        },
-        {
-            key: "renderHeader",
-            value: function renderHeader() {
-                var headerProps = pick(this.props, [
-                    'changeItemTitle',
-                    'clearModifications',
-                    'clearTemporaryItem',
-                    'connectDragSource',
-                    'createTempItem',
-                    'disabledForRegrade',
-                    'displayPosition',
-                    'entry',
-                    'guid',
-                    'hideError',
-                    'initialFocusId',
-                    'name',
-                    'newActiveBank',
-                    'quizEntries',
-                    'quizEntry',
-                    'quizId',
-                    'removeQuizEntry',
-                    'richFITBEnabled',
-                    'richFITBInteractionID',
-                    'screenreaderNotification',
-                    'setUi',
-                    'shouldClone',
-                    'showError',
-                    'withConfirm',
-                    'workingEntry',
-                    'workingQuizEntry'
-                ]);
-                return /*#__PURE__*/ jsx(QuizEntryEditHeader, _object_spread({
-                    isValid: this.isValid(),
-                    successfulSubmit: this.successfulSubmit,
-                    disableSubmit: this.shouldDisableSubmit()
-                }, headerProps));
-            }
-        },
-        {
-            key: "renderForm",
-            value: function renderForm() {
-                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx("div", {
-                    css: this.props.styles.quizEntryEdit,
-                    "data-automation": "sdk-quiz-entry-edit-div"
-                }, /*#__PURE__*/ jsx("div", {
-                    role: "form"
-                }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal()));
-            }
-        },
-        {
-            key: "render",
-            value: function render() {
-                return /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx(Global, {
-                    styles: this.props.styles.globalStyles
-                }), this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable());
+        }
+    }
+    function handleAddToBankContinue() {
+        if (workingQuizEntry.isTemporary) {
+            setCanSubmit(false);
+        }
+    }
+    function handleAddToBank(bankEntry) {
+        if (workingQuizEntry.isTemporary) {
+            createQuizEntry(quizId, bankEntry.id, 'BankEntry', workingQuizEntry.getProperties());
+            clearTemporaryItem(quizId);
+            clearModifications();
+            switchOffEditing();
+        } else if (shouldClone) {
+            cloneQuizEntry(quizId, workingQuizEntry.id, Object.assign({}, workingQuizEntry.toJS(), {
+                entryId: bankEntry.id,
+                entryType: 'BankEntry'
+            }));
+        } else {
+            updateQuizEntry(quizId, workingQuizEntry.id, {
+                entryId: bankEntry.id,
+                entryType: 'BankEntry'
+            });
+        }
+    }
+    function getEntryForBank() {
+        if (entry.isTemporary()) {
+            return createItem(workingEntry, quizId, PARENT_TYPE_ADDING_TO_BANK);
+        } else if (entry.hasModifications()) {
+            if (shouldClone) {
+                return createItem(workingEntry, quizId);
+            } else {
+                return updateItem(workingEntry, quizId);
             }
+        } else {
+            return Promise.resolve(entry);
         }
-    ]);
-    return QuizEntryEdit;
-}(Component);
-_define_property(QuizEntryEdit, "displayName", 'QuizEntryEdit');
-_define_property(QuizEntryEdit, "componentId", "Quizzes".concat(QuizEntryEdit.displayName));
-_define_property(QuizEntryEdit, "propTypes", {
+    }
+    function clearModifications() {
+        clearModificationsProp('items', entry.id);
+        clearModificationsProp('quizEntries', quizEntry.id);
+    }
+    function shouldDisableSubmit() {
+        return Boolean(!canSubmit || haveValidationErrorsFromApi);
+    }
+    function renderFooter() {
+        var isItemOrBankEntry = quizEntry.isItem || quizEntry.isBankEntry;
+        if (!(isItemOrBankEntry || disabledForRegrade)) return;
+        var footerProps = pick(props, [
+            'alternativeRightFooter',
+            'changeQuizEntryPoints',
+            'changeQuizEntryProperties',
+            'clearTemporaryItem',
+            'displayPosition',
+            'entry',
+            'guid',
+            'initialFocusId',
+            'itemEditArea',
+            'openModal',
+            'quizEntry',
+            'setUi',
+            'shouldClone',
+            'workingQuizEntry'
+        ]);
+        return /*#__PURE__*/ jsx(QuizEntryEditFooter, _object_spread({
+            clearChanges: clearChanges,
+            isValid: isValid(),
+            successfulSubmit: successfulSubmit,
+            disableSubmit: shouldDisableSubmit()
+        }, footerProps));
+    }
+    function renderAddToBankModal() {
+        if (!quizEntry.isItem) return;
+        return /*#__PURE__*/ jsx(AddToBankModal, {
+            label: t('Add to an Item Bank'),
+            onContinue: handleAddToBankContinue,
+            onAdd: handleAddToBank,
+            getEntry: getEntryForBank,
+            entryId: guid,
+            entryType: quizEntry.entryType,
+            quizId: quizId,
+            handleValidationErrorsFromApi: handleValidationErrorsFromApi
+        });
+    }
+    function renderHeader() {
+        var headerProps = pick(props, [
+            'changeItemTitle',
+            'clearModifications',
+            'clearTemporaryItem',
+            'connectDragSource',
+            'createTempItem',
+            'disabledForRegrade',
+            'displayPosition',
+            'entry',
+            'guid',
+            'hideError',
+            'initialFocusId',
+            'name',
+            'newActiveBank',
+            'quizEntries',
+            'quizEntry',
+            'quizId',
+            'removeQuizEntry',
+            'richFITBEnabled',
+            'richFITBInteractionID',
+            'screenreaderNotification',
+            'setUi',
+            'shouldClone',
+            'showError',
+            'withConfirm',
+            'workingEntry',
+            'workingQuizEntry'
+        ]);
+        return /*#__PURE__*/ jsx(QuizEntryEditHeader, _object_spread({
+            isValid: isValid(),
+            successfulSubmit: successfulSubmit,
+            disableSubmit: shouldDisableSubmit()
+        }, headerProps));
+    }
+    function renderForm() {
+        return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx("div", {
+            css: styles.quizEntryEdit,
+            "data-automation": "sdk-quiz-entry-edit-div"
+        }, /*#__PURE__*/ jsx("div", {
+            role: "form"
+        }, renderHeader(), children, renderFooter()), renderAddToBankModal()));
+    }
+    function renderDraggable() {
+        var propsForDnDZone = {
+            draggingOver: draggingOver,
+            draggingAboveHalf: draggingAboveHalf
+        };
+        return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(DragAndDropZone, _object_spread_props(_object_spread({}, propsForDnDZone), {
+            location: "above"
+        })), connectDragPreview(renderForm()), /*#__PURE__*/ jsx(DragAndDropZone, _object_spread_props(_object_spread({}, propsForDnDZone), {
+            location: "below"
+        })));
+    }
+    return /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx(Global, {
+        styles: styles.globalStyles
+    }), disabledForRegrade ? renderForm() : renderDraggable());
+});
+QuizEntryEdit.displayName = 'QuizEntryEdit';
+QuizEntryEdit.componentId = 'QuizzesQuizEntryEdit';
+QuizEntryEdit.propTypes = {
     addContentPopoverOpen: PropTypes.bool.isRequired,
     alternativeRightFooter: PropTypes.func,
     appContainer: CustomPropTypes.selectors.isRequired,
@@ -685,8 +610,8 @@ _define_property(QuizEntryEdit, "propTypes", {
     workingEntry: ImmutablePropTypes.record.isRequired,
     workingQuizEntry: ImmutablePropTypes.record.isRequired,
     styles: PropTypes.object
-});
-_define_property(QuizEntryEdit, "defaultProps", {
+};
+QuizEntryEdit.defaultProps = {
     alternativeRightFooter: null,
     children: null,
     disabledForRegrade: false,
@@ -701,10 +626,18 @@ _define_property(QuizEntryEdit, "defaultProps", {
     richFITBEnabled: false,
     richFITBInteractionID: '',
     shouldClone: false
-});
-QuizEntryEdit = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], QuizEntryEdit);
+};
+var QuizEntryEditWithStyles = withStyleOverrides(generateStyle, generateComponentTheme)(QuizEntryEdit);
 export var UndecoratedQuizEntryEdit = QuizEntryEdit;
-export var QuizEntryEditRaw = wrapWithOutsideClickEmotion(QuizEntryEdit);
-export default DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(QuizEntryEditRaw);
+export var QuizEntryEditRaw = wrapWithOutsideClickEmotion(QuizEntryEditWithStyles);
+var QuizEntryEditWithDnd = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var _useQuizEntryDragSource = useQuizEntryDragSource(props), connectDragSource = _useQuizEntryDragSource.connectDragSource, connectDragPreview = _useQuizEntryDragSource.connectDragPreview, isDragging = _useQuizEntryDragSource.isDragging;
+    return /*#__PURE__*/ jsx(QuizEntryEditRaw, _object_spread_props(_object_spread({}, props), {
+        ref: ref,
+        connectDragSource: connectDragSource,
+        connectDragPreview: connectDragPreview,
+        isDragging: isDragging
+    }));
+});
+QuizEntryEditWithDnd.displayName = 'QuizEntryEditWithDnd';
+export default QuizEntryEditWithDnd;