@autobest-ui/components 2.0.5-alpha.1 → 2.0.5-y.1

package/esm/select/index.d.ts

@@ -21,7 +21,7 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
      * 选择的值
      */
     value: Value;
-    onChange: (item: SelectOptionItem, name?: string, isFromFilterSelected?: boolean) => void;
+    onChange: (item: SelectOptionItem, name?: string) => void;
     /**
      * 组件标识符
      */
@@ -62,6 +62,10 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
      * 是否支持过滤功能， 目前的过滤类似carid.com，仅仅支持首字母过滤，滚动到匹配位置，填充匹配到的第一项，触发onChange
      */
     isFilterOption?: boolean;
+    /**
+     * 过滤到结果时才触发，此时并不会触发onChange, 当点击选项或者隐藏列表后才会触发onChange
+     */
+    onFilterChange?: (item: SelectOptionItem, name?: string) => void;
     /**
      * 是否最大全宽
      */
@@ -90,12 +94,12 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
 interface SelectStates {
     visible: boolean;
     list: [SelectOptionItem[]];
+    filterItem?: SelectOptionItem;
 }
 declare class Select extends React.Component<SelectProps, SelectStates> {
     prefixCls: string;
     keydownHandler: AddListenerEventHandler;
     popupContentRef: React.RefObject<HTMLDivElement>;
-    isFromFilterSelected: boolean;
     static defaultProps: {
         title: any;
         icon: JSX.Element;
@@ -106,20 +110,20 @@ declare class Select extends React.Component<SelectProps, SelectStates> {
         disabled: boolean;
         hiddenIcon: boolean;
         isMinRootWidth: boolean;
+        isFilterOption: boolean;
         isMaxRootWidth: boolean;
     };
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: SelectProps): {
         list: any[];
     };
-    componentDidUpdate(prevProps: Readonly<SelectProps>): void;
     componentWillUnmount(): void;
     /**
      * 当支持过滤时，绑定过滤事件
      */
     addKeydownListener: () => void;
     removeKeydownListener: () => void;
-    KeydownCallback: (event: React.KeyboardEvent) => void;
+    keydownCallback: (event: React.KeyboardEvent) => void;
     findMatchItem: (inputVal: string) => SelectOptionItem;
     /**
      * 设置显示与隐藏

package/esm/select/index.js

@@ -86,7 +86,7 @@ function (_super) {
      */
 
     _this.addKeydownListener = function () {
-      _this.keydownHandler = addEventListener(document, 'keydown', _this.KeydownCallback);
+      _this.keydownHandler = addEventListener(document, 'keydown', _this.keydownCallback);
     };
 
     _this.removeKeydownListener = function () {
@@ -97,24 +97,40 @@ function (_super) {
       }
     };
 
-    _this.KeydownCallback = function (event) {
+    _this.keydownCallback = function (event) {
       var code = event.keyCode || event.which;
 
       if (code >= 65 && code <= 90 || code >= 48 && code <= 57 || code >= 96 && code <= 105) {
-        var findItem = _this.findMatchItem(event.key);
+        var findItem_1 = _this.findMatchItem(event.key);
 
-        if (!findItem) {
+        if (!findItem_1) {
           return;
         }
 
         var _a = _this.props,
-            onChange = _a.onChange,
-            value = _a.value,
+            onFilterChange_1 = _a.onFilterChange,
             name_1 = _a.name;
-
-        if (findItem.value !== value) {
-          _this.isFromFilterSelected = true;
-          onChange(findItem, name_1, true);
+        var filterItem = _this.state.filterItem;
+
+        if (!filterItem || findItem_1.value !== filterItem.value) {
+          _this.setState({
+            filterItem: findItem_1
+          }, function () {
+            if (onFilterChange_1) {
+              onFilterChange_1(findItem_1, name_1);
+            } // 通过搜索选择的，将滚动到该元素位置
+
+
+            var element = _this.popupContentRef.current;
+
+            if (element) {
+              var activeElement = element.querySelector(".".concat(_this.prefixCls, "-active"));
+              activeElement.scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+              });
+            }
+          });
         }
       }
     };
@@ -154,6 +170,19 @@ function (_super) {
         _this.addKeydownListener();
       }
 
+      var filterItem = _this.state.filterItem;
+
+      if (filterItem) {
+        // 清空filter数据，并触发onChange
+        _this.setState({
+          filterItem: null
+        });
+
+        if (filterItem.value !== _this.props.value) {
+          _this.props.onChange(filterItem, _this.props.name);
+        }
+      }
+
       _this.setState({
         visible: status
       });
@@ -200,27 +229,13 @@ function (_super) {
     };
   };
 
-  Select.prototype.componentDidUpdate = function (prevProps) {
-    // 通过搜索选择的，将滚动到该元素位置
-    if (this.state.visible && this.isFromFilterSelected && this.props.isFilterOption && prevProps.value !== this.props.value) {
-      this.isFromFilterSelected = false;
-      var element = this.popupContentRef.current;
-
-      if (element) {
-        var activeElement = element.querySelector(".".concat(this.prefixCls, "-active"));
-        activeElement.scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      }
-    }
-  };
-
   Select.prototype.componentWillUnmount = function () {
     this.removeKeydownListener();
   };
 
   Select.prototype.onSelecting = function (ev, item) {
+    var _this = this;
+
     if (ev) {
       ev.stopPropagation();
     }
@@ -232,6 +247,13 @@ function (_super) {
 
     if (item.value !== value) {
       onChange(item, name);
+      this.setState({
+        // select优先级最高，清空filter项
+        filterItem: null
+      }, function () {
+        _this.triggerSelect(false);
+      });
+      return;
     }
 
     this.triggerSelect(false);
@@ -271,6 +293,7 @@ function (_super) {
     var _this = this;
 
     var cls = this.prefixCls;
+    var filterItem = this.state.filterItem;
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderTitle(), /*#__PURE__*/React.createElement("div", {
       className: "".concat(cls, "-content"),
       ref: this.popupContentRef
@@ -290,7 +313,7 @@ function (_super) {
 
         return /*#__PURE__*/React.createElement("li", {
           key: item.value,
-          className: classNames(item.className, (_a = {}, _a["".concat(cls, "-active")] = item.value === _this.props.value, _a)),
+          className: classNames(item.className, (_a = {}, _a["".concat(cls, "-active")] = filterItem ? filterItem.value === item.value : item.value === _this.props.value, _a)),
           onClick: function onClick(ev) {
             return _this.onSelecting(ev, item);
           }
@@ -308,10 +331,11 @@ function (_super) {
     var _a = this.props,
         options = _a.options,
         value = _a.value;
+    var filterItem = this.state.filterItem;
 
-    if (!isBlank(value)) {
+    if (!isBlank(value) || filterItem) {
       var currentItem = options.find(function (item) {
-        return item.value === value;
+        return filterItem ? filterItem.value === item.value : item.value === value;
       });
 
       if (currentItem) {
@@ -378,6 +402,7 @@ function (_super) {
     disabled: false,
     hiddenIcon: false,
     isMinRootWidth: false,
+    isFilterOption: true,
     isMaxRootWidth: false
   };
   return Select;

package/lib/select/index.d.ts

@@ -21,7 +21,7 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
      * 选择的值
      */
     value: Value;
-    onChange: (item: SelectOptionItem, name?: string, isFromFilterSelected?: boolean) => void;
+    onChange: (item: SelectOptionItem, name?: string) => void;
     /**
      * 组件标识符
      */
@@ -62,6 +62,10 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
      * 是否支持过滤功能， 目前的过滤类似carid.com，仅仅支持首字母过滤，滚动到匹配位置，填充匹配到的第一项，触发onChange
      */
     isFilterOption?: boolean;
+    /**
+     * 过滤到结果时才触发，此时并不会触发onChange, 当点击选项或者隐藏列表后才会触发onChange
+     */
+    onFilterChange?: (item: SelectOptionItem, name?: string) => void;
     /**
      * 是否最大全宽
      */
@@ -90,12 +94,12 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
 interface SelectStates {
     visible: boolean;
     list: [SelectOptionItem[]];
+    filterItem?: SelectOptionItem;
 }
 declare class Select extends React.Component<SelectProps, SelectStates> {
     prefixCls: string;
     keydownHandler: AddListenerEventHandler;
     popupContentRef: React.RefObject<HTMLDivElement>;
-    isFromFilterSelected: boolean;
     static defaultProps: {
         title: any;
         icon: JSX.Element;
@@ -106,20 +110,20 @@ declare class Select extends React.Component<SelectProps, SelectStates> {
         disabled: boolean;
         hiddenIcon: boolean;
         isMinRootWidth: boolean;
+        isFilterOption: boolean;
         isMaxRootWidth: boolean;
     };
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: SelectProps): {
         list: any[];
     };
-    componentDidUpdate(prevProps: Readonly<SelectProps>): void;
     componentWillUnmount(): void;
     /**
      * 当支持过滤时，绑定过滤事件
      */
     addKeydownListener: () => void;
     removeKeydownListener: () => void;
-    KeydownCallback: (event: React.KeyboardEvent) => void;
+    keydownCallback: (event: React.KeyboardEvent) => void;
     findMatchItem: (inputVal: string) => SelectOptionItem;
     /**
      * 设置显示与隐藏

package/lib/select/index.js

@@ -98,7 +98,7 @@ function (_super) {
      */
 
     _this.addKeydownListener = function () {
-      _this.keydownHandler = (0, _utils.addEventListener)(document, 'keydown', _this.KeydownCallback);
+      _this.keydownHandler = (0, _utils.addEventListener)(document, 'keydown', _this.keydownCallback);
     };
 
     _this.removeKeydownListener = function () {
@@ -109,24 +109,40 @@ function (_super) {
       }
     };
 
-    _this.KeydownCallback = function (event) {
+    _this.keydownCallback = function (event) {
       var code = event.keyCode || event.which;
 
       if (code >= 65 && code <= 90 || code >= 48 && code <= 57 || code >= 96 && code <= 105) {
-        var findItem = _this.findMatchItem(event.key);
+        var findItem_1 = _this.findMatchItem(event.key);
 
-        if (!findItem) {
+        if (!findItem_1) {
           return;
         }
 
         var _a = _this.props,
-            onChange = _a.onChange,
-            value = _a.value,
+            onFilterChange_1 = _a.onFilterChange,
             name_1 = _a.name;
-
-        if (findItem.value !== value) {
-          _this.isFromFilterSelected = true;
-          onChange(findItem, name_1, true);
+        var filterItem = _this.state.filterItem;
+
+        if (!filterItem || findItem_1.value !== filterItem.value) {
+          _this.setState({
+            filterItem: findItem_1
+          }, function () {
+            if (onFilterChange_1) {
+              onFilterChange_1(findItem_1, name_1);
+            } // 通过搜索选择的，将滚动到该元素位置
+
+
+            var element = _this.popupContentRef.current;
+
+            if (element) {
+              var activeElement = element.querySelector(".".concat(_this.prefixCls, "-active"));
+              activeElement.scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+              });
+            }
+          });
         }
       }
     };
@@ -166,6 +182,19 @@ function (_super) {
         _this.addKeydownListener();
       }
 
+      var filterItem = _this.state.filterItem;
+
+      if (filterItem) {
+        // 清空filter数据，并触发onChange
+        _this.setState({
+          filterItem: null
+        });
+
+        if (filterItem.value !== _this.props.value) {
+          _this.props.onChange(filterItem, _this.props.name);
+        }
+      }
+
       _this.setState({
         visible: status
       });
@@ -212,27 +241,13 @@ function (_super) {
     };
   };
 
-  Select.prototype.componentDidUpdate = function (prevProps) {
-    // 通过搜索选择的，将滚动到该元素位置
-    if (this.state.visible && this.isFromFilterSelected && this.props.isFilterOption && prevProps.value !== this.props.value) {
-      this.isFromFilterSelected = false;
-      var element = this.popupContentRef.current;
-
-      if (element) {
-        var activeElement = element.querySelector(".".concat(this.prefixCls, "-active"));
-        activeElement.scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      }
-    }
-  };
-
   Select.prototype.componentWillUnmount = function () {
     this.removeKeydownListener();
   };
 
   Select.prototype.onSelecting = function (ev, item) {
+    var _this = this;
+
     if (ev) {
       ev.stopPropagation();
     }
@@ -244,6 +259,13 @@ function (_super) {
 
     if (item.value !== value) {
       onChange(item, name);
+      this.setState({
+        // select优先级最高，清空filter项
+        filterItem: null
+      }, function () {
+        _this.triggerSelect(false);
+      });
+      return;
     }
 
     this.triggerSelect(false);
@@ -285,6 +307,7 @@ function (_super) {
     var _this = this;
 
     var cls = this.prefixCls;
+    var filterItem = this.state.filterItem;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(cls, "-content"),
       ref: this.popupContentRef
@@ -304,7 +327,7 @@ function (_super) {
 
         return /*#__PURE__*/_react.default.createElement("li", {
           key: item.value,
-          className: (0, _classnames.default)(item.className, (_a = {}, _a["".concat(cls, "-active")] = item.value === _this.props.value, _a)),
+          className: (0, _classnames.default)(item.className, (_a = {}, _a["".concat(cls, "-active")] = filterItem ? filterItem.value === item.value : item.value === _this.props.value, _a)),
           onClick: function onClick(ev) {
             return _this.onSelecting(ev, item);
           }
@@ -322,10 +345,11 @@ function (_super) {
     var _a = this.props,
         options = _a.options,
         value = _a.value;
+    var filterItem = this.state.filterItem;
 
-    if (!(0, _utils.isBlank)(value)) {
+    if (!(0, _utils.isBlank)(value) || filterItem) {
       var currentItem = options.find(function (item) {
-        return item.value === value;
+        return filterItem ? filterItem.value === item.value : item.value === value;
       });
 
       if (currentItem) {
@@ -392,6 +416,7 @@ function (_super) {
     disabled: false,
     hiddenIcon: false,
     isMinRootWidth: false,
+    isFilterOption: true,
     isMaxRootWidth: false
   };
   return Select;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/components",
-  "version": "2.0.5-alpha.1",
+  "version": "2.0.5-y.1",
   "private": false,
   "description": "components common ui for React",
   "main": "lib/index.js",
@@ -46,5 +46,5 @@
     "react": ">=16.8.6",
     "react-transition-group": ">=4.2.2"
   },
-  "gitHead": "25088b80191d4491efa60bf4a36be60d09d7fce1"
+  "gitHead": "b1bdd28e78a696af37cd63e3f13dd1f96e534ad7"
 }