[Feature] Add language #19
17 changed files with 360 additions and 229 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -2,14 +2,14 @@
|
|||
"name": "calque",
|
||||
"dependencies": {
|
||||
"@solidjs/meta": "^0.29.4",
|
||||
"@solidjs/router": "^0.15.1",
|
||||
"@solidjs/router": "^0.15.2",
|
||||
"@solidjs/start": "^1.0.10",
|
||||
"dexie": "^4.0.10",
|
||||
"iterator-helpers-polyfill": "^3.0.1",
|
||||
"sitemap": "^8.0.0",
|
||||
"solid-icons": "^1.1.0",
|
||||
"solid-js": "^1.9.3",
|
||||
"ts-pattern": "^5.5.0",
|
||||
"ts-pattern": "^5.6.0",
|
||||
"vinxi": "^0.4.3"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
10
src/app.css
10
src/app.css
|
|
@ -150,6 +150,16 @@ code {
|
|||
border-radius: var(--radii-m);
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: oklch(from var(--succ) l c h / .1);
|
||||
color: oklch(from var(--succ) .1 .2 h);
|
||||
}
|
||||
|
||||
del {
|
||||
background-color: oklch(from var(--fail) l c h / .1);
|
||||
color: oklch(from var(--fail) .1 .2 h);
|
||||
}
|
||||
|
||||
@property --hue {
|
||||
syntax: '<angle>';
|
||||
inherits: false;
|
||||
|
|
|
|||
|
|
@ -71,14 +71,14 @@ export const Tree: Component<{ entries: Entry[], children: readonly [(folder: Ac
|
|||
const _Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
|
||||
const context = useContext(TreeContext);
|
||||
|
||||
return <For each={props.entries.sort(sort_by('kind'))}>{
|
||||
return <For each={props.entries.toSorted(sort_by('kind'))}>{
|
||||
entry => <>
|
||||
<Show when={entry.kind === 'folder' ? entry : undefined}>{
|
||||
folder => <Folder folder={folder()} children={props.children} />
|
||||
}</Show>
|
||||
|
||||
<Show when={entry.kind === 'file' ? entry : undefined}>{
|
||||
file => <span use:selectable={{ value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
|
||||
file => <span use:selectable={{ key: file().id, value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
|
||||
}</Show>
|
||||
</>
|
||||
}</For>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
import { Accessor, createContext, createEffect, createMemo, createSignal, JSX, useContext } from "solid-js";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { deepCopy, deepDiff, Mutation } from "~/utilities";
|
||||
import { SelectionMode, Table, Column as TableColumn, TableApi } from "~/components/table";
|
||||
import { SelectionMode, Table, Column as TableColumn, TableApi, CellEditors, CellEditor, createDataSet, DataSet, DataSetNode } from "~/components/table";
|
||||
import css from './grid.module.css';
|
||||
|
||||
export interface Column<T extends Record<string, any>> extends TableColumn<T> {
|
||||
editor?: (cell: { id: keyof T, value: T[keyof T] }) => JSX.Element;
|
||||
editor?: (cell: { row: number, column: keyof T, value: T[keyof T], mutate: (next: T[keyof T]) => any }) => JSX.Element;
|
||||
}
|
||||
|
||||
export interface GridApi<T extends Record<string, any>> extends TableApi<T> {
|
||||
readonly mutations: Accessor<Mutation[]>;
|
||||
remove(keys: string[]): void;
|
||||
insert(prop: string): void;
|
||||
addColumn(name: string): void;
|
||||
remove(keys: number[]): void;
|
||||
insert(row: T, at?: number): void;
|
||||
addColumn(column: keyof T): void;
|
||||
}
|
||||
|
||||
interface GridContextType<T extends Record<string, any>> {
|
||||
readonly rows: Accessor<T[]>;
|
||||
readonly rows: Accessor<DataSetNode<keyof T, T>[]>;
|
||||
readonly mutations: Accessor<Mutation[]>;
|
||||
// readonly selection: Accessor<SelectionItem[]>;
|
||||
mutate(prop: string, value: string): void;
|
||||
remove(props: string[]): void;
|
||||
insert(prop: string): void;
|
||||
addColumn(name: string): void;
|
||||
readonly selection: TableApi<T>['selection'];
|
||||
mutate<K extends keyof T>(row: number, column: K, value: T[K]): void;
|
||||
remove(rows: number[]): void;
|
||||
insert(row: T, at?: number): void;
|
||||
addColumn(column: keyof T, value: T[keyof T]): void;
|
||||
}
|
||||
|
||||
const GridContext = createContext<GridContextType<any>>();
|
||||
|
|
@ -30,65 +30,68 @@ const GridContext = createContext<GridContextType<any>>();
|
|||
const useGrid = () => useContext(GridContext)!;
|
||||
|
||||
type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], rows: T[], api?: (api: GridApi<T>) => any };
|
||||
// type GridState<T extends Record<string, any>> = { data: DataSet<T>, columns: Column<T>[], numberOfRows: number };
|
||||
|
||||
export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
|
||||
const [table, setTable] = createSignal<TableApi<T>>();
|
||||
const [state, setState] = createStore<{ rows: T[], columns: Column<T>[], snapshot: T[], numberOfRows: number }>({
|
||||
rows: [],
|
||||
columns: [],
|
||||
snapshot: [],
|
||||
numberOfRows: 0,
|
||||
});
|
||||
const data = createMemo(() => createDataSet(props.rows));
|
||||
|
||||
const mutations = createMemo(() => {
|
||||
// enumerate all values to make sure the memo is recalculated on any change
|
||||
Object.values(state.rows).map(entry => Object.values(entry));
|
||||
|
||||
return deepDiff(state.snapshot, state.rows).toArray();
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
|
||||
setState('snapshot', props.rows);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setState('columns', props.columns);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfRows', Object.keys(state.rows).length);
|
||||
});
|
||||
|
||||
const rows = createMemo(() => state.rows);
|
||||
const columns = createMemo(() => state.columns);
|
||||
const rows = createMemo(() => data().value());
|
||||
const mutations = createMemo(() => data().mutations());
|
||||
const columns = createMemo(() => props.columns);
|
||||
|
||||
const ctx: GridContextType<T> = {
|
||||
rows,
|
||||
mutations,
|
||||
// selection,
|
||||
selection: createMemo(() => table()?.selection() ?? []),
|
||||
|
||||
mutate(prop: string, value: string) {
|
||||
mutate<K extends keyof T>(row: number, column: K, value: T[K]) {
|
||||
data().mutate(row, column, value);
|
||||
},
|
||||
|
||||
remove(props: string[]) {
|
||||
remove(rows: number[]) {
|
||||
// setState('rows', (r) => r.filter((_, i) => rows.includes(i) === false));
|
||||
},
|
||||
|
||||
insert(prop: string) {
|
||||
insert(row: T, at?: number) {
|
||||
if (at === undefined) {
|
||||
// setState('rows', state.rows.length, row);
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
addColumn(id: keyof T): void {
|
||||
addColumn(column: keyof T, value: T[keyof T]): void {
|
||||
// setState('rows', { from: 0, to: state.rows.length - 1 }, column as any, value);
|
||||
},
|
||||
};
|
||||
|
||||
const cellEditors = createMemo(() => Object.fromEntries(state.columns.filter(c => c.editor !== undefined).map(c => [c.id, c.editor!] as const)));
|
||||
const cellEditors = createMemo(() => Object.fromEntries(
|
||||
props.columns
|
||||
.filter(c => c.editor !== undefined)
|
||||
.map(c => {
|
||||
const Editor: CellEditor<T, keyof T> = ({ row, column, value }) => {
|
||||
const mutate = (next: T[keyof T]) => {
|
||||
console.log('KAAS', { next })
|
||||
|
||||
ctx.mutate(row, column, next);
|
||||
};
|
||||
|
||||
return c.editor!({ row, column, value, mutate });
|
||||
};
|
||||
|
||||
return [c.id, Editor] as const;
|
||||
})
|
||||
) as any);
|
||||
|
||||
return <GridContext.Provider value={ctx}>
|
||||
<Api api={props.api} table={table()} />
|
||||
|
||||
<Table api={setTable} class={`${css.grid} ${props.class}`} rows={rows()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
|
||||
cellEditors()
|
||||
}</Table>
|
||||
<form style="all: inherit; display: contents;">
|
||||
<Table api={setTable} class={`${css.grid} ${props.class}`} rows={data()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
|
||||
cellEditors()
|
||||
}</Table>
|
||||
</form>
|
||||
</GridContext.Provider>;
|
||||
};
|
||||
|
||||
|
|
@ -105,14 +108,14 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Gri
|
|||
return {
|
||||
...table,
|
||||
mutations: gridContext.mutations,
|
||||
remove(props: string[]) {
|
||||
gridContext.remove(props);
|
||||
remove(rows: number[]) {
|
||||
gridContext.remove(rows);
|
||||
},
|
||||
insert(prop: string) {
|
||||
gridContext.insert(prop);
|
||||
insert(row: T, at?: number) {
|
||||
gridContext.insert(row, at);
|
||||
},
|
||||
addColumn(name: string): void {
|
||||
gridContext.addColumn(name);
|
||||
addColumn(column: keyof T, value: T[keyof T]): void {
|
||||
gridContext.addColumn(column, value);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode } from '../table';
|
||||
export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from '../table';
|
||||
export type { GridApi, Column } from './grid';
|
||||
export { Grid } from './grid';
|
||||
|
|
@ -1,27 +1,115 @@
|
|||
import { Accessor, createMemo } from "solid-js";
|
||||
import { createStore, NotWrappable, StoreSetter } from "solid-js/store";
|
||||
import { snapshot } from "vinxi/dist/types/runtime/storage";
|
||||
import { deepCopy, deepDiff, Mutation } from "~/utilities";
|
||||
|
||||
|
||||
export type DataSetRowNode<T> = { kind: 'row', key: string, value: T }
|
||||
export type DataSetGroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: DataSetNode<T>[] };
|
||||
export type DataSetNode<T> = DataSetRowNode<T> | DataSetGroupNode<T>;
|
||||
export type DataSetRowNode<K, T> = { kind: 'row', key: K, value: T }
|
||||
export type DataSetGroupNode<K, T> = { kind: 'group', key: K, groupedBy: keyof T, nodes: DataSetNode<K, T>[] };
|
||||
export type DataSetNode<K, T> = DataSetRowNode<K, T> | DataSetGroupNode<K, T>;
|
||||
|
||||
export type DataSet<T extends Record<string, any>> = DataSetNode<T>[];
|
||||
export interface SortingFunction<T> {
|
||||
(a: T, b: T): -1 | 0 | 1;
|
||||
}
|
||||
export interface SortOptions<T extends Record<string, any>> {
|
||||
by: keyof T;
|
||||
reversed: boolean;
|
||||
with?: SortingFunction<T>;
|
||||
}
|
||||
|
||||
export const createDataSet = <T extends Record<string, any>>(data: T[]): DataSetNode<T>[] => {
|
||||
return Object.entries(data).map<DataSetRowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
|
||||
};
|
||||
export interface GroupingFunction<T> {
|
||||
(nodes: DataSetRowNode<keyof T, T>[]): DataSetNode<keyof T, T>[];
|
||||
}
|
||||
export interface GroupOptions<T extends Record<string, any>> {
|
||||
by: keyof T;
|
||||
with: GroupingFunction<T>;
|
||||
}
|
||||
interface DataSetState<T extends Record<string, any>> {
|
||||
value: DataSetRowNode<keyof T, T>[];
|
||||
snapshot: DataSetRowNode<keyof T, T>[];
|
||||
sorting?: SortOptions<T>;
|
||||
grouping?: GroupOptions<T>;
|
||||
}
|
||||
|
||||
type SortingFunction<T> = (a: T, b: T) => -1 | 0 | 1;
|
||||
type SortOptions<T extends Record<string, any>> = { by: keyof T, reversed: boolean, with: SortingFunction<T> };
|
||||
export const toSorted = <T extends Record<string, any>>(dataSet: DataSet<T>, sort: SortOptions<T>): DataSet<T> => {
|
||||
const sorted = dataSet.toSorted((a, b) => sort.with(a.value[sort.by], b.value[sort.by]));
|
||||
export interface DataSet<T extends Record<string, any>> {
|
||||
data: T[];
|
||||
value: Accessor<DataSetNode<keyof T, T>[]>;
|
||||
mutations: Accessor<Mutation[]>;
|
||||
sort: Accessor<SortOptions<T> | undefined>;
|
||||
|
||||
if (sort.reversed) {
|
||||
sorted.reverse();
|
||||
}
|
||||
// mutate<K extends keyof T>(index: number, value: T): void;
|
||||
mutate<K extends keyof T>(index: number, prop: K, value: T[K]): void;
|
||||
|
||||
return sorted;
|
||||
};
|
||||
setSorting(options: SortOptions<T> | undefined): void;
|
||||
setGrouping(options: GroupOptions<T> | undefined): void;
|
||||
}
|
||||
|
||||
type GroupingFunction<T> = (nodes: DataSetRowNode<T>[]) => DataSetNode<T>[];
|
||||
type GroupOptions<T extends Record<string, any>> = { by: keyof T, with: GroupingFunction<T> };
|
||||
export const toGrouped = <T extends Record<string, any>>(dataSet: DataSet<T>, group: GroupOptions<T>): DataSet<T> => group.with(dataSet as any);
|
||||
const defaultComparer = <T>(a: T, b: T) => a < b ? -1 : a > b ? 1 : 0;
|
||||
function defaultGroupingFunction<T>(groupBy: keyof T): GroupingFunction<T> {
|
||||
return (nodes: DataSetRowNode<keyof T, T>[]): DataSetNode<keyof T, T>[] => Object.entries(Object.groupBy(nodes, r => r.value[groupBy] as PropertyKey))
|
||||
.map(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! } as DataSetGroupNode<keyof T, T>));
|
||||
}
|
||||
|
||||
export const createDataSet = <T extends Record<string, any>>(data: T[]): DataSet<T> => {
|
||||
const nodes = data.map<DataSetRowNode<keyof T, T>>((value, key) => ({ kind: 'row', key: key as keyof T, value }));
|
||||
|
||||
const [state, setState] = createStore<DataSetState<T>>({
|
||||
value: deepCopy(nodes),
|
||||
snapshot: nodes,
|
||||
sorting: undefined,
|
||||
grouping: undefined,
|
||||
});
|
||||
|
||||
const value = createMemo(() => {
|
||||
const sorting = state.sorting;
|
||||
const grouping = state.grouping;
|
||||
|
||||
let value = state.value as DataSetNode<keyof T, T>[];
|
||||
|
||||
if (sorting) {
|
||||
const comparer = sorting.with ?? defaultComparer;
|
||||
|
||||
value = value.filter(entry => entry.kind === 'row').toSorted((a, b) => comparer(a.value[sorting.by], b.value[sorting.by]));
|
||||
|
||||
if (sorting.reversed) {
|
||||
value.reverse();
|
||||
}
|
||||
}
|
||||
|
||||
if (grouping) {
|
||||
const implementation = grouping.with ?? defaultGroupingFunction(grouping.by);
|
||||
|
||||
value = implementation(value as DataSetRowNode<keyof T, T>[]);
|
||||
}
|
||||
|
||||
return value;
|
||||
});
|
||||
|
||||
const mutations = createMemo(() => {
|
||||
// enumerate all values to make sure the memo is recalculated on any change
|
||||
Object.values(state.value).map(entry => Object.values(entry));
|
||||
|
||||
return deepDiff(state.snapshot, state.value).toArray();
|
||||
});
|
||||
const sort = createMemo(() => state.sorting);
|
||||
|
||||
return {
|
||||
data,
|
||||
value,
|
||||
mutations,
|
||||
sort,
|
||||
|
||||
mutate(index, prop, value) {
|
||||
console.log({ index, prop, value });
|
||||
// setState('value', index, 'value', prop as any, value);
|
||||
},
|
||||
|
||||
setSorting(options) {
|
||||
setState('sorting', options);
|
||||
},
|
||||
|
||||
setGrouping(options) {
|
||||
setState('grouping', options)
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
export type { Column, TableApi } from './table';
|
||||
export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
|
||||
export type { Column, TableApi, CellEditor, CellEditors } from './table';
|
||||
export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from './dataset';
|
||||
export { SelectionMode, Table } from './table';
|
||||
export { createDataSet, toSorted, toGrouped } from './dataset';
|
||||
export { createDataSet } from './dataset';
|
||||
|
|
@ -1,50 +1,42 @@
|
|||
import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
|
||||
import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
|
||||
import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
|
||||
import { createStore } from "solid-js/store";
|
||||
import { selectable, SelectionItem, SelectionProvider, useSelection } from "~/features/selectable";
|
||||
import { DataSetRowNode, DataSetNode, DataSet } from './dataset';
|
||||
import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
|
||||
import css from './table.module.css';
|
||||
|
||||
selectable
|
||||
selectable;
|
||||
|
||||
export type Column<T> = {
|
||||
id: keyof T,
|
||||
label: string,
|
||||
sortable?: boolean,
|
||||
group?: string,
|
||||
readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
|
||||
readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
|
||||
};
|
||||
|
||||
type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
|
||||
export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element };
|
||||
export type CellEditor<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
|
||||
export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: CellEditor<T, K> };
|
||||
|
||||
export interface TableApi<T extends Record<string, any>> {
|
||||
readonly selection: Accessor<SelectionItem<T>[]>;
|
||||
readonly rows: Accessor<T[]>;
|
||||
readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
|
||||
readonly rows: Accessor<DataSet<T>>;
|
||||
readonly columns: Accessor<Column<T>[]>;
|
||||
selectAll(): void;
|
||||
clear(): void;
|
||||
}
|
||||
|
||||
const TableContext = createContext<{
|
||||
readonly rows: Accessor<any[]>,
|
||||
readonly columns: Accessor<Column<any>[]>,
|
||||
readonly selection: Accessor<any[]>,
|
||||
interface TableContextType<T extends Record<string, any>> {
|
||||
readonly rows: Accessor<DataSet<T>>,
|
||||
readonly columns: Accessor<Column<T>[]>,
|
||||
readonly selection: Accessor<SelectionItem<keyof T, T>[]>,
|
||||
readonly selectionMode: Accessor<SelectionMode>,
|
||||
readonly groupBy: Accessor<string | undefined>,
|
||||
readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
|
||||
readonly cellRenderers: Accessor<CellEditors<any>>,
|
||||
|
||||
setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
|
||||
}>();
|
||||
|
||||
const useTable = () => useContext(TableContext)!
|
||||
|
||||
function defaultGroupingFunction<T>(groupBy: keyof T) {
|
||||
return (nodes: DataSetRowNode<T>[]): DataSetNode<T>[] => Object.entries(Object.groupBy<any, DataSetRowNode<T>>(nodes, r => r.value[groupBy]))
|
||||
.map<DataSetGroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
|
||||
readonly cellRenderers: Accessor<CellEditors<T>>,
|
||||
}
|
||||
|
||||
const TableContext = createContext<TableContextType<any>>();
|
||||
|
||||
const useTable = <T extends Record<string, any>>() => useContext(TableContext)! as TableContextType<T>
|
||||
|
||||
export enum SelectionMode {
|
||||
None,
|
||||
Single,
|
||||
|
|
@ -53,46 +45,27 @@ export enum SelectionMode {
|
|||
type TableProps<T extends Record<string, any>> = {
|
||||
class?: string,
|
||||
summary?: string,
|
||||
rows: T[],
|
||||
rows: DataSet<T>,
|
||||
columns: Column<T>[],
|
||||
groupBy?: keyof T,
|
||||
sort?: {
|
||||
by: keyof T,
|
||||
reversed?: boolean,
|
||||
},
|
||||
selectionMode?: SelectionMode,
|
||||
children?: CellEditors<T>,
|
||||
api?: (api: TableApi<T>) => any,
|
||||
};
|
||||
|
||||
export function Table<T extends Record<string, any>>(props: TableProps<T>) {
|
||||
const [selection, setSelection] = createSignal<T[]>([]);
|
||||
const [state, setState] = createStore({
|
||||
sort: props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined,
|
||||
});
|
||||
const [selection, setSelection] = createSignal<SelectionItem<keyof T, T>[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
setState('sort', props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined);
|
||||
});
|
||||
|
||||
const rows = createMemo<T[]>(() => props.rows ?? []);
|
||||
const rows = createMemo(() => props.rows);
|
||||
const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
|
||||
const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
|
||||
const groupBy = createMemo(() => props.groupBy as string | undefined);
|
||||
const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
|
||||
|
||||
const context = {
|
||||
const context: TableContextType<T> = {
|
||||
rows,
|
||||
columns,
|
||||
selection,
|
||||
selectionMode,
|
||||
groupBy,
|
||||
sort: createMemo(() => state.sort),
|
||||
cellRenderers,
|
||||
|
||||
setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined) {
|
||||
setState('sort', setter);
|
||||
},
|
||||
};
|
||||
|
||||
return <TableContext.Provider value={context}>
|
||||
|
|
@ -104,30 +77,13 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
|
|||
</TableContext.Provider>;
|
||||
};
|
||||
|
||||
type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: T[] };
|
||||
type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: DataSet<T> };
|
||||
|
||||
function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
|
||||
const table = useTable();
|
||||
const table = useTable<T>();
|
||||
|
||||
const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
|
||||
const columnCount = createMemo(() => table.columns().length);
|
||||
const nodes = createMemo<DataSetNode<T>[]>(() => {
|
||||
const columns = table.columns();
|
||||
const groupBy = table.groupBy();
|
||||
const sort = table.sort();
|
||||
|
||||
let dataset = createDataSet(props.rows);
|
||||
|
||||
if (sort) {
|
||||
dataset = toSorted(dataset, { by: sort.by, reversed: sort.reversed ?? false, with: (a, b) => a < b ? -1 : a > b ? 1 : 0 })
|
||||
}
|
||||
|
||||
if (groupBy) {
|
||||
dataset = toGrouped(dataset, { by: groupBy, with: columns.find(({ id }) => id === groupBy)?.groupBy ?? defaultGroupingFunction(groupBy) });
|
||||
}
|
||||
|
||||
return dataset;
|
||||
});
|
||||
|
||||
return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
|
||||
<Show when={props.summary}>{
|
||||
|
|
@ -138,7 +94,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
|
|||
<Head />
|
||||
|
||||
<tbody class={css.main}>
|
||||
<For each={nodes()}>{
|
||||
<For each={props.rows.value()}>{
|
||||
node => <Node node={node} depth={0} />
|
||||
}</For>
|
||||
</tbody>
|
||||
|
|
@ -154,13 +110,11 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
|
|||
};
|
||||
|
||||
function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
|
||||
const table = useTable();
|
||||
const selectionContext = useSelection<SelectionItem<T>>();
|
||||
const table = useTable<T>();
|
||||
const selectionContext = useSelection<T>();
|
||||
|
||||
const api: TableApi<T> = {
|
||||
selection: createMemo(() => {
|
||||
return selectionContext.selection();
|
||||
}),
|
||||
selection: selectionContext.selection,
|
||||
rows: table.rows,
|
||||
columns: table.columns,
|
||||
selectAll() {
|
||||
|
|
@ -209,7 +163,7 @@ function Head(props: {}) {
|
|||
|
||||
<For each={table.columns()}>{
|
||||
({ id, label, sortable }) => {
|
||||
const sort = createMemo(() => table.sort());
|
||||
const sort = createMemo(() => table.rows().sort());
|
||||
const by = String(id);
|
||||
|
||||
const onPointerDown = (e: PointerEvent) => {
|
||||
|
|
@ -245,7 +199,7 @@ function Head(props: {}) {
|
|||
</thead>;
|
||||
};
|
||||
|
||||
function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
|
||||
function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T, T>, depth: number, groupedBy?: keyof T }) {
|
||||
return <Switch>
|
||||
<Match when={props.node.kind === 'row' ? props.node : undefined}>{
|
||||
row => <Row key={row().key} value={row().value} depth={props.depth} groupedBy={props.groupedBy} />
|
||||
|
|
@ -257,11 +211,11 @@ function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, dept
|
|||
</Switch>;
|
||||
}
|
||||
|
||||
function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number, groupedBy?: keyof T }) {
|
||||
const table = useTable();
|
||||
const context = useSelection();
|
||||
function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, depth: number, groupedBy?: keyof T }) {
|
||||
const table = useTable<T>();
|
||||
const context = useSelection<T>();
|
||||
const columns = table.columns;
|
||||
|
||||
const values = createMemo(() => Object.entries(props.value));
|
||||
const isSelected = context.isSelected(props.key);
|
||||
|
||||
return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
|
||||
|
|
@ -271,17 +225,17 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
|
|||
</th>
|
||||
</Show>
|
||||
|
||||
<For each={values()}>{
|
||||
([k, value]) => <td class={css.cell}>{table.cellRenderers()[k]?.({ value }) ?? value}</td>
|
||||
<For each={columns()}>{
|
||||
({ id }) => <td class={'css.cell'}>{table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id]}</td>
|
||||
}</For>
|
||||
</tr>;
|
||||
};
|
||||
|
||||
function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {
|
||||
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
|
||||
const table = useTable();
|
||||
|
||||
return <details open>
|
||||
<summary style={{ '--depth': props.depth }}>{props.key}</summary>
|
||||
<summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
|
||||
|
||||
<For each={props.nodes}>{
|
||||
node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default createHandler(({ nonce }) => {
|
|||
// style: `${base} data: `,
|
||||
} as const;
|
||||
|
||||
event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
|
||||
// event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
|
||||
|
||||
return { nonce };
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, Setter, Signal, useContext } from "solid-js";
|
||||
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, ParentProps, Setter, Signal, useContext } from "solid-js";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { isServer } from "solid-js/web";
|
||||
import css from "./index.module.css";
|
||||
|
|
@ -16,26 +16,33 @@ enum SelectionMode {
|
|||
Toggle,
|
||||
}
|
||||
|
||||
export interface SelectionContextType<T extends object = object> {
|
||||
readonly selection: Accessor<T[]>;
|
||||
export interface SelectionItem<K, T> {
|
||||
key: K;
|
||||
value: Accessor<T>;
|
||||
element: WeakRef<HTMLElement>;
|
||||
};
|
||||
|
||||
export interface SelectionContextType<T extends object> {
|
||||
readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
|
||||
readonly length: Accessor<number>;
|
||||
select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
|
||||
select(selection: (keyof T)[], options?: Partial<{ mode: SelectionMode }>): void;
|
||||
selectAll(): void;
|
||||
clear(): void;
|
||||
isSelected(key: string): Accessor<boolean>;
|
||||
isSelected(key: keyof T): Accessor<boolean>;
|
||||
}
|
||||
interface InternalSelectionContextType {
|
||||
interface InternalSelectionContextType<T extends object> {
|
||||
readonly latest: Signal<HTMLElement | undefined>,
|
||||
readonly modifier: Signal<Modifier>,
|
||||
readonly selectables: Signal<HTMLElement[]>,
|
||||
add(key: string, value: object, element: HTMLElement): void;
|
||||
readonly keyMap: Map<string, keyof T>,
|
||||
add(key: keyof T, value: Accessor<T>, element: HTMLElement): string;
|
||||
}
|
||||
export interface SelectionHandler<T extends object = object> {
|
||||
export interface SelectionHandler<T extends object> {
|
||||
(selection: T[]): any;
|
||||
}
|
||||
|
||||
const SelectionContext = createContext<SelectionContextType>();
|
||||
const InternalSelectionContext = createContext<InternalSelectionContextType>();
|
||||
const SelectionContext = createContext<SelectionContextType<any>>();
|
||||
const InternalSelectionContext = createContext<InternalSelectionContextType<any>>();
|
||||
|
||||
export function useSelection<T extends object = object>(): SelectionContextType<T> {
|
||||
const context = useContext(SelectionContext);
|
||||
|
|
@ -46,15 +53,17 @@ export function useSelection<T extends object = object>(): SelectionContextType<
|
|||
|
||||
return context as SelectionContextType<T>;
|
||||
};
|
||||
const useInternalSelection = () => useContext(InternalSelectionContext)!;
|
||||
|
||||
interface State {
|
||||
selection: string[];
|
||||
data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
|
||||
function useInternalSelection<T extends object>() {
|
||||
return useContext(InternalSelectionContext)! as InternalSelectionContextType<T>;
|
||||
}
|
||||
|
||||
export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: boolean }> = (props) => {
|
||||
const [state, setState] = createStore<State>({ selection: [], data: [] });
|
||||
interface State<T extends object> {
|
||||
selection: (keyof T)[];
|
||||
data: SelectionItem<keyof T, T>[];
|
||||
}
|
||||
|
||||
export function SelectionProvider<T extends object>(props: ParentProps<{ selection?: SelectionHandler<T>, multiSelect?: boolean }>) {
|
||||
const [state, setState] = createStore<State<T>>({ selection: [], data: [] });
|
||||
const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
|
||||
const length = createMemo(() => state.data.length);
|
||||
|
||||
|
|
@ -62,7 +71,7 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
|
|||
props.selection?.(selection().map(({ value }) => value()));
|
||||
});
|
||||
|
||||
const context: SelectionContextType = {
|
||||
const context: SelectionContextType<T> = {
|
||||
selection,
|
||||
length,
|
||||
select(selection, { mode = SelectionMode.Normal } = {}) {
|
||||
|
|
@ -92,17 +101,29 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
|
|||
clear() {
|
||||
setState('selection', []);
|
||||
},
|
||||
isSelected(key: string) {
|
||||
isSelected(key) {
|
||||
return createMemo(() => state.selection.includes(key));
|
||||
},
|
||||
};
|
||||
|
||||
const internal: InternalSelectionContextType = {
|
||||
const keyIdMap = new Map<keyof T, string>();
|
||||
const idKeyMap = new Map<string, keyof T>();
|
||||
const internal: InternalSelectionContextType<T> = {
|
||||
modifier: createSignal<Modifier>(Modifier.None),
|
||||
latest: createSignal<HTMLElement>(),
|
||||
selectables: createSignal<HTMLElement[]>([]),
|
||||
add(key: string, value: Accessor<any>, element: HTMLElement) {
|
||||
setState('data', data => [...data, { key, value, element: new WeakRef(element) }]);
|
||||
keyMap: idKeyMap,
|
||||
add(key, value, element) {
|
||||
if (keyIdMap.has(key) === false) {
|
||||
const id = createUniqueId();
|
||||
|
||||
keyIdMap.set(key, id);
|
||||
idKeyMap.set(id, key);
|
||||
}
|
||||
|
||||
setState('data', state.data.length, { key, value, element: new WeakRef(element) });
|
||||
|
||||
return keyIdMap.get(key)!;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -180,31 +201,31 @@ const Root: ParentComponent = (props) => {
|
|||
return <div ref={setRoot} tabIndex={0} onKeyDown={onKeyboardEvent} onKeyUp={onKeyboardEvent} class={css.root}>{c()}</div>;
|
||||
};
|
||||
|
||||
export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
|
||||
const context = useSelection();
|
||||
const internal = useInternalSelection();
|
||||
export function selectable<T extends object>(element: HTMLElement, options: Accessor<{ value: T, key: keyof T }>) {
|
||||
const context = useSelection<T>();
|
||||
const internal = useInternalSelection<T>();
|
||||
|
||||
const key = options().key ?? createUniqueId();
|
||||
const key = options().key;
|
||||
const value = createMemo(() => options().value);
|
||||
const isSelected = context.isSelected(key);
|
||||
|
||||
internal.add(key, value, element);
|
||||
const selectionKey = internal.add(key, value, element);
|
||||
|
||||
const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
|
||||
const createRange = (a?: HTMLElement, b?: HTMLElement): (keyof T)[] => {
|
||||
if (!a && !b) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!a) {
|
||||
return [b!.dataset.selecatableKey!];
|
||||
return [b!.dataset.selecatableKey! as keyof T];
|
||||
}
|
||||
|
||||
if (!b) {
|
||||
return [a!.dataset.selecatableKey!];
|
||||
return [a!.dataset.selecatableKey! as keyof T];
|
||||
}
|
||||
|
||||
if (a === b) {
|
||||
return [a!.dataset.selecatableKey!];
|
||||
return [a!.dataset.selecatableKey! as keyof T];
|
||||
}
|
||||
|
||||
const nodes = internal.selectables[0]();
|
||||
|
|
@ -212,7 +233,7 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
|
|||
const bIndex = nodes.indexOf(b);
|
||||
const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
|
||||
|
||||
return selection.map(n => n.dataset.selectionKey!);
|
||||
return selection.map(n => internal.keyMap.get(n.dataset.selecatableKey!)!);
|
||||
};
|
||||
|
||||
createRenderEffect(() => {
|
||||
|
|
@ -256,13 +277,13 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
|
|||
});
|
||||
|
||||
element.classList.add(css.selectable);
|
||||
element.dataset.selectionKey = key;
|
||||
element.dataset.selectionKey = selectionKey;
|
||||
};
|
||||
|
||||
declare module "solid-js" {
|
||||
namespace JSX {
|
||||
interface Directives {
|
||||
selectable: { value: object, key?: string };
|
||||
selectable: { value: object, key: any };
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/global.d.ts
vendored
14
src/global.d.ts
vendored
|
|
@ -4,10 +4,10 @@ interface FileSystemHandle {
|
|||
getUniqueId(): Promise<string>;
|
||||
}
|
||||
|
||||
declare module "solid-js" {
|
||||
namespace JSX {
|
||||
interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
|
||||
indeterminate?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
// declare module "solid-js" {
|
||||
// namespace JSX {
|
||||
// interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
|
||||
// indeterminate?: boolean;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -92,11 +92,15 @@ export default function Editor(props: ParentProps) {
|
|||
</nav>
|
||||
|
||||
<section>
|
||||
<ErrorBoundary fallback={err => <ErrorComp error={err} />}>
|
||||
<FilesProvider>
|
||||
{props.children}
|
||||
</FilesProvider>
|
||||
|
||||
{/* <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
|
||||
<FilesProvider>
|
||||
{props.children}
|
||||
</FilesProvider>
|
||||
</ErrorBoundary>
|
||||
</ErrorBoundary> */}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
@ -112,6 +116,8 @@ const ErrorComp: Component<{ error: Error }> = (props) => {
|
|||
cause => <>{cause().description}</>
|
||||
}</Show>
|
||||
|
||||
{props.error.stack}
|
||||
|
||||
<a href="/">Return to start</a>
|
||||
</div>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
z-index: 1;
|
||||
padding: var(--padding-xl);
|
||||
background-color: var(--surface-300);
|
||||
max-inline-size: 25vw;
|
||||
overflow: auto;
|
||||
|
||||
& > ul {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { Sidebar } from '~/components/sidebar';
|
||||
import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
|
||||
import { people, Person } from './experimental.data';
|
||||
import { Component, createEffect, createMemo, createSignal, For, Match, Switch } from 'solid-js';
|
||||
import { Created, debounce, Deleted, MutarionKind, Mutation, Updated } from '~/utilities';
|
||||
import { createDataSet, Table } from '~/components/table';
|
||||
import css from './grid.module.css';
|
||||
import { createMemo, createSignal } from 'solid-js';
|
||||
|
||||
export default function GridExperiment() {
|
||||
const columns: Column<Person>[] = [
|
||||
|
|
@ -27,7 +29,10 @@ export default function GridExperiment() {
|
|||
id: 'email',
|
||||
label: 'Email',
|
||||
sortable: true,
|
||||
editor: ({ value }) => <input value={value} />,
|
||||
editor: ({ value, mutate }) => <input value={value} oninput={debounce(e => {
|
||||
console.log('WHAAAAT????', e);
|
||||
return mutate(e.target.value.trim());
|
||||
}, 100)} />,
|
||||
},
|
||||
{
|
||||
id: 'address',
|
||||
|
|
@ -55,13 +60,46 @@ export default function GridExperiment() {
|
|||
|
||||
const mutations = createMemo(() => api()?.mutations() ?? [])
|
||||
|
||||
// createEffect(() => {
|
||||
// console.log(mutations());
|
||||
// });
|
||||
|
||||
return <div class={css.root}>
|
||||
<Sidebar as="aside" label={'Mutations'} class={css.sidebar}>
|
||||
{mutations().length}
|
||||
<Sidebar as="aside" label={'Grid options'} class={css.sidebar}>
|
||||
<fieldset>
|
||||
<legend>Commands</legend>
|
||||
|
||||
<button onclick={() => api()?.insert({ id: 'some guid', name: 'new person', address: '', country: '', currency: '', email: 'some@email.email', phone: '' })}>add row</button>
|
||||
<button onclick={() => api()?.remove(api()?.selection()?.map(i => i.key as any) ?? [])} disabled={api()?.selection().length === 0}>Remove {api()?.selection().length} items</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Selection ({api()?.selection().length})</legend>
|
||||
|
||||
<pre>{JSON.stringify(api()?.selection().map(i => i.key))}</pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Mutations ({mutations().length})</legend>
|
||||
|
||||
<Mutations mutations={mutations()} />
|
||||
</fieldset>
|
||||
</Sidebar>
|
||||
|
||||
<div class={css.content}>
|
||||
<Grid api={setApi} rows={people} columns={columns} groupBy="country" />
|
||||
</div>
|
||||
</div >;
|
||||
}
|
||||
}
|
||||
|
||||
type M = { kind: MutarionKind, key: string, original?: any, value?: any };
|
||||
const Mutations: Component<{ mutations: Mutation[] }> = (props) => {
|
||||
const columns: Column<M>[] = [{ id: 'key', label: 'Key' }, { id: 'original', label: 'original' }, { id: 'value', label: 'Value' }];
|
||||
|
||||
const rows = createMemo(() => createDataSet<M>(props.mutations));
|
||||
|
||||
return <Table rows={rows()} columns={columns} groupBy='kind'>{{
|
||||
original: ({ value }) => <del>{value}</del>,
|
||||
value: ({ value }) => <ins>{value}</ins>,
|
||||
}}</Table>
|
||||
};
|
||||
|
|
@ -1,19 +1,20 @@
|
|||
import { Sidebar } from '~/components/sidebar';
|
||||
import css from './table.module.css';
|
||||
import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
|
||||
import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, GroupOptions, SelectionMode, SortOptions, Table } from '~/components/table';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { Person, people } from './experimental.data';
|
||||
import css from './table.module.css';
|
||||
import { createEffect, createMemo, For } from 'solid-js';
|
||||
|
||||
export default function TableExperiment() {
|
||||
const columns: Column<Person>[] = [
|
||||
{
|
||||
id: 'id',
|
||||
label: '#',
|
||||
groupBy(rows: DataSetRowNode<Person>[]) {
|
||||
const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<Person>[] => nodes.every(n => n._key.includes('.') === false)
|
||||
groupBy(rows: DataSetRowNode<keyof Person, Person>[]) {
|
||||
const group = (nodes: (DataSetRowNode<keyof Person, Person> & { _key: string })[]): DataSetNode<keyof Person, Person>[] => nodes.every(n => n._key.includes('.') === false)
|
||||
? nodes
|
||||
: Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
|
||||
.map<DataSetGroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
|
||||
.map<DataSetGroupNode<keyof Person, Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
|
||||
|
||||
return group(rows.map(row => ({ ...row, _key: row.value.id })));
|
||||
},
|
||||
|
|
@ -50,10 +51,20 @@ export default function TableExperiment() {
|
|||
},
|
||||
];
|
||||
|
||||
const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({
|
||||
const [store, setStore] = createStore<{ selectionMode: SelectionMode, group?: GroupOptions<Person>, sort?: SortOptions<Person> }>({
|
||||
selectionMode: SelectionMode.None,
|
||||
// groupBy: 'value',
|
||||
// sortBy: 'key'
|
||||
group: undefined,
|
||||
sort: undefined,
|
||||
});
|
||||
|
||||
const rows = createMemo(() => createDataSet(people));
|
||||
|
||||
createEffect(() => {
|
||||
rows().setGrouping(store.group);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
rows().setSorting(store.sort);
|
||||
});
|
||||
|
||||
return <div class={css.root}>
|
||||
|
|
@ -74,7 +85,7 @@ export default function TableExperiment() {
|
|||
<label>
|
||||
Group by
|
||||
|
||||
<select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
|
||||
<select value={store.group?.by ?? ''} oninput={e => setStore('group', 'by', (e.target.value || undefined) as any)}>
|
||||
<option value=''>None</option>
|
||||
<For each={columns}>{
|
||||
column => <option value={column.id}>{column.label}</option>
|
||||
|
|
@ -89,7 +100,7 @@ export default function TableExperiment() {
|
|||
<label>
|
||||
by
|
||||
|
||||
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Entry, reversed: prev?.reversed } : undefined)}>
|
||||
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Person, reversed: prev?.reversed } : undefined)}>
|
||||
<option value=''>None</option>
|
||||
<For each={columns}>{
|
||||
column => <option value={column.id}>{column.label}</option>
|
||||
|
|
@ -106,9 +117,7 @@ export default function TableExperiment() {
|
|||
</Sidebar>
|
||||
|
||||
<div class={css.content}>
|
||||
<Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
|
||||
// email: (cell) => <input type="email" value={cell.value} />,
|
||||
}}</Table>
|
||||
<Table class={css.table} rows={rows()} columns={columns} selectionMode={store.selectionMode} />
|
||||
</div>
|
||||
</div >;
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ export enum MutarionKind {
|
|||
}
|
||||
export type Created = { kind: MutarionKind.Create, key: string, value: any };
|
||||
export type Updated = { kind: MutarionKind.Update, key: string, value: any, original: any };
|
||||
export type Deleted = { kind: MutarionKind.Delete, key: string };
|
||||
export type Deleted = { kind: MutarionKind.Delete, key: string, original: any };
|
||||
export type Mutation = Created | Updated | Deleted;
|
||||
|
||||
export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, path: string[] = []): Generator<Mutation, void, unknown> {
|
||||
|
|
@ -74,7 +74,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
|
|||
}
|
||||
|
||||
if (keyA && keyB === undefined) {
|
||||
yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete };
|
||||
yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete, original: valueA };
|
||||
|
||||
continue;
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
|
|||
|
||||
yield ((): Mutation => {
|
||||
if (valueA === null || valueA === undefined) return { key, kind: MutarionKind.Create, value: valueB };
|
||||
if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete };
|
||||
if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete, original: valueA };
|
||||
|
||||
return { key, kind: MutarionKind.Update, value: valueB, original: valueA };
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue