dtable-ui-component 6.0.125-vjs.3 → 6.0.125-xhs.10

package/lib/AsyncUserSelect/index.css

@@ -39,15 +39,15 @@
 
 .dtable-ui-user-select-container .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 1rem !important;
+  height: 100%;
 }
 
 .dtable-ui-user-select-container .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
+  height: 100%;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
@@ -80,7 +80,7 @@
 }
 
 .dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
-  color: #666666;
+  color: var(--bs-icon-color);
   font-size: 14px;
 }
 

package/lib/AsyncUserSelect/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
 var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
@@ -219,24 +219,17 @@ const AsyncUserSelect = _ref => {
           className: "dtable-ui-user-select-container",
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-user-search-container",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-              autoFocus: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "seatable-option-group-search",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+              className: "option-search-control",
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
-              value: searchValue,
-              wait: 200,
               onChange: onSearchValueChanged,
-              onKeyDown: onKeyDown
-            }), searchValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "search-clear-btn position-absolute",
-              onClick: () => onSearchValueChanged(''),
-              title: (0, _lang.getLocale)('Clear_search_text'),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                "aria-hidden": "true",
-                className: "dtable-font dtable-icon-x"
-              })
-            })]
+              clearValue: () => onSearchValueChanged(''),
+              autoFocus: true,
+              isClearable: true,
+              value: searchValue
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-list-container",
             ref: userListContainerRef,

package/lib/DTableCustomizeSearchInput/index.css

@@ -10,11 +10,10 @@
 }
 
 .seatable-search-input .form-control {
-  height: 32px;
+  height: 100%;
   border: none;
-  padding: .375rem 0 .375rem 1rem;
+  padding: .375rem 1rem;
   cursor: pointer;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-search-input-multiple .form-control:focus,

package/lib/DTableCustomizeSelect/index.css

@@ -101,6 +101,12 @@
   margin-right: 8px;
   width: calc(100% - 20px);
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.seatable-customize-select .selected-option .multicolor-icon {
+  font-size: 12px;
 }
 
 .seatable-customize-select .multiple-check-icon,

package/lib/DTableCustomizeSelect/select-option-group/index.css

@@ -12,21 +12,23 @@
   z-index: 10001;
 }
 
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+  height: 32px;
+}
+
 .seatable-option-group .seatable-option-group-search {
   width: 100%;
   min-width: 170px;
   position: relative;
   padding: 0;
-  height: 32px;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-option-group .seatable-option-group-search .form-control {
-  height: 32px;
+  height: 100%;
   border: none;
-  padding: .375rem 0 .375rem 1rem;
+  padding: .375rem 1rem;
   cursor: pointer;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-option-group .seatable-option-group-search .form-control:focus {
@@ -34,10 +36,13 @@
   box-shadow: none;
 }
 
+.seatable-option-group-search .input-icon-addon,
 .seatable-option-group .seatable-option-group-search .input-icon-addon {
   z-index: 1;
   pointer-events: auto;
   min-width: 2.75rem !important;
+  width: 40px;
+  height: 32px;
 }
 
 .seatable-option-group .seatable-option-group-search .input-icon-addon svg {

package/lib/DTableGroupSelect/index.css

@@ -95,7 +95,7 @@
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: #666666;
+  color: var(--bs-icon-color);
   font-size: 12px;
   margin-right: 6px;
 }
@@ -106,15 +106,13 @@
 
 .seatable-group-select .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 0 .375rem 1rem;
-  height: 32px;
+  height: 100%;
 }
 
 .seatable-group-select .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
 }
 

package/lib/DTableGroupSelect/index.js

@@ -91,7 +91,7 @@ class DTableGroupSelect extends _react.Component {
               className: "selected-option-item-name",
               children: item.name
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-x ml-1",
+              className: "dtable-font dtable-icon-x",
               onClick: () => {
                 this.props.onDeleteOption(item);
               }

package/lib/DTableGroupSelect/select-option-group.css

@@ -19,7 +19,7 @@
 
 .group-selector .option .dtable-icon-check{
   font-size: 14px;
-  color: #666666;
+  color: var(--bs-icon-color);
   height: 14px !important;
   display: flex;
   align-items: center;

package/lib/DTableSelect/dtable-select-label.css

@@ -1,10 +1,10 @@
 .dtable-select-check-icon {
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 14px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
-  font-size: 12px;
-  color: #798d99;
+  font-size: 14px;
+  color: #666;
 }

package/lib/DTableSelect/dtable-select-label.js

@@ -21,7 +21,7 @@ function DTableSelectLabel(_ref) {
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-select-check-icon",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-check-mark"
+        className: "dtable-font dtable-icon-check"
       })
     })]
   });

