@pisell/materials 1.0.397 → 1.0.399

package/es/components/table/BasicTable/index.js

@@ -109,7 +109,7 @@ var BasicTable = function BasicTable(props) {
       type: 'setCurrentDataSource',
       payload: (_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list) || []
     });
-  }, [_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list]);
+  }, [JSON.stringify(_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list)]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, _extends({
     key: defaultExpandedRowKeys.join('-')
   }, other, {

package/es/components/table/Table/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import "./index.less";
+import React from 'react';
+import './index.less';
 declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/es/components/table/Table/index.js

@@ -11,10 +11,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import React, { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { Form } from "antd";
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Form } from 'antd';
 // import { Access } from '@umijs/max';
-import { useMemoizedFn, useSize } from "ahooks";
+import { useDebounce, useMemoizedFn, useSize } from 'ahooks';
 import { Context } from "../model";
 // import AddFieldModal from "./AddFieldModal";
 import BasicTable from "../BasicTable";
@@ -25,26 +25,23 @@ import useTransDataSource from "../hooks/useTransDataSource";
 import useTransColumns from "../hooks/useTransColumns";
 import useGenTableComponents from "../hooks/useGenTableComponents";
 import useGenScroll from "../hooks/useGenScroll";
-import { useSharedState, useResponsive } from "../../../hooks";
+import { useSharedState } from "../../../hooks";
 import "./index.less";
 var GridViewTable = function GridViewTable(_ref) {
-  var _tableProps$paginatio, _tableProps$paginatio2, _tableProps$paginatio7, _tableProps$paginatio8, _tableProps$paginatio9, _tableProps$paginatio10;
+  var _tableProps$paginatio, _tableProps$paginatio2;
   var tableProps = _ref.tableProps,
     filter = _ref.filter,
     setTableSetting = _ref.setTableSetting,
     onDataSourceChange = _ref.onDataSourceChange;
-  var responsive = useResponsive();
   var _useSharedState = useSharedState(Context),
     state = _useSharedState.state,
     dispatch = _useSharedState.dispatch;
   var form = Form.useFormInstance();
-  var column_setting = Form.useWatch("column_setting", {
+  var column_setting = Form.useWatch('column_setting', {
     form: form,
     preserve: true
   }) || [];
   var tableWrapRef = useRef(null);
-  var _ref2 = useSize(tableWrapRef) || {},
-    height = _ref2.height;
   var defaultDataSource = state.dataSource,
     originDataSource = state.originDataSource;
   var handleSave = useMemoizedFn(function (row) {
@@ -55,18 +52,18 @@ var GridViewTable = function GridViewTable(_ref) {
     var item = newData[index];
     newData.splice(index, 1, _objectSpread(_objectSpread({}, item), row));
     dispatch({
-      type: "setDataSource",
+      type: 'setDataSource',
       payload: newData
     });
   });
   var handleResize = function handleResize(index) {
-    return function (e, _ref3) {
-      var size = _ref3.size;
+    return function (e, _ref2) {
+      var size = _ref2.size;
       var nextColumns = _toConsumableArray(columns);
       nextColumns[index] = _objectSpread(_objectSpread({}, nextColumns[index]), {}, {
         width: size.width
       });
-      form.setFieldValue("column_setting", nextColumns);
+      form.setFieldValue('column_setting', nextColumns);
       setTableSetting(form.getFieldsValue());
     };
   };
@@ -90,7 +87,7 @@ var GridViewTable = function GridViewTable(_ref) {
   });
   useEffect(function () {
     dispatch({
-      type: "setOriginResultDataSource",
+      type: 'setOriginResultDataSource',
       payload: dataSource || []
     });
   }, [dataSource]);
@@ -100,24 +97,10 @@ var GridViewTable = function GridViewTable(_ref) {
   var components = useGenTableComponents({
     form: form
   });
-  var isShowPagination = useMemo(function () {
-    var _tableProps$paginatio3, _tableProps$paginatio4, _tableProps$paginatio5, _tableProps$paginatio6;
-    var total = (tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio3 = tableProps.pagination) === null || _tableProps$paginatio3 === void 0 ? void 0 : _tableProps$paginatio3.total) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || 0;
-    if (tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio4 = tableProps.pagination) !== null && _tableProps$paginatio4 !== void 0 && _tableProps$paginatio4.localPagination) {
-      total = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || 0;
-    }
-    return total > ((tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio5 = tableProps.pagination) === null || _tableProps$paginatio5 === void 0 ? void 0 : (_tableProps$paginatio6 = _tableProps$paginatio5.pageSizeOptions) === null || _tableProps$paginatio6 === void 0 ? void 0 : _tableProps$paginatio6[0]) || 10);
-  }, [tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio7 = tableProps.pagination) === null || _tableProps$paginatio7 === void 0 ? void 0 : _tableProps$paginatio7.localPagination, tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio8 = tableProps.pagination) === null || _tableProps$paginatio8 === void 0 ? void 0 : _tableProps$paginatio8.total, dataSource.length, tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio9 = tableProps.pagination) === null || _tableProps$paginatio9 === void 0 ? void 0 : (_tableProps$paginatio10 = _tableProps$paginatio9.pageSizeOptions) === null || _tableProps$paginatio10 === void 0 ? void 0 : _tableProps$paginatio10[0]]);
-  var scroll = useGenScroll({
-    wrapHeight: height || 500,
-    scroll: tableProps.scroll,
-    columns: columns,
-    isShowPagination: isShowPagination
-  });
   var showTotal = useCallback(function (total, range, pageSize) {
     var start = range[0] - 1;
     var _current = start / pageSize + 1;
-    return getText("table-pagination-total")(_current, Math.ceil(total / pageSize));
+    return getText('table-pagination-total')(_current, Math.ceil(total / pageSize));
   }, []);
   var _paginationConfig = useMemo(function () {
     if (tableProps.pagination === false) {
@@ -126,22 +109,64 @@ var GridViewTable = function GridViewTable(_ref) {
     return _objectSpread(_objectSpread(_objectSpread({}, paginationConfig), tableProps.pagination), {}, {
       showTotal: showTotal
     });
-  }, [responsive, tableProps.pagination]);
+  }, [tableProps.pagination]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "materials-grid-table-wrap",
+    className: 'materials-grid-table-wrap',
     ref: tableWrapRef
-  }, /*#__PURE__*/React.createElement(SortRow, {
-    rowKey: tableProps.rowKey,
-    onSortChange: tableProps.onSortChange
-  }, /*#__PURE__*/React.createElement(BasicTable, _extends({
-    key: scroll === null || scroll === void 0 ? void 0 : scroll.y,
+  }, /*#__PURE__*/React.createElement(AutoSizerContent, {
+    tableWrapRef: tableWrapRef,
     dataSource: dataSource,
+    tableProps: tableProps,
     columns: columns,
-    className: "grid-view-table",
+    paginationConfig: _paginationConfig,
     components: components
-  }, tableProps, {
-    scroll: scroll,
-    pagination: _paginationConfig
-  }))));
+  }));
+};
+var AutoSizerContent = function AutoSizerContent(props) {
+  var _tableProps$paginatio7, _tableProps$paginatio8, _tableProps$paginatio9, _tableProps$paginatio10;
+  var tableProps = props.tableProps,
+    dataSource = props.dataSource,
+    paginationConfig = props.paginationConfig,
+    columns = props.columns,
+    components = props.components,
+    tableWrapRef = props.tableWrapRef;
+  var _ref3 = useSize(tableWrapRef) || {},
+    height = _ref3.height;
+  var debouncedHeight = useDebounce(height, {
+    wait: 500
+  });
+  var isShowPagination = useMemo(function () {
+    var _tableProps$paginatio3, _tableProps$paginatio4, _tableProps$paginatio5, _tableProps$paginatio6;
+    var total = (tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio3 = tableProps.pagination) === null || _tableProps$paginatio3 === void 0 ? void 0 : _tableProps$paginatio3.total) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || 0;
+    if (tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio4 = tableProps.pagination) !== null && _tableProps$paginatio4 !== void 0 && _tableProps$paginatio4.localPagination) {
+      total = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || 0;
+    }
+    return total > ((tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio5 = tableProps.pagination) === null || _tableProps$paginatio5 === void 0 ? void 0 : (_tableProps$paginatio6 = _tableProps$paginatio5.pageSizeOptions) === null || _tableProps$paginatio6 === void 0 ? void 0 : _tableProps$paginatio6[0]) || 10);
+  }, [tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio7 = tableProps.pagination) === null || _tableProps$paginatio7 === void 0 ? void 0 : _tableProps$paginatio7.localPagination, tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio8 = tableProps.pagination) === null || _tableProps$paginatio8 === void 0 ? void 0 : _tableProps$paginatio8.total, dataSource.length, tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$paginatio9 = tableProps.pagination) === null || _tableProps$paginatio9 === void 0 ? void 0 : (_tableProps$paginatio10 = _tableProps$paginatio9.pageSizeOptions) === null || _tableProps$paginatio10 === void 0 ? void 0 : _tableProps$paginatio10[0]]);
+  var scroll = useGenScroll({
+    wrapHeight: debouncedHeight || 500,
+    scroll: tableProps.scroll,
+    columns: columns,
+    isShowPagination: isShowPagination
+  });
+  var debouncedScroll = useDebounce(scroll, {
+    wait: 500
+  });
+  var basicTable = useMemo(function () {
+    return /*#__PURE__*/React.createElement(BasicTable, _extends({
+      key: debouncedScroll,
+      dataSource: dataSource,
+      columns: columns,
+      className: 'grid-view-table',
+      components: components
+    }, tableProps, {
+      scroll: debouncedScroll,
+      pagination: paginationConfig
+    }));
+  }, [debouncedScroll, dataSource, columns, components, paginationConfig, tableProps]);
+  return /*#__PURE__*/React.createElement(SortRow, {
+    rowKey: tableProps.rowKey,
+    onSortChange: tableProps.onSortChange
+  }, basicTable);
 };
 export default /*#__PURE__*/memo(GridViewTable);

