lots of work
This commit is contained in:
Chris Kruining
parent
552ba7f3c9
commit
75bd06cac3
19 changed files with 523 additions and 314 deletions
33
src/features/command/index.ts
Normal file
33
src/features/command/index.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
export enum Modifier {
|
||||
None = 0,
|
||||
Shift = 1 << 0,
|
||||
Control = 1 << 1,
|
||||
Meta = 1 << 2,
|
||||
Alt = 1 << 3,
|
||||
}
|
||||
|
||||
export interface Command {
|
||||
(): any;
|
||||
label: string;
|
||||
shortcut?: {
|
||||
key: string;
|
||||
modifier: Modifier;
|
||||
};
|
||||
}
|
||||
|
||||
export const createCommand = (label: string, command: () => any, shortcut?: Command['shortcut']): Command => {
|
||||
return Object.defineProperties(command as Command, {
|
||||
label: {
|
||||
value: label,
|
||||
configurable: false,
|
||||
writable: false,
|
||||
},
|
||||
shortcut: {
|
||||
value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
|
||||
configurable: false,
|
||||
writable: false,
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const noop = createCommand('noop', () => { });
|
||||
|
|
@ -19,12 +19,23 @@
|
|||
resize: vertical;
|
||||
min-block-size: 2em;
|
||||
max-block-size: 50em;
|
||||
|
||||
background-color: var(--surface-1);
|
||||
color: var(--text-1);
|
||||
border-color: var(--text-2);
|
||||
border-radius: var(--radii-s);
|
||||
}
|
||||
|
||||
& .cell {
|
||||
display: grid;
|
||||
place-content: center stretch;
|
||||
padding: .5em;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radii-m);
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--info);
|
||||
}
|
||||
}
|
||||
|
||||
& > :is(header, main, footer) {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,41 @@
|
|||
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { Component, createContext, createEffect, createMemo, For, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { createStore, produce } from "solid-js/store";
|
||||
import './grid.css';
|
||||
import { createStore } from "solid-js/store";
|
||||
|
||||
const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number): T => {
|
||||
let handle: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
return (...args: any[]) => {
|
||||
if (handle) {
|
||||
clearTimeout(handle);
|
||||
}
|
||||
|
||||
handle = setTimeout(() => callback(...args), delay);
|
||||
}
|
||||
};
|
||||
|
||||
interface Leaf extends Record<string, string> { }
|
||||
export interface Entry extends Record<string, Entry | Leaf> { }
|
||||
|
||||
interface SelectionContextType {
|
||||
export interface SelectionContextType {
|
||||
rowCount(): number;
|
||||
selection(): string[];
|
||||
isSelected(key: string): boolean,
|
||||
selectAll(select: boolean): void;
|
||||
select(key: string, select: true): void;
|
||||
select(key: string, select: boolean): void;
|
||||
}
|
||||
export interface GridContextType {
|
||||
mutate(prop: string, lang: string, value: string): void;
|
||||
add(prop: string): void;
|
||||
selection: SelectionContextType;
|
||||
}
|
||||
|
||||
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: [] });
|
||||
|
|
@ -57,8 +76,58 @@ const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: {
|
|||
{props.children}
|
||||
</SelectionContext.Provider>;
|
||||
};
|
||||
const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
|
||||
type Entry = { [lang: string]: { original: string, value: string } };
|
||||
|
||||
export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
|
||||
const [state, setState] = createStore<{ rows: { [prop: string]: Entry }, numberOfRows: number }>({
|
||||
rows: {},
|
||||
numberOfRows: 0,
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const rows = props.rows
|
||||
.entries()
|
||||
.map(([prop, entry]) => [prop, Object.fromEntries(Object.entries(entry).map(([lang, { value }]) => [lang, { original: value, value }]))]);
|
||||
|
||||
setState('rows', Object.fromEntries(rows));
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfRows', Object.keys(state.rows).length);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
console.log(state.rows.toplevel?.nl.value);
|
||||
});
|
||||
|
||||
const ctx: GridContextType = {
|
||||
mutate(prop: string, lang: string, value: string) {
|
||||
// setState('rows', prop, lang, ({ original }) => ({ original, value }));
|
||||
setState('rows', produce(rows => {
|
||||
rows[prop][lang].value = value;
|
||||
}));
|
||||
},
|
||||
|
||||
add(prop: string) {
|
||||
|
||||
},
|
||||
|
||||
selection: undefined!,
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
console.log(ctx);
|
||||
props.context?.(ctx);
|
||||
});
|
||||
|
||||
return <GridContext.Provider value={ctx}>
|
||||
<SelectionProvider rows={props.rows} context={(selction) => ctx.selection = selction}>
|
||||
{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) => {
|
||||
const columnCount = createMemo(() => props.columns.length - 1);
|
||||
const root = createMemo<Entry>(() => {
|
||||
return props.rows
|
||||
|
|
@ -86,13 +155,13 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
|
|||
});
|
||||
|
||||
return <section class="table" style={{ '--columns': columnCount() }}>
|
||||
<SelectionProvider rows={props.rows} context={props.context}>
|
||||
<GridProvider rows={props.rows} context={props.context}>
|
||||
<Head headers={props.columns} />
|
||||
|
||||
<main>
|
||||
<Row entry={root()} />
|
||||
</main>
|
||||
</SelectionProvider>
|
||||
</GridProvider>
|
||||
</section>
|
||||
};
|
||||
|
||||
|
|
@ -116,17 +185,37 @@ const Head: Component<{ headers: string[] }> = (props) => {
|
|||
};
|
||||
|
||||
const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
|
||||
const grid = useGrid();
|
||||
|
||||
return <For each={Object.entries(props.entry)}>{
|
||||
([key, value]) => {
|
||||
const values = Object.values(value);
|
||||
const values = Object.entries(value);
|
||||
const path = [...(props.path ?? []), key];
|
||||
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);
|
||||
};
|
||||
|
||||
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: InputEvent) => context.select(k, e.target.checked)} />
|
||||
<input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e) => context.select(k, e.target.checked)} />
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
|
|
@ -134,11 +223,17 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
|
|||
</div>
|
||||
|
||||
<For each={values}>{
|
||||
value =>
|
||||
<div class="cell"><textarea value={value} on:keyup={(e) => {
|
||||
e.target.style.blockSize = `1px`;
|
||||
e.target.style.blockSize = `${11 + e.target.scrollHeight}px`;
|
||||
}} /></div>
|
||||
([lang, value]) => <div class="cell">
|
||||
<textarea
|
||||
value={value}
|
||||
lang={lang}
|
||||
placeholder={lang}
|
||||
name={`${k}:${lang}`}
|
||||
spellcheck
|
||||
wrap="soft"
|
||||
on:keyup={onKeyUp}
|
||||
/>
|
||||
</div>
|
||||
}</For>
|
||||
</label>
|
||||
</Show>;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
|
||||
import { Portal, isServer } from "solid-js/web";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { Command, Modifier } from "../command";
|
||||
|
||||
export interface MenuContextType {
|
||||
ref: Accessor<JSX.Element | undefined>;
|
||||
|
|
@ -11,22 +12,6 @@ export interface MenuContextType {
|
|||
commands(): Command[];
|
||||
};
|
||||
|
||||
export enum Modifier {
|
||||
None = 0,
|
||||
Shift = 1 << 0,
|
||||
Control = 1 << 1,
|
||||
Meta = 1 << 2,
|
||||
Alt = 1 << 3,
|
||||
}
|
||||
|
||||
export interface Command {
|
||||
(): any;
|
||||
shortcut?: {
|
||||
key: string;
|
||||
modifier: Modifier;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Item {
|
||||
id: string;
|
||||
label: string;
|
||||
|
|
@ -41,14 +26,6 @@ export interface ItemWithChildren {
|
|||
|
||||
const MenuContext = createContext<MenuContextType>();
|
||||
|
||||
export const createCommand = (command: () => any, shortcut?: Command['shortcut']): Command => {
|
||||
if (shortcut) {
|
||||
(command as Command).shortcut = { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier };
|
||||
}
|
||||
|
||||
return command;
|
||||
};
|
||||
|
||||
export const MenuProvider: ParentComponent = (props) => {
|
||||
const [ref, setRef] = createSignal<JSX.Element | undefined>();
|
||||
const [_items, setItems] = createSignal<Map<string, Item & { children?: Map<string, Item> }>>(new Map());
|
||||
|
|
@ -100,9 +77,7 @@ const Item: Component<ItemProps> = (props) => {
|
|||
const Root: ParentComponent<{}> = (props) => {
|
||||
const menu = useMenu();
|
||||
const [current, setCurrent] = createSignal<HTMLElement>();
|
||||
const items = (isServer
|
||||
? props.children
|
||||
: props.children?.map(c => c())) ?? [];
|
||||
const items = children(() => props.children).toArray() as unknown as (Item & ItemWithChildren)[];
|
||||
|
||||
menu.addItems(items)
|
||||
|
||||
|
|
@ -146,8 +121,8 @@ const Root: ParentComponent<{}> = (props) => {
|
|||
return <Portal mount={menu.ref()}>
|
||||
<For each={items}>{
|
||||
item => <>
|
||||
<Show when={item.children}>
|
||||
<div
|
||||
<Show when={item.children}>{
|
||||
children => <div
|
||||
class="menu-child"
|
||||
id={`child-${item.id}`}
|
||||
style={`position-anchor: --menu-${item.id};`}
|
||||
|
|
@ -158,11 +133,11 @@ const Root: ParentComponent<{}> = (props) => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<For each={item.children}>
|
||||
<For each={children()}>
|
||||
{(child) => <Button label={child.label} command={child.command} />}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
}</Show>
|
||||
|
||||
<Button
|
||||
label={item.label}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue