dtable-ui-component 7.0.1-beta.5 → 7.0.1-beta.btn1

package/lib/SelectItem/index.js

@@ -37,7 +37,7 @@ const SelectItem = _ref => {
       title: option.name,
       children: option.name
     }), isShowRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dtable-ui-select-item-remove-btn",
+      className: "dtable-ui-select-item-remove-btn seatable-icon-btn",
       style: removeBtnStyle,
       onClick: onRemove,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {

package/lib/SelectOptionGroup/KeyCodes.js

@@ -5,105 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const KeyCodes = {
-  Backspace: 8,
-  Tab: 9,
-  Enter: 13,
-  Shift: 16,
-  Ctrl: 17,
-  Alt: 18,
-  PauseBreak: 19,
-  CapsLock: 20,
-  Escape: 27,
-  Esc: 27,
-  Space: 32,
-  PageUp: 33,
-  PageDown: 34,
-  End: 35,
-  Home: 36,
   LeftArrow: 37,
   UpArrow: 38,
   RightArrow: 39,
   DownArrow: 40,
-  Insert: 45,
-  Delete: 46,
-  0: 48,
-  1: 49,
-  2: 50,
-  3: 51,
-  4: 52,
-  5: 53,
-  6: 54,
-  7: 55,
-  8: 56,
-  9: 57,
-  a: 65,
-  b: 66,
-  c: 67,
-  d: 68,
-  e: 69,
-  f: 70,
-  g: 71,
-  h: 72,
-  i: 73,
-  j: 74,
-  k: 75,
-  l: 76,
-  m: 77,
-  n: 78,
-  o: 79,
-  p: 80,
-  q: 81,
-  r: 82,
-  s: 83,
-  t: 84,
-  u: 85,
-  v: 86,
-  w: 87,
-  x: 88,
-  y: 89,
-  z: 90,
-  LeftWindowKey: 91,
-  RightWindowKey: 92,
-  SelectKey: 93,
-  NumPad0: 96,
-  NumPad1: 97,
-  NumPad2: 98,
-  NumPad3: 99,
-  NumPad4: 100,
-  NumPad5: 101,
-  NumPad6: 102,
-  NumPad7: 103,
-  NumPad8: 104,
-  NumPad9: 105,
-  Multiply: 106,
-  Add: 107,
-  Subtract: 109,
-  DecimalPoint: 110,
-  Divide: 111,
-  F1: 112,
-  F2: 113,
-  F3: 114,
-  F4: 115,
-  F5: 116,
-  F6: 117,
-  F7: 118,
-  F8: 119,
-  F9: 120,
-  F10: 121,
-  F12: 123,
-  NumLock: 144,
-  ScrollLock: 145,
-  SemiColon: 186,
-  EqualSign: 187,
-  Comma: 188,
-  Dash: 189,
-  Period: 190,
-  ForwardSlash: 191,
-  GraveAccent: 192,
-  OpenBracket: 219,
-  BackSlash: 220,
-  CloseBracket: 221,
-  SingleQuote: 222,
-  ChineseInputMethod: 229
+  Enter: 13,
+  Tab: 9,
+  Escape: 27,
+  Esc: 27
 };
 var _default = exports.default = KeyCodes;

package/lib/SelectOptionGroup/index.css

@@ -1,10 +1,12 @@
-.seatable-option-group {
+.option-group {
+  display: flex;
+  flex-direction: column;
   position: absolute;
   left: 0;
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding-top: 0;
+  padding: 0.5rem 0;
   box-shadow: var(--bs-border-secondary-shadow);
   background: #fff;
   border: 1px solid var(--bs-border-secondary-color);
@@ -12,33 +14,34 @@
   z-index: 10001;
 }
 
-.seatable-option-group .seatable-select-search {
+.option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  position: relative;
+  padding: 0 10px 6px;
+}
+
+.option-group-search .form-control {
+  height: 31px;
 }
 
-.seatable-option-group .none-search-result {
+.option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 8px;
-  color: var(--bs-icon-color);
+  padding: 10px;
+  color: #666666;
 }
 
-.seatable-option-group .seatable-option-group-content {
+.option-group .option-group-content {
+  flex: 1;
   max-height: 252px;
   overflow-y: auto;
-  padding: 8px;
 }
 
-.seatable-select-option {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.option {
+  display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 8px;
+  padding: 0.25rem 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -47,57 +50,64 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-radius: 4px;
-  height: 32px;
 }
 
-.seatable-select-option.seatable-select-option-active {
+.option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
   cursor: pointer;
-  background-color: var(--bs-btn-background-hover);
 }
 
-.seatable-select-option .select-option-name .multiple-select-option {
-  margin: 0;
+.option:hover .header-icon .dtable-font,
+.option:hover .header-icon .multicolor-icon,
+.option.option-active .select-option-name {
+  color: #fff;
 }
 
-.seatable-option-group .dtable-icon-check {
-  color: var(--bs-icon-color);
+.option.option-active .header-icon .dtable-font,
+.option.option-active .header-icon .multicolor-icon {
+  color: #fff;
 }
 
-.select-label {
-  width: 100%;
+.option:not(.option-active):hover .header-icon .dtable-font,
+.option:not(.option-active):hover .header-icon .multicolor-icon {
+  color: #aaa;
+}
+
+.option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
 }
 
-.seatable-option-group-selector-multiple-select .select-label,
-.seatable-option-group-selector-single-select .select-option-name,
-.seatable-option-group-selector-multiple-select .multiple-option-name,
-.selector-group-select .group-option-name {
+.option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.option-group-dtable-ui-single-select-selector .select-option-name,
+.option-group-dtable-ui-multiple-select-selector .multiple-option-name {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
 }
 
-.seatable-option-group-selector-multiple-select .multiple-check-icon,
-.selector-group-select .group-check-icon {
+.option-group-dtable-ui-multiple-select-selector .multiple-check-icon {
   display: inline-flex;
+  width: 20px;
   text-align: center;
-  color: var(--bs-icon-color);
 }
 
-.selector-group-select .multiple-check-icon .dtable-icon-check,
-.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check,
-.selector-group-select .group-check-icon .dtable-icon-check {
-  font-size: 14px;
+.option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
 }
 
-.selector-group-select .seatable-select-option:hover,
-.selector-group-select .seatable-select-option.seatable-select-option-active {
-  background-color: var(--bs-btn-background-hover);
+.option-group-dtable-ui-single-select-selector .option:hover,
+.option-group-dtable-ui-single-select-selector .option.option-active,
+.option-group-dtable-ui-multiple-select-selector .option:hover,
+.option-group-dtable-ui-multiple-select-selector .option.option-active {
+  background-color: #f5f5f5;
 }
 
-.select-label .header-icon {
-  display: inline-block;
-  padding: 0 .5rem 0 0 !important;
-  margin-left: 0 !important;
+.option-group-selector-single-select .option.option-active .select-option-name,
+.option-group-selector-multiple-select .option.option-active .select-option-name {
+  color: #212529;
 }

package/lib/SelectOptionGroup/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
@@ -19,16 +19,21 @@ class SelectOptionGroup extends _react.Component {
   constructor(props) {
     super(props);
     this.resetMenuStyle = () => {
+      if (!this.optionGroupRef) return;
       const _this$props = this.props,
         isInModal = _this$props.isInModal,
         position = _this$props.position;
       const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
         top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height;
+        height = _this$optionGroupRef$.height,
+        width = _this$optionGroupRef$.width;
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
         }
+        if (position && position.x + width > window.innerWidth) {
+          this.optionGroupRef.style.left = window.innerWidth - width - 10 + 'px';
+        }
         this.optionGroupRef.style.opacity = 1;
         this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
       } else {
@@ -122,17 +127,10 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
-    this.clearSearch = () => {
-      this.setState({
-        searchVal: '',
-        activeIndex: -1
-      });
-    };
     this.renderOptGroup = searchVal => {
       let _this$props2 = this.props,
         noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption,
-        value = _this$props2.value;
+        onSelectOption = _this$props2.onSelectOption;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -143,16 +141,7 @@ class SelectOptionGroup extends _react.Component {
       return this.filterOptions.map((opt, i) => {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
-        let isSelected = false;
-        if (value) {
-          // Handle both single value and array of values
-          if (Array.isArray(value.value)) {
-            isSelected = value.value.includes(opt.value);
-          } else {
-            isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
-          }
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
           value: opt.value,
@@ -160,13 +149,8 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "select-label",
-            children: opt.label
-          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check seatable-check-color"
-          })]
-        }, key);
+          children: opt.label
+        }, "".concat(key, "-").concat(i));
       });
     };
     this.state = {
@@ -231,8 +215,9 @@ class SelectOptionGroup extends _react.Component {
       ref: ref => this.clickOutsideRef = ref,
       onClickOutside: this.props.onClickOutside,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
-          'pt-0': isShowSelected
+        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,
@@ -242,18 +227,16 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-select-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+          className: "option-group-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
-            clearValue: this.clearSearch,
             autoFocus: true,
-            isClearable: true,
             ref: this.searchInputRef
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-option-group-content",
+          className: "option-group-content",
           ref: ref => this.optionGroupContentRef = ref,
           children: this.renderOptGroup(searchVal)
         }), addOptionAble && AddOption]

package/lib/SelectOptionGroup/option.js

@@ -1,22 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 class Option extends _react.Component {
   constructor() {
     super(...arguments);
-    this.onSelectOption = event => {
+    this.onSelectOption = (value, event) => {
       if (this.props.supportMultipleSelect) {
         event.stopPropagation();
       }
-      this.props.onSelectOption(this.props.value, event);
+      this.props.onSelectOption(value, event);
     };
     this.onMouseEnter = () => {
       if (!this.props.disableHover) {
@@ -28,21 +26,11 @@ class Option extends _react.Component {
         this.props.changeIndex(-1);
       }
     };
-    this.onKeyDown = e => {
-      if (e.key === 'Enter' || e.key === 'Space') {
-        e.target.click();
-      }
-    };
   }
   render() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('seatable-select-option', {
-        'seatable-select-option-active': this.props.isActive
-      }),
-      tabIndex: "0",
-      role: "menuitem",
-      onClick: this.onSelectOption,
-      onKeyDown: this.onKeyDown,
+      className: this.props.isActive ? 'option option-active' : 'option',
+      onClick: this.onSelectOption.bind(this, this.props.value),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       children: this.props.children

package/lib/index.js

@@ -118,10 +118,10 @@ Object.defineProperty(exports, "DTableCustomFooter", {
     return _DTableCustomFooter.default;
   }
 });
-Object.defineProperty(exports, "DTableCustomizeSearchInput", {
+Object.defineProperty(exports, "DTableCustomizeCollaboratorSelect", {
   enumerable: true,
   get: function () {
-    return _DTableCustomizeSearchInput.default;
+    return _DTableCustomizeCollaboratorSelect.default;
   }
 });
 Object.defineProperty(exports, "DTableCustomizeSelect", {
@@ -154,6 +154,12 @@ Object.defineProperty(exports, "DTableFiltersPopover", {
     return _DTableFiltersPopover.default;
   }
 });
+Object.defineProperty(exports, "DTableGroupSelect", {
+  enumerable: true,
+  get: function () {
+    return _index.default;
+  }
+});
 Object.defineProperty(exports, "DTableIcon", {
   enumerable: true,
   get: function () {
@@ -712,11 +718,12 @@ var _DTableRadio = _interopRequireDefault(require("./DTableRadio"));
 var _DTableCommonAddTool = _interopRequireDefault(require("./DTableCommonAddTool"));
 var _NotificationPopover = _interopRequireDefault(require("./NotificationPopover"));
 var _DTableSelect = _interopRequireDefault(require("./DTableSelect"));
+var _index = _interopRequireDefault(require("./DTableGroupSelect/index"));
 var _dtableSelectLabel = _interopRequireDefault(require("./DTableSelect/dtable-select-label"));
 var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
 var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
+var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
-var _DTableCustomizeSearchInput = _interopRequireDefault(require("./DTableCustomizeSearchInput"));
 var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
 var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));

package/package.json

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

package/lib/DTableCustomizeSearchInput/index.css

@@ -1,75 +0,0 @@
-.seatable-search-input {
-  width: 100%;
-  padding: 6px 10px;
-  min-width: 170px;
-  position: relative;
-  padding: 0;
-  height: 32px;
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-}
-
-.seatable-select-search {
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-  height: 32px;
-}
-
-.select-search-control {
-  height: 100%;
-  border: none;
-  cursor: pointer;
-  display: block;
-  background-color: var(--bs-popover-bg);
-  font-weight: 400;
-  font-size: .875rem;
-  line-height: 1.6;
-  width: 100%;
-  padding: .375rem 1rem;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.select-search-control:focus {
-  outline: none;
-  box-shadow: none;
-  border: none;
-  cursor: pointer;
-  height: 100%;
-}
-
-.clear-icon-x {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 20px;
-  pointer-events: auto;
-  color: var(--bs-icon-color);
-  right: 13px;
-  top: 6px;
-  z-index: 1;
-  height: 20px;
-  width: 20px;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.clear-icon-x .multicolor-icon {
-  font-size: 12px;
-}
-
-.clear-icon-x:hover {
-  background-color: var(--bs-btn-background-hover);
-}
-
-.seatable-search-input .none-search-result {
-  height: 100px;
-  width: 100%;
-  padding: 10px;
-  color: var(--bs-icon-color);
-}
-
-.dtable-ui-user-select-popover .select-search-control,
-.dtable-popover .select-search-control {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}