dtable-ui-component 5.0.7 → 5.0.9-beta.1

package/lib/CollapsibleSettingLayout/index.css

@@ -0,0 +1,22 @@
+.collapsible-setting-layout-header {
+  justify-content: space-between;
+  font-size: 14px;
+  color: #202428;
+}
+
+.collapsible-setting-layout-header:hover {
+  cursor: pointer;
+}
+
+.collapsible-setting-layout-header .dtable-font {
+  font-size: 10px;
+  color: #ccc;
+}
+
+.collapsible-setting-layout-header .dtable-font:hover {
+  color: #666;
+}
+
+.collapsible-setting-layout-header .dtable-font.dtable-icon-spin {
+  transform: rotate(90deg);
+}

package/lib/CollapsibleSettingLayout/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+const CollapsibleSettingLayout = props => {
+  const {
+    className,
+    title,
+    children
+  } = props;
+  const [isShowSettings, setIsShowSettings] = (0, _react.useState)(true);
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)('collapsible-setting-layout', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collapsible-setting-layout-header w-100 d-flex align-items-center",
+    onClick: () => setIsShowSettings(!isShowSettings)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "collapsible-setting-layout-title"
+  }, title), /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
+  })), isShowSettings && /*#__PURE__*/React.createElement("div", {
+    className: "collapsible-setting-layout-body mt-3 pl-2"
+  }, children || ''));
+};
+var _default = exports.default = CollapsibleSettingLayout;

package/lib/DTableCustomizeSelect/index.js

@@ -91,7 +91,9 @@ class DTableCustomizeSelect extends _react.Component {
       searchPlaceholder,
       noOptionsPlaceholder,
       isLocked,
-      isInModal
+      isInModal,
+      addOptionAble,
+      component
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: node => this.selector = node,
@@ -111,6 +113,8 @@ class DTableCustomizeSelect extends _react.Component {
       className: "dtable-font dtable-icon-drop-down"
     })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       value: value,
+      addOptionAble: addOptionAble,
+      component: component,
       isShowSelected: this.props.isShowSelected,
       top: this.getSelectedOptionTop(),
       options: options,
@@ -125,6 +129,8 @@ class DTableCustomizeSelect extends _react.Component {
     }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       className: className,
       value: value,
+      addOptionAble: addOptionAble,
+      component: component,
       isShowSelected: this.props.isShowSelected,
       position: this.selector.getBoundingClientRect(),
       isInModal: isInModal,

package/lib/SelectOptionGroup/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _option = _interopRequireDefault(require("./option"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
@@ -176,8 +177,13 @@ class SelectOptionGroup extends _react.Component {
       isShowSelected,
       isInModal,
       position,
-      className
+      className,
+      addOptionAble,
+      component
     } = this.props;
+    const {
+      AddOption
+    } = component || {};
     let {
       searchVal
     } = this.state;
@@ -204,7 +210,10 @@ class SelectOptionGroup extends _react.Component {
     return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
       onClickOutside: this.props.onClickOutside
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
+      className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
+        'pt-0': isShowSelected,
+        'create-new-option-group': addOptionAble
+      }),
       ref: ref => this.optionGroupRef = ref,
       style: style,
       onMouseDown: this.onMouseDown
@@ -221,7 +230,7 @@ class SelectOptionGroup extends _react.Component {
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "option-group-content",
       ref: ref => this.optionGroupContentRef = ref
-    }, this.renderOptGroup(searchVal))));
+    }, this.renderOptGroup(searchVal)), addOptionAble && AddOption));
   }
 }
 var _default = exports.default = SelectOptionGroup;

package/lib/index.js

@@ -58,6 +58,12 @@ Object.defineProperty(exports, "CollaboratorItem", {
     return _CollaboratorItem.default;
   }
 });
+Object.defineProperty(exports, "CollapsibleSettingLayout", {
+  enumerable: true,
+  get: function () {
+    return _CollapsibleSettingLayout.default;
+  }
+});
 Object.defineProperty(exports, "CreatorFormatter", {
   enumerable: true,
   get: function () {
@@ -458,4 +464,5 @@ var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
 var _DepartmentSelectFilter = _interopRequireDefault(require("./DepartmentSelectFilter"));
 var _FieldDisplaySetting = _interopRequireDefault(require("./FieldDisplaySetting"));
 var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopover"));
-var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
+var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
+var _CollapsibleSettingLayout = _interopRequireDefault(require("./CollapsibleSettingLayout"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.0.7",
+  "version": "5.0.9-beta.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",