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

package/lib/banks/components/SharingModal/ContextualButton/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextualButton = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _uiReactUtils = require("@instructure/ui-react-utils");
+
+var ContextualButton = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ContextualButton, _Component);
+
+  var _super = (0, _createSuper2.default)(ContextualButton);
+
+  function ContextualButton() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ContextualButton);
+
+    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.handleClick = function () {
+      var _this$props;
+
+      for (var _len2 = arguments.length, params = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        params[_key2] = arguments[_key2];
+      }
+
+      (_this$props = _this.props).onClick.apply(_this$props, params.concat([_this.props.context]));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ContextualButton, [{
+    key: "render",
+    value: function render() {
+      var buttonProps = (0, _uiReactUtils.omitProps)(this.props, {}, ['context', 'onClick']);
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({}, buttonProps, {
+        onClick: this.handleClick
+      }), this.props.children);
+    }
+  }]);
+  ContextualButton.displayName = "ContextualButton";
+  return ContextualButton;
+}(_react.Component);
+
+exports.ContextualButton = ContextualButton;
+ContextualButton.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.Button.propTypes), {}, {
+  context: _propTypes.default.any
+  /* eslint-disable-line react/forbid-prop-types */
+
+});
+ContextualButton.defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.Button.defaultProps), {}, {
+  context: void 0
+});

package/lib/banks/components/SharingModal/ShareList/ShareList.examples.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _default = {
+  propValues: {
+    shares: [(0, _immutable.fromJS)([{
+      title: "Test Person",
+      entity_type: "user",
+      entity_id: "banana",
+      permission: "edit",
+      id: "5"
+    }]), (0, _immutable.fromJS)([{
+      title: "Course X",
+      entity_type: "course",
+      entity_id: "X",
+      permission: "read",
+      id: "7"
+    }])],
+    onPermissionChange: [Function.prototype],
+    onPersonRemove: [Function.prototype],
+    peopleToRemove: [[], ['5']]
+  }
+};
+exports.default = _default;

package/lib/banks/components/SharingModal/ShareList/index.js

@@ -0,0 +1,253 @@
+"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.ShareList = 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 _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiGrid = require("@instructure/ui-grid");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiAvatar = require("@instructure/ui-avatar");
+
+var _uiTabs = require("@instructure/ui-tabs");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = require("../ContextualButton/index.js");
+
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'edByO',
+  template: function template(theme) {
+    return "\n\n.edByO_bqPU{text-decoration:line-through}";
+  },
+  'labelRemoved': 'edByO_bqPU'
+};
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCoursesLine, {
+  size: "small"
+});
+
+var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ShareList, _Component);
+
+  var _super = (0, _createSuper2.default)(ShareList);
+
+  function ShareList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ShareList);
+
+    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 = {
+      selectedTabIndex: 0
+    };
+
+    _this.handleTabChange = function (event, _ref) {
+      var index = _ref.index;
+
+      _this.setState({
+        selectedTabIndex: index
+      });
+    };
+
+    _this.handleEntityRemove = function (e, _ref2) {
+      var entity = _ref2.entity,
+          isEntityRemoved = _ref2.isEntityRemoved;
+
+      _this.props.onEntityRemove(entity.get('id'), isEntityRemoved);
+    };
+
+    _this.handlePermissionChange = function (entity) {
+      return function (e, _ref3) {
+        var value = _ref3.value;
+
+        _this.props.onPermissionChange(entity, value);
+      };
+    };
+
+    _this.removeButton = function (entity, isEntityRemoved) {
+      var context = {
+        entity: entity,
+        isEntityRemoved: isEntityRemoved
+      };
+      return /*#__PURE__*/_react.default.createElement(_index.ContextualButton, {
+        context: context // eslint-disable-next-line react/jsx-no-literals
+        ,
+        "data-automation": "sdk-unshare-bank-entity-".concat(entity.get('entityId')),
+        variant: "icon",
+        onClick: _this.handleEntityRemove,
+        icon: isEntityRemoved ? _uiIcons.IconResetLine : _uiIcons.IconTrashLine
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, isEntityRemoved ? (0, _formatMessage.default)('Undo remove for {entity}', {
+        entity: entity.get('title')
+      }) : (0, _formatMessage.default)('Remove {entity}', {
+        entity: entity.get('title')
+      })));
+    };
+
+    _this.renderEntity = function (entity, index) {
+      var isEntityRemoved = entity.get('permission') === _quizCommon.REMOVED_ACCESS;
+
+      var isCourse = entity.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
+
+      var isOnlyEntity = _this.props.shares.size <= 1;
+      var originalEntity = _this.props.sharedBanks.find(function (sb) {
+        return sb.get('id') == entity.get('id');
+      }) || (0, _immutable.Map)();
+      var originalPermission = originalEntity.get('permission', _quizCommon.READ_ONLY);
+      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+        key: entity.get('entityId'),
+        "data-automation": "sdk-shared-with-entity-row"
+      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: 1
+      }, isCourse ? _ref4 : /*#__PURE__*/_react.default.createElement(_uiAvatar.Avatar, {
+        name: entity.get('title'),
+        src: entity.get('avatar'),
+        size: "small"
+      })), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: isEntityRemoved ? styles.labelRemoved : null,
+        "data-automation": isEntityRemoved ? 'sdk-shared-entity-removed' : null
+      }, entity.get('title'))), _this.props.improvedBankSharingEnabled && !isOnlyEntity && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: "auto"
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        onChange: _this.handlePermissionChange(entity),
+        value: entity.get('permission') === _quizCommon.REMOVED_ACCESS ? originalPermission : entity.get('permission'),
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for {entity}', {
+          entity: entity.get('title')
+        })),
+        disabled: isEntityRemoved || !_this.props.canEdit
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        id: "share-list-select-option-can-view",
+        value: _quizCommon.READ_ONLY
+      }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        id: "share-list-select-option-can-edit",
+        value: _quizCommon.CAN_EDIT
+      }, (0, _formatMessage.default)('Can edit')))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: "auto"
+      }, !isOnlyEntity && _this.props.canEdit && (_this.props.improvedBankSharingEnabled || !isCourse) && _this.removeButton(entity, isEntityRemoved)));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ShareList, [{
+    key: "renderNewEntities",
+    value: function renderNewEntities() {
+      if (!this.props.newEntities.isEmpty()) {
+        return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "div",
+          margin: "0 0 medium 0"
+        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+          vAlign: "middle"
+        }, this.props.newEntities.map(this.renderEntity)));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var shares = this.props.shares;
+      var newEntityIds = this.props.newEntities.map(function (e) {
+        return e.get('id');
+      });
+      var existingShares = shares.filterNot(function (s) {
+        return newEntityIds.includes(s.get('id'));
+      });
+      var existingPeople = existingShares.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_USER;
+      });
+      var existingCourses = existingShares.filter(function (s) {
+        return s.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
+      });
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        as: "div",
+        weight: "bold"
+      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        padding: "small 0 0 0",
+        "data-automation": "sdk-shared-bank-user-list"
+      }, this.renderNewEntities(), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
+        onRequestTabChange: this.handleTabChange
+      }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+        renderTitle: (0, _formatMessage.default)('People ({ peopleCount })', {
+          peopleCount: existingPeople.size
+        }),
+        isSelected: this.state.selectedTabIndex === 0,
+        padding: "small none"
+      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        vAlign: "middle"
+      }, existingPeople.map(this.renderEntity))), !existingCourses.isEmpty() && /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+        renderTitle: (0, _formatMessage.default)('Courses ({ coursesCount })', {
+          coursesCount: existingCourses.size
+        }),
+        isSelected: this.state.selectedTabIndex === 1,
+        padding: "small none"
+      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        vAlign: "middle"
+      }, existingCourses.map(this.renderEntity))))));
+    }
+  }]);
+  ShareList.displayName = "ShareList";
+  return ShareList;
+}(_react.Component), _class2.propTypes = {
+  canEdit: _propTypes.default.bool.isRequired,
+  improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
+  newEntities: _reactImmutableProptypes.default.list,
+  sharedBanks: _reactImmutableProptypes.default.list,
+  shares: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.contains({
+    avatar: _propTypes.default.string,
+    title: _propTypes.default.string.isRequired,
+    entityType: _propTypes.default.string.isRequired,
+    entityId: _propTypes.default.string.isRequired,
+    permission: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired
+  })).isRequired,
+  onPermissionChange: _propTypes.default.func.isRequired,
+  onEntityRemove: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  newEntities: (0, _immutable.List)(),
+  sharedBanks: (0, _immutable.List)()
+}, _temp)) || _class);
+exports.ShareList = ShareList;
+var _default = ShareList;
+exports.default = _default;

package/lib/banks/components/SharingModal/ShareList/theme.js

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