-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
108cd7a
commit c717369
Showing
6 changed files
with
242 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useMemo } from 'react'; | ||
| import { ResizableUniqIdPrefix } from '.'; | ||
| import { ColumnOriginType } from '..'; | ||
| import useMemoizedFn from './useMemoizedFn'; | ||
|
|
||
| export const GETKEY = 'dataIndex'; | ||
|
|
||
| export function getUniqueId(index: number) { | ||
| return `${ResizableUniqIdPrefix}-${index}`; | ||
| } | ||
|
|
||
| /* | ||
| ** 如果columns没有dataIndex，则按规则添加一个不重复的dataIndex | ||
| */ | ||
|
|
||
| function useGetDataIndexColumns<T extends ColumnOriginType<T>>(columns: T[] | undefined) { | ||
| const getColumns = useMemoizedFn((list: T[] | undefined) => { | ||
| const trulyColumns = list; | ||
| const c = trulyColumns?.map((col, index) => { | ||
| return { | ||
| ...col, | ||
| children: col?.children?.length ? getColumns(col.children) : undefined, | ||
| [GETKEY]: col[GETKEY] || col.key || getUniqueId(index), | ||
| }; | ||
| }); | ||
|
|
||
| return c; | ||
| }); | ||
|
|
||
| const dataIndexColumns = useMemo(() => getColumns(columns), [getColumns]) as T[] | undefined; | ||
|
|
||
| return dataIndexColumns || columns; | ||
| } | ||
|
|
||
| export default useGetDataIndexColumns; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React, { useEffect, useMemo } from 'react'; | ||
| import type { ColumnOriginType, ColumnsStateType } from '..'; | ||
| import useGetDataIndexColumns from './useGetDataIndexColumns'; | ||
| import useMemoizedFn from './useMemoizedFn'; | ||
|
|
||
| type LocalColumnsProp<T> = { | ||
| columnsState?: ColumnsStateType; | ||
| resizableColumns?: T[]; | ||
| columns?: T[]; | ||
| }; | ||
|
|
||
| function useLocalColumns<T extends ColumnOriginType<T>>({ | ||
| columnsState, | ||
| resizableColumns, | ||
| columns, | ||
| }: LocalColumnsProp<T>) { | ||
| // 列设置需要每一个column都有dataIndex或key | ||
| const columnsProp = useGetDataIndexColumns(columns); | ||
|
|
||
| // 初始化本地columns | ||
| const initLocalColumns = useMemoizedFn(() => { | ||
| const { persistenceType, persistenceKey } = columnsState || {}; | ||
|
|
||
| if (!persistenceKey || !persistenceType) { | ||
| return columnsProp; | ||
| } | ||
| if (typeof window === 'undefined') return columnsProp; | ||
|
|
||
| /** 从持久化中读取数据 */ | ||
| const storage = window[persistenceType]; | ||
|
|
||
| try { | ||
| const localResizableColumns = JSON.parse(storage?.getItem(persistenceKey) || '{}')?.resizableColumns; | ||
| const c = columnsProp?.map((col, i) => ({ | ||
| ...col, | ||
| width: | ||
| (localResizableColumns as T[])?.find((item, j) => { | ||
| if (item.dataIndex && col.dataIndex && item.dataIndex === col.dataIndex) { | ||
| return true; | ||
| } | ||
| if (item.key && col.key && item.key === col.key) { | ||
| return true; | ||
| } | ||
| if (i === j && !col.dataIndex && !col.key) { | ||
| return true; | ||
| } | ||
| return false; | ||
| })?.width || col.width, | ||
| })); | ||
| return c; | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| }); | ||
|
|
||
| const [localColumns, setLocalColumns] = React.useState<T[] | undefined>(initLocalColumns); | ||
|
|
||
| useEffect(() => { | ||
| if (!localColumns?.length) { | ||
| setLocalColumns(columnsProp); | ||
| } else { | ||
| setLocalColumns(initLocalColumns()); | ||
| } | ||
| }, [columnsProp]); | ||
|
|
||
| /** | ||
| * 把resizableColumns存储在本地 | ||
| */ | ||
| React.useEffect(() => { | ||
| const { persistenceType, persistenceKey } = columnsState || {}; | ||
|
|
||
| if (!persistenceKey || !persistenceType || !resizableColumns) { | ||
| return; | ||
| } | ||
| if (typeof window === 'undefined') return; | ||
| /** 给持久化中设置数据 */ | ||
| const storage = window[persistenceType]; | ||
| try { | ||
| storage.setItem( | ||
| persistenceKey, | ||
| JSON.stringify({ | ||
| ...JSON.parse(storage?.getItem(persistenceKey) || '{}'), | ||
| resizableColumns: resizableColumns.map((col) => ({ | ||
| dataIndex: col.dataIndex, | ||
| key: col.key, | ||
| title: col.title, | ||
| width: col.width, | ||
| })), | ||
| }), | ||
| ); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| }, [resizableColumns]); | ||
|
|
||
| /** | ||
| * reset | ||
| */ | ||
| const resetColumns = useMemoizedFn(() => { | ||
| setLocalColumns([...(columnsProp || [])]); | ||
| }); | ||
|
|
||
| return { | ||
| localColumns: useMemo(() => localColumns, [localColumns]), | ||
| resetColumns, | ||
| }; | ||
| } | ||
|
|
||
| export default useLocalColumns; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { useMemo, useRef } from 'react'; | ||
|
|
||
| type noop = (...args: any[]) => any; | ||
|
|
||
| function useMemoizedFn<T extends noop>(fn: T) { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| if (typeof fn !== 'function') { | ||
| // eslint-disable-next-line no-console | ||
| console.error(`useMemoizedFn expected parameter is a function, got ${typeof fn}`); | ||
| } | ||
| } | ||
|
|
||
| const fnRef = useRef<T>(fn); | ||
|
|
||
| // why not write `fnRef.current = fn`? | ||
| // https://github.com/alibaba/hooks/issues/728 | ||
| fnRef.current = useMemo(() => fn, [fn]); | ||
|
|
||
| const memoizedFn = useRef<T>(); | ||
| if (!memoizedFn.current) { | ||
| // eslint-disable-next-line func-names | ||
| memoizedFn.current = function (...args) { | ||
| // eslint-disable-next-line @typescript-eslint/no-invalid-this | ||
| return fnRef.current.apply(this, args); | ||
| } as T; | ||
| } | ||
|
|
||
| return memoizedFn.current; | ||
| } | ||
|
|
||
| export default useMemoizedFn; |
This file was deleted.
Oops, something went wrong.