@alaarab/ogrid-react 2.0.0-beta

package/dist/esm/hooks/useFillHandle.js

@@ -0,0 +1,195 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { normalizeSelectionRange } from '../types';
+import { getCellValue, parseValue } from '../utils';
+/** DOM attribute name for fill-drag range highlighting (same as cell selection drag). */
+const DRAG_ATTR = 'data-drag-range';
+/**
+ * Manages Excel-style fill handle drag-to-fill for cell ranges.
+ * @param params - Items, columns, selection range, editability, and value change callback.
+ * @returns Fill drag state, setter, and mousedown handler for the fill handle.
+ */
+export function useFillHandle(params) {
+    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, } = params;
+    const [fillDrag, setFillDrag] = useState(null);
+    const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
+    const rafRef = useRef(0);
+    const liveFillRangeRef = useRef(null);
+    useEffect(() => {
+        if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current)
+            return;
+        fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
+        liveFillRangeRef.current = null;
+        const colOff = colOffset;
+        const applyDragAttrs = (range) => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const minR = Math.min(range.startRow, range.endRow);
+            const maxR = Math.max(range.startRow, range.endRow);
+            const minC = Math.min(range.startCol, range.endCol);
+            const maxC = Math.max(range.startCol, range.endCol);
+            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+            for (let i = 0; i < cells.length; i++) {
+                const el = cells[i];
+                const r = parseInt(el.getAttribute('data-row-index'), 10);
+                const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
+                const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+                if (inRange) {
+                    if (!el.hasAttribute(DRAG_ATTR))
+                        el.setAttribute(DRAG_ATTR, '');
+                }
+                else {
+                    if (el.hasAttribute(DRAG_ATTR))
+                        el.removeAttribute(DRAG_ATTR);
+                }
+            }
+        };
+        const clearDragAttrs = () => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
+            for (let i = 0; i < marked.length; i++)
+                marked[i].removeAttribute(DRAG_ATTR);
+        };
+        let lastFillMousePos = null;
+        const resolveRange = (cx, cy) => {
+            const target = document.elementFromPoint(cx, cy);
+            const cell = target?.closest?.('[data-row-index][data-col-index]');
+            if (!cell || !wrapperRef.current?.contains(cell))
+                return null;
+            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
+            return normalizeSelectionRange({
+                startRow: fillDrag.startRow,
+                startCol: fillDrag.startCol,
+                endRow: r,
+                endCol: dataCol,
+            });
+        };
+        const onMove = (e) => {
+            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                if (!lastFillMousePos)
+                    return;
+                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (!newRange)
+                    return;
+                // Skip if unchanged
+                const prev = liveFillRangeRef.current;
+                if (prev &&
+                    prev.startRow === newRange.startRow &&
+                    prev.startCol === newRange.startCol &&
+                    prev.endRow === newRange.endRow &&
+                    prev.endCol === newRange.endCol) {
+                    return;
+                }
+                liveFillRangeRef.current = newRange;
+                fillDragEndRef.current = { endRow: newRange.endRow, endCol: newRange.endCol };
+                applyDragAttrs(newRange);
+            });
+        };
+        const onUp = () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+            // Flush: resolve final position if RAF hasn't executed yet
+            if (lastFillMousePos) {
+                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (flushed) {
+                    liveFillRangeRef.current = flushed;
+                    fillDragEndRef.current = { endRow: flushed.endRow, endCol: flushed.endCol };
+                }
+            }
+            clearDragAttrs();
+            const end = fillDragEndRef.current;
+            const norm = normalizeSelectionRange({
+                startRow: fillDrag.startRow,
+                startCol: fillDrag.startCol,
+                endRow: end.endRow,
+                endCol: end.endCol,
+            });
+            // Commit range to React state
+            setSelectionRange(norm);
+            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOff });
+            // Apply fill values
+            const startItem = items[norm.startRow];
+            const startColDef = visibleCols[norm.startCol];
+            if (startItem && startColDef) {
+                const startValue = getCellValue(startItem, startColDef);
+                beginBatch?.();
+                for (let row = norm.startRow; row <= norm.endRow; row++) {
+                    for (let col = norm.startCol; col <= norm.endCol; col++) {
+                        if (row === fillDrag.startRow && col === fillDrag.startCol)
+                            continue;
+                        if (row >= items.length || col >= visibleCols.length)
+                            continue;
+                        const item = items[row];
+                        const colDef = visibleCols[col];
+                        const colEditable = colDef.editable === true ||
+                            (typeof colDef.editable === 'function' && colDef.editable(item));
+                        if (!colEditable)
+                            continue;
+                        const oldValue = getCellValue(item, colDef);
+                        const result = parseValue(startValue, oldValue, item, colDef);
+                        if (!result.valid)
+                            continue;
+                        onCellValueChanged({
+                            item,
+                            columnId: colDef.columnId,
+                            oldValue,
+                            newValue: result.value,
+                            rowIndex: row,
+                        });
+                    }
+                }
+                endBatch?.();
+            }
+            setFillDrag(null);
+            liveFillRangeRef.current = null;
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        return () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        fillDrag,
+        editable,
+        colOffset,
+        items,
+        visibleCols,
+        setSelectionRange,
+        setActiveCell,
+        onCellValueChanged,
+        // wrapperRef excluded — refs are stable across renders
+        beginBatch,
+        endBatch,
+    ]);
+    // Ref mirror — keeps handleFillHandleMouseDown stable across selection changes
+    const selectionRangeRef = useRef(selectionRange);
+    selectionRangeRef.current = selectionRange;
+    const handleFillHandleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = selectionRangeRef.current;
+        if (!range)
+            return;
+        setFillDrag({
+            startRow: range.startRow,
+            startCol: range.startCol,
+        });
+    }, []);
+    return { fillDrag, setFillDrag, handleFillHandleMouseDown };
+}

