diff --git a/src/Gridler/components/LocalDataAdaptor.tsx b/src/Gridler/components/LocalDataAdaptor.tsx new file mode 100644 index 0000000..955e9a4 --- /dev/null +++ b/src/Gridler/components/LocalDataAdaptor.tsx @@ -0,0 +1,42 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { useEffect } from 'react'; + +import type { APIOptions } from '../utils/types'; + +import { useGridlerStore } from './Store'; + +interface LocalDataAdaptorProps extends APIOptions { + data: Array; +} + +//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders. +export const LocalDataAdaptor = React.memo((props: LocalDataAdaptorProps) => { + const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [ + s.setStateFN, + s.setState, + s.getState, + s.addError, + s.mounted + ]); + + const useAPIQuery: (index: number) => Promise = async (index: number) => { + const colSort = getState('colSort'); + const pageSize = getState('pageSize'); + const colFilters = getState('colFilters'); + const _active_requests = getState('_active_requests'); + + 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); + }, [props.url, props.authtoken, mounted, setState]); + + return <>; +}); diff --git a/src/Gridler/hooks/use-grid-theme.ts b/src/Gridler/hooks/use-grid-theme.ts index 404f019..507cba2 100644 --- a/src/Gridler/hooks/use-grid-theme.ts +++ b/src/Gridler/hooks/use-grid-theme.ts @@ -36,7 +36,7 @@ export const useGridTheme = () => { const gridThemeDark = { accentColor: 'none', - accentLight: '#2824ab3c', + accentLight: theme.colors.blue[9], baseFontStyle: '13px', @@ -58,7 +58,7 @@ export const useGridTheme = () => { 'Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif', headerFontStyle: '500 13px', - linkColor: '#4F5DFF', + linkColor: theme.colors.blue[4], textBubble: '#ffffff',