dtable-ui-component 6.0.110-pzy.2 → 6.0.110-sam.11

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -107,7 +107,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-check-icon",
           children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })
@@ -132,7 +132,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-check-icon",
           children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -49,7 +49,7 @@ class CollaboratorFilter extends _react.Component {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-check-icon",
                 children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check-mark"
+                  className: "option-edit dtable-font dtable-icon-check"
                 })
               })]
             })

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -412,20 +412,20 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: #999;
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #fff;
+  color: #999;
 }
 
 .dtable-ui-filters-list .single-select-option,

package/lib/DTableGroupSelect/index.css

@@ -108,7 +108,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
+  padding: .375rem 1rem !important;
   height: 32px;
 }
 
@@ -118,21 +118,8 @@
   box-shadow: none !important;
 }
 
-.seatable-group-select .option-group-content .dtable-icon-check {
+.option-group-content .dtable-icon-check {
   color: #666666;
   font-size: 14px;
-}
-
-.seatable-group-select .clear-search-text {
-  position: absolute;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
-  top: 4px;
-  right: 22px;
-}
-
-.seatable-group-select .seatable-icon-btn:not(.disabled):hover {
-  background-color:#FFFFFF;
+  margin-left: 16px;
 }

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

@@ -16,10 +16,10 @@
   padding: 0.25rem 8px;
 }
 
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
+.group-selector .option .dtable-icon-check{
+  font-size: 14px;
   color: #666666;
-  height: 12px !important;
+  height: 14px !important;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -154,7 +154,7 @@ class SelectOptionGroup extends _react.Component {
             title: option.label,
             children: option.label
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check-mark"
+            className: "dtable-font dtable-icon-check"
           })]
         }, `${option.id}-${index}`);
       });
@@ -220,7 +220,7 @@ class SelectOptionGroup extends _react.Component {
       style: style,
       onMouseDown: this.onMouseDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "position-relative mb-1",
+        className: "position-relative",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           className: "option-search-control",
           placeholder: searchPlaceholder,
@@ -230,14 +230,12 @@ class SelectOptionGroup extends _react.Component {
           clearValue: this.clearValue,
           components: {
             ClearIndicator: props => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "clear-search-text",
-                onClick: props.clearValue,
-                title: (0, _lang.getLocale)('Clear_search_text'),
-                "aria-label": (0, _lang.getLocale)('Clear_search_text'),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-                  icon: "x"
-                })
+              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();
+                  props.clearValue();
+                }
               });
             }
           }

package/lib/DTableSelect/index.js

@@ -33,9 +33,10 @@ class DTableSelect extends _react.default.Component {
     const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: (0, _utils.createHandleChange)(onChange),
+      onChange: (0, _utils.createHandleChange)(onChange, isMulti),
       options: processedOptions,
       isMulti: isMulti,
+      isClearable: false,
       className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,

package/lib/DTableSelect/utils.js

@@ -239,20 +239,29 @@ const processOptionsWithClear = (options, isClearable) => {
   return options;
 };
 exports.processOptionsWithClear = processOptionsWithClear;
-const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
-  if (selectedOption && selectedOption.value === '__clear__') {
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback, isMulti) => {
+  if (isMulti && Array.isArray(selectedOption)) {
+    const hasClear = selectedOption && selectedOption.some(opt => opt && opt.value === '__clear__');
+    if (hasClear) {
+      onChangeCallback([], {
+        ...actionMeta,
+        action: 'clear'
+      });
+      return;
+    }
+  } else if (selectedOption && selectedOption.value === '__clear__') {
     onChangeCallback(null, {
       ...actionMeta,
       action: 'clear'
     });
-  } else {
-    onChangeCallback(selectedOption, actionMeta);
+    return;
   }
+  onChangeCallback(selectedOption, actionMeta);
 };
 exports.handleSelectChange = handleSelectChange;
-const createHandleChange = onChange => {
+const createHandleChange = (onChange, isMulti) => {
   return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange);
+    handleSelectChange(selectedOption, actionMeta, onChange, isMulti);
   };
 };
 exports.createHandleChange = createHandleChange;

package/lib/SelectOptionGroup/index.css

@@ -6,7 +6,7 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding-top: 0.25rem;
+  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,11 +17,18 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 0 8px 0 !important;
+}
+
+.option-group .option-group-content .label-space {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .option-group-search .form-control {
   height: 32px;
+  border-radius: 4px;
 }
 
 .option-group .none-search-result {
@@ -34,6 +41,7 @@
   flex: 1;
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
 }
 
 .option-group .option-group-top {
@@ -44,7 +52,7 @@
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -53,30 +61,40 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
 }
 
-.option.option-active {
-  background-color: #f5f5f5;
-  color: #212529;
-  cursor: pointer;
+.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 1rem !important;
+  height: 32px;
 }
 
-.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;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !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-group-content .dtable-icon-check {
+  font-size: 14px !important;
+  color: #666666;
 }
 
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.option.option-active {
+  background-color: #f5f5f5;
+  color: #212529;
+  cursor: pointer;
 }
 
+
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }

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"
+              })]
+            })]
+          })
         }, `${key}-${i}`);
       });
     };
+    this.clearValue = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
     this.state = {
       searchVal: '',
       activeIndex: -1,
@@ -243,7 +267,17 @@ class SelectOptionGroup extends _react.Component {
             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: props.clearValue
+                });
+              }
+            }
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: `option-group-content ${!searchable && !supportMultipleSelect ? 'option-group-top' : ''}`,

package/package.json

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