vap1 0.4.7 → 0.5.1

package/components/Tables/Components/useTableContext.js

@@ -0,0 +1,116 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableContext = exports.TableContextWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
+var TableContext = (0, react_1.createContext)(null);
+var TableContextWrapper = function (props) {
+    var rowKey = (0, react_1.useMemo)(function () { return props.rowKey || 'id'; }, []);
+    var _a = __read((0, react_1.useState)(function () {
+        var DEFAULT = {
+            selectedRowKeys: [],
+            selectedObjects: [],
+            param: {},
+        };
+        if (lodash_1.default.isArray(props.defaultSelectedKeys)) {
+            DEFAULT.selectedRowKeys = props.defaultSelectedKeys;
+        }
+        if (props.default) {
+            DEFAULT.param = __assign({}, props.default);
+        }
+        return DEFAULT;
+    }), 2), state = _a[0], setState = _a[1];
+    var setSelection = (0, react_1.useCallback)(function (selectedRowKeys, selectedObjects) {
+        setState(function (state) { return (__assign(__assign({}, state), { selectedRowKeys: selectedRowKeys, selectedObjects: selectedObjects })); });
+    }, []);
+    var setParam = (0, react_1.useCallback)(function (param, clean) {
+        if (clean === void 0) { clean = false; }
+        if (clean) {
+            setState({ param: param, selectedRowKeys: [], selectedObjects: [] });
+        }
+        else {
+            setState(function (state) { return (__assign(__assign({}, state), { param: param })); });
+        }
+    }, []);
+    var initObjects = (0, react_1.useCallback)(function (list) { return setState(function (prev) {
+        var used = new Set(prev.selectedRowKeys);
+        var filtered = list.filter(function (item) { return used.has(item[rowKey]); });
+        ;
+        return __assign(__assign({}, prev), { selectedObjects: filtered, selectedRowKeys: filtered.map(function (item) { return item[rowKey]; }) });
+    }); }, []);
+    var reflushPage = (0, react_1.useCallback)(function (list) { return setState(function (prev) {
+        var diff = lodash_1.default.xor(prev.selectedRowKeys, list.map(function (item) { return item[rowKey]; }));
+        if (diff == null || diff.length == 0)
+            return prev;
+        var toRemove = new Set(diff);
+        return __assign(__assign({}, prev), { selectedRowKeys: prev.selectedRowKeys.filter(function (key) { return !toRemove.has(key); }), selectedObjects: prev.selectedObjects.filter(function (item) { return !toRemove.has(item[rowKey]); }) });
+    }); }, []);
+    // console.log(state)
+    return react_1.default.createElement(TableContext.Provider, { value: __assign(__assign({}, state), { setParam: setParam, setSelection: setSelection, initObjects: initObjects, reflushPage: reflushPage }) }, props.children);
+};
+exports.TableContextWrapper = TableContextWrapper;
+var useTableContext = function () { return (0, react_1.useContext)(TableContext); };
+exports.useTableContext = useTableContext;

package/components/Tables/STable.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/components/Tables/TopTable.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;

package/components/Tables/Util.d.ts

@@ -1,7 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { BaseTableProps } from './index';
-import type { ColumnProps } from 'antd/es/table/interface';
+import type { ColumnProps as ColumnsType } from 'antd/es/table/interface';
 export declare const convertColumns: (props: BaseTableProps, rank: {
     ref: MutableRefObject<number>;
     isRank?: boolean;
-}) => ColumnProps<any>[];
+}) => Array<ColumnsType<any>>;

package/components/Tables/Util.js

