dtable-ui-component 6.0.110-pli.2 → 6.0.110-ppd.1

package/lib/DTableGroupSelect/index.css

@@ -118,7 +118,7 @@
   box-shadow: none !important;
 }
 
-.seatable-group-select .option-group-content .dtable-icon-check {
+.option-group-content .dtable-icon-check {
   color: #666666;
   font-size: 14px;
 }
@@ -137,6 +137,18 @@
   background-color:#FFFFFF;
 }
 
-.option-group-dtable-filter-select-column .option-group-search .clear-search-text {
-  top: 4px;
+.option-group-dtable-filter-select-column .seatable-icon-btn {
+  height: 12px !important;
+  width: 12px !important;
+  font-size: 12px !important;
+}
+
+.option-group-dtable-filter-select-column .clear-search-text {
+  position: absolute;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  line-height: 12px;
+  top: 12px;
+  right: 18px;
 }

package/lib/SelectOptionGroup/index.css

@@ -20,6 +20,12 @@
   padding: 0 0 8px 0 !important;
 }
 
+.option-group .option-group-content .label-space {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .option-group-search .form-control {
   height: 32px;
 }

package/lib/SelectOptionGroup/index.js

@@ -83,6 +83,11 @@ 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.onMouseDown = e => {
       const {
         isInModal
@@ -150,8 +155,8 @@ 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' && value.value === opt.value || typeof value === 'string' && value === opt.value);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
+        let isSelected = value && (typeof value === 'object' && this.isEqual(value.value, opt.value) || typeof value === 'string' && value === opt.value);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
           value: opt.value,
@@ -159,12 +164,14 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: [isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check",
-            style: {
-              marginRight: '8px'
-            }
-          }), opt.label]
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "label-space",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [" ", opt.label]
+            }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-check"
+            })]
+          })
         }, `${key}-${i}`);
       });
     };

package/package.json

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