dtable-ui-component 7.0.13-beta.1 → 7.0.13-isa.4

package/lib/DTableCustomizeSearchInput/index.css

@@ -27,7 +27,7 @@
   font-size: .875rem;
   line-height: 1.6;
   width: 100%;
-  padding: .375rem 1rem;
+  padding: 6px 40px 6px 12px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -60,7 +60,7 @@
   min-width: 20px;
   pointer-events: auto;
   color: var(--bs-icon-color);
-  right: 13px;
+  right: 6px;
   top: 6px;
   z-index: 1;
   height: 20px;

package/lib/DTableCustomizeSearchInput/index.js

@@ -9,37 +9,48 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+var _lang = require("../lang");
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSearchInput extends _react.Component {
   constructor(props) {
     super(props);
-    this.onCompositionStart = () => {
-      this.isInputtingChinese = true;
+    this.handleCompositionStart = () => {
+      this.isComposing = true;
     };
-    this.onChange = e => {
-      this.timer && clearTimeout(this.timer);
+    this.clearChangeTimer = () => {
+      if (this.timer === null) return;
+      clearTimeout(this.timer);
+      this.timer = null;
+    };
+    this.scheduleSearchChange = searchValue => {
       const _this$props = this.props,
         onChange = _this$props.onChange,
         _this$props$wait = _this$props.wait,
         wait = _this$props$wait === void 0 ? 100 : _this$props$wait;
-      let text = e.target.value;
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        onChange(searchValue.trim());
+      }, wait);
+    };
+    this.handleInputChange = event => {
+      const searchValue = event.target.value || '';
+      this.clearChangeTimer();
       this.setState({
-        searchValue: text || ''
-      }, () => {
-        if (this.isInputtingChinese) return;
-        this.timer = setTimeout(() => {
-          onChange && onChange(this.state.searchValue.trim());
-        }, wait);
+        searchValue
       });
+      if (this.isComposing) return;
+      this.scheduleSearchChange(searchValue);
     };
-    this.onCompositionEnd = e => {
-      this.isInputtingChinese = false;
-      this.onChange(e);
+    this.handleCompositionEnd = event => {
+      this.isComposing = false;
+      this.handleInputChange(event);
     };
-    this.clearSearch = e => {
-      e && e.stopPropagation && e.stopPropagation();
+    this.clearSearch = event => {
+      event && event.stopPropagation && event.stopPropagation();
       const clearValue = this.props.clearValue;
+      this.clearChangeTimer();
       this.setState({
         searchValue: ''
       }, () => {
@@ -60,19 +71,26 @@ class DTableCustomizeSearchInput extends _react.Component {
         clearClassName = _this$props2.clearClassName;
       const searchValue = this.state.searchValue;
       if (!isClearable || !searchValue) return null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _classnames.default)('clear-icon-x', clearClassName),
-        onClick: this.clearSearch,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-          symbol: "close",
-          color: "var(--bs-icon-secondary-color)"
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)('clear-icon-x', clearClassName),
+          onClick: this.clearSearch,
+          id: "customize-search-clear",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+            symbol: "close",
+            color: "var(--bs-icon-color)"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+          placement: "bottom",
+          target: "customize-search-clear",
+          children: (0, _lang.getLocale)('Clear')
+        })]
       });
     };
     this.state = {
       searchValue: props.value || ''
     };
-    this.isInputtingChinese = false;
+    this.isComposing = false;
     this.timer = null;
     this.inputRef = null;
   }
@@ -85,14 +103,14 @@ class DTableCustomizeSearchInput extends _react.Component {
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
+      this.clearChangeTimer();
       this.setState({
         searchValue: nextProps.value
       });
     }
   }
   componentWillUnmount() {
-    this.timer && clearTimeout(this.timer);
-    this.timer = null;
+    this.clearChangeTimer();
     this.inputRef = null;
   }
   render() {
@@ -104,24 +122,19 @@ class DTableCustomizeSearchInput extends _react.Component {
       _this$props3$disabled = _this$props3.disabled,
       disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled,
       _this$props3$style = _this$props3.style,
-      style = _this$props3$style === void 0 ? {} : _this$props3$style,
-      isClearable = _this$props3.isClearable,
-      _this$props3$isMultip = _this$props3.isMultiple,
-      isMultiple = _this$props3$isMultip === void 0 ? false : _this$props3$isMultip;
+      style = _this$props3$style === void 0 ? {} : _this$props3$style;
     const searchValue = this.state.searchValue;
-    const inputWidth = isClearable && searchValue && !isMultiple ? 'calc(100% - 40px)' : '100%';
-    style.width = inputWidth;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "text",
         name: "search-input",
         value: searchValue,
         className: (0, _classnames.default)('select-search-control', className),
-        onChange: this.onChange,
+        onChange: this.handleInputChange,
         autoFocus: autoFocus,
         placeholder: placeholder,
-        onCompositionStart: this.onCompositionStart,
-        onCompositionEnd: this.onCompositionEnd,
+        onCompositionStart: this.handleCompositionStart,
+        onCompositionEnd: this.handleCompositionEnd,
         onKeyDown: onKeyDown,
         disabled: disabled,
         style: style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.13-beta.1",
+  "version": "7.0.13isa.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",