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:
parent
c572b696cc
commit
920aab949a
@ -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={{
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user