ztxkui 1.8.1 → 1.8.5

package/dist/Demo.js

@@ -57,7 +57,9 @@ function Demo() {
         React.createElement(Link, { to: "/test" }, "test"),
         React.createElement("h1", null, "\u4F5C\u4E3A\u6F14\u793A\u4F7F\u7528"),
         React.createElement("h2", null, "\u5982\u679C\u6570\u636E\u662F\u901A\u8FC7\u5916\u90E8\u83B7\u53D6\u7684\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F20\u9012list\u5C5E\u6027"),
-        React.createElement(EnhanceSelect, { style: selectStyle, list: list, showAll: true, joinKey: "test1" }),
+        React.createElement(EnhanceSelect, { style: selectStyle, list: list, showAll: true, joinKey: "test1", onChange: function (value, option, fullData) {
+                console.log(value, option, fullData);
+            } }),
         React.createElement("h2", null, "\u5F02\u6B65\u83B7\u53D6\u6570\u636E"),
         React.createElement(EnhanceSelect, { style: selectStyle, url: "http://192.168.0.83:8000/api/zmdms-user/list", params: JSON.stringify({
                 status: 50,

package/dist/components/EnhanceSelect/index.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * @author cyx
  * @description 增强下拉框功能
  */
-import React, { useCallback, useEffect, memo } from 'react';
+import React, { useCallback, useEffect, memo, useRef } from 'react';
 import { Select } from 'antd';
 import { useFetchState } from 'ztxkutils/dist/hooks';
 import debounce from 'lodash/debounce';
@@ -74,17 +74,28 @@ function EnhanceSelect(_a) {
     var list = _a.list, defaultList = _a.defaultList, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, _c = _a.dataKey, dataKey = _c === void 0 ? 'id' : _c, componentKey = _a.componentKey, _d = _a.titleKey, titleKey = _d === void 0 ? 'name' : _d, showAll = _a.showAll, isCatch = _a.isCatch, onCompleted = _a.onCompleted, onChange = _a.onChange, request = _a.request, remoteSearch = _a.remoteSearch, remoteSearchKey = _a.remoteSearchKey, transformData = _a.transformData, joinKey = _a.joinKey, _e = _a.joinStr, joinStr = _e === void 0 ? '-' : _e, restProps = __rest(_a, ["list", "defaultList", "params", "url", "method", "dataKey", "componentKey", "titleKey", "showAll", "isCatch", "onCompleted", "onChange", "request", "remoteSearch", "remoteSearchKey", "transformData", "joinKey", "joinStr"]);
     // 下拉数据源
     var _f = useFetchState([]), selectList = _f[0], setSelectList = _f[1];
+    var _g = useFetchState(false), loading = _g[0], setLoading = _g[1];
+    var fetchId = useRef(0); // 请求Id，每次请求都会加1
     // 如果selectList 发生改变，那么触发onCompleted事件
     useEffect(function () {
         if (Array.isArray(selectList) && onCompleted) {
             onCompleted(selectList);
         }
-    }, [selectList, onCompleted]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectList]);
     // 获取数据，并设置数据
     var getDataHandle = useCallback(function (request, options, appointObj) {
+        setLoading(true);
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         getData(request, options)
             .then(function (resData) {
             var _a;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
+            setLoading(false);
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {
@@ -100,9 +111,10 @@ function EnhanceSelect(_a) {
             }
         })
             .catch(function (err) {
+            setLoading(false);
             console.log(err);
         });
-    }, [setSelectList, transformData]);
+    }, [setSelectList, setLoading, transformData]);
     // 远程搜索
     var getRemoteDataHandle = useCallback(function (value) {
         var _a;
@@ -112,6 +124,10 @@ function EnhanceSelect(_a) {
             outParams = JSON.parse(params);
         }
         catch (err) { }
+        setLoading(true);
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         getData(request, {
             url: url,
             method: method,
@@ -119,6 +135,10 @@ function EnhanceSelect(_a) {
         })
             .then(function (resData) {
             var _a, _b, _c;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
+            setLoading(false);
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {
@@ -135,6 +155,7 @@ function EnhanceSelect(_a) {
             setSelectList(result);
         })
             .catch(function (err) {
+            setLoading(false);
             console.log(err);
         });
     }, [
@@ -146,6 +167,7 @@ function EnhanceSelect(_a) {
         titleKey,
         setSelectList,
         transformData,
+        setLoading,
     ]);
     var searchHandle = function (value) {
         // 当value有值时才进行搜索
@@ -214,7 +236,7 @@ function EnhanceSelect(_a) {
     function renderSelectOption() {
         var _defaultList = Array.isArray(defaultList) ? defaultList : [];
         return (React.createElement(React.Fragment, null,
-            showAll && (React.createElement(Select.Option, { key: undefined, value: "" }, "\u5168\u90E8")),
+            showAll && (React.createElement(Select.Option, { title: "\u5168\u90E8", value: "" }, "\u5168\u90E8")),
             Array.isArray(selectList) &&
                 selectList.concat(_defaultList).map(function (item) {
                     var key = componentKey ? item[componentKey] : item[dataKey];
@@ -262,6 +284,6 @@ function EnhanceSelect(_a) {
             onChange && onChange(value, option);
         }
     };
-    return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : undefined, onChange: onChangeHandle, optionLabelProp: "title" }, restProps), renderSelectOption()));
+    return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : undefined, onChange: onChangeHandle, optionLabelProp: "title", loading: loading }, restProps), renderSelectOption()));
 }
 export default memo(EnhanceSelect);

package/dist/components/EnhanceTreeSelect/index.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import { TreeSelect } from 'antd';
 import { useFetchState } from 'ztxkutils/dist/hooks';
 // 获取接口数据
@@ -53,6 +53,7 @@ function EnhanceTreeSelect(_a) {
      * 保证数据源唯一
      */
     var _d = useFetchState([]), treeData = _d[0], setTreeData = _d[1];
+    var fetchId = useRef(0); // 请求Id，每次请求都会加1
     // 如果selectList 发生改变，那么触发onCompleted事件
     useEffect(function () {
         if (Array.isArray(treeData) && onCompleted) {
@@ -61,9 +62,15 @@ function EnhanceTreeSelect(_a) {
     }, [treeData, onCompleted]);
     // 获取数据，并设置数据
     var getDataHandle = useCallback(function (request, options, isConcat) {
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         return getData(request, options)
             .then(function (resData) {
             var _a;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "1.8.1",
+  "version": "1.8.5",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",