package/lib/DTableSelect/index.js

@@ -66,6 +66,7 @@ class DTableSelect extends _react.default.Component {
       filterOption: customFilterOption,
       form: form,
       autoFocus: autoFocus
+      // menuIsOpen={true}
     });
   }
 }

package/lib/DTableSelect/utils.js

@@ -20,10 +20,21 @@ const DEFAULT_CONTROL_STYLE = {
   borderRadius: '4px',
   outline: '0'
 };
+const DISABLED_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px',
+  border: '1px solid rgba(0, 40, 100, 0.12)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-bg-color)',
+  borderRadius: '4px',
+  outline: '0',
+  cursor: 'default',
+  opacity: 0.65
+};
 const FOCUS_CONTROL_STYLE = {
   fontSize: '14px',
   padding: '0 4px',
-  border: '1px solid #3e84f7',
+  border: '1px solid #3E84F7',
   boxShadow: 'none',
   backgroundColor: 'var(--bs-popover-bg)',
   borderRadius: '4px',
@@ -35,40 +46,40 @@ const controlCallback = (provided, state) => {
     isFocused
   } = state;
   if (isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
-      cursor: 'default',
-      backgroundColor: '#f5f5f5',
-      opacity: 0.65
+    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'
+      }
     });
   }
   if (isFocused) {
-    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)
-    });
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE);
   }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+  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 MenuSelectStyle = exports.MenuSelectStyle = {
-  // .react-select__menu / react-select-2-listbox
   menu: base => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-      padding: '4px 0 4px 8px',
+      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'
+      marginTop: '4px',
+      marginBottom: 0,
+      width: 'fit-content'
     });
   },
-  // .react-select__menu-list）
   menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    paddingRight: '8px'
+    padding: 0
   }),
   option: (provided, state) => {
     const {
@@ -78,10 +89,20 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
       color: 'var(--bs-body-color)',
       borderRadius: '4px',
-      minHeight: '32px',
-      padding: '6px 12px 6px 8px',
+      height: '32px',
+      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)'
+      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,
@@ -102,8 +123,10 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     });
   },
   multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    color: '#909090',
-    ':hover': {
+    '.dtable-font': {
+      color: 'var(--bs-icon-color)'
+    },
+    '.dtable-font:hover': {
       backgroundColor: 'transparent',
       color: 'var(--bs-icon-color)'
     }
@@ -116,7 +139,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       isDisabled
     } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#868e96',
+      color: '#868E96',
       opacity: isDisabled ? 0.65 : 1
     });
   },
@@ -124,6 +147,18 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     return {
       'display': 'none'
     };
+  },
+  dropdownIndicator: (provided, state) => {
+    const {
+      isDisabled
+    } = state;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      paddingRight: '12px',
+      '.dtable-font': {
+        color: 'var(--bs-icon-color) !important',
+        opacity: isDisabled ? 0.65 : 1
+      }
+    });
   }
 };
 const DropdownIndicator = props => {
@@ -133,8 +168,8 @@ const DropdownIndicator = props => {
       style: {
         fontSize: '12px',
         marginLeft: '-2px',
-        color: '#666666',
-        paddingRight: '16px'
+        color: 'var(--bs-icon-color)',
+        paddingRight: 0
       }
     })
   }));
@@ -157,7 +192,8 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px'
+        marginRight: '-2px',
+        color: 'var(--bs-icon-color)'
       }
     })
   }));
@@ -190,7 +226,7 @@ const Option = props => {
         className: "dtable-font dtable-icon-check",
         style: {
           fontSize: '14px',
-          color: '#666666',
+          color: 'var(--bs-icon-color)',
           paddingLeft: '16px'
         }
       })]

package/lib/SelectOptionGroup/index.css

@@ -66,15 +66,13 @@
 
 .option-group .option-group-search .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 0 .375rem 1rem;
-  height: 32px;
+  height: 100%;
 }
 
 .option-group .option-group-search .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
 }
 
@@ -114,7 +112,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: #666666;
+  color: var(--bs-icon-color);
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.125vjs.3",
+  "version": "6.0.125xhs.10",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",