diff --git a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx index 4a78de9cc..065258539 100644 --- a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx +++ b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx @@ -10,20 +10,22 @@ const FixedBlockContext = React.createContext<{ setFixedBlock: (value: string | false) => void; height: number; fixedBlockUID: boolean | string; + fixedBlockUIDRef: React.MutableRefObject; }>({ setFixedBlock: () => {}, height: 0, fixedBlockUID: false, + fixedBlockUIDRef: { current: false }, }); export const useFixedSchema = () => { const field = useField(); const fieldSchema = useFieldSchema(); - const { setFixedBlock, fixedBlockUID } = useFixedBlock(); + const { setFixedBlock, fixedBlockUID, fixedBlockUIDRef } = useFixedBlock(); const hasSet = useRef(false); useEffect(() => { - if (!fixedBlockUID || hasSet.current) { + if (!fixedBlockUIDRef.current || hasSet.current) { setFixedBlock(field?.decoratorProps?.fixedBlock ? fieldSchema['x-uid'] : false); hasSet.current = true; } @@ -39,6 +41,7 @@ export const useFixedBlock = () => { export const FixedBlockWrapper: React.FC = (props) => { const fixedBlock = useFixedSchema(); const { height, fixedBlockUID } = useFixedBlock(); + // The fixedBlockUID of false means that the page has no fixed blocks if (!fixedBlock && fixedBlockUID) return null; return ( @@ -112,9 +115,14 @@ const fixedBlockCss = css` const FixedBlock: React.FC = (props) => { const { height } = props; - const [fixedBlockUID, setFixedBlock] = useState(false); + const [fixedBlockUID, _setFixedBlock] = useState(false); + const fixedBlockUIDRef = useRef(fixedBlockUID); + const setFixedBlock = (v) => { + fixedBlockUIDRef.current = v; + _setFixedBlock(v); + }; return ( - +
{ if (!pagination2 && pagination1 === false) { return false; } - const result = { showTotal: (total) => t('Total {{count}} items', { count: total }), showSizeChanger: true, @@ -422,8 +421,6 @@ export const Table: any = observer((props: any) => { const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock; const [tableHeight, setTableHeight] = useState(0); const [headerAndPaginationHeight, setHeaderAndPaginationHeight] = useState(0); - const tableRef = useRef(null); - const containerRef = useRef(null); const scroll = useMemo(() => { return fixedBlock @@ -436,21 +433,24 @@ export const Table: any = observer((props: any) => { }; }, [fixedBlock, tableHeight, headerAndPaginationHeight]); - const calcTableSize = () => { - if (!containerRef.current || !tableRef.current) return; - setTableHeight(Math.ceil(containerRef.current.clientHeight || 0)); + const elementRef = useRef(); - const headerHeight = tableRef.current.querySelector('.ant-table-header')?.clientHeight || 0; - const paginationHeight = tableRef.current.querySelector('.ant-table-pagination')?.clientHeight || 0; - setHeaderAndPaginationHeight(Math.ceil(headerHeight + paginationHeight + 18)); + const calcTableSize = () => { + if (!elementRef.current) return; + const clientRect = elementRef.current?.getBoundingClientRect(); + setTableHeight(Math.ceil(clientRect?.height || 0)); }; - useEffect(calcTableSize, [field.value]); useEventListener('resize', calcTableSize); + const mountedRef: React.RefCallback = (ref) => { + elementRef.current = ref; + calcTableSize(); + }; + return (
{ > { + if (ref) { + const headerHeight = ref.querySelector('.ant-table-header')?.getBoundingClientRect().height || 0; + const paginationHeight = ref.querySelector('.ant-table-pagination')?.getBoundingClientRect().height || 0; + setHeaderAndPaginationHeight(Math.ceil(headerHeight + paginationHeight + 16)); + } + }} rowKey={rowKey ?? defaultRowKey} {...others} {...restProps}