@arim-aisdc/public-components 0.0.37 → 0.0.39

package/dist/components/TableMax/TableMax.js

@@ -43,7 +43,7 @@ import customFilterFns from "./components/ColumnFilter/customFilterFns";
 import ColumnSetting from "./components/ColumnSetting";
 import customSortFns, { setDefaultSortFn } from "./components/ColumnSort/customSortFns";
 import "./tableMax.less";
-import { getFormatFilters, getSizeInfo, setInitColumnsSize, setRemainColumnsWidth } from "./utils";
+import { getFormatFilters, getFormatSorting, getSizeInfo, setInitColumnsSize, setRemainColumnsWidth } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ColumnType = /*#__PURE__*/function (ColumnType) {
@@ -641,9 +641,10 @@ var TableMax = function TableMax(_ref) {
 
   // 排序回调
   useEffect(function () {
+    var formatSorting = getFormatSorting(columns, sorting);
     var sortingParameters = [];
-    if ((sorting === null || sorting === void 0 ? void 0 : sorting.length) > 0) {
-      sortingParameters = sorting === null || sorting === void 0 ? void 0 : sorting.map(function (item) {
+    if ((formatSorting === null || formatSorting === void 0 ? void 0 : formatSorting.length) > 0) {
+      sortingParameters = formatSorting === null || formatSorting === void 0 ? void 0 : formatSorting.map(function (item) {
         return "".concat(item.id, " ").concat(item.desc ? 'DESC' : 'ASC');
       });
     }
@@ -655,7 +656,7 @@ var TableMax = function TableMax(_ref) {
       manualSortingChange(sorting, sortingParameters.join(';'), sortedData, sortedRowModel);
     }
     if (canSorting && onSortingChange) {
-      onSortingChange(sorting, sortingParameters.join(','), sortedData, sortedRowModel);
+      onSortingChange(formatSorting, sortingParameters.join(','), sortedData, sortedRowModel);
     }
   }, [JSON.stringify(sorting), canSorting, manualSorting]);
   useEffect(function () {

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[];
@@ -297,4 +297,6 @@ export interface TableMaxColumnType {
     sortingFn?: SortFnType | ((rowA: any, rowB: any, columnId: string) => 1 | -1 | 0);
     /**排序时，对undefined值如何处理 */
     sortUndefined?: false | 1 | -1;
+    /**自定义当前列排序时所使用的key，默认为当前列的id */
+    sortingKey?: string;
 }

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

@@ -1,4 +1,4 @@
-import { ColumnFiltersState } from '@tanstack/react-table';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { TableMaxColumnType } from './type';
 export declare const getSizeInfo: (columns: TableMaxColumnType[]) => {
     allCount: number;
@@ -17,4 +17,8 @@ export declare const setInitColumnsSize: (tableColumns: any, columnsMap: any) =>
     tableColumns: any;
 };
 export declare const getFormatFilters: (columns: TableMaxColumnType[], originFilters: ColumnFiltersState) => {};
+export declare const getFormatSorting: (columns: TableMaxColumnType[], originSorting: SortingState) => {
+    id: string;
+    desc: boolean;
+}[];
 export declare const noValue: (value: any) => boolean;

package/dist/components/TableMax/utils.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { cloneDeep } from 'lodash';
 import moment from 'moment';
 import { FilterType, defaultDateFormat } from "./components/ColumnFilter";
@@ -117,6 +123,20 @@ export var getFormatFilters = function getFormatFilters(columns, originFilters)
   });
   return formatFilters;
 };
+export var getFormatSorting = function getFormatSorting(columns, originSorting) {
+  return originSorting.map(function (sort) {
+    var curColumn = columns.find(function (item) {
+      return item.id === sort.id;
+    });
+    var _ref4 = curColumn || {},
+      sortingKey = _ref4.sortingKey;
+    // 优先取formattedFilterKey作为key
+    var formatKey = sortingKey || sort.id;
+    return _objectSpread(_objectSpread({}, sort), {}, {
+      id: formatKey
+    });
+  });
+};
 export var noValue = function noValue(value) {
   return value === undefined || value === null || value === '';
 };

package/dist/hooks/useEventBus.d.ts

@@ -0,0 +1,14 @@
+export type EventHandler<E = any> = (e: E) => void;
+declare class EventEmitter<E = any> {
+    private _events;
+    constructor();
+    private _getFns;
+    on<T = E>(event: string, cb: EventHandler<T>): void;
+    off(event: string, cb?: EventHandler<E>): void;
+    once<T = E>(event: string, cb: EventHandler<T>): void;
+    emit<T = E>(event: string, param?: T): void;
+    invoke<T = E>(event: string, param?: T): Promise<any>;
+}
+export declare const events: EventEmitter<any>;
+export default function useEventBus<T = any>(event: string, cb: EventHandler<T>): void;
+export {};

package/dist/hooks/useEventBus.js

@@ -0,0 +1,93 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { pull } from 'lodash';
+import { useEffect } from 'react';
+/*事件的原型*/
+var EventEmitter = /*#__PURE__*/function () {
+  function EventEmitter() {
+    _classCallCheck(this, EventEmitter);
+    _defineProperty(this, "_events", void 0);
+    this._events = {};
+  }
+  _createClass(EventEmitter, [{
+    key: "_getFns",
+    value: function _getFns(event) {
+      return this._events[event] || (this._events[event] = []);
+    }
+  }, {
+    key: "on",
+    value: function on(event, cb) {
+      var fns = this._getFns(event);
+      fns.push(cb);
+    }
+  }, {
+    key: "off",
+    value: function off(event, cb) {
+      if (cb) {
+        var fns = this._getFns(event);
+        pull(fns, cb);
+      } else {
+        delete this._events[event];
+      }
+    }
+  }, {
+    key: "once",
+    value: function once(event, cb) {
+      var _this = this;
+      var fn2 = function fn2(e) {
+        _this.off(event, fn2);
+        cb(e);
+      };
+      this.on(event, fn2);
+    }
+
+    /* 同步调用 */
+  }, {
+    key: "emit",
+    value: function emit(event, param) {
+      var fns = this._getFns(event);
+      for (var i = 0; i < fns.length; i++) {
+        var fn = fns[i];
+        fn(param);
+      }
+    }
+
+    /* 可以异步调用，返回一个Promise */
+  }, {
+    key: "invoke",
+    value: function invoke(event, param) {
+      var fns = this._getFns(event);
+      var _loop = function _loop() {
+          var fn = fns[i];
+          return {
+            v: new Promise(function (resolve) {
+              resolve(fn(param));
+            })
+          };
+          return 0; // break flag
+        },
+        _ret;
+      flag: for (var i = 0; i < fns.length; i++) {
+        _ret = _loop();
+        if (_ret === 0) break flag;
+        if (_ret) return _ret.v;
+      }
+      return Promise.reject();
+    }
+  }]);
+  return EventEmitter;
+}();
+export var events = new EventEmitter();
+export default function useEventBus(event, cb) {
+  useEffect(function () {
+    events.on(event, cb);
+    return function () {
+      events.off(event, cb);
+    };
+  });
+}

package/dist/hooks/{usePageCacheState/index.d.ts → usePageCacheState.d.ts}

@@ -1,6 +1,3 @@
-import { CacheKeyEnums } from './config';
-export * from './config';
-export * from './tableDemoConfig';
 /**
  * 替代useState，初始化时会自动读取storage作为默认值，修改数据时会自动同步到storage中;
  * params:
@@ -19,7 +16,8 @@ export * from './tableDemoConfig';
  *    initState, // 初始化状态函数
  * ]
  */
-export declare function usePageCacheState<T extends object>(originStateCacheKey: CacheKeyEnums, defaultConfig: T | {
+declare function usePageCacheState<T extends object>(originStateCacheKey: string, defaultConfig: T | {
     defaultValue: T;
     noCacheFields?: string[];
 }, deps?: any[]): [T, (customData: Partial<T>) => void, (newDeps: any[]) => void];
+export default usePageCacheState;

package/dist/hooks/{usePageCacheState/index.js → usePageCacheState.js}

@@ -14,10 +14,6 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { useMemoizedFn, useUpdateEffect } from 'ahooks';
 import { cloneDeep, mergeWith } from 'lodash';
 import { useState } from 'react';
-import { useLocation } from 'umi'; // TODO: 优化：去掉umi
-
-export * from "./config";
-export * from "./tableDemoConfig";
 
 // 缓存数据使用的key
 var PAGE_CACHE_KEY = 'HBIS_PAGE_CACHE';
@@ -141,13 +137,12 @@ function customMerger(defaultValue, cacheValue) {
  *    initState, // 初始化状态函数
  * ]
  */
-export function usePageCacheState(originStateCacheKey, defaultConfig, deps) {
+function usePageCacheState(originStateCacheKey, defaultConfig, deps) {
   // @ts-ignore
   var defaultValue = _typeof(defaultConfig.defaultValue) === 'object' ? defaultConfig.defaultValue : defaultConfig;
   // @ts-ignore
   var noCacheFields = defaultConfig.noCacheFields;
-  var location = useLocation();
-  var pathname = location.pathname;
+  var pathname = window.location.pathname;
   var getStateCacheKey = function getStateCacheKey(newDeps) {
     var curDeps = newDeps || deps;
     return curDeps && curDeps.length ? "".concat(originStateCacheKey, "_").concat(curDeps === null || curDeps === void 0 ? void 0 : curDeps.join('_')) : originStateCacheKey;
@@ -207,4 +202,5 @@ export function usePageCacheState(originStateCacheKey, defaultConfig, deps) {
     setState(initData);
   };
   return [state, useMemoizedFn(customSetState), initState];
-}
+}
+export default usePageCacheState;

package/dist/index.d.ts

@@ -10,3 +10,6 @@ export * from './components/TableMax';
 export { default as TableMax } from './components/TableMax';
 export * from './components/ThemeProvider';
 export { default as ThemeProvider } from './components/ThemeProvider';
+export * from './hooks/useEventBus';
+export { default as useEventBus } from './hooks/useEventBus';
+export { default as usePageCacheState } from './hooks/usePageCacheState';

package/dist/index.js

@@ -1,3 +1,4 @@
+// components
 export * from "./components/CenterModal";
 export { default as CenterModal } from "./components/CenterModal";
 export * from "./components/CustomForm";
@@ -9,4 +10,11 @@ export { default as SplitPane } from "./components/SplitPane";
 export * from "./components/TableMax";
 export { default as TableMax } from "./components/TableMax";
 export * from "./components/ThemeProvider";
-export { default as ThemeProvider } from "./components/ThemeProvider";
+export { default as ThemeProvider } from "./components/ThemeProvider";
+
+// hooks
+export * from "./hooks/useEventBus";
+export { default as useEventBus } from "./hooks/useEventBus";
+export { default as usePageCacheState } from "./hooks/usePageCacheState";
+
+// utils

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,8 +83,7 @@
   "peerDependencies": {
     "moment": ">=2.29.4",
     "react": ">=17.0.1",
-    "react-dom": ">=17.0.1",
-    "umi": ">=4.0.87"
+    "react-dom": ">=17.0.1"
   },
   "publishConfig": {
     "access": "public"

package/dist/hooks/usePageCacheState/config.d.ts

@@ -1,5 +0,0 @@
-/**
- * 页面数据缓存KEY值，需要确保每个页面（路由）范围内KEY的唯一性
- */
-import { MockDataCacheKey } from './tableDemoConfig';
-export type CacheKeyEnums = MockDataCacheKey;

package/dist/hooks/usePageCacheState/config.js

@@ -1 +0,0 @@
-export {};

package/dist/hooks/usePageCacheState/tableDemoConfig.d.ts

@@ -1,3 +0,0 @@
-export declare enum MockDataCacheKey {
-    CONTROL = "CONTROL_STATE"
-}

package/dist/hooks/usePageCacheState/tableDemoConfig.js

@@ -1,5 +0,0 @@
-// mockData页面
-export var MockDataCacheKey = /*#__PURE__*/function (MockDataCacheKey) {
-  MockDataCacheKey["CONTROL"] = "CONTROL_STATE";
-  return MockDataCacheKey;
-}({});