package/dist/esm/hooks/useFilterOptions.js

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+/**
+ * Load filter options for the given fields from a data source.
+ *
+ * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
+ */
+export function useFilterOptions(dataSource, fields) {
+    const [filterOptions, setFilterOptions] = useState({});
+    const [loadingOptions, setLoadingOptions] = useState({});
+    const fieldsKey = useMemo(() => [...fields].sort().join(','), [fields]);
+    const load = useCallback(async () => {
+        const fetcher = 'fetchFilterOptions' in dataSource && typeof dataSource.fetchFilterOptions === 'function'
+            ? dataSource.fetchFilterOptions.bind(dataSource)
+            : undefined;
+        if (!fetcher) {
+            setFilterOptions({});
+            setLoadingOptions({});
+            return;
+        }
+        const loading = {};
+        fields.forEach((f) => { loading[f] = true; });
+        setLoadingOptions(loading);
+        const results = {};
+        await Promise.all(fields.map(async (field) => {
+            try {
+                results[field] = await fetcher(field);
+            }
+            catch {
+                results[field] = [];
+            }
+        }));
+        setFilterOptions(results);
+        setLoadingOptions({});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dataSource, fieldsKey]);
+    useEffect(() => {
+        load().catch(() => { });
+    }, [load]);
+    return { filterOptions, loadingOptions };
+}

package/dist/esm/hooks/useInlineCellEditorState.js

@@ -0,0 +1,44 @@
+/**
+ * Headless inline cell editor state for Fluent, Material, and Radix InlineCellEditor.
+ * UI packages use this hook and render only the framework input (Input, TextField, select, Checkbox).
+ */
+import { useState, useCallback } from 'react';
+/**
+ * Returns localValue/setLocalValue (for text), handleKeyDown (Escape cancel, Enter commit for text),
+ * handleBlur (commit on blur for text), commit(value), cancel(). UI renders only the input.
+ */
+export function useInlineCellEditorState(params) {
+    const { value, editorType, onCommit, onCancel } = params;
+    const [localValue, setLocalValue] = useState(value !== null && value !== undefined ? String(value) : '');
+    const commit = useCallback((v) => {
+        onCommit(v);
+    }, [onCommit]);
+    const cancel = useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation(); // Don't let the grid handler clear selection on Escape
+            cancel();
+        }
+        if (e.key === 'Enter' && editorType === 'text') {
+            e.preventDefault();
+            e.stopPropagation(); // Don't let the grid handler re-open an editor
+            commit(localValue);
+        }
+    }, [cancel, commit, localValue, editorType]);
+    const handleBlur = useCallback(() => {
+        if (editorType === 'text') {
+            commit(localValue);
+        }
+    }, [editorType, localValue, commit]);
+    return {
+        localValue,
+        setLocalValue,
+        handleKeyDown,
+        handleBlur,
+        commit,
+        cancel,
+    };
+}