extracted selection logic to own feature and anhanched with range selection
This commit is contained in:
Chris Kruining
parent
40f46eba1d
commit
1a963a665e
15 changed files with 295 additions and 254 deletions
|
|
@ -1,6 +1,9 @@
|
|||
import { Component, createContext, createEffect, createMemo, For, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { createStore, produce } from "solid-js/store";
|
||||
import './grid.css';
|
||||
import { SelectionProvider, useSelection, selectable } from "../selectable";
|
||||
import css from './grid.module.css';
|
||||
|
||||
selectable // prevents removal of import
|
||||
|
||||
const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number): T => {
|
||||
let handle: ReturnType<typeof setTimeout> | undefined;
|
||||
|
|
@ -17,66 +20,19 @@ const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number
|
|||
interface Leaf extends Record<string, string> { }
|
||||
export interface Entry extends Record<string, Entry | Leaf> { }
|
||||
|
||||
export interface SelectionContextType {
|
||||
rowCount(): number;
|
||||
selection(): string[];
|
||||
isSelected(key: string): boolean,
|
||||
selectAll(select: boolean): void;
|
||||
select(key: string, select: boolean): void;
|
||||
}
|
||||
export interface GridContextType {
|
||||
rows: Record<string, { [lang: string]: { original: string, value: string } }>;
|
||||
selection: SelectionContextType;
|
||||
selection: Accessor<object[]>;
|
||||
mutate(prop: string, lang: string, value: string): void;
|
||||
}
|
||||
|
||||
const SelectionContext = createContext<SelectionContextType>();
|
||||
const GridContext = createContext<GridContextType>();
|
||||
|
||||
const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
|
||||
const useSelection = () => useContext(SelectionContext)!;
|
||||
const useGrid = () => useContext(GridContext)!;
|
||||
|
||||
const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
|
||||
const [state, setState] = createStore<{ selection: string[] }>({ selection: [] });
|
||||
|
||||
const rowKeys = createMemo(() => {
|
||||
return Array.from(props.rows?.keys());
|
||||
});
|
||||
|
||||
const context = {
|
||||
rowCount() {
|
||||
return rowKeys().length;
|
||||
},
|
||||
selection() {
|
||||
return state.selection;
|
||||
},
|
||||
isSelected(key: string) {
|
||||
return state.selection.includes(key);
|
||||
},
|
||||
selectAll(selected: boolean) {
|
||||
setState('selection', selected ? rowKeys() : []);
|
||||
},
|
||||
select(key: string, select: true) {
|
||||
setState('selection', selection => {
|
||||
if (select) {
|
||||
return [...selection, key];
|
||||
}
|
||||
|
||||
return selection.toSpliced(selection.indexOf(key), 1);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
props.context?.(context)
|
||||
});
|
||||
|
||||
return <SelectionContext.Provider value={context}>
|
||||
{props.children}
|
||||
</SelectionContext.Provider>;
|
||||
};
|
||||
const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
|
||||
const [selection, setSelection] = createSignal<object[]>([]);
|
||||
const [state, setState] = createStore<{ rows: GridContextType['rows'], numberOfRows: number }>({
|
||||
rows: {},
|
||||
numberOfRows: 0,
|
||||
|
|
@ -90,13 +46,14 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
|
|||
setState('rows', Object.fromEntries(rows));
|
||||
});
|
||||
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfRows', Object.keys(state.rows).length);
|
||||
});
|
||||
|
||||
const ctx: GridContextType = {
|
||||
rows: state.rows,
|
||||
selection: undefined!,
|
||||
selection,
|
||||
|
||||
mutate(prop: string, lang: string, value: string) {
|
||||
setState('rows', produce(rows => {
|
||||
|
|
@ -116,13 +73,13 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
|
|||
});
|
||||
|
||||
return <GridContext.Provider value={ctx}>
|
||||
<SelectionProvider rows={props.rows} context={(selction) => ctx.selection = selction}>
|
||||
<SelectionProvider selection={setSelection} multiSelect>
|
||||
{props.children}
|
||||
</SelectionProvider>
|
||||
</GridContext.Provider>;
|
||||
};
|
||||
|
||||
export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
|
||||
export const Grid: Component<{ class?: string, columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
|
||||
const columnCount = createMemo(() => props.columns.length - 1);
|
||||
const root = createMemo<Entry>(() => {
|
||||
return props.rows
|
||||
|
|
@ -149,11 +106,11 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
|
|||
}, {});
|
||||
});
|
||||
|
||||
return <section class="table" style={{ '--columns': columnCount() }}>
|
||||
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
|
||||
<GridProvider rows={props.rows} context={props.context}>
|
||||
<Head headers={props.columns} />
|
||||
|
||||
<main>
|
||||
<main class={css.main}>
|
||||
<Row entry={root()} />
|
||||
</main>
|
||||
</GridProvider>
|
||||
|
|
@ -163,18 +120,18 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
|
|||
const Head: Component<{ headers: string[] }> = (props) => {
|
||||
const context = useSelection();
|
||||
|
||||
return <header>
|
||||
<div class="cell">
|
||||
return <header class={css.header}>
|
||||
<div class={css.cell}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={context.selection().length > 0 && context.selection().length === context.rowCount()}
|
||||
indeterminate={context.selection().length !== 0 && context.selection().length !== context.rowCount()}
|
||||
on:input={(e: InputEvent) => context.selectAll(e.target.checked)}
|
||||
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="cell">{header}</span>
|
||||
header => <span class={css.cell}>{header}</span>
|
||||
}</For>
|
||||
</header>;
|
||||
};
|
||||
|
|
@ -189,48 +146,24 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
|
|||
const k = path.join('.');
|
||||
const context = useSelection();
|
||||
|
||||
const resize = (element: HTMLElement) => {
|
||||
element.style.blockSize = `1px`;
|
||||
element.style.blockSize = `${11 + element.scrollHeight}px`;
|
||||
};
|
||||
|
||||
const mutate = debounce((element: HTMLTextAreaElement) => {
|
||||
const [prop, lang] = element.name.split(':');
|
||||
|
||||
grid.mutate(prop, lang, element.value.trim())
|
||||
}, 300);
|
||||
|
||||
const onKeyUp = (e: KeyboardEvent) => {
|
||||
const element = e.target as HTMLTextAreaElement;
|
||||
|
||||
resize(element);
|
||||
mutate(element);
|
||||
};
|
||||
const isSelected = context.isSelected(k);
|
||||
|
||||
return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
|
||||
<label for={k}>
|
||||
<div class="cell">
|
||||
<input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e) => context.select(k, e.target.checked)} />
|
||||
<div class={css.row} use:selectable={{ value, key: k }}>
|
||||
<div class={css.cell}>
|
||||
<input type="checkbox" checked={isSelected()} oninput={() => context.select([k], { append: true })} />
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class={css.cell}>
|
||||
<span style={{ '--depth': path.length - 1 }}>{key}</span>
|
||||
</div>
|
||||
|
||||
<For each={values}>{
|
||||
([lang, value]) => <div class="cell">
|
||||
<textarea
|
||||
value={value}
|
||||
lang={lang}
|
||||
placeholder={lang}
|
||||
name={`${k}:${lang}`}
|
||||
spellcheck
|
||||
wrap="soft"
|
||||
on:keyup={onKeyUp}
|
||||
/>
|
||||
([lang, value]) => <div class={css.cell}>
|
||||
<TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
|
||||
</div>
|
||||
}</For>
|
||||
</label>
|
||||
</div>
|
||||
</Show>;
|
||||
}
|
||||
}</For>
|
||||
|
|
@ -242,4 +175,34 @@ const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props)
|
|||
|
||||
<Row entry={props.entry} path={props.path} />
|
||||
</details>;
|
||||
};
|
||||
|
||||
const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
|
||||
const resize = (element: HTMLElement) => {
|
||||
element.style.blockSize = `1px`;
|
||||
element.style.blockSize = `${11 + element.scrollHeight}px`;
|
||||
};
|
||||
|
||||
const mutate = debounce((element: HTMLTextAreaElement) => {
|
||||
props.oninput?.(new InputEvent('input', {
|
||||
data: element.value.trim(),
|
||||
}))
|
||||
}, 300);
|
||||
|
||||
const onKeyUp = (e: KeyboardEvent) => {
|
||||
const element = e.target as HTMLTextAreaElement;
|
||||
|
||||
resize(element);
|
||||
mutate(element);
|
||||
};
|
||||
|
||||
return <textarea
|
||||
value={props.value}
|
||||
lang={props.lang}
|
||||
placeholder={props.lang}
|
||||
name={`${props.key}:${props.lang}`}
|
||||
spellcheck
|
||||
wrap="soft"
|
||||
onkeyup={onKeyUp}
|
||||
/>
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue