fix(Table): cannot display table data (#1617)

* fix(Table): cannot display table data

* fix: revert logic

* fix: revert pagination

* fix: improve logic
This commit is contained in:
Dunqing 2023-03-30 08:54:39 +08:00 committed by GitHub
parent c572b696cc
commit 920aab949a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions

View File

@ -10,20 +10,22 @@ const FixedBlockContext = React.createContext<{
setFixedBlock: (value: string | false) => void; setFixedBlock: (value: string | false) => void;
height: number; height: number;
fixedBlockUID: boolean | string; fixedBlockUID: boolean | string;
fixedBlockUIDRef: React.MutableRefObject<boolean | string>;
}>({ }>({
setFixedBlock: () => {}, setFixedBlock: () => {},
height: 0, height: 0,
fixedBlockUID: false, fixedBlockUID: false,
fixedBlockUIDRef: { current: false },
}); });
export const useFixedSchema = () => { export const useFixedSchema = () => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const { setFixedBlock, fixedBlockUID } = useFixedBlock(); const { setFixedBlock, fixedBlockUID, fixedBlockUIDRef } = useFixedBlock();
const hasSet = useRef(false); const hasSet = useRef(false);
useEffect(() => { useEffect(() => {
if (!fixedBlockUID || hasSet.current) { if (!fixedBlockUIDRef.current || hasSet.current) {
setFixedBlock(field?.decoratorProps?.fixedBlock ? fieldSchema['x-uid'] : false); setFixedBlock(field?.decoratorProps?.fixedBlock ? fieldSchema['x-uid'] : false);
hasSet.current = true; hasSet.current = true;
} }
@ -39,6 +41,7 @@ export const useFixedBlock = () => {
export const FixedBlockWrapper: React.FC = (props) => { export const FixedBlockWrapper: React.FC = (props) => {
const fixedBlock = useFixedSchema(); const fixedBlock = useFixedSchema();
const { height, fixedBlockUID } = useFixedBlock(); const { height, fixedBlockUID } = useFixedBlock();
// The fixedBlockUID of false means that the page has no fixed blocks // The fixedBlockUID of false means that the page has no fixed blocks
if (!fixedBlock && fixedBlockUID) return null; if (!fixedBlock && fixedBlockUID) return null;
return ( return (
@ -112,9 +115,14 @@ const fixedBlockCss = css`
const FixedBlock: React.FC<FixedBlockProps> = (props) => { const FixedBlock: React.FC<FixedBlockProps> = (props) => {
const { height } = props; const { height } = props;
const [fixedBlockUID, setFixedBlock] = useState<false | string>(false); const [fixedBlockUID, _setFixedBlock] = useState<false | string>(false);
const fixedBlockUIDRef = useRef(fixedBlockUID);
const setFixedBlock = (v) => {
fixedBlockUIDRef.current = v;
_setFixedBlock(v);
};
return ( return (
<FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID }}> <FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID, fixedBlockUIDRef }}>
<div <div
className={fixedBlockUID ? fixedBlockCss : ''} className={fixedBlockUID ? fixedBlockCss : ''}
style={{ style={{

View File

@ -125,7 +125,6 @@ const usePaginationProps = (pagination1, pagination2) => {
if (!pagination2 && pagination1 === false) { if (!pagination2 && pagination1 === false) {
return false; return false;
} }
const result = { const result = {
showTotal: (total) => t('Total {{count}} items', { count: total }), showTotal: (total) => t('Total {{count}} items', { count: total }),
showSizeChanger: true, showSizeChanger: true,
@ -422,8 +421,6 @@ export const Table: any = observer((props: any) => {
const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock; const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock;
const [tableHeight, setTableHeight] = useState(0); const [tableHeight, setTableHeight] = useState(0);
const [headerAndPaginationHeight, setHeaderAndPaginationHeight] = useState(0); const [headerAndPaginationHeight, setHeaderAndPaginationHeight] = useState(0);
const tableRef = useRef(null);
const containerRef = useRef<HTMLDivElement>(null);
const scroll = useMemo(() => { const scroll = useMemo(() => {
return fixedBlock return fixedBlock
@ -436,21 +433,24 @@ export const Table: any = observer((props: any) => {
}; };
}, [fixedBlock, tableHeight, headerAndPaginationHeight]); }, [fixedBlock, tableHeight, headerAndPaginationHeight]);
const calcTableSize = () => { const elementRef = useRef<HTMLDivElement>();
if (!containerRef.current || !tableRef.current) return;
setTableHeight(Math.ceil(containerRef.current.clientHeight || 0));
const headerHeight = tableRef.current.querySelector('.ant-table-header')?.clientHeight || 0; const calcTableSize = () => {
const paginationHeight = tableRef.current.querySelector('.ant-table-pagination')?.clientHeight || 0; if (!elementRef.current) return;
setHeaderAndPaginationHeight(Math.ceil(headerHeight + paginationHeight + 18)); const clientRect = elementRef.current?.getBoundingClientRect();
setTableHeight(Math.ceil(clientRect?.height || 0));
}; };
useEffect(calcTableSize, [field.value]);
useEventListener('resize', calcTableSize); useEventListener('resize', calcTableSize);
const mountedRef: React.RefCallback<HTMLDivElement> = (ref) => {
elementRef.current = ref;
calcTableSize();
};
return ( return (
<div <div
ref={containerRef} ref={mountedRef}
className={css` className={css`
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -465,7 +465,13 @@ export const Table: any = observer((props: any) => {
> >
<SortableWrapper> <SortableWrapper>
<AntdTable <AntdTable
ref={tableRef} ref={(ref) => {
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} rowKey={rowKey ?? defaultRowKey}
{...others} {...others}
{...restProps} {...restProps}