refactor 'rows' -> 'data'
This commit is contained in:
parent
7f436227d9
commit
d39f88a754
5 changed files with 15 additions and 16 deletions
|
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue