76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
|
|
import type { GridlerColumns } from '../Column';
|
|
|
|
import { type FilterOption, type SortOption, useGridlerStore } from '../GridlerStore';
|
|
|
|
export interface GlidlerLocalDataAdaptorProps<T = unknown> {
|
|
data: Array<T>;
|
|
onColumnFilter?: (
|
|
colFilters: Array<FilterOption> | undefined,
|
|
cols: GridlerColumns | undefined,
|
|
data: Array<T>
|
|
) => Array<T>;
|
|
onColumnSort?: (
|
|
colSort: Array<SortOption> | undefined,
|
|
cols: GridlerColumns | undefined,
|
|
data: Array<T>
|
|
) => Array<T>;
|
|
}
|
|
|
|
//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
|
|
function _GlidlerLocalDataAdaptor<T = unknown>(props: GlidlerLocalDataAdaptorProps<T>) {
|
|
const [setState, getState, mounted] = useGridlerStore((s) => [s.setState, s.getState, s.mounted]);
|
|
|
|
const { colFilters, colSort, columns } = useGridlerStore((s) => ({
|
|
colFilters: s.colFilters,
|
|
colOrder: s.colOrder,
|
|
colSize: s.colSize,
|
|
colSort: s.colSort,
|
|
columns: s.columns,
|
|
}));
|
|
|
|
const refChanged = React.useRef({
|
|
colFilters: colFilters,
|
|
colSort: colSort,
|
|
});
|
|
|
|
const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
|
|
const pageSize = getState('pageSize');
|
|
|
|
if (!(props.data && Array.isArray(props.data))) {
|
|
return [];
|
|
}
|
|
|
|
setState('total_rows', props.data.length);
|
|
return props.data.slice(index * (pageSize ?? 50), (index + 1) * (pageSize ?? 50));
|
|
};
|
|
|
|
useEffect(() => {
|
|
setState('useAPIQuery', useAPIQuery);
|
|
}, [mounted, setState]);
|
|
|
|
useEffect(() => {
|
|
if (props.onColumnSort && colSort !== refChanged?.current?.colSort) {
|
|
const sortedData = props.onColumnSort(colSort, columns, props.data as Array<T>);
|
|
setState('total_rows', sortedData.length);
|
|
setState('data', sortedData);
|
|
refChanged.current.colSort = colSort;
|
|
}
|
|
}, [colSort, props.onColumnSort]);
|
|
|
|
useEffect(() => {
|
|
if (props.onColumnFilter && colFilters !== refChanged?.current?.colFilters) {
|
|
const filteredData = props.onColumnFilter(colFilters, columns, props.data as Array<T>);
|
|
setState('total_rows', filteredData.length);
|
|
setState('data', filteredData);
|
|
refChanged.current.colFilters = colFilters;
|
|
}
|
|
}, [colFilters, props.onColumnFilter]);
|
|
|
|
return <></>;
|
|
}
|
|
export const GlidlerLocalDataAdaptor = React.memo(_GlidlerLocalDataAdaptor);
|
|
|
|
GlidlerLocalDataAdaptor.displayName = 'Gridler-GlidlerLocalDataAdaptor';
|