dtable-ui-component 6.0.110-oot.4 → 6.0.110-oot.6

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

@@ -65,7 +65,7 @@
   align-items: center;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -75,6 +75,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: 4px;
+  height: 32px;
 }
 
 .seatable-select-option.seatable-select-option-active {
@@ -96,18 +97,19 @@
   color: #aaa;
 } */
 
-.seatable-select-option .select-option-name .single-select-option {
+/* .seatable-select-option .select-option-name .single-select-option {
   margin: 0 0 0 12px;
-}
+} */
 
 .seatable-select-option .select-option-name .multiple-select-option {
   margin: 0;
 }
 
 .seatable-option-group .dtable-icon-check {
-  color:'var(--bs-icon-color)'
+  color: var(--bs-icon-color);
 }
 
+.seatable-option-group-selector-single-select .select-label,
 .seatable-option-group-selector-single-select .select-option-name,
 .seatable-option-group-selector-multiple-select .multiple-option-name {
   display: flex;
@@ -119,11 +121,11 @@
   display: inline-flex;
   width: 20px;
   text-align: center;
+  color: var(--bs-icon-color);
 }
 
-.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check-mark {
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check {
   font-size: 12px;
-  color: #798d99;
 }
 
 .seatable-option-group-selector-single-select .seatable-select-option:hover,

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

@@ -154,6 +154,7 @@ class SelectOptionGroup extends _react.Component {
           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"

package/lib/DTableCustomizeSelect/select-option-group/search-input.js

@@ -66,6 +66,9 @@ class SearchInput extends _react.Component {
       if (!isClearable || !searchValue) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)('search-text-clear input-icon-addon', clearClassName),
+        style: {
+          fontSize: '12px'
+        },
         onClick: this.clearSearch,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
           symbol: "close"

package/lib/DTableSelect/index.js

@@ -129,24 +129,7 @@ class DTableSelect extends _react.default.Component {
         options.shift();
       }
     }
-    const optionsWithCheck = options.map(option => {
-      const isSelected = value && value.value === option.value;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
-        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          className: "d-flex align-items-center justify-content-between",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "select-option-label",
-            children: option.label
-          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-font dtable-icon-check seatable-check-color",
-            style: {
-              width: '12px',
-              height: '12px'
-            }
-          })]
-        })
-      });
-    });
+    const optionsWithCheck = options.map(option => (0, _objectSpread2.default)({}, option));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       isDisabled: isDisabled,
@@ -176,7 +159,33 @@ class DTableSelect extends _react.default.Component {
       noOptionsMessage: noOptionsMessage,
       filterOption: customFilterOption,
       autoFocus: autoFocus,
-      form: form
+      form: form,
+      formatOptionLabel: (option, _ref3) => {
+        let {
+          context
+        } = _ref3;
+        const isSelected = value && value.value === option.value;
+        if (context === 'menu') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "d-flex align-items-center justify-content-between",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "select-option-label",
+              children: option.label
+            }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dtable-font dtable-icon-check seatable-check-color",
+              style: {
+                width: '12px',
+                height: '12px'
+              }
+            })]
+          });
+        }
+        // context === 'value'
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-option-label",
+          children: option.label
+        });
+      }
     });
   }
 }

package/package.json

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