dtable-ui-component 6.0.125 → 6.0.126-beta.s1

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
@@ -12,114 +12,153 @@ var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
-  border: '1px solid rgba(0, 40, 100, 0.12) !important'
+  fontSize: '14px',
+  padding: '0 4px',
+  border: '1px solid var(--bs-border-color) !important',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
 };
-const FOCUS_CONTROL_STYLE = {
+const DISABLED_CONTROL_STYLE = {
   fontSize: '14px',
-  backgroundColor: '#ffffff',
-  borderColor: '#1991eb',
+  padding: '0 4px',
+  border: '1px solid rgba(0, 40, 100, 0.12)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-bg-color)',
+  borderRadius: '4px',
   outline: '0',
-  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
+  cursor: 'default',
+  opacity: 0.65
+};
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px',
+  border: '1px solid #3E84F7',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
 };
-const noneCallback = () => ({
-  display: 'none'
-});
 const controlCallback = (provided, state) => {
   const {
     isDisabled,
     isFocused
   } = state;
-  if (isFocused && !isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
-      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
+  if (isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
+      ':active': {
+        border: '1px solid #3E84F7'
+      },
+      '.header-icon': {
+        color: 'var(--bs-icon-secondary-color)',
+        padding: '0 0.5rem !important'
+      }
     });
   }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+  if (isFocused) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE);
+  }
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
     fontSize: '14px',
     lineHeight: '1.5',
     cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
+  }, DEFAULT_CONTROL_STYLE);
 };
-const UserSelectStyle = exports.UserSelectStyle = {
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  menu: base => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+      padding: '8px',
+      backgroundColor: 'var(--bs-popover-bg)',
+      border: '1px solid var(--bs-border-secondary-color)',
+      borderRadius: '4px',
+      boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
+      marginTop: '4px',
+      marginBottom: 0
+    });
+  },
+  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: 0
+  }),
   option: (provided, state) => {
     const {
       isDisabled,
       isFocused
     } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)',
+      borderRadius: '4px',
+      minHeight: '32px',
+      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
+      backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.04)'
+      },
+      '.header-icon': {
+        color: 'var(--bs-icon-secondary-color)',
+        padding: '0 0.5rem !important'
+      }
     });
   },
   control: controlCallback,
-  indicatorSeparator: noneCallback,
-  dropdownIndicator: noneCallback,
-  clearIndicator: noneCallback,
-  multiValue: provided => {
+  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+    zIndex: 9999,
+    backgroundColor: 'var(--bs-popover-bg)',
+    color: 'var(--bs-body-color)',
+    borderColor: 'var(--bs-border-secondary-color)'
+  }),
+  singleValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0 10px 0 0',
-      padding: '0 0 0 2px'
+      color: 'var(--bs-body-color)'
     });
   },
-  multiValueLabel: provided => {
+  multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '0px'
+      color: 'var(--bs-body-color)'
     });
   },
-  multiValueRemove: provided => {
+  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    '.dtable-font': {
+      color: 'var(--bs-icon-color)'
+    },
+    '.dtable-font:hover': {
+      backgroundColor: 'transparent',
+      color: 'var(--bs-icon-color)'
+    }
+  }),
+  input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    color: 'var(--bs-body-color)'
+  }),
+  placeholder: (provided, state) => {
+    const {
+      isDisabled
+    } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#666',
-      ':hover': {
-        backgroundColor: 'transparent',
-        color: '#555555'
-      }
+      color: '#868E96',
+      opacity: isDisabled ? 0.65 : 1
     });
   },
-  singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0',
-      padding: '0 2px',
-      width: 'fit-content'
-    });
-  }
-};
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  option: (provided, state) => {
+  indicatorSeparator: (styles, state) => {
+    return {
+      'display': 'none'
+    };
+  },
+  dropdownIndicator: (provided, state) => {
     const {
-      isDisabled,
-      isFocused
+      isDisabled
     } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      fontSize: '13px',
-      color: '#212529',
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
-      ':active': {
-        backgroundColor: '#f5f5f5'
-      },
-      '.header-icon .dtable-font': {
-        color: '#aaa'
-      },
-      '.header-icon .multicolor-icon': {
-        color: '#aaa'
+      paddingRight: '12px',
+      '.dtable-font': {
+        color: 'var(--bs-icon-color) !important',
+        opacity: isDisabled ? 0.65 : 1
       }
     });
-  },
-  control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999
-  }),
-  indicatorSeparator: noneCallback
+  }
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
@@ -127,7 +166,9 @@ const DropdownIndicator = props => {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px'
+        marginLeft: '-2px',
+        color: 'var(--bs-icon-color)',
+        paddingRight: 0
       }
     })
   }));
@@ -150,7 +191,8 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px'
+        marginRight: '-2px',
+        color: 'var(--bs-icon-color)'
       }
     })
   }));
@@ -165,9 +207,56 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 const Option = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: props.data.style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
-  });
+  const {
+    isSelected,
+    label
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        whiteSpace: 'pre-line'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: label
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-check",
+        style: {
+          fontSize: '14px',
+          color: 'var(--bs-icon-color)',
+          paddingLeft: '16px'
+        }
+      })]
+    })
+  }));
+};
+exports.Option = Option;
+const processOptionsWithClear = (options, isClearable) => {
+  if (isClearable && options && options.length > 0) {
+    return [{
+      label: '--',
+      value: '__clear__'
+    }, ...options];
+  }
+  return options;
+};
+exports.processOptionsWithClear = processOptionsWithClear;
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
+  if (selectedOption && selectedOption.value === '__clear__') {
+    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
+      action: 'clear'
+    }));
+  } else {
+    onChangeCallback(selectedOption, actionMeta);
+  }
+};
+exports.handleSelectChange = handleSelectChange;
+const createHandleChange = onChange => {
+  return (selectedOption, actionMeta) => {
+    handleSelectChange(selectedOption, actionMeta, onChange);
+  };
 };
