@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/explorer/use-stored-expansion.ts

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from 'react';
+import type { DatabaseStorage } from '../actions.ts';
+import { useDatabaseStorage } from '../client-context.ts';
+import type { Connection } from '../client/types.ts';
+import { expansionKey, parseExpansion, serializeExpansion, type Expansion } from './expansion.ts';
+
+type Update = (current: ReadonlySet<string>) => ReadonlySet<string>;
+
+interface Loaded extends Expansion {
+    /* The connections whose stored state is in the sets. */
+    readonly loaded: ReadonlySet<string>;
+}
+
+const restore = (storage: DatabaseStorage | undefined, connections: readonly Connection[], from: Loaded): Loaded => {
+    const expanded = new Set(from.expanded);
+    const collapsed = new Set(from.collapsed);
+    const loaded = new Set(from.loaded);
+    for (const { id } of connections) {
+        if (loaded.has(id)) {
+            continue;
+        }
+        loaded.add(id);
+        const stored = parseExpansion(storage?.get(expansionKey(id)) ?? null, id);
+        stored.expanded.forEach((key) => expanded.add(key));
+        stored.collapsed.forEach((key) => collapsed.add(key));
+    }
+    return { expanded, collapsed, loaded };
+};
+
+export interface StoredExpansion extends Expansion {
+    setExpanded(update: Update): void;
+    setCollapsed(update: Update): void;
+}
+
+/*
+ * Which nodes of the tree are open, kept per connection in the app's storage when it has one. A
+ * connection that shows up later is restored when it does.
+ */
+export function useStoredExpansion(connections: readonly Connection[]): StoredExpansion {
+    const storage = useDatabaseStorage();
+    const [state, setState] = useState<Loaded>(() => restore(storage, connections, { expanded: new Set(), collapsed: new Set(), loaded: new Set() }));
+    // What the storage holds per connection, so only a change is written back.
+    const written = useRef(new Map<string, string | null>());
+
+    if (connections.some((connection) => !state.loaded.has(connection.id))) {
+        setState((current) => restore(storage, connections, current));
+    }
+
+    useEffect(() => {
+        for (const id of state.loaded) {
+            const next = serializeExpansion(id, state);
+            const last = written.current.get(id);
+            written.current.set(id, next);
+            if (last !== undefined && last !== next) {
+                storage?.set(expansionKey(id), next);
+            }
+        }
+    }, [storage, state]);
+
+    return {
+        expanded: state.expanded,
+        collapsed: state.collapsed,
+        setExpanded: (update) => setState((current) => ({ ...current, expanded: update(current.expanded) })),
+        setCollapsed: (update) => setState((current) => ({ ...current, collapsed: update(current.collapsed) }))
+    };
+}

package/src/grid/CellEditor.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef, type KeyboardEvent } from 'react';
+import { Input } from '@adecore/ui';
+
+export type EditMove = 'next' | 'previous';
+
+export interface CellEditorProps {
+    value: string;
+    label: string;
+    onValueChange(value: string): void;
+    /* Enter commits in place; Tab commits and moves on. */
+    onCommit(move?: EditMove): void;
+    onCancel(): void;
+}
+
+/* The input a cell turns into while it is edited. It takes the focus and selects its text when it appears. */
+export function CellEditor({ value, label, onValueChange, onCommit, onCancel }: CellEditorProps) {
+    const input = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onCommit();
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            onCancel();
+        } else if (event.key === 'Tab') {
+            event.preventDefault();
+            onCommit(event.shiftKey ? 'previous' : 'next');
+        }
+    };
+
+    return (
+        <Input
+            ref={input}
+            mono
+            size="sm"
+            aria-label={label}
+            value={value}
+            className="absolute inset-0 z-10 h-full min-w-0 rounded-none px-3"
+            onChange={(event) => onValueChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={() => onCommit()}
+        />
+    );
+}

package/src/grid/CopyAsMenu.tsx

@@ -0,0 +1,33 @@
+import { Braces, Copy, Database, FileSpreadsheet, Table2, type LucideIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, Icon } from '@adecore/ui';
+import type { CopyFormat } from './copy-formats.ts';
+
+const ICONS: Record<CopyFormat, LucideIcon> = { tsv: Table2, csv: FileSpreadsheet, json: Braces, sql: Database };
+
+export interface CopyAsMenuProps {
+    disabled: boolean;
+    formats: readonly CopyFormat[];
+    onCopy(format: CopyFormat): void;
+}
+
+/* The "Copy as" submenu of the grid's context menu. */
+export function CopyAsMenu({ disabled, formats, onCopy }: CopyAsMenuProps) {
+    const { t } = useTranslation('database');
+    return (
+        <ContextMenu.SubmenuRoot>
+            <ContextMenu.SubmenuTrigger disabled={disabled}>
+                <Icon icon={Copy} size={14} />
+                {t('grid.copyAs.label')}
+            </ContextMenu.SubmenuTrigger>
+            <ContextMenu.Popup>
+                {formats.map((format) => (
+                    <ContextMenu.Item key={format} onClick={() => onCopy(format)}>
+                        <Icon icon={ICONS[format]} size={14} />
+                        {t(`grid.copyAs.${format}`)}
+                    </ContextMenu.Item>
+                ))}
+            </ContextMenu.Popup>
+        </ContextMenu.SubmenuRoot>
+    );
+}