@arim-aisdc/public-components 0.0.37 → 0.0.38

package/dist/components/TableMax/components/ColumnFilter/index.js

@@ -75,13 +75,22 @@ export function Filter(_ref) {
     getFilterOptionsFn = columnDef.getFilterOptionsFn;
 
   // 获取最新的筛选值
-  var columnFilterValue = column.getFilterValue();
+  // const columnFilterValue: any = column.getFilterValue();
+  var _useState = useState(column.getFilterValue()),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnFilterValue = _useState2[0],
+    setColumnFilterValue = _useState2[1];
+  useEffect(function () {
+    if (JSON.stringify(column.getFilterValue()) !== JSON.stringify(columnFilterValue)) {
+      setColumnFilterValue(column.getFilterValue());
+    }
+  }, [JSON.stringify(column.getFilterValue())]);
 
   // 接口可选值
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    apiOptions = _useState2[0],
-    setApiOptions = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    apiOptions = _useState4[0],
+    setApiOptions = _useState4[1];
   // 调用接口获取可选值
   var fetchOptions = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
@@ -154,6 +163,25 @@ export function Filter(_ref) {
       };
     });
   }, [column.getFacetedUniqueValues(), filterOptions, manualFiltering, apiOptions]);
+
+  // 修改表格筛选参数（防抖）
+  var changeFilterValueWithDebounce = useCallback(debounce(function (value) {
+    var newValue = value;
+    if (value === null || Array.isArray(value) && value.length === 0) {
+      // 值为null或空数组时，清除过滤条件。
+      newValue = undefined;
+    }
+    console.log('handleChangeFilterValue with debounce :>> ', newValue);
+    column.setFilterValue(newValue);
+  }, 500), [column]);
+
+  // 修改表格筛选参数（防抖）
+  var handleChangeFilterValueWithDebounce = function handleChangeFilterValueWithDebounce(value) {
+    changeFilterValueWithDebounce(value);
+    setColumnFilterValue(value);
+  };
+
+  // 修改表格筛选参数
   var handleChangeFilterValue = function handleChangeFilterValue(value) {
     var newValue = value;
     if (value === null || Array.isArray(value) && value.length === 0) {
@@ -161,11 +189,9 @@ export function Filter(_ref) {
       newValue = undefined;
     }
     console.log('handleChangeFilterValue :>> ', newValue);
+    setColumnFilterValue(newValue);
     column.setFilterValue(newValue);
   };
-  var handleInputChange = function handleInputChange(e) {
-    handleChangeFilterValue(e.target.value);
-  };
   var filterComponent = function filterComponent(type) {
     var _columnDef$filterComP, _columnDef$filterComP2, _columnDef$filterComP3, _column$getFacetedMin, _column$getFacetedMin2, _columnDef$cell, _column$getFacetedMin3, _column$getFacetedMin4, _columnDef$cell2;
     switch (type) {
@@ -196,14 +222,11 @@ export function Filter(_ref) {
           },
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(_InputNumber, {
-              // min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
-              // max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
-              // value={(columnFilterValue as [number, number])?.[0] ?? ''}
               placeholder: "".concat((_column$getFacetedMin = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin !== void 0 && _column$getFacetedMin[0] ? "(".concat((_column$getFacetedMin2 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin2 === void 0 ? void 0 : _column$getFacetedMin2[0], ")") : ''),
               controls: false,
               onChange: function onChange(value) {
                 var min = columnDef.unitsChangeFn && typeof value === 'number' ? columnDef.unitsChangeFn(value) : value;
-                column.setFilterValue(function (old) {
+                handleChangeFilterValueWithDebounce(function (old) {
                   if (noValue(min) && noValue(old === null || old === void 0 ? void 0 : old[1])) {
                     return undefined;
                   }
@@ -218,14 +241,11 @@ export function Filter(_ref) {
             })
           }), /*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(_InputNumber, {
-              // min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
-              // max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
-              // value={(columnFilterValue as [number, number])?.[1] ?? ''}
               placeholder: "".concat((_column$getFacetedMin3 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin3 !== void 0 && _column$getFacetedMin3[1] ? "(".concat((_column$getFacetedMin4 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin4 === void 0 ? void 0 : _column$getFacetedMin4[1], ")") : ''),
               controls: false,
               onChange: function onChange(value) {
                 var max = columnDef.unitsChangeFn && typeof value === 'number' ? columnDef.unitsChangeFn(value) : value;
-                column.setFilterValue(function (old) {
+                handleChangeFilterValueWithDebounce(function (old) {
                   if (noValue(old === null || old === void 0 ? void 0 : old[0]) && noValue(max)) {
                     return undefined;
                   }
@@ -250,7 +270,7 @@ export function Filter(_ref) {
           },
           onChange: function onChange(value) {
             var res = columnDef.unitsChangeFn ? columnDef.unitsChangeFn(value) : value;
-            handleChangeFilterValue(res);
+            handleChangeFilterValueWithDebounce(res);
           },
           value: columnDef.unitsChangeFn && columnDef.cell ? columnDef.cell({
             getValue: function getValue() {
@@ -270,7 +290,7 @@ export function Filter(_ref) {
             return ((_optionStringValue$to = optionStringValue.toUpperCase()) === null || _optionStringValue$to === void 0 ? void 0 : _optionStringValue$to.indexOf(inputStringValue.toUpperCase().trim())) !== -1;
           },
           onSearch: onSearch,
-          onChange: handleChangeFilterValue,
+          onChange: handleChangeFilterValueWithDebounce,
           style: {
             width: '100%',
             borderRadius: '2px',
@@ -281,7 +301,9 @@ export function Filter(_ref) {
         });
       case FilterType.Input:
         return /*#__PURE__*/_jsx(_Input, {
-          onChange: handleInputChange,
+          onChange: function onChange(e) {
+            return handleChangeFilterValueWithDebounce(e.target.value);
+          },
           style: {
             borderRadius: '2px'
           },

package/dist/components/TableMax/type.d.ts

@@ -113,7 +113,7 @@ export type TableMaxProps = {
      * 筛选参数变化时触发的函数
      */
     getColumnFiltersData?: (columnFilters: ColumnFiltersState, tableId: string, filteredData: any[], filteredRowModel: RowModel<any>) => void;
-    /**筛选参数变化时触发的函数,前端筛选、后端筛选时都会触发 */
+    /**筛选参数变化时触发的函数,前端筛选、后端筛选时都会触发（修改参数时加了防抖） */
     onFilteringChange?: (params: {
         tableId: string;
         filteredData: any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",