@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -0,0 +1,264 @@
+"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.CopyMoveBankEntryModal = 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 _uiButtons = require("@instructure/ui-buttons");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiRadioInput = require("@instructure/ui-radio-input");
+
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _index = _interopRequireDefault(require("../../../common/components/resources/BankSelection/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("br", null);
+
+var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CopyMoveBankEntryModal, _Component);
+
+  var _super = (0, _createSuper2.default)(CopyMoveBankEntryModal);
+
+  function CopyMoveBankEntryModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CopyMoveBankEntryModal);
+
+    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.state = {
+      bankType: 'existing',
+      newBankTitle: ''
+    };
+
+    _this.copyOrMove = function (newBankId) {
+      if (_this.props.keepCopy) {
+        _this.copyBankEntry(newBankId);
+      } else {
+        _this.moveBankEntry(newBankId);
+      }
+
+      _this.closeAction();
+    };
+
+    _this.continueAction = function () {
+      if (_this.state.bankType === 'new') {
+        var newBank = _Bank.default.create({
+          title: _this.state.newBankTitle,
+          language: _this.context.locale
+        });
+
+        _this.props.createBank(newBank).then(function (bankData) {
+          _this.copyOrMove(bankData.id);
+        });
+      } else {
+        _this.copyOrMove(_this.props.selectedBank.id);
+      }
+    };
+
+    _this.moveBankEntry = function (newBankId) {
+      return _this.props.updateBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId, {
+        bankId: newBankId
+      }).then(function (bankEntry) {
+        _this.props.disassociateBankEntry(_this.props.sourceBankId, _this.props.sourceBankEntryId);
+
+        return bankEntry;
+      }).then(_this.props.onAdd);
+    };
+
+    _this.copyBankEntry = function (newBankId) {
+      return _this.props.createEntry().then(function (entry) {
+        return _this.props.createBankEntry(newBankId, _this.props.entryType, entry.id);
+      }).then(_this.props.onAdd);
+    };
+
+    _this.closeAction = function () {
+      if (_this.props.modalTrigger) {
+        _this.props.modalTrigger.focus();
+      }
+
+      _this.props.closeModal();
+    };
+
+    _this.onBankSelection = function (e, option) {
+      _this.props.uiSet(_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_BANK_SELECTION, option.value);
+    };
+
+    _this.onKeepCopyChange = function (e) {
+      _this.props.uiSet(_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
+    };
+
+    _this.handleRadioChange = function (event, value) {
+      _this.setState({
+        bankType: value
+      });
+    };
+
+    _this.onTitleChange = function (e) {
+      _this.setState({
+        newBankTitle: e.target.value
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(CopyMoveBankEntryModal, [{
+    key: "cancelButton",
+    value: function cancelButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.closeAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Cancel'));
+    }
+  }, {
+    key: "addToBankButton",
+    value: function addToBankButton() {
+      var _this$state = this.state,
+          bankType = _this$state.bankType,
+          newBankTitle = _this$state.newBankTitle;
+      var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "primary",
+        onClick: this.continueAction,
+        disabled: disabled,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-add-to-bank-button"
+      }, (0, _formatMessage.default)('Add'));
+    }
+  }, {
+    key: "renderBankTypeContent",
+    value: function renderBankTypeContent() {
+      if (this.state.bankType === 'existing') {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          onBankSelection: this.onBankSelection,
+          selectedBank: this.props.selectedBank,
+          "data-automation": "sdk-bank-selection"
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        onChange: this.onTitleChange,
+        value: this.state.newBankTitle,
+        renderLabel: (0, _formatMessage.default)('New Bank Title'),
+        type: "text"
+      });
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+        onChange: this.handleRadioChange,
+        name: (0, _formatMessage.default)('Bank Type'),
+        defaultValue: this.state.bankType,
+        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank Type'))
+      }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        value: "existing",
+        label: (0, _formatMessage.default)('Existing item bank')
+      }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        value: "new",
+        label: (0, _formatMessage.default)('New item bank')
+      })), _ref, this.renderBankTypeContent(), _ref2, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        label: (0, _formatMessage.default)('Keep a copy in this bank'),
+        value: "medium",
+        checked: this.props.keepCopy,
+        onChange: this.onKeepCopyChange,
+        "data-automation": "sdk-keep-copy-in-bank-checkbox"
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.modalOpen,
+        onDismiss: this.closeAction,
+        size: "small",
+        label: this.props.label,
+        "data-automation": "sdk-copy-move-bank-entry-modal"
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, this.props.label), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.closeAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.addToBankButton()));
+    }
+  }]);
+  CopyMoveBankEntryModal.displayName = "CopyMoveBankEntryModal";
+  return CopyMoveBankEntryModal;
+}(_react.Component);
+
+exports.CopyMoveBankEntryModal = CopyMoveBankEntryModal;
+CopyMoveBankEntryModal.propTypes = {
+  closeModal: _propTypes.default.func.isRequired,
+  createBank: _propTypes.default.func.isRequired,
+  createBankEntry: _propTypes.default.func.isRequired,
+  // Create the bank entry's entry, or clone it if it already exists. Should
+  // always be provided when a source is provided.
+  createEntry: _propTypes.default.func.isRequired,
+  disassociateBankEntry: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
+  entryId: _propTypes.default.string.isRequired,
+  // Only present for use in modalOpen key via this component's connected index
+  entryType: _propTypes.default.string.isRequired,
+  // Resolve to the bank entry's entry, or create it if it does not yet exist.
+  keepCopy: _propTypes.default.bool,
+  label: _propTypes.default.string.isRequired,
+  modalOpen: _propTypes.default.bool.isRequired,
+  modalTrigger: _propTypes.default.instanceOf(_react.Component),
+  onAdd: _propTypes.default.func,
+  selectedBank: _reactImmutableProptypes.default.record,
+  sourceBankEntryId: _propTypes.default.string.isRequired,
+  sourceBankId: _propTypes.default.string.isRequired,
+  uiSet: _propTypes.default.func.isRequired,
+  updateBankEntry: _propTypes.default.func.isRequired
+};
+CopyMoveBankEntryModal.contextTypes = {
+  locale: _propTypes.default.string
+};
+CopyMoveBankEntryModal.defaultProps = {
+  keepCopy: true,
+  modalTrigger: null,
+  onAdd: function onAdd() {},
+  selectedBank: null
+};
+var _default = CopyMoveBankEntryModal;
+exports.default = _default;

