@instructure/quiz-core 17.19.2-rc.5 → 17.19.3-rc.2

package/lib/common/components/shared/PrintTrigger/presenter.js

@@ -0,0 +1,151 @@
+"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.PrintTrigger = 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 _uiOverlays = require("@instructure/ui-overlays");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _Spinner = require("../spinner/Spinner.js");
+
+var _ElementsForSelectors = _interopRequireDefault(require("../../../util/ElementsForSelectors.js"));
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../util/CustomPropTypes.js"));
+
+var _printUtils = require("../../../util/printUtils.js");
+
+var _index = _interopRequireDefault(require("../../PrintFontSizeModal/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var PrintTrigger = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(PrintTrigger, _Component);
+
+  var _super = (0, _createSuper2.default)(PrintTrigger);
+
+  function PrintTrigger() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, PrintTrigger);
+
+    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 = {
+      waitingForImages: false,
+      printType: _quizCommon.PRINT_CURRENT_PAGE,
+      // quiz key or blank quiz
+      shouldPrint: false
+    };
+
+    _this.ensureImagesLoaded = function (cb) {
+      _this.setState({
+        waitingForImages: true
+      });
+
+      (0, _printUtils.ensureImagesLoaded)().then(function () {
+        return _this.setState({
+          waitingForImages: false
+        }, cb);
+      });
+    };
+
+    _this.handlePrintModalSubmit = function (fontSize, shouldPersist) {
+      _this.props.closePrintFontSizeModal();
+
+      if (shouldPersist) {
+        _this.props.persistPrintFontSize(fontSize);
+      } else {
+        _this.props.setPrintFontSize(fontSize);
+      }
+
+      if (_this.state.printType === _quizCommon.PRINT_BLANK) {
+        _this.props.navigateToPreviewPrint();
+      } else {
+        // default to printing the current page
+        // 400ms timeout because default transition (for print modal
+        // to exit) is 300ms
+        _this.ensureImagesLoaded(function () {
+          return (0, _printUtils.printWithCss)(fontSize, 400);
+        });
+      }
+    };
+
+    _this.handlePrint = function (printType) {
+      _this.setState({
+        printType: printType
+      });
+
+      _this.props.openPrintFontSizeModal();
+    };
+
+    _this.applicationElement = function () {
+      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(PrintTrigger, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiOverlays.Overlay, {
+        applicationElement: this.applicationElement,
+        open: this.state.waitingForImages,
+        shouldContainFocus: true,
+        transition: "fade",
+        label: (0, _formatMessage.default)('Preparing Print Preview')
+      }, /*#__PURE__*/_react.default.createElement(_uiOverlays.Mask, null, /*#__PURE__*/_react.default.createElement(_Spinner.QuizzesSpinner, {
+        mainText: (0, _formatMessage.default)('Preparing Print Preview')
+      }))), /*#__PURE__*/_react.default.createElement(_index.default, {
+        isOpen: this.props.printFontSizeModalOpen,
+        onSubmit: this.handlePrintModalSubmit,
+        onCancel: this.props.closePrintFontSizeModal,
+        persistedPrintFontSize: this.props.persistedPrintFontSize
+      }), this.props.render(this.handlePrint));
+    }
+  }]);
+  PrintTrigger.displayName = "PrintTrigger";
+  return PrintTrigger;
+}(_react.Component);
+
+exports.PrintTrigger = PrintTrigger;
+PrintTrigger.propTypes = {
+  appContainer: _CustomPropTypes.default.selectors,
+  render: _propTypes.default.func.isRequired,
+  persistedPrintFontSize: _propTypes.default.string,
+  printFontSizeModalOpen: _propTypes.default.bool.isRequired,
+  openPrintFontSizeModal: _propTypes.default.func.isRequired,
+  closePrintFontSizeModal: _propTypes.default.func.isRequired,
+  navigateToPreviewPrint: _propTypes.default.func,
+  setPrintFontSize: _propTypes.default.func.isRequired,
+  persistPrintFontSize: _propTypes.default.func.isRequired
+};
+PrintTrigger.defaultProps = {
+  appContainer: null,
+  persistedPrintFontSize: 'medium',
+  navigateToPreviewPrint: function navigateToPreviewPrint() {}
+};
+var _default = PrintTrigger;
+exports.default = _default;

package/lib/common/components/shared/TagDisplay/index.js

