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

package/lib/common/components/shared/functionality/componentWithOutsideClick.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _reduxStore = _interopRequireDefault(require("../../../../reduxStore.js"));
+
+// ======================================================
+// this component extends another component and will run
+// the 'clickedOutside' function defined on that component
+// if users click outside of it
+// clickedOutside: called when the user clicks outside node
+// ignoreClickOutsideIf: if returns true then do not run
+// the clickedOutside callback
+// ======================================================
+var wrapWithOutsideClick = function wrapWithOutsideClick(ComposedComponent) {
+  var wrappedWithOutsideClick = /*#__PURE__*/function (_ComposedComponent) {
+    (0, _inherits2.default)(wrappedWithOutsideClick, _ComposedComponent);
+
+    var _super = (0, _createSuper2.default)(wrappedWithOutsideClick);
+
+    function wrappedWithOutsideClick(props) {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, wrappedWithOutsideClick);
+      _this = _super.call(this, props);
+      _this.checkForOutsideClick = _this.checkForOutsideClick.bind((0, _assertThisInitialized2.default)(_this));
+      return _this;
+    }
+
+    (0, _createClass2.default)(wrappedWithOutsideClick, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.mouseDownEventCb = (0, _debounce.default)(this.checkForOutsideClick, 300, {
+          leading: true,
+          trailing: false
+        });
+        document.addEventListener('click', this.mouseDownEventCb, true);
+        (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "componentDidMount", this) && (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "componentDidMount", this).call(this);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener('click', this.mouseDownEventCb, true);
+        (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "componentWillUnmount", this) && (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "componentWillUnmount", this).call(this);
+      }
+    }, {
+      key: "checkForOutsideClick",
+      value: function checkForOutsideClick(e) {
+        var isModalOpen = _reduxStore.default.getAppState().getIn(['modal', 'isOpen']);
+
+        if ((0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this) && (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this).call(this, e) || isModalOpen) {
+          return;
+        }
+
+        if ((0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "clickedOutside", this)) {
+          var domNode = _reactDom.default.findDOMNode(this);
+
+          if (!(domNode && domNode.contains(e.target))) {
+            (0, _get2.default)((0, _getPrototypeOf2.default)(wrappedWithOutsideClick.prototype), "clickedOutside", this).call(this, e);
+          }
+        }
+      }
+    }]);
+    return wrappedWithOutsideClick;
+  }(ComposedComponent);
+
+  return wrappedWithOutsideClick;
+};
+
+var _default = wrapWithOutsideClick;
+exports.default = _default;

package/lib/common/components/shared/functionality/disableDraggingOverride.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("../../../react-redux.js");
+
+var _quizzes = require("../../../selectors/quizzes.js");
+
+var _default = function _default(ComposedComponent) {
+  var mapStateToProps = function mapStateToProps(state) {
+    return {
+      disableDraggingOverride: (0, _quizzes.isEditingQuizEntry)(state)
+    };
+  };
+
+  return (0, _reactRedux.connect)(mapStateToProps)(ComposedComponent);
+};
+
+exports.default = _default;

package/lib/common/components/shared/functionality/makeEditable.js

@@ -0,0 +1,152 @@
+"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.makeEditable = 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 _immutable = require("immutable");
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _extend = _interopRequireDefault(require("lodash/extend"));
+
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../react-redux.js");
+
+var editingActionCreators = _interopRequireWildcard(require("../../../actions/editing.js"));
+
+// ==============================================================
+// two components which are composed to enable editing actions
+// component one: connect to redux store for state & action creators
+// component two: filter state, apply unique component ID to
+// actions, render component
+// ==============================================================
+var connectToEditStore = function connectToEditStore(ComposedComponent) {
+  var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+    return {
+      editingActions: (0, _redux.bindActionCreators)(editingActionCreators, dispatch)
+    };
+  };
+
+  var mapStateToProps = function mapStateToProps(state) {
+    return {
+      editing: state.get('editing')
+    };
+  };
+
+  return (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ComposedComponent);
+};
+
+var giveEditProps = function giveEditProps(ComposedComponent) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_Component) {
+    (0, _inherits2.default)(_class, _Component);
+
+    var _super = (0, _createSuper2.default)(_class);
+
+    function _class() {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, _class);
+
+      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.switchOnEditing = function () {
+        var initialFocusId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+
+        _this.props.editingActions.startEdit(_this.uniqueId(), initialFocusId);
+      };
+
+      _this.switchOffEditing = function () {
+        _this.props.editingActions.endEdit(_this.uniqueId());
+      };
+
+      _this.toggleEditing = function () {
+        _this.props.editingActions.toggleEditing(_this.uniqueId());
+      };
+
+      return _this;
+    }
+
+    (0, _createClass2.default)(_class, [{
+      key: "componentWillMount",
+      value: function componentWillMount() {
+        this._uniqId = (0, _uniqueId.default)("".concat(ComposedComponent.displayName, "_"));
+      }
+    }, {
+      key: "uniqueId",
+      value: function uniqueId() {
+        return this.props.guid || this._uniqId;
+      }
+    }, {
+      key: "propsForChild",
+      value: function propsForChild() {
+        var uniqueId = this.uniqueId();
+        var editingProps = {
+          isEditing: !!this.props.editing.get(uniqueId),
+          editingKey: uniqueId,
+          switchOnEditing: this.switchOnEditing,
+          switchOffEditing: this.switchOffEditing,
+          toggleEditing: this.toggleEditing
+        }; // Don't inject the `editing` prop in, or else all editable
+        // components will have to rerender when one switches editing
+        // on/off.
+
+        return (0, _omit.default)((0, _extend.default)({}, editingProps, this.props), ['editing']);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/_react.default.createElement(ComposedComponent, this.propsForChild());
+      }
+    }]);
+    _class.displayName = "_class";
+    return _class;
+  }(_react.Component), _class.propTypes = {
+    editing: _reactImmutableProptypes.default.map,
+    editingActions: _propTypes.default.shape({
+      startEdit: _propTypes.default.func.isRequired,
+      endEdit: _propTypes.default.func.isRequired,
+      toggleEditing: _propTypes.default.func.isRequired
+    }).isRequired,
+    guid: _propTypes.default.string
+  }, _class.displayName = ComposedComponent.displayName, _class.defaultProps = {
+    editing: (0, _immutable.fromJS)({}),
+    guid: null
+  }, _temp;
+};
+
+var makeEditable = function makeEditable(givenComponent) {
+  return connectToEditStore(giveEditProps(givenComponent));
+};
+
+exports.makeEditable = makeEditable;
+var _default = makeEditable;
+exports.default = _default;