package/lib/banks/components/CreateBankModal/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _banks = require("../../api/banks.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _modifications = require("../../../common/actions/modifications.js");
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _errorsShowing = require("../../../common/actions/errorsShowing.js");
+
+var _modalHelpers = require("../../../common/util/modalHelpers.js");
+
+var _alerts = require("../../../common/actions/alerts.js");
+
+function mapStateToProps(state) {
+  var temporaryBank = new _Bank.default(state.getIn(['modifications', 'banks', _quizCommon.TEMPORARY_BANK_ID]));
+  var errorsMap = state.get('errorsShowing', (0, _immutable.Map)());
+  var errorKey = "".concat(_quizCommon.TEMPORARY_BANK_ID, "_create_bank");
+  return {
+    modalOpen: state.getIn(['modal', 'isOpen']) === _quizCommon.CREATE_BANK_MODAL,
+    modalTrigger: (0, _modalHelpers.getModalTrigger)(state),
+    onCreateBank: state.getIn(['modal', 'options', 'onCreateBank']),
+    temporaryBank: temporaryBank,
+    errorKey: errorKey,
+    displayError: errorsMap.get(errorKey)
+  };
+}
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    createBank: (0, _redux.bindActionCreators)(_banks.createBank, dispatch),
+    changeBank: (0, _redux.bindActionCreators)(_modifications.changeBank, dispatch),
+    clearModifications: (0, _redux.bindActionCreators)(_modifications.clearModifications, dispatch),
+    showError: (0, _redux.bindActionCreators)(_errorsShowing.showError, dispatch),
+    hideError: (0, _redux.bindActionCreators)(_errorsShowing.hideError, dispatch),
+    closeModal: (0, _redux.bindActionCreators)(modalActions.closeModal, dispatch),
+    screenreaderNotification: (0, _redux.bindActionCreators)(_alerts.screenreaderNotification, dispatch)
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;

package/lib/banks/components/CreateBankModal/presenter.js

@@ -0,0 +1,190 @@
+"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.CreateBankModal = 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 _uiButtons = require("@instructure/ui-buttons");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _instUIMessages = require("../../../common/util/instUIMessages.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fTWio',
+  template: function template(theme) {
+    return "\n\n.fTWio_detV{flex:1 1 auto;font-size:".concat(theme.bankNameInputFontSize || 'inherit', ";padding:").concat(theme.bankNamePadding || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}\n\n.fTWio_rOsj{padding:").concat(theme.bankNameLabelPadding || 'inherit', "}");
+  },
+  'bankNameInput': 'fTWio_detV',
+  'bankNameLabel': 'fTWio_rOsj'
+};
+var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CreateBankModal, _Component);
+
+  var _super = (0, _createSuper2.default)(CreateBankModal);
+
+  function CreateBankModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CreateBankModal);
+
+    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.continueAction = function () {
+      _this.props.showError(_this.props.errorKey);
+
+      if (_this.props.temporaryBank.isValid()) {
+        _this.props.createBank(_this.props.temporaryBank);
+
+        _this.props.onCreateBank();
+
+        _this.closeAction();
+      } else {
+        _this.props.screenreaderNotification((0, _formatMessage.default)('Bank name cannot be blank.'));
+      }
+    };
+
+    _this.closeAction = function () {
+      _this.props.hideError(_this.props.errorKey);
+
+      _this.props.clearModifications('banks', _this.props.temporaryBank.id);
+
+      if (_this.props.modalTrigger) {
+        _this.props.modalTrigger.focus();
+      }
+
+      _this.props.closeModal();
+    };
+
+    _this.onNameChange = function (e) {
+      _this.props.showError(_this.props.errorKey);
+
+      _this.props.changeBank(_this.props.temporaryBank.id, {
+        title: e.target.value
+      });
+    };
+
+    _this.getErrors = function () {
+      if (_this.props.displayError) {
+        return (0, _instUIMessages.toErrors)(_this.props.temporaryBank.errorsFor('title').toJS());
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(CreateBankModal, [{
+    key: "cancelButton",
+    value: function cancelButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.closeAction,
+        className: styles.footerButtonWrapper,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Cancel'));
+    }
+  }, {
+    key: "createBankButton",
+    value: function createBankButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        type: "button",
+        variant: "primary",
+        onClick: this.continueAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-create-bank-button"
+      }, (0, _formatMessage.default)('Create Bank'));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankNameInput
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        messages: this.getErrors(),
+        onChange: this.onNameChange,
+        renderLabel: /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.bankNameLabel
+        }, (0, _formatMessage.default)('Bank Name')),
+        type: "text",
+        placeholder: (0, _formatMessage.default)('Enter a name...'),
+        "data-automation": "sdk-create-bank-name-textinput"
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.modalOpen,
+        onDismiss: this.closeAction,
+        size: "small",
+        label: (0, _formatMessage.default)('Item Bank'),
+        "data-automation": "sdk-create-bank-modal"
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, (0, _formatMessage.default)('New Item Bank')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.closeAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.createBankButton()));
+    }
+  }]);
+  CreateBankModal.displayName = "CreateBankModal";
+  return CreateBankModal;
+}(_react.Component), _class2.propTypes = {
+  modalOpen: _propTypes.default.bool.isRequired,
+  modalTrigger: _propTypes.default.instanceOf(_react.Component),
+  temporaryBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
+  displayError: _propTypes.default.bool,
+  errorKey: _propTypes.default.string.isRequired,
+  createBank: _propTypes.default.func.isRequired,
+  changeBank: _propTypes.default.func.isRequired,
+  clearModifications: _propTypes.default.func.isRequired,
+  showError: _propTypes.default.func.isRequired,
+  hideError: _propTypes.default.func.isRequired,
+  closeModal: _propTypes.default.func.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  onCreateBank: _propTypes.default.func
+}, _class2.defaultProps = {
+  displayError: false,
+  modalTrigger: null,
+  onCreateBank: function onCreateBank() {}
+}, _temp)) || _class);
+exports.CreateBankModal = CreateBankModal;
+var _default = CreateBankModal;
+exports.default = _default;

