wenay-react2 1.0.34 → 1.0.36

package/lib/common/src/grid/columnState/ColumnDots.js

@@ -0,0 +1,121 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// ColumnDots - the mobile column selector: a track of marks (one per column)
+// with dots on the columns that are currently shown. Placing a dot IS showing
+// the column; the card view (CardList) rebuilds from the same config live.
+// Gestures (pointer events, mouse + touch):
+//   drag a dot along the track  -> the dot slides to another (empty) mark: that
+//                                  column replaces the old one
+//   swipe a dot UP (flick off)  -> the dot tears off the track: column hidden
+//   tap an empty mark           -> a dot appears there: column shown
+//   tap a dot (no move)         -> select the field (highlight); the sort
+//                                  button cycles asc -> desc -> off on the
+//                                  SELECTED field. Sort is sticky: selecting
+//                                  another dot does not touch it, and it may
+//                                  point at a hidden column.
+// No ag-grid, no storage - only the columnState config.
+import { useRef, useState } from 'react';
+/** Dominant-axis thresholds: a gesture is a REMOVE only when it is clearly
+ *  vertical and clearly upward - a horizontal drag or a page scroll never is. */
+const REMOVE_DY = 32;
+const MOVE_SLOP = 4;
+export function ColumnDots(p) {
+    const cfg = p.state.api.useConfig();
+    const cols = p.state.columns;
+    const byKey = new Map(cols.map(c => [c.key, c]));
+    const max = p.max ?? 4;
+    const order = cfg.order;
+    const n = order.length;
+    const visibleKeys = order.filter(k => cfg.visible[k] != false);
+    const trackRef = useRef(null);
+    const gestureRef = useRef(null);
+    const [drag, setDrag] = useState(null);
+    const [selected, setSelected] = useState(null);
+    const pct = (i) => n <= 1 ? 50 : (i * 100) / (n - 1);
+    const short = (k) => k ? (byKey.get(k)?.short ?? byKey.get(k)?.title ?? k) : '';
+    function downDot(key, e) {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false };
+    }
+    function moveDot(e) {
+        const g = gestureRef.current;
+        if (!g)
+            return;
+        const dx = e.clientX - g.startX;
+        const dy = e.clientY - g.startY;
+        if (!g.moved && Math.hypot(dx, dy) < MOVE_SLOP)
+            return;
+        g.moved = true;
+        const r = trackRef.current?.getBoundingClientRect();
+        if (!r)
+            return;
+        const step = n > 1 ? r.width / (n - 1) : r.width;
+        const from = order.indexOf(g.key);
+        const off = -dy > REMOVE_DY && -dy > Math.abs(dx);
+        const to = Math.max(0, Math.min(n - 1, Math.round(from + dx / step)));
+        setDrag({ key: g.key, dx, dy, to, off });
+    }
+    function upDot() {
+        const g = gestureRef.current;
+        gestureRef.current = null;
+        const st = drag;
+        setDrag(null);
+        if (!g)
+            return;
+        if (!g.moved) { // tap = select the field
+            setSelected(g.key);
+            return;
+        }
+        if (!st)
+            return;
+        const meta = byKey.get(g.key);
+        if (st.off) { // swipe up = tear the dot off (fixed and the last dot stay)
+            if (!meta?.fixed && visibleKeys.length > 1) {
+                p.state.api.show(g.key, false);
+                if (selected == g.key)
+                    setSelected(null);
+            }
+            return;
+        }
+        const target = order[st.to];
+        if (target && target != g.key && cfg.visible[target] == false && !meta?.fixed) {
+            // the dot slides to another mark: that column takes this slot
+            p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.key]: false, [target]: true } });
+            if (selected == g.key)
+                setSelected(target);
+        }
+    }
+    function tapMark(key) {
+        if (cfg.visible[key] != false)
+            return;
+        if (visibleKeys.length >= max)
+            return;
+        p.state.api.show(key, true);
+        setSelected(key);
+    }
+    const sortLabel = cfg.sort ? `${short(cfg.sort.key)} ${cfg.sort.dir == 'asc' ? '↑' : '↓'}` : 'off';
+    return _jsxs("div", { className: p.className, style: { userSelect: 'none', ...p.style }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, fontSize: 12 }, children: [_jsxs("span", { style: { color: '#57606a' }, children: [visibleKeys.length, "/", max, " fields"] }), _jsx("span", { style: { flex: 1 } }), _jsxs("span", { style: { color: '#57606a' }, children: ["field: ", _jsx("b", { children: selected ? short(selected) : '—' })] }), _jsxs("button", { disabled: !selected, title: 'Sort by the selected field: asc -> desc -> off', onClick: () => selected && p.state.api.toggleSort(selected), style: { border: '1px solid #6e7781', borderRadius: 6, padding: '2px 8px', fontSize: 12, cursor: selected ? 'pointer' : 'default', opacity: selected ? 1 : 0.5, background: '#fff' }, children: ["\u21C5 sort: ", sortLabel] })] }), _jsxs("div", { ref: trackRef, style: { position: 'relative', height: 56, margin: '0 14px', touchAction: 'none' }, children: [_jsx("div", { style: { position: 'absolute', left: -8, right: -8, top: 27, height: 2, background: '#d0d7de', borderRadius: 1 } }), order.map((k, i) => {
+                        const vis = cfg.visible[k] != false;
+                        const isSorted = cfg.sort?.key == k;
+                        return _jsxs("div", { onPointerUp: () => tapMark(k), style: { position: 'absolute', left: `${pct(i)}%`, top: 0, width: 44, height: 56, marginLeft: -22, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { style: { position: 'absolute', left: 0, right: 0, top: 0, textAlign: 'center', fontSize: 11, color: '#0969da', fontWeight: 700 }, children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { style: { position: 'absolute', left: '50%', top: 24, width: 8, height: 8, marginLeft: -4, borderRadius: 4, background: vis ? 'transparent' : '#afb8c1' } }), _jsx("div", { style: { position: 'absolute', left: 0, right: 0, top: 40, textAlign: 'center', fontSize: 10, color: vis ? '#24292f' : '#8c959f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: short(k) })] }, 'm' + k);
+                    }), order.map((k, i) => {
+                        if (cfg.visible[k] == false)
+                            return null;
+                        const meta = byKey.get(k);
+                        const d = drag?.key == k ? drag : null;
+                        const removing = !!d?.off && !meta?.fixed && visibleKeys.length > 1;
+                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, style: {
+                                position: 'absolute', left: `${pct(i)}%`, top: 28, width: 44, height: 44,
+                                margin: '-22px 0 0 -22px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                cursor: 'grab', zIndex: d ? 3 : 2,
+                                transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined,
+                                transition: d ? undefined : 'transform 0.15s ease',
+                                opacity: removing ? 0.4 : 1,
+                            }, children: _jsx("div", { style: {
+                                    width: 18, height: 18, borderRadius: 9,
+                                    background: selected == k ? '#0969da' : '#24292f',
+                                    border: meta?.fixed ? '2px solid #afb8c1' : selected == k ? '2px solid #b6d4fe' : '2px solid transparent',
+                                    boxShadow: d ? '0 3px 10px rgba(0,0,0,0.35)' : undefined,
+                                } }) }, 'd' + k);
+                    })] })] });
+}

