refactor 'rows' -> 'data'

This commit is contained in:
Chris Kruining 2025-01-03 04:57:05 +01:00
parent 7f436227d9
commit d39f88a754
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
5 changed files with 15 additions and 16 deletions

View file

@ -31,30 +31,30 @@ const GridContext = createContext<GridContextType<any>>();
const useGrid = () => useContext(GridContext)!; const useGrid = () => useContext(GridContext)!;
type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], rows: DataSet<T>, api?: (api: GridApi<T>) => any }; type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], data: DataSet<T>, api?: (api: GridApi<T>) => any };
export function Grid<T extends Record<string, any>>(props: GridProps<T>) { export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
const [table, setTable] = createSignal<TableApi<T>>(); const [table, setTable] = createSignal<TableApi<T>>();
const rows = createMemo(() => props.rows); const data = createMemo(() => props.data);
const columns = createMemo(() => props.columns as TableColumn<T>[]); const columns = createMemo(() => props.columns as TableColumn<T>[]);
const mutations = createMemo(() => rows().mutations()); const mutations = createMemo(() => data().mutations());
const ctx: GridContextType<T> = { const ctx: GridContextType<T> = {
mutations, mutations,
selection: createMemo(() => table()?.selection() ?? []), selection: createMemo(() => table()?.selection() ?? []),
mutate<K extends keyof T>(row: number, column: K, value: T[K]) { mutate<K extends keyof T>(row: number, column: K, value: T[K]) {
rows().mutate(row, column, value); data().mutate(row, column, value);
}, },
remove(indices: number[]) { remove(indices: number[]) {
rows().remove(indices); data().remove(indices);
table()?.clear(); table()?.clear();
}, },
insert(row: T, at?: number) { insert(row: T, at?: number) {
rows().insert(row, at); data().insert(row, at);
}, },
addColumn(column: keyof T, value: T[keyof T]): void { addColumn(column: keyof T, value: T[keyof T]): void {
@ -81,7 +81,7 @@ export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
return <GridContext.Provider value={ctx}> return <GridContext.Provider value={ctx}>
<Api api={props.api} table={table()} /> <Api api={props.api} table={table()} />
<Table api={setTable} class={`${css.grid} ${props.class}`} rows={rows()} columns={columns()} selectionMode={SelectionMode.Multiple}>{ <Table api={setTable} class={`${css.grid} ${props.class}`} rows={data()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
cellRenderers() cellRenderers()
}</Table> }</Table>
</GridContext.Provider>; </GridContext.Provider>;
@ -107,7 +107,7 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Gri
gridContext.insert(row, at); gridContext.insert(row, at);
}, },
addColumn(column: keyof T): void { addColumn(column: keyof T): void {
// gridContext.addColumn(column, value); gridContext.addColumn(column, value);
}, },
}; };
}); });

View file

@ -91,6 +91,8 @@ export const createDataSet = <T extends Record<string, any>>(data: T[], initialO
value = implementation(value as DataSetRowNode<number, T>[]); value = implementation(value as DataSetRowNode<number, T>[]);
} }
console.log('dataset => nodes', value);
return value as DataSetNode<keyof T, T>[]; return value as DataSetNode<keyof T, T>[];
}); });
@ -101,9 +103,6 @@ export const createDataSet = <T extends Record<string, any>>(data: T[], initialO
return deepDiff(state.snapshot, state.value).toArray(); return deepDiff(state.snapshot, state.value).toArray();
}); });
const sorting = createMemo(() => state.sorting);
const grouping = createMemo(() => state.grouping);
const set: DataSet<T> = { const set: DataSet<T> = {
data, data,
nodes, nodes,

View file

@ -73,12 +73,12 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
<SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}> <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
<Api api={props.api} /> <Api api={props.api} />
<InnerTable class={props.class} summary={props.summary} rows={rows()} /> <InnerTable class={props.class} summary={props.summary} data={rows()} />
</SelectionProvider> </SelectionProvider>
</TableContext.Provider>; </TableContext.Provider>;
}; };
type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: DataSet<T> }; type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, data: DataSet<T> };
function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) { function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
const table = useTable<T>(); const table = useTable<T>();
@ -97,7 +97,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
<Head /> <Head />
<tbody class={css.main}> <tbody class={css.main}>
<For each={props.rows.nodes() as DataSetNode<number, T>[]}>{ <For each={props.data.nodes() as DataSetNode<number, T>[]}>{
node => <Node node={node} depth={0} /> node => <Node node={node} depth={0} />
}</For> }</For>
</tbody> </tbody>

View file

@ -71,7 +71,7 @@ export function Grid(props: { class?: string, rows: Entry[], locales: string[],
}); });
}); });
return <GridComp rows={rows()} columns={columns()} api={setApi} />; return <GridComp data={rows()} columns={columns()} api={setApi} />;
}; };
const TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => { const TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => {

View file

@ -90,7 +90,7 @@ export default function GridExperiment() {
</Sidebar> </Sidebar>
<div class={css.content}> <div class={css.content}>
<Grid class={css.table} api={setApi} rows={rows} columns={columns} groupBy="country" /> <Grid class={css.table} api={setApi} data={rows} columns={columns} groupBy="country" />
<fieldset class={css.mutaions}> <fieldset class={css.mutaions}>
<legend>Mutations ({mutations().length})</legend> <legend>Mutations ({mutations().length})</legend>