[Feature] Add language #19
8 changed files with 151 additions and 218 deletions
|
|
@ -1,13 +1,13 @@
|
|||
|
||||
|
||||
export type RowNode<T> = { kind: 'row', key: string, value: T }
|
||||
export type GroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: Node<T>[] };
|
||||
export type Node<T> = RowNode<T> | GroupNode<T>;
|
||||
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 DataSet<T extends Record<string, any>> = Node<T>[];
|
||||
export type DataSet<T extends Record<string, any>> = DataSetNode<T>[];
|
||||
|
||||
export const createDataSet = <T extends Record<string, any>>(data: T[]): Node<T>[] => {
|
||||
return Object.entries(data).map<RowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
|
||||
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 }));
|
||||
};
|
||||
|
||||
type SortingFunction<T> = (a: T, b: T) => -1 | 0 | 1;
|
||||
|
|
@ -22,6 +22,6 @@ export const toSorted = <T extends Record<string, any>>(dataSet: DataSet<T>, sor
|
|||
return sorted;
|
||||
};
|
||||
|
||||
type GroupingFunction<T> = (nodes: RowNode<T>[]) => Node<T>[];
|
||||
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);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
export type { Column } from './table';
|
||||
export type { DataSet, GroupNode, RowNode, Node } from './dataset';
|
||||
export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
|
||||
export { SelectionMode, Table } from './table';
|
||||
export { createDataSet, toSorted, toGrouped } from './dataset';
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
|
||||
import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
|
||||
import { type RowNode, type GroupNode, type Node, createDataSet, toSorted, toGrouped } from './dataset';
|
||||
import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
|
||||
import css from './table.module.css';
|
||||
import { createStore } from "solid-js/store";
|
||||
import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
|
||||
|
|
@ -11,15 +11,27 @@ export type Column<T> = {
|
|||
id: keyof T,
|
||||
label: string,
|
||||
sortable?: boolean,
|
||||
readonly groupBy?: (rows: RowNode<T>[]) => Node<T>[],
|
||||
readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
|
||||
};
|
||||
|
||||
type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
|
||||
|
||||
export interface TableApi<T extends Record<string, any>> {
|
||||
readonly selection: Accessor<SelectionItem<T>[]>;
|
||||
readonly rows: Accessor<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[]>,
|
||||
readonly selectionMode: Accessor<SelectionMode>,
|
||||
readonly groupBy: Accessor<string | undefined>,
|
||||
readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
|
||||
readonly cellRenderers: Accessor<Record<string, (cell: { value: any }) => JSX.Element>>,
|
||||
readonly cellRenderers: Accessor<Record<string, (cell: { key: string, value: any }) => JSX.Element>>,
|
||||
|
||||
setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
|
||||
}>();
|
||||
|
|
@ -27,8 +39,8 @@ const TableContext = createContext<{
|
|||
const useTable = () => useContext(TableContext)!
|
||||
|
||||
function defaultGroupingFunction<T>(groupBy: keyof T) {
|
||||
return (nodes: RowNode<T>[]): Node<T>[] => Object.entries(Object.groupBy<any, RowNode<T>>(nodes, r => r.value[groupBy]))
|
||||
.map<GroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
|
||||
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! }));
|
||||
}
|
||||
|
||||
export enum SelectionMode {
|
||||
|
|
@ -47,11 +59,11 @@ type TableProps<T extends Record<string, any>> = {
|
|||
},
|
||||
selectionMode?: SelectionMode,
|
||||
children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element },
|
||||
api?: (api: TableApi<T>) => any,
|
||||
};
|
||||
|
||||
export function Table<T extends Record<string, any>>(props: TableProps<T>) {
|
||||
const [selection, setSelection] = createSignal<object[]>([]);
|
||||
|
||||
const [selection, setSelection] = createSignal<T[]>([]);
|
||||
const [state, setState] = createStore({
|
||||
sort: props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined,
|
||||
});
|
||||
|
|
@ -60,13 +72,16 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
|
|||
setState('sort', props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined);
|
||||
});
|
||||
|
||||
const rows = createMemo<T[]>(() => 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(() => props.children ?? {});
|
||||
|
||||
const context = {
|
||||
rows,
|
||||
columns,
|
||||
selection,
|
||||
selectionMode,
|
||||
groupBy,
|
||||
sort: createMemo(() => state.sort),
|
||||
|
|
@ -78,8 +93,10 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
|
|||
};
|
||||
|
||||
return <TableContext.Provider value={context}>
|
||||
<SelectionProvider selection={setSelection} multiSelect>
|
||||
<InnerTable class={props.class} rows={props.rows} />
|
||||
<SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
|
||||
<Api api={props.api} />
|
||||
|
||||
<InnerTable class={props.class} rows={rows()} />
|
||||
</SelectionProvider>
|
||||
</TableContext.Provider>;
|
||||
};
|
||||
|
|
@ -91,7 +108,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
|
|||
|
||||
const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
|
||||
const columnCount = createMemo(() => table.columns().length);
|
||||
const nodes = createMemo<Node<T>[]>(() => {
|
||||
const nodes = createMemo<DataSetNode<T>[]>(() => {
|
||||
const columns = table.columns();
|
||||
const groupBy = table.groupBy();
|
||||
const sort = table.sort();
|
||||
|
|
@ -121,6 +138,31 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
|
|||
</section>
|
||||
};
|
||||
|
||||
function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
|
||||
const table = useTable();
|
||||
const selectionContext = useSelection<SelectionItem<T>>();
|
||||
|
||||
const api: TableApi<T> = {
|
||||
selection: createMemo(() => {
|
||||
return selectionContext.selection();
|
||||
}),
|
||||
rows: table.rows,
|
||||
columns: table.columns,
|
||||
selectAll() {
|
||||
selectionContext.selectAll();
|
||||
},
|
||||
clear() {
|
||||
selectionContext.clear();
|
||||
},
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
props.api?.(api);
|
||||
});
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
function Head<T extends Record<string, any>>(props: {}) {
|
||||
const table = useTable();
|
||||
const context = useSelection();
|
||||
|
|
@ -174,7 +216,7 @@ function Head<T extends Record<string, any>>(props: {}) {
|
|||
</header>;
|
||||
};
|
||||
|
||||
function Node<T extends Record<string, any>>(props: { node: Node<T>, depth: number, groupedBy?: keyof T }) {
|
||||
function Node<T extends Record<string, any>>(props: { node: DataSetNode<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} />
|
||||
|
|
@ -201,12 +243,12 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
|
|||
</Show>
|
||||
|
||||
<For each={values()}>{
|
||||
([k, v]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ value: v }) ?? v}</div>
|
||||
([k, value]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ key: `${props.key}.${k}`, value }) ?? value}</div>
|
||||
}</For>
|
||||
</div>;
|
||||
};
|
||||
|
||||
function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: Node<T>[], depth: number }) {
|
||||
function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {
|
||||
const table = useTable();
|
||||
|
||||
return <details open>
|
||||
|
|
|
|||
|
|
@ -61,44 +61,9 @@
|
|||
}
|
||||
|
||||
.tab {
|
||||
position: absolute;
|
||||
grid-area: 2 / 1 / span 1 / span 1;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > summary {
|
||||
grid-row: 1 / 1;
|
||||
|
||||
padding: var(--padding-s) var(--padding-m);
|
||||
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::details-content {
|
||||
grid-area: 2 / 1 / span 1 / span var(--tab-count);
|
||||
display: none;
|
||||
grid: 100% / 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
& > summary {
|
||||
display: contents;
|
||||
background-color: var(--surface-600);
|
||||
}
|
||||
|
||||
&::details-content {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
color: var(--text-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,19 +95,12 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
|
|||
const context = useTabs();
|
||||
const resolved = children(() => props.children);
|
||||
const isActive = context.isActive(props.id);
|
||||
const [ref, setRef] = createSignal();
|
||||
|
||||
// const isActive = context.register(props.id, props.label, {
|
||||
// closable: props.closable ?? false,
|
||||
// ref: ref,
|
||||
// });
|
||||
|
||||
return <div
|
||||
ref={setRef()}
|
||||
id={props.id}
|
||||
class={css.tab}
|
||||
data-tab-label={props.label}
|
||||
data-tab-closable={props.closable}
|
||||
style="display: contents;"
|
||||
>
|
||||
<Show when={isActive()}>
|
||||
<Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { createStore, produce, unwrap } from "solid-js/store";
|
||||
import { SelectionProvider, useSelection, selectable } from "../selectable";
|
||||
import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
|
||||
import { debounce, deepCopy, deepDiff, Mutation, splitAt } from "~/utilities";
|
||||
import { DataSetRowNode, DataSetNode, SelectionMode, Table } from "~/components/table";
|
||||
import css from './grid.module.css';
|
||||
|
||||
selectable // prevents removal of import
|
||||
|
||||
interface Leaf extends Record<string, string> { }
|
||||
export interface Entry extends Record<string, Entry | Leaf> { }
|
||||
|
||||
type Rows = Map<string, Record<string, string>>;
|
||||
type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
|
||||
|
||||
export interface GridContextType {
|
||||
readonly rows: Accessor<Record<string, Record<string, string>>>;
|
||||
readonly rows: Accessor<Rows>;
|
||||
readonly mutations: Accessor<Mutation[]>;
|
||||
readonly selection: Accessor<SelectionItem[]>;
|
||||
mutate(prop: string, lang: string, value: string): void;
|
||||
// readonly selection: Accessor<SelectionItem[]>;
|
||||
mutate(prop: string, value: string): void;
|
||||
remove(props: string[]): void;
|
||||
insert(prop: string): void;
|
||||
addColumn(name: string): void;
|
||||
|
|
@ -35,11 +29,10 @@ export interface GridApi {
|
|||
|
||||
const GridContext = createContext<GridContextType>();
|
||||
|
||||
const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
|
||||
const useGrid = () => useContext(GridContext)!;
|
||||
|
||||
export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
|
||||
const [selection, setSelection] = createSignal<SelectionItem[]>([]);
|
||||
const [table, setTable] = createSignal();
|
||||
const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, columns: string[], snapshot: Rows, numberOfRows: number }>({
|
||||
rows: {},
|
||||
columns: [],
|
||||
|
|
@ -53,8 +46,25 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
|
|||
|
||||
return deepDiff(state.snapshot, state.rows).toArray();
|
||||
});
|
||||
const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
|
||||
const columns = createMemo(() => state.columns);
|
||||
|
||||
type Entry = { key: string, [lang: string]: string };
|
||||
|
||||
const groupBy = (rows: DataSetRowNode<Entry>[]) => {
|
||||
const group = (nodes: DataSetRowNode<Entry>[]): DataSetNode<Entry>[] => Object
|
||||
.entries(Object.groupBy(nodes, r => r.key.split('.').at(0)!) as Record<string, DataSetRowNode<Entry>[]>)
|
||||
.map<DataSetNode<Entry>>(([key, nodes]) => nodes.at(0)?.key === key
|
||||
? { ...nodes[0], key: nodes[0].value.key, value: { ...nodes[0].value, key: nodes[0].key } }
|
||||
: ({ kind: 'group', key, groupedBy: 'key', nodes: group(nodes.map(n => ({ ...n, key: n.key.slice(key.length + 1) }))) })
|
||||
);
|
||||
|
||||
return group(rows.map(r => ({ ...r, key: r.value.key })));
|
||||
}
|
||||
|
||||
const rows = createMemo(() => Object.entries(state.rows).map(([key, values]) => ({ key, ...values })));
|
||||
const columns = createMemo(() => [
|
||||
{ id: 'key', label: 'Key', groupBy },
|
||||
...state.columns.map(c => ({ id: c, label: c })),
|
||||
]);
|
||||
|
||||
createEffect(() => {
|
||||
setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
|
||||
|
|
@ -72,10 +82,12 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
|
|||
const ctx: GridContextType = {
|
||||
rows,
|
||||
mutations,
|
||||
selection,
|
||||
// selection,
|
||||
|
||||
mutate(prop: string, lang: string, value: string) {
|
||||
setState('rows', prop, lang, value);
|
||||
mutate(prop: string, value: string) {
|
||||
const [key, lang] = splitAt(prop, prop.lastIndexOf('.'));
|
||||
|
||||
setState('rows', key, lang, value);
|
||||
},
|
||||
|
||||
remove(props: string[]) {
|
||||
|
|
@ -89,11 +101,7 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
|
|||
},
|
||||
|
||||
insert(prop: string) {
|
||||
setState('rows', produce(rows => {
|
||||
rows[prop] = Object.fromEntries(state.columns.slice(1).map(lang => [lang, '']));
|
||||
|
||||
return rows
|
||||
}))
|
||||
setState('rows', prop, Object.fromEntries(state.columns.map(lang => [lang, ''])));
|
||||
},
|
||||
|
||||
addColumn(name: string): void {
|
||||
|
|
@ -107,63 +115,39 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
|
|||
};
|
||||
|
||||
return <GridContext.Provider value={ctx}>
|
||||
<SelectionProvider selection={setSelection} multiSelect>
|
||||
<Api api={props.api} />
|
||||
<Api api={props.api} table={table()} />
|
||||
|
||||
<_Grid class={props.class} columns={columns()} rows={rows()} />
|
||||
</SelectionProvider>
|
||||
<Table api={setTable} class={props.class} rows={rows()} columns={columns()} groupBy="key" selectionMode={SelectionMode.Multiple}>{
|
||||
Object.fromEntries(state.columns.map(c => [c, ({ key, value }: any) => {
|
||||
return <TextArea key={key} value={value} oninput={(e) => ctx.mutate(key, e.data ?? '')} />;
|
||||
}]))
|
||||
}</Table>
|
||||
</GridContext.Provider>;
|
||||
};
|
||||
|
||||
const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
|
||||
const columnCount = createMemo(() => props.columns.length - 1);
|
||||
const root = createMemo<Entry>(() => Object.entries(props.rows)
|
||||
.reduce((aggregate, [key, value]) => {
|
||||
let obj: any = aggregate;
|
||||
const parts = key.split('.');
|
||||
|
||||
for (const [i, part] of parts.entries()) {
|
||||
if (Object.hasOwn(obj, part) === false) {
|
||||
obj[part] = {};
|
||||
}
|
||||
|
||||
if (i === (parts.length - 1)) {
|
||||
obj[part] = value;
|
||||
}
|
||||
else {
|
||||
obj = obj[part];
|
||||
}
|
||||
}
|
||||
|
||||
return aggregate;
|
||||
}, {}));
|
||||
|
||||
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
|
||||
<Head headers={props.columns} />
|
||||
|
||||
<main class={css.main}>
|
||||
<Row entry={root()} />
|
||||
</main>
|
||||
</section>
|
||||
};
|
||||
|
||||
const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
|
||||
const Api: Component<{ api: undefined | ((api: GridApi) => any), table?: any }> = (props) => {
|
||||
const gridContext = useGrid();
|
||||
const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
|
||||
|
||||
const api: GridApi = {
|
||||
const api = createMemo<GridApi | undefined>(() => {
|
||||
const table = props.table;
|
||||
|
||||
if (!table) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
selection: createMemo(() => {
|
||||
const selection = selectionContext.selection();
|
||||
const selection = props.table?.selection() ?? [];
|
||||
|
||||
return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
|
||||
}),
|
||||
rows: gridContext.rows,
|
||||
rows: createMemo(() => props.table?.rows ?? []),
|
||||
mutations: gridContext.mutations,
|
||||
selectAll() {
|
||||
selectionContext.selectAll();
|
||||
props.table.selectAll();
|
||||
},
|
||||
clear() {
|
||||
selectionContext.clear();
|
||||
props.table.clear();
|
||||
},
|
||||
remove(props: string[]) {
|
||||
gridContext.remove(props);
|
||||
|
|
@ -176,76 +160,23 @@ const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) =>
|
|||
gridContext.addColumn(name);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
props.api?.(api);
|
||||
const value = api();
|
||||
|
||||
if (value) {
|
||||
props.api?.(value);
|
||||
}
|
||||
});
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const Head: Component<{ headers: string[] }> = (props) => {
|
||||
const context = useSelection();
|
||||
|
||||
return <header class={css.header}>
|
||||
<div class={css.cell}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={context.selection().length > 0 && context.selection().length === context.length()}
|
||||
indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
|
||||
on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<For each={props.headers}>{
|
||||
header => <span class={css.cell}>{header}</span>
|
||||
}</For>
|
||||
</header>;
|
||||
};
|
||||
|
||||
const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
|
||||
const grid = useGrid();
|
||||
|
||||
return <For each={Object.entries(props.entry)}>{
|
||||
([key, value]) => {
|
||||
const values = Object.entries(value);
|
||||
const path = [...(props.path ?? []), key];
|
||||
const k = path.join('.');
|
||||
const context = useSelection();
|
||||
|
||||
const isSelected = context.isSelected(k);
|
||||
|
||||
return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
|
||||
<div class={css.row} use:selectable={{ value, key: k }}>
|
||||
<div class={css.cell}>
|
||||
<input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
|
||||
</div>
|
||||
|
||||
<div class={css.cell}>
|
||||
<span style={{ '--depth': path.length - 1 }}>{key}</span>
|
||||
</div>
|
||||
|
||||
<For each={values}>{
|
||||
([lang, value]) => <div class={css.cell}>
|
||||
<TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
|
||||
</div>
|
||||
}</For>
|
||||
</div>
|
||||
</Show>;
|
||||
}
|
||||
}</For>
|
||||
};
|
||||
|
||||
const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
|
||||
return <details open>
|
||||
<summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
|
||||
|
||||
<Row entry={props.entry} path={props.path} />
|
||||
</details>;
|
||||
};
|
||||
|
||||
const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
|
||||
const TextArea: Component<{ key: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => {
|
||||
const [element, setElement] = createSignal<HTMLTextAreaElement>();
|
||||
const key = createMemo(() => props.key.slice(0, props.key.lastIndexOf('.')));
|
||||
const lang = createMemo(() => props.key.slice(props.key.lastIndexOf('.') + 1));
|
||||
|
||||
const resize = () => {
|
||||
const el = element();
|
||||
|
|
@ -272,9 +203,9 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
|
|||
return <textarea
|
||||
ref={setElement}
|
||||
value={props.value}
|
||||
lang={props.lang}
|
||||
placeholder={`${props.key} in ${props.lang}`}
|
||||
name={`${props.key}:${props.lang}`}
|
||||
lang={lang()}
|
||||
placeholder={`${key()} in ${lang()}`}
|
||||
name={`${key()}:${lang()}`}
|
||||
spellcheck={true}
|
||||
wrap="soft"
|
||||
onkeyup={onKeyUp}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ interface State {
|
|||
data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
|
||||
}
|
||||
|
||||
export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: true }> = (props) => {
|
||||
export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: boolean }> = (props) => {
|
||||
const [state, setState] = createStore<State>({ selection: [], data: [] });
|
||||
const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
|
||||
const length = createMemo(() => state.data.length);
|
||||
|
|
|
|||
|
|
@ -105,6 +105,8 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
|
|||
const files = tab.files();
|
||||
const mutations = tab.api()?.mutations() ?? [];
|
||||
|
||||
// console.log(mutations);
|
||||
|
||||
return mutations.flatMap(m => {
|
||||
switch (m.kind) {
|
||||
case MutarionKind.Update: {
|
||||
|
|
@ -433,7 +435,7 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
|
|||
return aggregate;
|
||||
}, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
|
||||
|
||||
setColumns(['key', ...languages]);
|
||||
setColumns(languages.values().toArray());
|
||||
setEntries(merged);
|
||||
setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue