diff --git a/packages/search-table-react/src/SearchTable.tsx b/packages/search-table-react/src/SearchTable.tsx index d8df2a5..08d64cb 100644 --- a/packages/search-table-react/src/SearchTable.tsx +++ b/packages/search-table-react/src/SearchTable.tsx @@ -12,7 +12,7 @@ import useScrollY from './hooks/useScrollY' import useSearch from './hooks/useSearch' import useSummary from './hooks/useSummary' import useTitle from './hooks/useTitle' -import type { ISearchTableProps, ISearchTableRef } from './typings/index.d' +import type { IGlobalState, ISearchTableProps, ISearchTableRef } from './typings/index.d' import type { ITableProps } from './typings/table' const { classNames, isPlainObject } = utils @@ -50,8 +50,15 @@ const SearchTable = ( search === false ? {} : search.defaultValue || {} ) + /** + * 全局状态 + */ + const globalStateRef = useRef({ + isTabChanging: false, + }) + // 表格列配置数据处理 - const { baseColumns } = useBaseColumns({ table }) + const { baseColumns } = useBaseColumns({ table, globalStateRef }) const { sortColumns, sortModalHolder, openSortModal } = useSortColumns({ baseColumns }) const { finalColumns } = useFinalColumns({ table, sortColumns }) @@ -90,6 +97,7 @@ const SearchTable = ( const { titleNodeHolder } = useTitle({ title, loading, + globalStateRef, runRequest, openSortModal, }) diff --git a/packages/search-table-react/src/hooks/useColumns/useBaseColumns.tsx b/packages/search-table-react/src/hooks/useColumns/useBaseColumns.tsx index 3fdf65b..24a9c5a 100644 --- a/packages/search-table-react/src/hooks/useColumns/useBaseColumns.tsx +++ b/packages/search-table-react/src/hooks/useColumns/useBaseColumns.tsx @@ -1,7 +1,8 @@ import { utils } from '@schema-render/core-react' -import { useMemo } from 'react' +import { useMemo, useRef } from 'react' -import type { ISearchTableProps } from '../../typings/index.d' +import type { IGlobalStateRef, ISearchTableProps } from '../../typings/index.d' +import type { IColumnType } from '../../typings/table' import { BUILT_IN_VALUE_TYPES } from '../../valueTypes' import { processRawColumns } from './helpers/traverse' @@ -9,11 +10,20 @@ const { mapKeys } = utils interface IParams { table: ISearchTableProps['table'] + globalStateRef: IGlobalStateRef } -export default function useBaseColumns({ table }: IParams) { +export default function useBaseColumns({ table, globalStateRef }: IParams) { // 原始列数据 - const rawColumns = table.columns || [] + const rawColumnsRef = useRef[]>([]) + const { isTabChanging } = globalStateRef.current + + // 更新原始列 + useMemo(() => { + if (!isTabChanging) { + rawColumnsRef.current = table.columns || [] + } + }, [table.columns, isTabChanging]) // 合并 valueType const finalValueTypeProcessors = useMemo(() => { @@ -26,10 +36,13 @@ export default function useBaseColumns({ table }: IParams) { }, [table.registerValueType]) const baseColumns = useMemo( - () => processRawColumns(rawColumns, table, finalValueTypeProcessors), + () => processRawColumns(rawColumnsRef.current, table, finalValueTypeProcessors), // eslint-disable-next-line react-hooks/exhaustive-deps - [rawColumns] + [rawColumnsRef.current] ) - return { rawColumns, baseColumns } + return { + rawColumns: rawColumnsRef.current, + baseColumns, + } } diff --git a/packages/search-table-react/src/hooks/useTitle.tsx b/packages/search-table-react/src/hooks/useTitle.tsx index 63c1cf3..29d83da 100644 --- a/packages/search-table-react/src/hooks/useTitle.tsx +++ b/packages/search-table-react/src/hooks/useTitle.tsx @@ -4,11 +4,12 @@ import { Button, Tabs, Tooltip } from 'antd' import type { ReactNode } from 'react' import { isValidElement } from 'react' -import type { ISearchTableProps, ISearchTableRef } from '../typings' +import type { IGlobalStateRef, ISearchTableProps, ISearchTableRef } from '../typings' interface IUseTitleParams { title: ISearchTableProps['title'] loading: boolean + globalStateRef: IGlobalStateRef runRequest: ISearchTableRef['refresh'] openSortModal: () => void } @@ -16,6 +17,7 @@ interface IUseTitleParams { export default function useTitle({ title = {}, loading, + globalStateRef, runRequest, openSortModal, }: IUseTitleParams) { @@ -25,10 +27,19 @@ export default function useTitle({ if (loading) { return } + + // 设置 tab 正在切换 + globalStateRef.current.isTabChanging = true + // 触发 onChange 事件 title.tabs?.onChange?.(activeKey) + // 等事件 setState 值更新完毕后再发起请求 - setTimeout(() => runRequest(), 0) + setTimeout( + // 请求完毕更新 isTabChanging 值 + () => runRequest().finally(() => (globalStateRef.current.isTabChanging = false)), + 0 + ) }) const tabBarExtraContent: { left?: ReactNode; right?: ReactNode } = {} diff --git a/packages/search-table-react/src/typings/index.d.ts b/packages/search-table-react/src/typings/index.d.ts index f4e68de..de4bec8 100644 --- a/packages/search-table-react/src/typings/index.d.ts +++ b/packages/search-table-react/src/typings/index.d.ts @@ -1,10 +1,22 @@ import type { IObjectAny, IPartRequired } from '@schema-render/core-react' import type { ISearchProps, ISearchRef } from '@schema-render/search-react' import type { TabsProps } from 'antd' -import type { CSSProperties, ReactNode } from 'react' +import type { CSSProperties, MutableRefObject, ReactNode } from 'react' import type { ITableOnChangeParams, ITableProps } from './table.d' +/** + * 全局数据 + */ +export interface IGlobalState { + /** + * 标签页是否在切换中,切换时不同步 rawColumns + */ + isTabChanging: boolean +} + +export type IGlobalStateRef = MutableRefObject + export interface IRenderParams { /** * 是否加载中