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;
|
||||
height: number;
|
||||
fixedBlockUID: boolean | string;
|
||||
fixedBlockUIDRef: React.MutableRefObject<boolean | string>;
|
||||
}>({
|
||||
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<FixedBlockProps> = (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 (
|
||||
<FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID }}>
|
||||
<FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID, fixedBlockUIDRef }}>
|
||||
<div
|
||||
className={fixedBlockUID ? fixedBlockCss : ''}
|
||||
style={{
|
||||
|
@ -125,7 +125,6 @@ const usePaginationProps = (pagination1, pagination2) => {
|
||||
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<HTMLDivElement>(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<HTMLDivElement>();
|
||||
|
||||
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<HTMLDivElement> = (ref) => {
|
||||
elementRef.current = ref;
|
||||
calcTableSize();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
ref={mountedRef}
|
||||
className={css`
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -465,7 +465,13 @@ export const Table: any = observer((props: any) => {
|
||||
>
|
||||
<SortableWrapper>
|
||||
<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}
|
||||
{...others}
|
||||
{...restProps}
|
||||
|
Loading…
Reference in New Issue
Block a user