@pisell/materials 2.2.20 → 2.2.22

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];
@@ -110,25 +108,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;
@@ -149,26 +128,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, _e, _f;
+    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 > (((_c2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _c2.pageSize) || ((_e = (_d2 = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _d2.pageSizeOptions) == null ? void 0 : _e[0]) || 10) || ((_f = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _f.showPagination) && total > 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: 200 });
+  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/Table/index.less

@@ -29,4 +29,7 @@
 
 .materials-grid-table-wrap {
   flex: 1;
+  // 使用overflow hidden 计算 materials-grid-table-wrap高度时不会动态变更
+  overflow: hidden;
+  padding-bottom: 24px;
 }

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

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
+}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

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,8 @@ 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 import_ahooks = require("ahooks");
 var View = (props) => {
   const {
     dataSource,
@@ -62,24 +64,31 @@ 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 debouncedFilter = (0, import_ahooks.useDebounce)(filter, { wait: 200 });
+  const memoOnDataSourceChange = (0, import_ahooks.useMemoizedFn)(
+    (v) => onDataSourceChange == null ? void 0 : onDataSourceChange(v)
+  );
+  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: memoOnDataSourceChange
+      }
+    ), 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: memoOnDataSourceChange
+      }
+    ));
+  }, [viewMode, (0, import_utils.stringify)(other), debouncedFilter, memoOnDataSourceChange, gallery]);
+  return memoContent;
 };
 var View_default = View;

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

@@ -31,7 +31,7 @@ var useGenScroll = (params) => {
         x: (propsScroll == null ? void 0 : propsScroll.x) || columns.reduce((p, c) => {
           return p + (c.width || 250);
         }, 0) || 2e3,
-        y: (propsScroll == null ? void 0 : propsScroll.y) || Math.max(wrapHeight - 48 - (isShowPagination ? 50 + 24 : 0), 100),
+        y: (propsScroll == null ? void 0 : propsScroll.y) || Math.max(wrapHeight - 48 - (isShowPagination ? 50 + 24 : 24), 100),
         scrollToFirstRowOnChange: propsScroll == null ? void 0 : propsScroll.scrollToFirstRowOnChange
       };
     }

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

@@ -24,6 +24,7 @@ __export(useTableSetting_exports, {
 module.exports = __toCommonJS(useTableSetting_exports);
 var import_react = require("react");
 var import_utils = require("../Table/utils");
+var import_ahooks = require("ahooks");
 var useTableSetting = (params) => {
   const {
     tableId,
@@ -185,7 +186,7 @@ var useTableSetting = (params) => {
     quickFilterMaxLength,
     sortButtonShow
   ]);
-  const setTableSetting = (values) => {
+  const setTableSetting = (0, import_ahooks.useMemoizedFn)((values) => {
     (0, import_utils.setFormValuesToLocalStorage)({
       tableId,
       allValues: values,
@@ -193,7 +194,7 @@ var useTableSetting = (params) => {
       currentViewMode,
       currentSettingHash
     });
-  };
+  });
   const tableSetting = (0, import_react.useMemo)(() => {
     return {
       ...tableLocalSetting,

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

@@ -60,7 +60,7 @@ var useTransDataSource = (params) => {
       return [];
     }
     return filter == null ? void 0 : filter.list.filter((item) => item.localFilter);
-  }, [filter]);
+  }, [(0, import_utils2.stringify)(filter)]);
   const dataSource = (0, import_react.useMemo)(() => {
     if (!localPagination) {
       return pDataSource;

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: 100 });
     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,13 @@ var GridView = (0, import_model.Provider)(
       }
     }, [currentSettingHash, tableId]);
     (0, import_react.useEffect)(() => {
-      if (width) {
+      if (debouncedWidth) {
         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,15 @@
   display: flex;
   flex-direction: column;
 
+  .pisell-lowcode-table-body {
+    overscroll-behavior: none;
+  }
+  .pisell-lowcode-table-placeholder {
+    .cell-provider {
+      display: block;
+    }
+  }
+
   .pisell-lowcode-table-thead {
     .pisell-lowcode-table-cell {
       padding: 0 14px;

package/lowcode/page/meta.ts

@@ -25,6 +25,7 @@ const PageMeta: ComponentMetadata = {
     ],
     supports: {
       style: true,
+      className: true,
     },
     component: {
       isContainer: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "2.2.20",
+  "version": "2.2.22",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",