@@ -84,7 +84,6 @@ var convertCol = function (col) {
     return item;
 };
 var convertColumns = function (props, rank) {
-    // props.columns[0]
     var cols = (props.showIndex == false) ? [] : [getIdxColumn(rank.ref, props.showIndex, rank.isRank)];
     props.columns.map(function (col) {
         // @ts-ignore

package/components/Tables/VTable.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { type TableActionButton } from './Components/ActionBar';
 import type { BaseTableProps } from './index';
 import type { ListModel } from '../../hooks/_list';
 import type { PlainObject, Key } from '../../basetype';
+import type { BoxProps } from '../Box/Box';
 export type VTableRef = {
     getSelected: () => [Key[], PlainObject[]];
     getParams: () => PlainObject;
@@ -19,25 +21,21 @@ export type VTableProps = BaseTableProps & {
     /**
      * 默认选中的列，用于部分场景，可能会无效
     */
-    defaultSelectedKeys?: (string | number)[];
+    defaultSelectedKeys?: Array<string | number>;
     /**
      * 选中后变化
     */
     onSelectedChange?: (selectedRowKeys: Key[], selectedRows?: any[]) => void;
 };
-export declare const VTable: React.ForwardRefExoticComponent<import("./index").TableDefine & {
-    mode?: import("../Box/Box").BoxMode;
+export declare const VTable: React.ForwardRefExoticComponent<import("./index").TableDefine & Pick<BoxProps, "default" | "mode" | "selectBar"> & {
+    searchBar?: Omit<import("../SearchTool").SearchBarProps, "onChange" | "onSearch">;
+} & {
     columns: import("./index").TableCol[];
-    showIndex?: string | false; /**
-     * 列表模型，可以使用系统提供的 useApi/useArray 等，也可自行实现列表模型
-    */
+    showIndex?: false | string;
     rowKey?: string;
     select?: true | "DEFAULT" | "QUERY";
     selectDisabled?: (record: any) => boolean;
-    actionBar?: React.ReactNode | import("./Components/ActionBar").TableActionButton[];
-    selectBar?: import("../Box/SelectBar").SelectBarProps;
-    searchBar?: Omit<import("../..").SearchBarProps, "onChange" | "onSearch">;
-    default?: PlainObject;
+    actionBar?: Array<TableActionButton[]> | React.ReactNode;
     autoLoad?: false;
 } & {
     /**
@@ -47,7 +45,7 @@ export declare const VTable: React.ForwardRefExoticComponent<import("./index").T
     /**
      * 默认选中的列，用于部分场景，可能会无效
     */
-    defaultSelectedKeys?: (string | number)[];
+    defaultSelectedKeys?: Array<string | number>;
     /**
      * 选中后变化
     */

package/components/Tables/VTable.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -58,33 +68,20 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VTable = exports.getHeightByTagName = void 0;
-var lodash_1 = __importDefault(require("lodash"));
 var react_1 = __importStar(require("react"));
-var Table_1 = require("../_adapt/Table");
+var lodash_1 = __importDefault(require("lodash"));
 var antd_1 = require("antd");
 var ActionBar_1 = require("./Components/ActionBar");
 var utils_1 = require("../../utils");
 var Util_1 = require("./Util");
-var HighLight_1 = require("../_common/HighLight");
-var hooks_1 = require("../../hooks");
 var Box_1 = require("../Box/Box");
-;
+var hooks_1 = require("../../hooks");
+var useTableContext_1 = require("./Components/useTableContext");
 var getHeightByTagName = function (root, tagName) {
     if (root == null)
         return 0;
@@ -95,9 +92,10 @@ var getHeightByTagName = function (root, tagName) {
     return 0;
 };
 exports.getHeightByTagName = getHeightByTagName;
-var _VTable = (0, react_1.forwardRef)(function (props, ref) {
+var _VTable = (0, react_1.forwardRef)(function (props) {
+    var _a = (0, useTableContext_1.useTableContext)(), selectedRowKeys = _a.selectedRowKeys, initObjects = _a.initObjects, reflushPage = _a.reflushPage, setSelection = _a.setSelection;
+    var _b = (0, Box_1.useBox)(), state = _b.state, root = _b.root, resize = _b.resize;
     var update = (0, hooks_1.useUpdate)();
-    var _a = (0, Box_1.useBox)(), state = _a.state, root = _a.root, resize = _a.resize;
     var inModal = (0, react_1.useMemo)(function () {
         if (root.current == null)
             return false;
@@ -105,8 +103,22 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
             || root.current.parentElement.parentElement.parentElement.classList.contains('ant-modal-body')
             || root.current.parentElement.parentElement.parentElement.parentElement.classList.contains('ant-modal-body');
     }, []);
-    // const [scroll, setScroll] = useState<TableProps<PlainObject>['scroll']>(undefined);
-    var _b = props.model, rowKey = _b.rowKey, list = _b.list, isQuerying = _b.isQuerying, pageNo = _b.pageNo, pageSize = _b.pageSize, orderBy = _b.orderBy, query = _b.query, total = _b.total;
+    var _c = __read((0, react_1.useState)(undefined), 2), scroll = _c[0], setScroll = _c[1];
+    var _d = props.model, rowKey = _d.rowKey, list = _d.list, isQuerying = _d.isQuerying, pageNo = _d.pageNo, pageSize = _d.pageSize, orderBy = _d.orderBy, query = _d.query, total = _d.total, cost = _d.cost;
+    var _e = __read((0, react_1.useState)([false, false]), 2), _f = __read(_e[0], 2), pageEnterd = _f[0], pageLoaded = _f[1], setSatus = _e[1];
+    (0, react_1.useEffect)(function () {
+        if (isQuerying)
+            return;
+        setSatus(function (prev) {
+            if (cost == undefined)
+                return [false, false];
+            if (prev[1])
+                return prev;
+            if (prev[0])
+                return [true, false];
+            return [true, true];
+        });
+    }, [isQuerying, cost]);
     var start = (0, react_1.useRef)(0);
     var tableProps = {};
     (0, react_1.useEffect)(function () {
@@ -120,107 +132,25 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
         }
     }, [state.selected]);
     // 更新页数
-    (0, react_1.useLayoutEffect)(function () {
+    (0, react_1.useEffect)(function () {
         start.current = pageSize * (pageNo - 1);
         // @ts-ignore
         if (props.model.mode == 'static')
             update();
     }, [pageSize, pageNo]);
-    // 更新选中
-    (0, react_1.useLayoutEffect)(function () {
-        var diff = lodash_1.default.xor(ref.current.selected[0], list.map(function (item) { return item[rowKey]; }));
-        if (diff.length > 0) {
-            var toRemove_1 = new Set(diff);
-            ref.current.selected[0] = ref.current.selected[0].filter(function (key) { return !toRemove_1.has(key); });
-            ref.current.selected[1] = ref.current.selected[1].filter(function (item) { return !toRemove_1.has(item[rowKey]); });
-            ref.current.onSelected();
-        }
-    }, [list]);
-    (0, react_1.useLayoutEffect)(function () {
-        if (!isQuerying || !utils_1.GLOBAL.CONFIG.TABLE.UNSELECT_ON_QUERY)
-            return;
-        if (ref.current.selected[0].length > 0) {
-            ref.current.selected = [[], []];
-            ref.current.onSelected();
-        }
-    }, [isQuerying]);
-    // 初始选中
-    var isFristMounted = (0, hooks_1.useFirstMountState)();
-    (0, react_1.useLayoutEffect)(function () {
-        var e_1, _a, _b;
-        if (!isFristMounted)
+    (0, react_1.useEffect)(function () {
+        if (!pageEnterd)
             return;
-        if (!lodash_1.default.isArray(props.defaultSelectedKeys) || props.defaultSelectedKeys.length == 0 || list.length == 0)
+        initObjects(list);
+    }, [pageEnterd, list]);
+    // 更新选中
+    (0, react_1.useEffect)(function () {
+        if (!pageLoaded)
             return;
-        var selectKeys = [];
-        var selectObjs = [];
-        try {
-            for (var _c = __values(props.defaultSelectedKeys), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var key = _d.value;
-                var obj = lodash_1.default.find(list, (_b = {}, _b[rowKey] = key, _b));
-                if (obj == null)
-                    continue;
-                selectKeys.push(key);
-                selectObjs.push(obj);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        if (selectKeys.length > 0) {
-            ref.current.selected[0] = selectKeys;
-            ref.current.selected[1] = selectObjs;
-            ref.current.onSelected();
-            update();
-        }
-    }, [isFristMounted]);
+        reflushPage(list);
+    }, [pageLoaded, list]);
     // 计算 clolum 及 高亮keyword
-    var columns = (0, react_1.useMemo)(function () {
-        var cols = (0, Util_1.convertColumns)(props, { ref: start, isRank: false });
-        if (!utils_1.GLOBAL.CONFIG.SEARCHBAR.DISABLE_KEYWORD || !lodash_1.default.has(props, 'searchBar.keyword'))
-            return cols;
-        var HighKeys = new Set();
-        if (lodash_1.default.isObject(props.searchBar.keyword)) {
-            (props.searchBar.keyword.highlight || []).map(function (key) { return HighKeys.add(key); });
-        }
-        else {
-            props.columns.map(function (col) {
-                // @ts-ignore
-                var isGroup = lodash_1.default.has(col, 'children') && lodash_1.default.isArray(col.children);
-                if (isGroup) {
-                    col.children.map((function (item) {
-                        if (lodash_1.default.isString(item.dataIndex))
-                            HighKeys.add(item.dataIndex);
-                    }));
-                }
-                else {
-                    var dataIndex = col.dataIndex;
-                    if (lodash_1.default.isString(dataIndex))
-                        HighKeys.add(dataIndex);
-                }
-            });
-        }
-        if (HighKeys.size > 0) {
-            cols.map(function (col) {
-                if (HighKeys.has(col.dataIndex) && col.render == null) {
-                    col.render = function (record) {
-                        if (!lodash_1.default.isString(record))
-                            return record;
-                        var keyword = '';
-                        if (record && keyword) {
-                            return react_1.default.createElement(HighLight_1.HighLight, { text: record, keyword: keyword });
-                        }
-                        return record;
-                    };
-                }
-            });
-        }
-        return cols;
-    }, [props.columns]);
+    var columns = (0, react_1.useMemo)(function () { return (0, Util_1.convertColumns)(props, { ref: start, isRank: false }); }, [props.columns]);
     (0, react_1.useLayoutEffect)(function () {
         resize();
     }, [columns]);
@@ -244,13 +174,11 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
     //     if (props.mode == undefined || props.mode == 'common') return;
     //     let height = state?.height;
     //     if (!height) return;
-    //     // VAP1.5 scroll table bug
-    //     root.current.style.height = height + 'px';
-    //     // setTimeout(() => {
-    //     // height -= getHeightByTagName(root.current, 'thead');
-    //     // setScroll({ y: Math.ceil(height), x: true })
-    //     // }, 2);
-    // }, [state?.height]);
+    //     setTimeout(() => {
+    //         height -= getHeightByTagName(root.current, 'thead');
+    //         setScroll({ y: Math.ceil(height), x: true })
+    //     }, 2);
+    // }, [state?.height])
     // @ts-ignore
     var effectKey = props.model.effect;
     (0, react_1.useEffect)(function () {
@@ -279,11 +207,9 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
     }, [effectKey]);
     if (props.select) {
         tableProps.rowSelection = {
-            selectedRowKeys: ref.current.selected[0],
+            selectedRowKeys: selectedRowKeys,
             onChange: function (selectedRowKeys, selectedObjects) {
-                ref.current.selected = [selectedRowKeys, selectedObjects];
-                ref.current.onSelected();
-                update();
+                setSelection(selectedRowKeys, selectedObjects);
                 if (props.onSelectedChange && lodash_1.default.isFunction(props.onSelectedChange)) {
                     props.onSelectedChange(selectedRowKeys, selectedObjects);
                 }
@@ -297,9 +223,10 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
             },
         };
     }
-    return react_1.default.createElement(Table_1.Table, __assign({ rowKey: props.rowKey || rowKey, 
-        // scroll={scroll}
-        // tableLayout="fixed"
+    // if (list.length) {
+    //     tableProps.tableLayout = "fixed";
+    // }
+    return react_1.default.createElement(antd_1.Table, __assign({ rowKey: props.rowKey || rowKey, scroll: scroll, 
         // showSorterTooltip={false}
         size: utils_1.GLOBAL.CONFIG.TABLE.SIZE, locale: { emptyText: react_1.default.createElement(antd_1.Empty, { style: { marginTop: 24 } }) } }, lodash_1.default.omit(props, ['children']), tableProps, { className: utils_1.StringUtil.className(['c-table'], props.className), pagination: false, columns: columns, dataSource: list, loading: isQuerying, onChange: function (x, y, field) {
             if (field.column) {
@@ -310,47 +237,59 @@ var _VTable = (0, react_1.forwardRef)(function (props, ref) {
             }
         } }));
 });
-exports.VTable = (0, react_1.forwardRef)(function (props, ref) {
-    var _a = props.model, isQuerying = _a.isQuerying, pageNo = _a.pageNo, pageSize = _a.pageSize, total = _a.total, totalAcc = _a.totalAcc, param = _a.param, pageTo = _a.pageTo, query = _a.query, cost = _a.cost;
-    var update = (0, hooks_1.useUpdate)();
-    // 通过 ref 方式交互，后续扩展方法实现定制联页选择
-    var selectedRef = (0, react_1.useRef)({ selected: [props.defaultSelectedKeys || [], []], onSelected: update });
-    // 对外提供getSelected方法获取当前选择的数据
+var VTableRoot = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.model, isQuerying = _a.isQuerying, pageNo = _a.pageNo, pageSize = _a.pageSize, total = _a.total, totalAcc = _a.totalAcc, pageTo = _a.pageTo, query = _a.query, cost = _a.cost;
+    var _b = (0, useTableContext_1.useTableContext)(), selectedRowKeys = _b.selectedRowKeys, selectedObjects = _b.selectedObjects, param = _b.param, setSelection = _b.setSelection, setParam = _b.setParam;
+    // console.log(selectedRowKeys)
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
-            clearSelected: function () {
-                selectedRef.current.selected = [[], []];
-                selectedRef.current.onSelected();
-            },
-            getSelected: function () {
-                return selectedRef.current.selected;
-            },
-            getParams: function () {
-                return props.model.param;
-            }
+            clearSelected: function () { return setSelection([], []); },
+            getSelected: function () { return [selectedRowKeys, selectedObjects]; },
+            getParams: function () { return param; }
         };
-    }, [param]);
-    var boxProps = lodash_1.default.pick(props, ['selectBar', 'style', 'className', 'default', 'mode']);
-    if (props.searchBar) {
-        boxProps.searchBar = __assign(__assign({}, props.searchBar), { disabled: isQuerying, onSearch: function (data) {
-                var queryParam = lodash_1.default.extend({}, param, data);
-                query(queryParam, true);
-                selectedRef.current.selected = [[], []];
-                selectedRef.current.onSelected();
-            } });
-    }
-    if (props.actionBar) {
-        if (lodash_1.default.isArray(props.actionBar)) {
-            if (props.actionBar.length) {
-                boxProps.actionBar = react_1.default.createElement(ActionBar_1.ActionBar, { buttons: props.actionBar, queryParam: param, selectedRef: selectedRef });
+    }, [selectedRowKeys, param]);
+    var boxBaseProps = (0, react_1.useMemo)(function () {
+        var boxProps = lodash_1.default.pick(props, ['selectBar', 'style', 'className', 'default', 'mode']);
+        if (props.actionBar) {
+            if (lodash_1.default.isArray(props.actionBar)) {
+                if (props.actionBar.length) {
+                    boxProps.actionBar = react_1.default.createElement(ActionBar_1.VTableActionBar, { buttons: props.actionBar });
+                }
+            }
+            else {
+                boxProps.actionBar = props.actionBar;
             }
         }
-        else {
-            boxProps.actionBar = props.actionBar;
+        if (props.searchBar) {
+            boxProps.searchBar = __assign(__assign({}, props.searchBar), { disabled: isQuerying, onSearch: function (data) {
+                    var queryParam = lodash_1.default.extend({}, props.model.param, data);
+                    query(queryParam, true);
+                    setParam(queryParam, utils_1.GLOBAL.CONFIG.TABLE.UNSELECT_ON_QUERY);
+                } });
         }
-    }
+        //  else if (props.searchBand) {
+        //     boxProps.searchBand = {
+        //         ...props.searchBand,
+        //         onSearch: (data) => {
+        //             let queryParam = _.extend({}, props.model.param, data)
+        //             query(queryParam, true);
+        //             setParam(queryParam, GLOBAL.CONFIG.TABLE.UNSELECT_ON_QUERY);
+        //         },
+        //     }
+        // }
+        return boxProps;
+    }, [
+        props.searchBar,
+        // props.searchBand,
+        props.actionBar,
+        props.selectBar,
+        // props.className,
+        // props.style,
+        // props.mode
+    ]);
+    var pagination = undefined;
     if (props.pagination !== false) {
-        boxProps.pagination = {
+        pagination = {
             disabled: isQuerying,
             current: pageNo,
             pageSize: pageSize,
@@ -361,13 +300,21 @@ exports.VTable = (0, react_1.forwardRef)(function (props, ref) {
         };
         if (props.pagination) {
             if (props.pagination.hideOnSinglePage) {
-                boxProps.pagination.hideOnSinglePage = true;
+                pagination.hideOnSinglePage = true;
             }
             if (props.pagination.className) {
-                boxProps.pagination.className = props.pagination.className;
+                pagination.className = props.pagination.className;
             }
         }
     }
-    return react_1.default.createElement(Box_1.Box, __assign({}, boxProps),
-        react_1.default.createElement(_VTable, __assign({}, lodash_1.default.omit(props, ['className', 'style']), { ref: selectedRef })));
+    return react_1.default.createElement(Box_1.Box, __assign({}, boxBaseProps, { pagination: pagination }),
+        react_1.default.createElement(_VTable, __assign({}, lodash_1.default.omit(props, ['className', 'style', 'searchBar',
+            // 'searchBand'
+        ]))));
+});
+exports.VTable = (0, react_1.forwardRef)(function (props, ref) {
+    var _a;
+    var initValue = (0, react_1.useMemo)(function () { return lodash_1.default.pick(props, ['defaultSelectedKeys', 'default']); }, []);
+    return react_1.default.createElement(useTableContext_1.TableContextWrapper, __assign({}, initValue, { rowKey: ((_a = props.model) === null || _a === void 0 ? void 0 : _a.rowKey) || props.rowKey || 'id' }),
+        react_1.default.createElement(VTableRoot, __assign({}, props, { ref: ref })));
 });