dtable-ui-component 6.0.110-aol.8 → 6.0.110-apt.5

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;
 }
@@ -136,3 +136,19 @@
 .seatable-group-select .seatable-icon-btn:not(.disabled):hover {
   background-color:#FFFFFF;
 }
+
+.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/DTableSelect/index.js

@@ -30,10 +30,11 @@ class DTableSelect extends _react.default.Component {
       autoFocus,
       className
     } = this.props;
+    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: onChange,
-      options: options,
+      onChange: (0, _utils.createHandleChange)(onChange),
+      options: processedOptions,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -41,12 +42,10 @@ class DTableSelect extends _react.default.Component {
       components: {
         Option: _utils.Option,
         DropdownIndicator: _utils.DropdownIndicator,
-        MenuList: _utils.MenuList,
-        ClearIndicator: _utils.ClearIndicator
+        MenuList: _utils.MenuList
       },
       placeholder: placeholder,
       isSearchable: isSearchable,
-      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -112,20 +112,24 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     } = state;
     return {
       ...provided,
+      padding: '8px',
       fontSize: '14px',
       color: '#212529',
       cursor: isDisabled ? 'default' : 'pointer',
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
-      padding: '8px',
       borderRadius: '4px',
       ':active': {
         backgroundColor: '#f5f5f5'
       },
       '.header-icon .dtable-font': {
-        color: '#aaa'
+        color: '#999'
       },
       '.header-icon .multicolor-icon': {
-        color: '#aaa'
+        color: '#999'
+      },
+      '.seatable-ui-select-tip': {
+        fontSize: '12px',
+        color: '#666666'
       }
     };
   },
@@ -134,7 +138,19 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     ...base,
     zIndex: 9999
   }),
-  indicatorSeparator: noneCallback
+  indicatorSeparator: noneCallback,
+  menuList: provided => ({
+    ...provided,
+    padding: '8px'
+  }),
+  valueContainer: (provided, state) => ({
+    ...provided,
+    padding: '2px 8px 2px 16px'
+  }),
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    padding: 0
+  })
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, {
@@ -143,7 +159,9 @@ const DropdownIndicator = props => {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px'
+        marginLeft: '-2px',
+        color: '#666666',
+        paddingRight: '16px'
       }
     })
   });
@@ -185,27 +203,56 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 exports.MenuList = MenuList;
 const Option = props => {
   const {
-    isSelected
+    isSelected,
+    label
   } = props;
-  const baseStyle = props.data.style || {};
-  const containerStyle = {
-    ...baseStyle,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: containerStyle,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, {
-      ...props
-    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-check-mark",
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
-        fontSize: '14px',
-        color: '#666666',
-        flexShrink: 0
-      }
-    })]
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: label
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-check",
+        style: {
+          fontSize: '14px',
+          color: '#666666',
+          paddingLeft: '16px'
+        }
+      })]
+    })
   });
 };
-exports.Option = Option;
+exports.Option = Option;
+const processOptionsWithClear = (options, isClearable) => {
+  if (isClearable && options && options.length > 0) {
+    return [{
+      label: '--',
+      value: '__clear__'
+    }, ...options];
+  }
+  return options;
+};
+exports.processOptionsWithClear = processOptionsWithClear;
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
+  if (selectedOption && selectedOption.value === '__clear__') {
+    onChangeCallback(null, {
+      ...actionMeta,
+      action: 'clear'
+    });
+  } else {
+    onChangeCallback(selectedOption, actionMeta);
+  }
+};
+exports.handleSelectChange = handleSelectChange;
+const createHandleChange = onChange => {
+  return (selectedOption, actionMeta) => {
+    handleSelectChange(selectedOption, actionMeta, onChange);
+  };
+};
+exports.createHandleChange = createHandleChange;

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;
 }
@@ -67,11 +73,6 @@
   color: #fff;
 }
 
-.optio .dtable-ui-explanation-tip {
-  color: #666666;
-  font-size: 12px !important;
-}
-
 .option.option-active .header-icon .dtable-font,
 .option.option-active .header-icon .multicolor-icon {
   color: #fff;

package/lib/SelectOptionGroup/index.js

@@ -12,6 +12,8 @@ var _option = _interopRequireDefault(require("./option"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
@@ -135,7 +137,8 @@ class SelectOptionGroup extends _react.Component {
     this.renderOptGroup = searchVal => {
       let {
         noOptionsPlaceholder,
-        onSelectOption
+        onSelectOption,
+        value
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
@@ -147,6 +150,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' && value.value.column.key === opt.value.column.key || typeof value === 'string' && value === opt.value);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
@@ -155,10 +159,23 @@ 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]
+            }), 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 +260,22 @@ 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)("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"
+                  })
+                });
+              }
+            }
           })
         }), /*#__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-aol.8",
+  "version": "6.0.110-apt.5",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",