package/lib/common/src/grid/columnState/ColumnsMenu.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { ColumnStateController, ColumnsConfig } from './columnState';
+export type MenuStripItem = {
+    /** stable id; reported back on click / in the reorder commit */
+    key: string;
+    /** full name - tooltip / accessible label */
+    title: string;
+    /** caption on the button (falls back to title) */
+    short?: string;
+    icon?: React.ReactNode;
+    /** 'disabled' = the slot exists but its target is gone (column removed
+     *  from the live grid): the button stays in place, inert */
+    state: 'on' | 'off' | 'disabled';
+    /** adornment for "on with extras": sub-column dots, mode marks... */
+    marks?: React.ReactNode;
+    /** cannot be dragged (fixed columns) */
+    fixed?: boolean;
+};
+/** The presentation layer: renders the buttons in the given order, reports
+ *  clicks (onItem) and drag-reorders (onMove) - never interprets either.
+ *  Disabled buttons do not report clicks; fixed ones do not drag. */
+export declare function MenuStrip(p: {
+    items: MenuStripItem[];
+    /** a click happened on this key - the MEANING lives a layer up */
+    onItem?: (key: string, e: React.MouseEvent) => void;
+    /** present = items are drag-reorderable (one commit per drop) */
+    onMove?: (order: string[]) => void;
+    /** preview rule for the drop (fixed pinning etc.) - same contract as
+     *  useReorder.move, so the preview shows exactly what onMove receives */
+    move?: (order: string[], key: string, to: number) => string[];
+    /** trailing buttons after a divider, OUTSIDE the reorder list (mode
+     *  cyclers, actions...); their clicks go to onItem like any other key */
+    tail?: MenuStripItem[];
+    /** hold before a touch drag starts, ms (default 150 - keeps page scroll usable) */
+    holdMs?: number;
+    /** icon-only buttons (letters stand in for a missing icon) */
+    compact?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+/** The binding layer: MenuStrip fed by a ColumnStateController. Buttons follow
+ *  config.order (the grid mirror is free: both sides subscribe to the same
+ *  config); state per button = disabled (column absent from the live grid) /
+ *  on / off. Default click toggles visibility; pass onItem for richer,
+ *  multi-state semantics - the strip below stays untouched. */
+export declare function ColumnsMenu(p: {
+    state: ColumnStateController;
+    /** what a click MEANS - a separate layer by design. Default: toggle the
+     *  column's visibility (fixed columns ignore the default). */
+    onItem?: (key: string, e: React.MouseEvent) => void;
+    /** "on with extras" adornment per column (enabled sub-columns, strategies...) */
+    marks?: (key: string, cfg: ColumnsConfig) => React.ReactNode;
+    /** trailing non-column buttons (table standards cycler etc.) */
+    tail?: MenuStripItem[];
+    /** clicks on tail buttons */
+    onTail?: (key: string, e: React.MouseEvent) => void;
+    /** drag reorder of the column buttons, mirrored to the grid (default on) */
+    reorder?: boolean;
+    holdMs?: number;
+    /** icon-only buttons: the column's icon, or the first letters of its
+     *  short/title as a text pseudo-icon (full title in the tooltip) */
+    compact?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/grid/columnState/ColumnsMenu.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ColumnsMenu - the icon menu over a columnState config: one button per
+// column, a 1:1 mirror of the grid. Reorder a column in the grid - the buttons
+// reorder; drag a button - the grid reorders. Two DECOUPLED layers, because
+// "what a click means" is deliberately not this strip's business:
+//
+//   MenuStrip   - pure presentation. Ordered buttons, each in one of three
+//                 states ('on' / 'off' / 'disabled') plus an optional
+//                 adornment (marks) for "on with extras" (sub-columns,
+//                 naming strategies...). It reports clicks and drag-reorders;
+//                 it never interprets them. Reusable for ANY button strip
+//                 with multi-state buttons (table standards cyclers etc.).
+//
+//   ColumnsMenu - the binding to a ColumnStateController: derives the items
+//                 from order/visibility/presence, default click = toggle the
+//                 column, drag = api.move. The click meaning is overridable
+//                 (onItem) - multi-state columns plug in without touching the
+//                 strip.
+//
+// A column REMOVED from the live grid (dynamic defs, "drop empty columns"
+// standards) keeps its button: it renders 'disabled' (dashed, inert) and
+// comes back to life when the column returns. No ag-grid, no storage here.
+import { useRef } from 'react';
+import { useReorder } from '../../hooks/useReorder';
+function MenuButton(p) {
+    const it = p.item;
+    const disabled = it.state == 'disabled';
+    const on = it.state == 'on';
+    const abbr = p.compact && it.icon == null
+        ? _jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }, children: (it.short ?? it.title).slice(0, 3) }) : null;
+    return _jsxs("div", { title: it.title, onClick: disabled ? undefined : e => p.onItem?.(it.key, e), onMouseDown: p.drag?.onMouseDown, onTouchStart: p.drag?.onTouchStart, style: {
+            position: 'relative', display: 'flex', alignItems: 'center', gap: 4,
+            padding: '3px 9px', borderRadius: 6, fontSize: 12, lineHeight: '16px',
+            whiteSpace: 'nowrap', cursor: disabled ? 'default' : 'pointer',
+            ...(disabled ? { border: '1px dashed #d0d7de', background: '#f6f8fa', color: '#c4ccd4' }
+                : on ? { border: '1px solid #24292f', background: '#24292f', color: '#fff' }
+                    : { border: '1px solid #d0d7de', background: '#fff', color: '#8c959f', textDecoration: 'line-through' }),
+            ...(it.fixed ? { boxShadow: '0 0 0 2px #eaeef2' } : null),
+            ...p.style,
+        }, children: [it.icon != null && _jsx("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: it.icon }), abbr, !p.compact && _jsx("span", { children: it.short ?? it.title }), it.marks != null && _jsx("span", { style: { fontSize: 9, opacity: 0.9 }, children: it.marks })] });
+}
+/** The presentation layer: renders the buttons in the given order, reports
+ *  clicks (onItem) and drag-reorders (onMove) - never interprets either.
+ *  Disabled buttons do not report clicks; fixed ones do not drag. */
+export function MenuStrip(p) {
+    const reorder = useReorder({
+        order: p.items.map(i => i.key),
+        commit: next => p.onMove?.(next),
+        move: p.move,
+        canDrag: k => !!p.onMove && !p.items.find(i => i.key == k)?.fixed,
+        holdMs: p.holdMs ?? 150,
+    });
+    // A drag that ends over the button it started on still produces a browser
+    // click - without this guard every snapped-back drag would ALSO toggle the
+    // button. Track the press point; a click that travelled is not a click.
+    const down = useRef(null);
+    function onItem(key, e) {
+        const d = down.current;
+        down.current = null;
+        if (d && Math.hypot(e.clientX - d.x, e.clientY - d.y) > 4)
+            return;
+        p.onItem?.(key, e);
+    }
+    return _jsxs("div", { className: p.className, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', userSelect: 'none', ...p.style }, children: [_jsx("div", { ref: reorder.listRef, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }, children: p.items.map(it => {
+                    const r = reorder.item(it.key);
+                    const drag = {
+                        onMouseDown: (e) => {
+                            down.current = { x: e.clientX, y: e.clientY };
+                            r.props.onMouseDown(e);
+                        },
+                        onTouchStart: r.props.onTouchStart,
+                    };
+                    return _jsx(MenuButton, { item: it, onItem: onItem, drag: drag, compact: p.compact, style: {
+                            ...r.style,
+                            ...(r.dragging ? { zIndex: 3, boxShadow: '0 3px 10px rgba(0,0,0,0.35)' }
+                                : r.active ? { transition: 'transform 0.15s ease' } : null),
+                        } }, it.key);
+                }) }), !!p.tail?.length && _jsxs(_Fragment, { children: [_jsx("div", { style: { width: 1, alignSelf: 'stretch', margin: '1px 2px', background: '#d0d7de' } }), p.tail.map(it => _jsx(MenuButton, { item: it, onItem: p.onItem, compact: p.compact }, it.key))] })] });
+}
+/** The binding layer: MenuStrip fed by a ColumnStateController. Buttons follow
+ *  config.order (the grid mirror is free: both sides subscribe to the same
+ *  config); state per button = disabled (column absent from the live grid) /
+ *  on / off. Default click toggles visibility; pass onItem for richer,
+ *  multi-state semantics - the strip below stays untouched. */
+export function ColumnsMenu(p) {
+    const cfg = p.state.api.useConfig();
+    const present = p.state.api.usePresent();
+    const byKey = new Map(p.state.columns.map(c => [c.key, c]));
+    const items = cfg.order.filter(k => byKey.has(k)).map(k => {
+        const c = byKey.get(k);
+        return {
+            key: k, title: c.title, short: c.short, icon: c.icon, fixed: c.fixed,
+            state: present && !present[k] ? 'disabled' : cfg.visible[k] != false ? 'on' : 'off',
+            marks: p.marks?.(k, cfg),
+        };
+    });
+    function onItem(key, e) {
+        if (!byKey.has(key))
+            return p.onTail?.(key, e);
+        if (p.onItem)
+            return p.onItem(key, e);
+        if (byKey.get(key)?.fixed)
+            return;
+        p.state.api.show(key, cfg.visible[key] == false);
+    }
+    /** Simulated drop with the same fixed pinning as the config's normalize():
+     *  the drag preview never disagrees with where the button actually lands. */
+    function movedOrder(order, key, to) {
+        const next = order.slice();
+        const from = next.indexOf(key);
+        if (from == -1)
+            return next;
+        next.splice(from, 1);
+        next.splice(Math.max(0, Math.min(next.length, to)), 0, key);
+        const res = next.filter(k => !byKey.get(k)?.fixed);
+        p.state.columns.forEach(function pinFixed(c, i) {
+            if (c.fixed)
+                res.splice(Math.min(i, res.length), 0, c.key);
+        });
+        return res;
+    }
+    return _jsx(MenuStrip, { items: items, tail: p.tail, onItem: onItem, onMove: p.reorder == false ? undefined : order => p.state.api.move(order), move: movedOrder, holdMs: p.holdMs, compact: p.compact, className: p.className, style: p.style });
+}