package/lib/common/components/shared/functionality/makeScrollable.js

@@ -0,0 +1,174 @@
+"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.makeScrollable = exports.unconnectedExtension = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 = require("prop-types");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../react-redux.js");
+
+var scrollingActionCreators = _interopRequireWildcard(require("../../../actions/scrolling.js"));
+
+var connectToScrollingStore = function connectToScrollingStore(ComposedComponent) {
+  var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+    return {
+      scrollingActions: (0, _redux.bindActionCreators)(scrollingActionCreators, dispatch)
+    };
+  };
+
+  var mapStateToProps = function mapStateToProps(state) {
+    // TODO: change the name in state
+    return {
+      scrolledComponentKey: state.getIn(['scrolling', 'scrolledComponentKey']),
+      scrollingFocus: state.getIn(['scrolling', 'scrollingFocus'])
+    };
+  };
+
+  return (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps, null, {
+    withRef: true
+  })(ComposedComponent);
+};
+
+var unconnectedMakeScrollable = function unconnectedMakeScrollable(ComposedComponent) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_Component) {
+    (0, _inherits2.default)(WithScrollableItems, _Component);
+
+    var _super = (0, _createSuper2.default)(WithScrollableItems);
+
+    function WithScrollableItems(props) {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, WithScrollableItems);
+      _this = _super.call(this, props);
+
+      _this.composedRef = function (node) {
+        _this._composed = node;
+      };
+
+      _this._composed = null;
+      return _this;
+    }
+
+    (0, _createClass2.default)(WithScrollableItems, [{
+      key: "isScrolled",
+      value: function isScrolled() {
+        return this.props.scrollKey === this.props.scrolledComponentKey;
+      }
+    }, {
+      key: "scrollIntoView",
+      value: function scrollIntoView() {
+        var scrollingFocus = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+
+        var node = _reactDom.default.findDOMNode(this);
+
+        node.scrollIntoView();
+        if (scrollingFocus) node.focus(); // Focus on the item once scrolled into view
+      }
+    }, {
+      key: "setFocus",
+      value: function setFocus() {
+        var node = _reactDom.default.findDOMNode(this);
+
+        node && node.focus();
+      }
+    }, {
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        if (this.props.shouldFocusOnMount) {
+          this.setFocus();
+        }
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, prevState) {
+        var _this$props = this.props,
+            scrolledComponentKey = _this$props.scrolledComponentKey,
+            scrollingFocus = _this$props.scrollingFocus,
+            scrollKey = _this$props.scrollKey,
+            scrollingActions = _this$props.scrollingActions;
+
+        if (prevProps.scrolledComponentKey !== scrolledComponentKey && scrolledComponentKey === scrollKey) {
+          this.scrollIntoView(scrollingFocus);
+          scrollingActions.clearsScrolledComponentKey();
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({}, this.composedProps, {
+          ref: this.composedRef
+        }), this.props.children);
+      }
+    }, {
+      key: "composedProps",
+      get: function get() {
+        var _this2 = this;
+
+        // We want the props that are in CC.propTypes, and the passthrough props,
+        // which are in neither our nor CC's propTypes
+        return Object.assign.apply(Object, [{}].concat((0, _toConsumableArray2.default)(Object.keys(this.props).filter(function (name) {
+          return ComposedComponent.propTypes && ComposedComponent.propTypes[name] || !_this2.constructor.propTypes[name];
+        }).map(function (name) {
+          return (0, _defineProperty2.default)({}, name, _this2.props[name]);
+        }))));
+      }
+    }]);
+    WithScrollableItems.displayName = "WithScrollableItems";
+    return WithScrollableItems;
+  }(_react.Component), _class.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ComposedComponent.propTypes || {}), {}, {
+    scrollKey: _propTypes.PropTypes.string,
+    scrolledComponentKey: _propTypes.PropTypes.string,
+    scrollingFocus: _propTypes.PropTypes.bool,
+    scrollingActions: _propTypes.PropTypes.shape({
+      clearsScrolledComponentKey: _propTypes.PropTypes.func.isRequired
+    }).isRequired,
+    shouldFocusOnMount: _propTypes.PropTypes.bool
+  }), _class.defaultProps = {
+    scrollKey: '',
+    scrolledComponentKey: '',
+    scrollingFocus: false,
+    shouldFocusOnMount: false
+  }, _temp;
+};
+
+var unconnectedExtension = function unconnectedExtension(givenComponent) {
+  return unconnectedMakeScrollable(givenComponent);
+};
+
+exports.unconnectedExtension = unconnectedExtension;
+
+var makeScrollable = function makeScrollable(givenComponent) {
+  return connectToScrollingStore(unconnectedExtension(givenComponent));
+};
+
+exports.makeScrollable = makeScrollable;
+var _default = makeScrollable;
+exports.default = _default;

