dtable-ui-component 6.0.110-aol.2 → 6.0.110-aol.4

package/lib/DTableCustomizeSelect/index.css

@@ -95,11 +95,13 @@
   white-space: nowrap;
 }
 
-.option-group .custom-select-search {
+.option-group .option-group-selector-multiple-select .option-group-search,
+.option-group .option-group-selector-single-select .option-group-search {
   padding: 0 0 8px 0 !important;
 }
 
-.custom-select-search .form-control {
+.option-group-selector-multiple-select .form-control,
+.option-group-selector-single-select .form-control {
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
@@ -107,7 +109,8 @@
   height: 32px;
 }
 
-.custom-select-search.form-control:focus {
+.option-group-selector-multiple-select .form-control:focus,
+.option-group-selector-single-select .form-control:focus {
   border-color: transparent !important;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;

package/lib/DTableCustomizeSelect/index.js

@@ -52,9 +52,10 @@ class DTableCustomizeSelect extends _react.Component {
     };
     this.getFilterOptions = searchValue => {
       const {
-        options
+        options,
+        searchable
       } = this.props;
-      if (!Array.isArray(options) || options.length < 10) return Array.isArray(options) ? options : [];
+      if (!searchable) return options || [];
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => {
@@ -87,6 +88,7 @@ class DTableCustomizeSelect extends _react.Component {
       value,
       options,
       placeholder,
+      searchable,
       searchPlaceholder,
       noOptionsPlaceholder,
       isLocked,
@@ -94,7 +96,6 @@ class DTableCustomizeSelect extends _react.Component {
       addOptionAble,
       component
     } = this.props;
-    const searchable = Array.isArray(options) && options.length > 10;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select', {

package/lib/SelectOptionGroup/index.css

@@ -17,7 +17,7 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 8px 10px 0 !important
+  padding: 8px 8px 0 !important
 }
 
 .option-group-search .form-control {
@@ -37,7 +37,7 @@
 }
 
 .option-group .option-group-top {
-  padding-top: 8px;
+  padding-top: 8px !important;
 }
 
 .option {
@@ -122,17 +122,3 @@
 .option-group-selector-single-select .form-control {
   padding: .375rem .5rem !important;
 }
-
-.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 1rem !important;
-  height: 32px;
-}
-
-.option-group-search .form-control:focus {
-  border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
-  box-shadow: none !important;
-}

package/lib/SelectOptionGroup/index.js

@@ -194,7 +194,6 @@ class SelectOptionGroup extends _react.Component {
       addOptionAble,
       component
     } = this.props;
-    const isUnSingleSelectOrMultiSelect = className === 'selector-multiple-select' || className === 'selector-single-select';
     const {
       AddOption
     } = component || {};
@@ -221,6 +220,7 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
+    const isUnSingleSeleectOrMultiSelect = className === 'selector-single-select' || className === 'selector-multiple-select';
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
       ref: ref => this.clickOutsideRef = ref,
       onClickOutside: this.props.onClickOutside,
@@ -237,7 +237,7 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `option-group-search ${!isUnSingleSelectOrMultiSelect ? 'custom-select-search' : ''}`,
+          className: `option-group-search ${!isUnSingleSeleectOrMultiSelect ? 'option-group-other-search' : ''}`,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110-aol.2",
+  "version": "6.0.110-aol.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",