-exports.Option = Option;
+exports.createHandleChange = createHandleChange;

package/lib/SelectOptionGroup/index.css

@@ -6,7 +6,7 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
   border: 1px solid rgba(0, 40, 100, 0.12);
@@ -17,17 +17,23 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
+}
+
+.option-group .option-group-content .label-space {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .option-group-search .form-control {
-  height: 31px;
+  height: 32px;
+  border-radius: 4px;
 }
 
 .option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
   color: #666666;
 }
 
@@ -35,13 +41,18 @@
   flex: 1;
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
+}
+
+.option-group .option-group-top {
+  padding-top: 8px !important;
 }
 
 .option {
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -50,34 +61,38 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
 }
 
-.option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
-  cursor: pointer;
+.option-group .option-group-search .form-control {
+  border: none;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 0 .375rem 1rem;
+  height: 100%;
 }
 
-.option:hover .header-icon .dtable-font,
-.option:hover .header-icon .multicolor-icon,
-.option.option-active .select-option-name {
-  color: #fff;
+.option-group .option-group-search .form-control:focus {
+  border-color: transparent !important;
+  box-shadow: none !important;
 }
 
-.option.option-active .header-icon .dtable-font,
-.option.option-active .header-icon .multicolor-icon {
-  color: #fff;
+
+.option-group-content .label-check-icon {
+  margin-left: 16px;
 }
 
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.option-group-content .dtable-icon-check {
+  font-size: 14px !important;
+  color: var(--bs-icon-color);
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.option.option-active {
+  background-color: #f5f5f5;
+  color: #212529;
+  cursor: pointer;
 }
 
+
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
@@ -97,7 +112,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: #798d99;
+  color: var(--bs-icon-color);
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,
@@ -111,3 +126,16 @@
 .option-group-selector-multiple-select .option.option-active .select-option-name {
   color: #212529;
 }
+
+.option-group-selector-single-select .option .select-option-name .single-select-option {
+  margin: 0;
+}
+
+.option-group-selector-single-select .form-control {
+  padding: .375rem .5rem !important;
+}
+
+.pre-fill-dialog .single-select-option,
+.pre-fill-dialog .multiple-select-option {
+  padding: 0 !important;
+}

package/lib/SelectOptionGroup/index.js

@@ -132,10 +132,17 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
+    this.isEqual = (obj1, obj2) => {
+      if (obj1 === obj2) return true;
+      if (!obj1 || !obj2) return false;
+      return JSON.stringify(obj1) === JSON.stringify(obj2);
+    };
     this.renderOptGroup = searchVal => {
       let {
         noOptionsPlaceholder,
-        onSelectOption
+        onSelectOption,
+        value,
+        supportMultipleSelect
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
@@ -147,6 +154,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 = value && typeof value === 'object' && !supportMultipleSelect ? this.isEqual(value.value, opt.value) : Array.isArray(value.value) ? value.value.includes(opt.value.column_key) : false;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
@@ -155,10 +163,26 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: opt.label
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "label-space",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [" ", opt.label]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "label-check-icon",
+              children: [" ", isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check"
+              })]
+            })]
+          })
         }, "".concat(key, "-").concat(i));
       });
     };
+    this.clearValue = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
     this.state = {
       searchVal: '',
       activeIndex: -1,
@@ -192,7 +216,8 @@ class SelectOptionGroup extends _react.Component {
       position,
       className,
       addOptionAble,
-      component
+      component,
+      supportMultipleSelect
     } = this.props;
     const {
       AddOption
@@ -232,20 +257,34 @@ class SelectOptionGroup extends _react.Component {
         style: style,
         onMouseDown: this.onMouseDown,
         children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete mb-2",
+          className: "editor-list-delete",
           onClick: e => e.stopPropagation(),
           children: value.label || ''
-        }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), searchable && this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "option-group-search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
             autoFocus: true,
-            ref: this.searchInputRef
+            ref: this.searchInputRef,
+            clearValue: this.clearValue,
+            isClearable: true,
+            components: {
+              ClearIndicator: props => {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  className: (0, _classnames.default)('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x'),
+                  onClick: e => {
+                    e.stopPropagation();
+                    e.nativeEvent.stopImmediatePropagation();
+                    props.clearValue();
+                  }
+                });
+              }
+            }
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-content",
+          className: "option-group-content ".concat(!searchable && !supportMultipleSelect ? 'option-group-top' : ''),
           ref: ref => this.optionGroupContentRef = ref,
           children: this.renderOptGroup(searchVal)
         }), addOptionAble && AddOption]

package/lib/assets/icons/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>

package/lib/assets/icons/down.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
+</svg>

package/lib/index.js

@@ -124,6 +124,12 @@ Object.defineProperty(exports, "DTableCustomizeCollaboratorSelect", {
     return _DTableCustomizeCollaboratorSelect.default;
   }
 });
+Object.defineProperty(exports, "DTableCustomizeSearchInput", {
+  enumerable: true,
+  get: function () {
+    return _DTableCustomizeSearchInput.default;
+  }
+});
 Object.defineProperty(exports, "DTableCustomizeSelect", {
   enumerable: true,
   get: function () {
@@ -724,6 +730,7 @@ 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": "6.0.125",
+  "version": "6.0.126-beta.s1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",