|
import { useSidebarState } from 'react-admin';
|
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
|
|
/**
|
* useTableLayout Hook
|
*
|
* 统一计算包含侧边栏、右侧抽屉的表格容器最大宽高。
|
*
|
* @param {boolean} drawerOpen - 右侧抽屉是否打开
|
* @param {number} [customHeightOffset=210] - 自定义高度扣除偏移量 (Header + Toolbar + Filters + Pagination + Padding)
|
* @returns {Object} { boxMaxWidth, boxMaxHeight } - 计算后的最大宽度和高度样式值
|
*/
|
export const useTableLayout = (drawerOpen = false, customHeightOffset = 210) => {
|
const [sidebarIsOpen] = useSidebarState();
|
|
const sidebarWidth = sidebarIsOpen ? 200 : 50;
|
const contentPadding = 10; // 预留边距
|
const rightDrawerWidth = drawerOpen ? PAGE_DRAWER_WIDTH : 0;
|
|
// 计算最大宽度：视口宽度 - (侧边栏 + 右侧抽屉 + 边距)
|
const boxMaxWidth = `calc(100vw - ${sidebarWidth + rightDrawerWidth + contentPadding}px)`;
|
|
// 计算最大高度：视口高度 - 顶部和其他UI元素的高度
|
const boxMaxHeight = `calc(100vh - ${customHeightOffset}px)`;
|
|
return {
|
boxMaxWidth,
|
boxMaxHeight
|
};
|
};
|
|
export default useTableLayout;
|
