es-grid-template 1.9.10 → 1.9.11

package/es/ali-table/Grid.js

@@ -25,6 +25,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     title,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     pagination,
     infiniteScroll,
     dataSource,
@@ -171,7 +172,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/es/ali-table/pipeline/features/ColumnsChoose.js

@@ -35,10 +35,6 @@ export const ColumnsChoose = props => {
     const colsKeys = colsVisiables.map(it => it.field);
     return colsKeys.filter(it => !columnsGroup?.includes(it));
   }, [columnsGroup, originColumns]);
-
-  // console.log('defaultSelectedKeys', defaultSelectedKeys)
-  // console.log('originColumns', originColumns)
-
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });

package/es/grid-component/type.d.ts

@@ -259,6 +259,7 @@ export type TableProps<RecordType = AnyObject> = {
     /** Toolbar */
     showToolbar?: boolean;
     toolbarItems?: ToolbarItem[];
+    toolbarMode?: 'scroll';
     showColumnChoose?: boolean;
     onChooseColumns?: (props: IOnChooseColumns) => void;
     fullScreen?: boolean;

package/es/group-component/hook/utils.d.ts

@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     sumGroup?: boolean;
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainer.js

@@ -39,6 +39,7 @@ const TableContainer = props => {
     minHeight,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     actionTemplate,
     pagination,
     fullScreen,
@@ -221,8 +222,10 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/es/table-component/TableContainerEdit.js

@@ -90,7 +90,9 @@ const TableContainerEdit = props => {
     onCellChange,
     onDataChange,
     defaultValue,
+    showToolbar,
     toolbarItems,
+    toolbarMode,
     mergedFilterKeys,
     setMergedFilterKeys,
     expanded,
@@ -98,7 +100,6 @@ const TableContainerEdit = props => {
     onBlur,
     fullScreen,
     pagination,
-    showToolbar,
     actionTemplate,
     showColumnChoose,
     height,
@@ -241,6 +242,8 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = React.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
+  const [topToolbarHeight, setTopToolbarHeight] = React.useState(0);
+  const [bottomToolbarHeight, setBottomToolbarHeight] = React.useState(0);
 
   // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
 
@@ -641,14 +644,48 @@ const TableContainerEdit = props => {
     }
   }, [columnSizingInfo]);
   React.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = getTableHeight(height, minHeight);
     if (totalHeight) {
-      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
-      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
-      settableHeight(totalHeight - topHeight - bottomHeight);
+      // const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0
+      // const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0
+
+      // settableHeight(totalHeight - topHeight - bottomHeight)
+      settableHeight(totalHeight - topToolbarHeight - bottomToolbarHeight);
     }
-  }, [id, height, editAble, minHeight, toolbarItems]);
+  }, [height, minHeight, topToolbarHeight, bottomToolbarHeight]);
+  // }, [height, minHeight])
+
+  React.useEffect(() => {
+    if (!topToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      setTopToolbarHeight(clientHeight);
+    });
+    observer.observe(topToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!bottomToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      // setBottomToolbarHeight(top + bottom)
+      setBottomToolbarHeight(clientHeight);
+    });
+    observer.observe(bottomToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   const {
     control,
     handleSubmit,
@@ -1919,7 +1956,10 @@ const TableContainerEdit = props => {
     id: id
   }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
-    className: classNames(`${prefix}-grid-top-toolbar`, {})
+    className: classNames(`${prefix}-grid-top-toolbar`, {}),
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -1940,7 +1980,7 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsTop ?? [],
-    mode: 'scroll',
+    mode: toolbarMode,
     onClick: ({}) => {
       setEditingKey('');
     }
@@ -2081,7 +2121,10 @@ const TableContainerEdit = props => {
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
-    ref: bottomToolbarRef
+    ref: bottomToolbarRef,
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
@@ -2091,7 +2134,9 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsBottom ?? [],
-    mode: 'scroll',
+    mode: toolbarMode
+    // mode={'scroll'}
+    ,
     onClick: ({}) => {
       setEditingKey('');
     }

package/es/table-component/body/TableBodyCellEdit.js

@@ -1096,7 +1096,7 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
   return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {

package/es/table-component/table/Grid.js

@@ -293,7 +293,9 @@ const Grid = props => {
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
-      backgroundColor: theme?.backgroundColor ?? undefined
+      backgroundColor: theme?.backgroundColor ?? undefined,
+      transition: 'max-height 0.3s ease',
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
     collisionDetection: closestCenter,

package/es/table-virtuoso/table/TableContainer.js

@@ -38,6 +38,7 @@ const TableContainer = props => {
     setFilterChange,
     height,
     minHeight,
+    toolbarMode,
     showToolbar,
     toolbarItems,
     actionTemplate,
@@ -181,7 +182,7 @@ const TableContainer = props => {
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/lib/ali-table/Grid.js

@@ -35,6 +35,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     title,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     pagination,
     infiniteScroll,
     dataSource,
@@ -181,7 +182,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/lib/ali-table/pipeline/features/ColumnsChoose.js

@@ -44,10 +44,6 @@ const ColumnsChoose = props => {
     const colsKeys = colsVisiables.map(it => it.field);
     return colsKeys.filter(it => !columnsGroup?.includes(it));
   }, [columnsGroup, originColumns]);
-
-  // console.log('defaultSelectedKeys', defaultSelectedKeys)
-  // console.log('originColumns', originColumns)
-
   const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });

package/lib/grid-component/type.d.ts

@@ -259,6 +259,7 @@ export type TableProps<RecordType = AnyObject> = {
     /** Toolbar */
     showToolbar?: boolean;
     toolbarItems?: ToolbarItem[];
+    toolbarMode?: 'scroll';
     showColumnChoose?: boolean;
     onChooseColumns?: (props: IOnChooseColumns) => void;
     fullScreen?: boolean;

package/lib/table-component/TableContainer.js

@@ -46,6 +46,7 @@ const TableContainer = props => {
     minHeight,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     actionTemplate,
     pagination,
     fullScreen,
@@ -228,8 +229,10 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/lib/table-component/TableContainerEdit.js

@@ -97,7 +97,9 @@ const TableContainerEdit = props => {
     onCellChange,
     onDataChange,
     defaultValue,
+    showToolbar,
     toolbarItems,
+    toolbarMode,
     mergedFilterKeys,
     setMergedFilterKeys,
     expanded,
@@ -105,7 +107,6 @@ const TableContainerEdit = props => {
     onBlur,
     fullScreen,
     pagination,
-    showToolbar,
     actionTemplate,
     showColumnChoose,
     height,
@@ -248,6 +249,8 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = _react.default.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = _react.default.useState(0);
+  const [topToolbarHeight, setTopToolbarHeight] = _react.default.useState(0);
+  const [bottomToolbarHeight, setBottomToolbarHeight] = _react.default.useState(0);
 
   // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
 
@@ -648,14 +651,48 @@ const TableContainerEdit = props => {
     }
   }, [columnSizingInfo]);
   _react.default.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
     if (totalHeight) {
-      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
-      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
-      settableHeight(totalHeight - topHeight - bottomHeight);
+      // const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0
+      // const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0
+
+      // settableHeight(totalHeight - topHeight - bottomHeight)
+      settableHeight(totalHeight - topToolbarHeight - bottomToolbarHeight);
     }
-  }, [id, height, editAble, minHeight, toolbarItems]);
+  }, [height, minHeight, topToolbarHeight, bottomToolbarHeight]);
+  // }, [height, minHeight])
+
+  _react.default.useEffect(() => {
+    if (!topToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      setTopToolbarHeight(clientHeight);
+    });
+    observer.observe(topToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (!bottomToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      // setBottomToolbarHeight(top + bottom)
+      setBottomToolbarHeight(clientHeight);
+    });
+    observer.observe(bottomToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   const {
     control,
     handleSubmit,
@@ -1926,7 +1963,10 @@ const TableContainerEdit = props => {
     id: id
   }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
-    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {}),
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -1947,7 +1987,7 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsTop ?? [],
-    mode: 'scroll',
+    mode: toolbarMode,
     onClick: ({}) => {
       setEditingKey('');
     }
@@ -2088,7 +2128,10 @@ const TableContainerEdit = props => {
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    ref: bottomToolbarRef
+    ref: bottomToolbarRef,
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
@@ -2098,7 +2141,9 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsBottom ?? [],
-    mode: 'scroll',
+    mode: toolbarMode
+    // mode={'scroll'}
+    ,
     onClick: ({}) => {
       setEditingKey('');
     }

package/lib/table-component/body/TableBodyCellEdit.js

@@ -1103,7 +1103,7 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {

package/lib/table-component/table/Grid.js

@@ -298,7 +298,9 @@ const Grid = props => {
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
-      backgroundColor: theme?.backgroundColor ?? undefined
+      backgroundColor: theme?.backgroundColor ?? undefined,
+      transition: 'max-height 0.3s ease',
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,

package/lib/table-virtuoso/table/TableContainer.js

@@ -46,6 +46,7 @@ const TableContainer = props => {
     setFilterChange,
     height,
     minHeight,
+    toolbarMode,
     showToolbar,
     toolbarItems,
     actionTemplate,
@@ -189,7 +190,7 @@ const TableContainer = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.52",
+    "rc-master-ui": "1.1.53",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",