@@ -0,0 +1,105 @@
+"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.TagDisplay = 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 _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiTag = require("@instructure/ui-tag");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fYbSI',
+  template: function template(theme) {
+    return "\n\n.fYbSI_estS,[dir=ltr] .fYbSI_estS,[dir=rtl] .fYbSI_estS{float:right}";
+  },
+  'tags': 'fYbSI_estS'
+};
+var TagDisplay = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TagDisplay, _Component);
+
+  var _super = (0, _createSuper2.default)(TagDisplay);
+
+  function TagDisplay() {
+    (0, _classCallCheck2.default)(this, TagDisplay);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(TagDisplay, [{
+    key: "render",
+    value: function render() {
+      if (this.props.tagAssociations == null) {
+        return null;
+      }
+
+      var display = this.props.display;
+      var count = this.props.tagAssociations.size;
+      var extra = count - display;
+      var visible = this.props.tagAssociations.take(display).map(function (t) {
+        return /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
+          margin: "0 xx-small 0 0",
+          key: t.get('id'),
+          text: t.get('tag_value')
+        });
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "group",
+        className: styles.tags,
+        "aria-label": (0, _formatMessage.default)('question tags')
+      }, visible, extra > 0 && /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
+        theme: {
+          defaultBackground: '#FFFFFF'
+        },
+        text: /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('{n} other tags not shown', {
+            n: extra
+          })
+        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          size: "small"
+        }, (0, _formatMessage.default)('+{n}', {
+          n: extra
+        })))
+      }));
+    }
+  }]);
+  TagDisplay.displayName = "TagDisplay";
+  return TagDisplay;
+}(_react.Component), _class2.propTypes = {
+  display: _propTypes.default.number,
+  tagAssociations: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map)
+}, _class2.defaultProps = {
+  display: 2,
+  tagAssociations: null
+}, _temp)) || _class);
+exports.TagDisplay = TagDisplay;
+var _default = TagDisplay;
+exports.default = _default;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}

package/lib/common/components/shared/TagSelect/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _default = _presenter.default;
+exports.default = _default;

package/lib/common/components/shared/TagSelect/presenter.js

@@ -0,0 +1,306 @@
+"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.TagSelect = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _uiSelect = require("@instructure/ui-select");
+
+var _index = _interopRequireDefault(require("../TagWrapper/index.js"));
+
+var _differenceBy = _interopRequireDefault(require("lodash/differenceBy"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var tagShape = _propTypes.default.shape({
+  id: _propTypes.default.string,
+  value: _propTypes.default.string.isRequired
+});
+
+var TagSelect = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TagSelect, _Component);
+
+  var _super = (0, _createSuper2.default)(TagSelect);
+
+  function TagSelect() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TagSelect);
+
+    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 = {
+      inputValue: '',
+      isShowingOptions: false,
+      highlightedOptionId: null
+    };
+
+    _this.setInputRef = function (inputRef) {
+      _this.inputRef = inputRef;
+    };
+
+    _this.handleShowOptions = function () {
+      _this.setState({
+        isShowingOptions: true
+      });
+    };
+
+    _this.handleHideOptions = function () {
+      _this.setState({
+        isShowingOptions: false
+      });
+    };
+
+    _this.handleBlur = function () {
+      _this.setState({
+        highlightedOptionId: null
+      });
+    };
+
+    _this.handleHighlightOption = function (event, _ref) {
+      var id = _ref.id;
+      event.persist();
+
+      var tag = _this.decodeTag(id);
+
+      _this.setState(function (state) {
+        return {
+          highlightedOptionId: id,
+          inputValue: event.type === 'keydown' ? tag.value : state.inputValue
+        };
+      });
+    };
+
+    _this.handleSelectOption = function (event, _ref2) {
+      var id = _ref2.id;
+      if (id === _quizCommon.SELECT_EMPTY_OPTION) return;
+
+      var tag = _this.decodeTag(id);
+
+      _this.props.onChange([].concat((0, _toConsumableArray2.default)(_this.props.tags), [tag.id ? tag : {
+        value: tag.value
+      }]));
+
+      _this.setState({
+        highlightedOptionId: null,
+        inputValue: '',
+        isShowingOptions: false
+      });
+    };
+
+    _this.handleInputChange = function (event) {
+      var inputValue = event.target.value !== ' ' ? event.target.value : '';
+
+      _this.props.onInputChange(inputValue === '' ? null : inputValue);
+
+      _this.setState({
+        inputValue: inputValue,
+        isShowingOptions: true
+      });
+    };
+
+    _this.handleKeyDown = function (event) {
+      var inputValue = _this.state.inputValue;
+
+      if (event.keyCode === 8) {
+        // when backspace key is pressed
+        if (inputValue === '' && _this.props.tags.length > 0) {
+          // remove last selected option, if input has no entered text
+          _this.props.onChange(_this.props.tags.slice(0, -1));
+
+          _this.setState({
+            highlightedOptionId: null
+          });
+        }
+      }
+    };
+
+    _this.dismissTag = function (encodedTag) {
+      var tags = _this.props.tags.filter(function (tag) {
+        return _this.encodeTag(tag) !== encodedTag;
+      });
+
+      _this.props.onChange(tags);
+
+      _this.setState({
+        highlightedOptionId: null
+      }, function () {
+        _this.inputRef.focus();
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TagSelect, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (prevProps.tagSuggestions !== this.props.tagSuggestions) {
+        this.setState({
+          highlightedOptionId: this.props.tagSuggestions.length > 0 ? this.encodeTag(this.props.tagSuggestions[0]) : null
+        });
+      }
+    }
+  }, {
+    key: "encodeTag",
+    value: function encodeTag(tag) {
+      return String(tag.id) + ' ' + tag.value;
+    }
+  }, {
+    key: "decodeTag",
+    value: function decodeTag(encodedTag) {
+      var parts = encodedTag.split(' ');
+      var id = parts.shift();
+      return {
+        id: id !== 'undefined' ? id : void 0,
+        value: parts.join(' ')
+      };
+    }
+  }, {
+    key: "normalizeSpaces",
+    value: function normalizeSpaces(text) {
+      return text.replace(/  +/g, ' ').trim();
+    }
+  }, {
+    key: "renderTags",
+    value: function renderTags() {
+      var _this2 = this;
+
+      var tags = this.props.tags;
+      return tags.map(function (tag, index) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: _this2.encodeTag(tag),
+          id: _this2.encodeTag(tag),
+          index: index,
+          text: tag.value,
+          onClick: _this2.dismissTag
+        });
+      });
+    }
+  }, {
+    key: "emptyOption",
+    value: function emptyOption() {
+      var _this$props = this.props,
+          tags = _this$props.tags,
+          noMatchText = _this$props.noMatchText;
+      var inputValue = this.normalizeSpaces(this.state.inputValue);
+      var exists = (0, _formatMessage.default)('Tag already selected: { text }', {
+        text: inputValue
+      });
+      return tags.some(function (tag) {
+        return tag.value === inputValue;
+      }) ? exists : noMatchText;
+    }
+  }, {
+    key: "options",
+    value: function options() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          allowNewTags = _this$props2.allowNewTags,
+          tags = _this$props2.tags,
+          tagSuggestions = _this$props2.tagSuggestions;
+      var notSelectedTagSuggestions = (0, _differenceBy.default)(tagSuggestions, tags, 'value');
+      var options = notSelectedTagSuggestions.map(function (tag) {
+        return /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+          key: _this3.encodeTag(tag),
+          id: _this3.encodeTag(tag),
+          isHighlighted: _this3.encodeTag(tag) === _this3.state.highlightedOptionId
+        }, tag.value);
+      });
+      var inputValue = this.normalizeSpaces(this.state.inputValue); // Don't offer tag creation on suggested or selected tags
+
+      if (!tagSuggestions.concat(tags).some(function (tag) {
+        return tag.value === inputValue;
+      })) {
+        if (allowNewTags && inputValue.length > 0) {
+          options.push( /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+            id: this.encodeTag({
+              value: inputValue
+            }),
+            key: this.encodeTag({
+              value: inputValue
+            }),
+            isHighlighted: options.length === 0
+          }, (0, _formatMessage.default)('Create new tag: { text }', {
+            text: inputValue
+          })));
+        }
+      }
+
+      if (options.length === 0) {
+        options.push( /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
+          id: _quizCommon.SELECT_EMPTY_OPTION,
+          key: _quizCommon.SELECT_EMPTY_OPTION
+        }, this.emptyOption()));
+      }
+
+      return options;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          inputValue = _this$state.inputValue,
+          isShowingOptions = _this$state.isShowingOptions;
+      return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
+        renderLabel: (0, _formatMessage.default)('Tags and Metadata'),
+        inputValue: inputValue,
+        isShowingOptions: isShowingOptions,
+        inputRef: this.setInputRef,
+        onBlur: this.handleBlur,
+        onInputChange: this.handleInputChange,
+        onRequestShowOptions: this.handleShowOptions,
+        onRequestHideOptions: this.handleHideOptions,
+        onRequestHighlightOption: this.handleHighlightOption,
+        onRequestSelectOption: this.handleSelectOption,
+        onKeyDown: this.handleKeyDown,
+        renderBeforeInput: this.props.tags.length > 0 ? this.renderTags() : null,
+        "data-automation": "sdk-tags-and-metadata"
+      }, this.options());
+    }
+  }]);
+  TagSelect.displayName = "TagSelect";
+  return TagSelect;
+}(_react.Component);
+
+exports.TagSelect = TagSelect;
+TagSelect.propTypes = {
+  allowNewTags: _propTypes.default.bool,
+  noMatchText: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onInputChange: _propTypes.default.func.isRequired,
+  tagSuggestions: _propTypes.default.arrayOf(tagShape),
+  tags: _propTypes.default.arrayOf(tagShape)
+};
+TagSelect.defaultProps = {
+  allowNewTags: true,
+  tags: [],
+  tagSuggestions: []
+};
+var _default = TagSelect;
+exports.default = _default;

package/lib/common/components/shared/TagSuggestSelect/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("../../../react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _redux = require("redux");
+
+var _tagAssociations = require("../../../../common/actions/tagAssociations.js");
+
+var _tagAssociations2 = require("../../../../banks/api/tagAssociations.js");
+
+function mapStateToProps(state, props) {
+  return {
+    tagSuggestions: state.getIn(['tagAssociations', 'tagSuggestions', props.parentType, props.parentId])
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    getTagSuggestions: (0, _redux.bindActionCreators)(_tagAssociations2.getTagSuggestions, dispatch),
+    setTagSuggestions: (0, _redux.bindActionCreators)(_tagAssociations.setTagSuggestions, dispatch),
+    setTagInput: (0, _redux.bindActionCreators)(_tagAssociations.setTagInput, dispatch)
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;