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