package/lib/common/src/grid/columnState/columnState.d.ts

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react';
+import type { GridApi } from 'ag-grid-community';
+export type ColumnMeta = {
+    /** stable id (persist key; must equal the grid colId) */
+    key: string;
+    /** full human name - menus, card labels */
+    title: string;
+    /** short caption for icons/cards (falls back to title) */
+    short?: string;
+    /** glyph for icon menus */
+    icon?: ReactNode;
+    /** group key for columns with sub-columns ("versions" etc.) */
+    group?: string;
+    /** cannot be hidden or reordered (pinned to its descriptor index) */
+    fixed?: boolean;
+    /** default true */
+    defaultVisible?: boolean;
+    /** role in the mobile card view: 'title' = card header, 'accent' = badge */
+    cardRole?: 'title' | 'accent';
+};
+export type ColumnsSort = {
+    key: string;
+    dir: 'asc' | 'desc';
+};
+export type ColumnsConfig = {
+    /** schema version of the persisted shape */
+    v: number;
+    /** column keys, display order */
+    order: string[];
+    visible: {
+        [key: string]: boolean;
+    };
+    /** column widths - written by the grid adapter only */
+    width: {
+        [key: string]: number;
+    };
+    /** STICKY sort: independent of visibility and of any UI selection, may point
+     *  at a hidden column; changes only by an explicit toggle or a header click */
+    sort: ColumnsSort | null;
+    /** grid filterModel - written by the grid adapter only */
+    filter: {
+        [key: string]: unknown;
+    };
+    /** group key -> enabled sub-column keys */
+    groups: {
+        [group: string]: string[];
+    };
+};
+export declare function createColumnState(opts: {
+    /** persistence key (memoryProps -> memoryCache), like createToolbar */
+    key: string;
+    /** column descriptors; the config only ever references them by key */
+    columns: ColumnMeta[];
+    /** defaults; missing fields are derived from columns */
+    def?: Partial<ColumnsConfig>;
+    /** grid->store save debounce, ms (default 300) */
+    saveMs?: number;
+}): {
+    /** The column descriptors this state was created over - UI components
+     *  (dots, cards, icon menus) render from these + the config. */
+    columns: readonly ColumnMeta[];
+    api: {
+        getConfig: () => ColumnsConfig;
+        setConfig: (next: ColumnsConfig) => void;
+        useConfig: () => ColumnsConfig;
+        onChange: import("wenay-common2").ListenApi<[ColumnsConfig]>;
+        reset: () => void;
+        show: (key: string, on: boolean) => void;
+        move: (order: string[]) => void;
+        setSort: (sort: ColumnsSort | null) => void;
+        toggleSort: (key: string) => void;
+        visibleKeys: () => string[];
+        getPresent: () => {
+            [key: string]: true;
+        } | null;
+        usePresent: () => {
+            [key: string]: true;
+        } | null;
+        isPresent: (key: string) => boolean;
+        setPresent: (keys: string[] | null) => void;
+        listSource: {
+            useConfig(): {
+                order: string[];
+                visible: {
+                    [key: string]: boolean;
+                };
+            };
+            getConfig(): {
+                order: string[];
+                visible: {
+                    [key: string]: boolean;
+                };
+            };
+            setConfig(next: {
+                order: string[];
+                visible: {
+                    [k: string]: boolean;
+                };
+            }): void;
+            onChange: (cb: (cfg: {
+                order: string[];
+                visible: {
+                    [k: string]: boolean;
+                };
+            }) => void) => import("wenay-common2").ListenOff;
+        };
+    };
+    grid: {
+        attach: (api: GridApi) => void;
+        detach: () => void;
+    };
+};
+export type ColumnStateController = ReturnType<typeof createColumnState>;