package/lib/common/components/shared/overlay/Overlay.js

@@ -0,0 +1,95 @@
+"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 _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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dBHhu',
+  template: function template(theme) {
+    return "\n\n.dBHhu_bGBk{align-self:center;position:relative}\n\n.dBHhu_cYkL{cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:".concat(theme.overlayZIndex || 'inherit', "}\n\n.dBHhu_cYkL:hover{border-left:").concat(theme.overlayBarSize || 'inherit', " solid ").concat(theme.overlayBarColor || 'inherit', ";box-sizing:border-box}\n\n@media print{.dBHhu_cYkL:hover{border-left:none}}");
+  },
+  'root': 'dBHhu_bGBk',
+  'overlay': 'dBHhu_cYkL'
+};
+var Overlay = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Overlay, _Component);
+
+  var _super = (0, _createSuper2.default)(Overlay);
+
+  function Overlay() {
+    (0, _classCallCheck2.default)(this, Overlay);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Overlay, [{
+    key: "overlayDiv",
+    value: function overlayDiv() {
+      if (this.props.hideOverlay) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "presentation",
+        className: styles.overlay,
+        onClick: this.props.onClick,
+        "data-automation": "sdk-overlay"
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          wrapperClassName = _this$props.wrapperClassName,
+          children = _this$props.children,
+          tabIndex = _this$props.tabIndex,
+          ariaLabel = _this$props.ariaLabel;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.root, wrapperClassName),
+        tabIndex: tabIndex,
+        "aria-label": ariaLabel
+      }, this.overlayDiv(), children);
+    }
+  }]);
+  Overlay.displayName = "Overlay";
+  return Overlay;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]).isRequired,
+  hideOverlay: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired,
+  wrapperClassName: _propTypes.default.string,
+  tabIndex: _propTypes.default.string,
+  ariaLabel: _propTypes.default.string
+}, _class2.defaultProps = {
+  hideOverlay: false,
+  tabIndex: '0',
+  wrapperClassName: '',
+  ariaLabel: void 0
+}, _temp)) || _class);
+var _default = Overlay;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      borders = _ref.borders,
+      spacing = _ref.spacing;
+  return {
+    overlayZIndex: '2222',
+    overlayBarColor: colors.electric,
+    overlayBarSize: '0.3rem'
+  };
+}

package/lib/common/components/shared/return_button/ReturnButton.js

@@ -0,0 +1,66 @@
+"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.ReturnButton = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var ReturnButton = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ReturnButton, _Component);
+
+  var _super = (0, _createSuper2.default)(ReturnButton);
+
+  function ReturnButton() {
+    (0, _classCallCheck2.default)(this, ReturnButton);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ReturnButton, [{
+    key: "render",
+    value: function render() {
+      if (!this.props.returnToUrl) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-return-button",
+        href: this.props.returnToUrl,
+        target: "_top"
+      }, this.props.text);
+    }
+  }]);
+  ReturnButton.displayName = "ReturnButton";
+  return ReturnButton;
+}(_react.Component);
+
+exports.ReturnButton = ReturnButton;
+ReturnButton.propTypes = {
+  returnToUrl: _propTypes.default.string,
+  text: _propTypes.default.string
+};
+ReturnButton.defaultProps = {
+  returnToUrl: void 0,
+  text: (0, _formatMessage.default)('Return')
+};
+var _default = ReturnButton;
+exports.default = _default;