package/lib/banks/components/CreateBankModal/theme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var typography = _ref.typography,
+      spacing = _ref.spacing;
+  return {
+    bankNameInputFontSize: typography.fontSizeMedium,
+    bankNamePadding: spacing.xSmall,
+    bankNameLabelPadding: spacing.xSmall
+  };
+}

package/lib/banks/components/EditBankModal/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _banks = require("../../api/banks.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _modifications = require("../../../common/actions/modifications.js");
+
+var _errorsShowing = require("../../../common/actions/errorsShowing.js");
+
+var _modalHelpers = require("../../../common/util/modalHelpers.js");
+
+function mapStateToProps(state, props) {
+  var errorsMap = state.get('errorsShowing', (0, _immutable.Map)());
+  var errorKey = "".concat(props.workingBank.id, "_edit_bank");
+  return {
+    modalOpen: state.getIn(['modal', 'isOpen']) === [_quizCommon.EDIT_BANK_MODAL, props.workingBank.id].join(':'),
+    modalTrigger: (0, _modalHelpers.getModalTrigger)(state),
+    errorKey: errorKey,
+    displayError: errorsMap.get(errorKey)
+  };
+}
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    updateBank: (0, _redux.bindActionCreators)(_banks.updateBank, dispatch),
+    changeBank: (0, _redux.bindActionCreators)(_modifications.changeBank, dispatch),
+    clearModifications: (0, _redux.bindActionCreators)(_modifications.clearModifications, dispatch),
+    showError: (0, _redux.bindActionCreators)(_errorsShowing.showError, dispatch),
+    hideError: (0, _redux.bindActionCreators)(_errorsShowing.hideError, dispatch),
+    closeModal: (0, _redux.bindActionCreators)(modalActions.closeModal, dispatch)
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;