package/es/components/table/View/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { GridViewProps } from "../types";
+import React from 'react';
+import { GridViewProps } from '../types';
 declare const View: (props: GridViewProps & {
     setTableSetting: (values: Record<string, any>) => void;
 }) => React.JSX.Element;

package/es/components/table/View/index.js

@@ -1,10 +1,11 @@
 var _excluded = ["dataSource", "columns", "dispatch", "style", "filter", "sort", "buttons", "actionButtons", "title", "summary", "onValuesChange", "columnSetting", "dataSourceGroup", "view", "gallery", "setTableSetting", "onDataSourceChange"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from "react";
-import { Form } from "antd";
+import React, { useMemo } from 'react';
+import { Form } from 'antd';
 import GridViewTable from "../Table";
 import Gallery from "../Gallery";
+import { stringify } from "../Table/utils";
 var View = function View(props) {
   var dataSource = props.dataSource,
     columns = props.columns,
@@ -25,22 +26,25 @@ var View = function View(props) {
     onDataSourceChange = props.onDataSourceChange,
     other = _objectWithoutProperties(props, _excluded);
   var form = Form.useFormInstance();
-  var viewMode = Form.useWatch("view_mode", {
+  var viewMode = Form.useWatch('view_mode', {
     form: form,
     preserve: true
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, viewMode === "grid" && /*#__PURE__*/React.createElement(GridViewTable, {
-    tableProps: other,
-    filter: filter,
-    setTableSetting: setTableSetting,
-    onDataSourceChange: onDataSourceChange
-  }), viewMode === "gallery" && /*#__PURE__*/React.createElement(Gallery, {
-    loading: other === null || other === void 0 ? void 0 : other.loading,
-    gallery: gallery,
-    pagination: other.pagination,
-    filter: filter,
-    rowKey: other.rowKey,
-    onDataSourceChange: onDataSourceChange
-  }));
+  var memoContent = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, viewMode === 'grid' && /*#__PURE__*/React.createElement(GridViewTable, {
+      tableProps: other,
+      filter: filter,
+      setTableSetting: setTableSetting,
+      onDataSourceChange: onDataSourceChange
+    }), viewMode === 'gallery' && /*#__PURE__*/React.createElement(Gallery, {
+      loading: other === null || other === void 0 ? void 0 : other.loading,
+      gallery: gallery,
+      pagination: other.pagination,
+      filter: filter,
+      rowKey: other.rowKey,
+      onDataSourceChange: onDataSourceChange
+    }));
+  }, [viewMode, stringify(other), filter, onDataSourceChange, gallery]);
+  return memoContent;
 };
 export default View;

package/es/components/table/hooks/useTableSetting.js

@@ -7,6 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { useMemo } from "react";
 import { getSettingKeyArrByMode, getTableSettingByCurrentViewMode, getTableSettingFromLocalStorage, mergeColumnSetting, mergeFilterSetting, setFormValuesToLocalStorage } from "../Table/utils";
 import useEngineContext from "../../../hooks/useEngineContext";
+import { useMemoizedFn } from "ahooks";
 var useTableSetting = function useTableSetting(params) {
   var _context$appHelper;
   var tableId = params.tableId,
@@ -162,7 +163,7 @@ var useTableSetting = function useTableSetting(params) {
    * 更新 tableSetting
    * @param values
    */
-  var setTableSetting = function setTableSetting(values) {
+  var setTableSetting = useMemoizedFn(function (values) {
     var result = setFormValuesToLocalStorage({
       tableId: tableId,
       allValues: values,
@@ -184,7 +185,7 @@ var useTableSetting = function useTableSetting(params) {
       })
     }
     */
-  };
+  });
 
   var tableSetting = useMemo(function () {
     return _objectSpread(_objectSpread({}, tableLocalSetting), defaultTableSetting);

package/es/components/table/index.js

@@ -14,7 +14,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { useSize } from 'ahooks';
+import { useDebounce, useSize } from 'ahooks';
 import { Form } from 'antd';
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useSharedState } from "../../hooks";
@@ -75,9 +75,11 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
   var initialValuesRef = useRef({});
   var _ref = useSize(wrapRef) || {},
     width = _ref.width;
+  var debouncedWidth = useDebounce(width, {
+    wait: 500
+  });
   var utils = context === null || context === void 0 ? void 0 : (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils;
   var tableId = useMemo(function () {
-    console.log(props, 'wh');
     if (props.__designMode === 'design') {
       return 'designMode-mock-table-id';
     }
@@ -131,13 +133,14 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [currentSettingHash, tableId]);
   useEffect(function () {
-    if (width) {
+    if (debouncedWidth) {
+      console.log('modal.dispatch', 'setTableWidth');
       modal.dispatch({
         type: 'setTableWidth',
-        payload: width || {}
+        payload: debouncedWidth || {}
       });
     }
-  }, [width]);
+  }, [debouncedWidth]);
   var _useTableSetting = useTableSetting({
       tableId: tableId,
       filter: filter,

package/es/components/table/index.less

@@ -9,6 +9,10 @@
   display: flex;
   flex-direction: column;
 
+  .pisell-lowcode-table-body {
+    overscroll-behavior: none;
+  }
+
   .pisell-lowcode-table-thead {
     .pisell-lowcode-table-cell {
       padding: 0 14px;

package/lib/components/table/BasicTable/index.js

@@ -114,7 +114,7 @@ var BasicTable = (props) => {
       type: "setCurrentDataSource",
       payload: (_dataSource == null ? void 0 : _dataSource.list) || []
     });
-  }, [_dataSource == null ? void 0 : _dataSource.list]);
+  }, [JSON.stringify(_dataSource == null ? void 0 : _dataSource.list)]);
   return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Table,
     {

package/lib/components/table/Table/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import "./index.less";
+import React from 'react';
+import './index.less';
 declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/lib/components/table/Table/index.js

@@ -52,13 +52,11 @@ var GridViewTable = ({
   setTableSetting,
   onDataSourceChange
 }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const responsive = (0, import_hooks.useResponsive)();
+  var _a, _b;
   const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
   const form = import_antd.Form.useFormInstance();
   const column_setting = import_antd.Form.useWatch("column_setting", { form, preserve: true }) || [];
   const tableWrapRef = (0, import_react.useRef)(null);
-  const { height } = (0, import_ahooks.useSize)(tableWrapRef) || {};
   const { dataSource: defaultDataSource, originDataSource } = state;
   const handleSave = (0, import_ahooks.useMemoizedFn)((row) => {
     const newData = [...defaultDataSource];
@@ -111,25 +109,6 @@ var GridViewTable = ({
   const components = (0, import_useGenTableComponents.default)({
     form
   });
-  const isShowPagination = (0, import_react.useMemo)(() => {
-    var _a2, _b2, _c2, _d2;
-    let total = ((_a2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _a2.total) || (dataSource == null ? void 0 : dataSource.length) || 0;
-    if ((_b2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _b2.localPagination) {
-      total = (dataSource == null ? void 0 : dataSource.length) || 0;
-    }
-    return total > (((_d2 = (_c2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _c2.pageSizeOptions) == null ? void 0 : _d2[0]) || 10);
-  }, [
-    (_c = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _c.localPagination,
-    (_d = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _d.total,
-    dataSource.length,
-    (_f = (_e = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _e.pageSizeOptions) == null ? void 0 : _f[0]
-  ]);
-  const scroll = (0, import_useGenScroll.default)({
-    wrapHeight: height || 500,
-    scroll: tableProps.scroll,
-    columns,
-    isShowPagination
-  });
   const showTotal = (0, import_react.useCallback)(
     (total, range, pageSize) => {
       let start = range[0] - 1;
@@ -150,26 +129,73 @@ var GridViewTable = ({
       ...tableProps.pagination,
       showTotal
     };
-  }, [responsive, tableProps.pagination]);
+  }, [tableProps.pagination]);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-table-wrap", ref: tableWrapRef }, /* @__PURE__ */ import_react.default.createElement(
-    import_SortRow.default,
+    AutoSizerContent,
     {
-      rowKey: tableProps.rowKey,
-      onSortChange: tableProps.onSortChange
-    },
-    /* @__PURE__ */ import_react.default.createElement(
+      tableWrapRef,
+      dataSource,
+      tableProps,
+      columns,
+      paginationConfig: _paginationConfig,
+      components
+    }
+  ));
+};
+var AutoSizerContent = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    tableProps,
+    dataSource,
+    paginationConfig: paginationConfig2,
+    columns,
+    components,
+    tableWrapRef
+  } = props;
+  const { height } = (0, import_ahooks.useSize)(tableWrapRef) || {};
+  const debouncedHeight = (0, import_ahooks.useDebounce)(height, { wait: 500 });
+  const isShowPagination = (0, import_react.useMemo)(() => {
+    var _a2, _b2, _c2, _d2;
+    let total = ((_a2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _a2.total) || (dataSource == null ? void 0 : dataSource.length) || 0;
+    if ((_b2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _b2.localPagination) {
+      total = (dataSource == null ? void 0 : dataSource.length) || 0;
+    }
+    return total > (((_d2 = (_c2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _c2.pageSizeOptions) == null ? void 0 : _d2[0]) || 10);
+  }, [
+    (_a = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _a.localPagination,
+    (_b = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _b.total,
+    dataSource.length,
+    (_d = (_c = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _c.pageSizeOptions) == null ? void 0 : _d[0]
+  ]);
+  const scroll = (0, import_useGenScroll.default)({
+    wrapHeight: debouncedHeight || 500,
+    scroll: tableProps.scroll,
+    columns,
+    isShowPagination
+  });
+  const debouncedScroll = (0, import_ahooks.useDebounce)(scroll, { wait: 500 });
+  const basicTable = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
       import_BasicTable.default,
       {
-        key: scroll == null ? void 0 : scroll.y,
+        key: debouncedScroll,
         dataSource,
         columns,
         className: "grid-view-table",
         components,
         ...tableProps,
-        scroll,
-        pagination: _paginationConfig
+        scroll: debouncedScroll,
+        pagination: paginationConfig2
       }
-    )
-  ));
+    );
+  }, [
+    debouncedScroll,
+    dataSource,
+    columns,
+    components,
+    paginationConfig2,
+    tableProps
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(import_SortRow.default, { rowKey: tableProps.rowKey, onSortChange: tableProps.onSortChange }, basicTable);
 };
 var Table_default = (0, import_react.memo)(GridViewTable);

package/lib/components/table/View/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { GridViewProps } from "../types";
+import React from 'react';
+import { GridViewProps } from '../types';
 declare const View: (props: GridViewProps & {
     setTableSetting: (values: Record<string, any>) => void;
 }) => React.JSX.Element;

package/lib/components/table/View/index.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_Table = __toESM(require("../Table"));
 var import_Gallery = __toESM(require("../Gallery"));
+var import_utils = require("../Table/utils");
 var View = (props) => {
   const {
     dataSource,
@@ -62,24 +63,27 @@ var View = (props) => {
     form,
     preserve: true
   });
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(
-    import_Table.default,
-    {
-      tableProps: other,
-      filter,
-      setTableSetting,
-      onDataSourceChange
-    }
-  ), viewMode === "gallery" && /* @__PURE__ */ import_react.default.createElement(
-    import_Gallery.default,
-    {
-      loading: other == null ? void 0 : other.loading,
-      gallery,
-      pagination: other.pagination,
-      filter,
-      rowKey: other.rowKey,
-      onDataSourceChange
-    }
-  ));
+  const memoContent = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(
+      import_Table.default,
+      {
+        tableProps: other,
+        filter,
+        setTableSetting,
+        onDataSourceChange
+      }
+    ), viewMode === "gallery" && /* @__PURE__ */ import_react.default.createElement(
+      import_Gallery.default,
+      {
+        loading: other == null ? void 0 : other.loading,
+        gallery,
+        pagination: other.pagination,
+        filter,
+        rowKey: other.rowKey,
+        onDataSourceChange
+      }
+    ));
+  }, [viewMode, (0, import_utils.stringify)(other), filter, onDataSourceChange, gallery]);
+  return memoContent;
 };
 var View_default = View;

package/lib/components/table/hooks/useTableSetting.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(useTableSetting_exports);
 var import_react = require("react");
 var import_utils = require("../Table/utils");
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_ahooks = require("ahooks");
 var useTableSetting = (params) => {
   var _a;
   const {
@@ -199,7 +200,7 @@ var useTableSetting = (params) => {
     quickFilterMaxLength,
     sortButtonShow
   ]);
-  const setTableSetting = (values) => {
+  const setTableSetting = (0, import_ahooks.useMemoizedFn)((values) => {
     const result = (0, import_utils.setFormValuesToLocalStorage)({
       tableId,
       allValues: values,
@@ -207,7 +208,7 @@ var useTableSetting = (params) => {
       currentViewMode,
       currentSettingHash
     });
-  };
+  });
   const tableSetting = (0, import_react.useMemo)(() => {
     return {
       ...tableLocalSetting,

package/lib/components/table/index.js

@@ -89,9 +89,9 @@ var GridView = (0, import_model.Provider)(
     const filterDefaultRef = (0, import_react.useRef)({});
     const initialValuesRef = (0, import_react.useRef)({});
     const { width } = (0, import_ahooks.useSize)(wrapRef) || {};
+    const debouncedWidth = (0, import_ahooks.useDebounce)(width, { wait: 500 });
     const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
     const tableId = (0, import_react.useMemo)(() => {
-      console.log(props, "wh");
       if (props.__designMode === "design") {
         return "designMode-mock-table-id";
       }
@@ -144,13 +144,14 @@ var GridView = (0, import_model.Provider)(
       }
     }, [currentSettingHash, tableId]);
     (0, import_react.useEffect)(() => {
-      if (width) {
+      if (debouncedWidth) {
+        console.log("modal.dispatch", "setTableWidth");
         modal.dispatch({
           type: "setTableWidth",
-          payload: width || {}
+          payload: debouncedWidth || {}
         });
       }
-    }, [width]);
+    }, [debouncedWidth]);
     const { setTableSetting, tableSetting } = (0, import_useTableSetting.default)({
       tableId,
       filter,

package/lib/components/table/index.less

@@ -9,6 +9,10 @@
   display: flex;
   flex-direction: column;
 
+  .pisell-lowcode-table-body {
+    overscroll-behavior: none;
+  }
+
   .pisell-lowcode-table-thead {
     .pisell-lowcode-table-cell {
       padding: 0 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.397",
+  "version": "1.0.399",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -64,8 +64,8 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "crypto-js": "^4.2.0",
     "@zxing/library": "0.21.2",
-    "@pisell/utils": "1.0.37",
-    "@pisell/date-picker": "1.0.104",
+    "@pisell/utils": "1.0.38",
+    "@pisell/date-picker": "1.0.105",
     "@pisell/icon": "0.0.10"
   },
   "peerDependencies": {