@vuu-ui/vuu-table 2.1.19-beta.1 → 2.1.19-beta.2

package/src/bulk-edit/InsertNewRowEditor.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
+import clsx from "clsx";
+import { VirtualColSpan } from "../VirtualColSpan.mjs";
+import { useHeaderProps } from "../table-header/index.mjs";
+import { useBulkEditRow } from "./useColumnCascadingEditor.mjs";
+import { isNotHidden } from "@vuu-ui/vuu-utils";
+import InsertNewRowEditor from "./InsertNewRowEditor.css";
+const classBase = "vuuBulkEditRow";
+const InsertNewRowEditor_InsertNewRowEditor = ({ ariaRole, onBulkChange, onRowChange, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-bulk-edit-row",
+        css: InsertNewRowEditor,
+        window: targetWindow
+    });
+    const { columns, virtualColSpan = 0 } = useHeaderProps();
+    const { errorMessages, formFieldsContainerRef, InputProps, onCommit, onFocus, onKeyDown } = useBulkEditRow({
+        descriptors: columns,
+        onBulkChange,
+        onRowChange
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: classBase,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        ref: formFieldsContainerRef,
+        role: ariaRole,
+        children: [
+            /*#__PURE__*/ jsx(VirtualColSpan, {
+                width: virtualColSpan
+            }),
+            columns.filter(isNotHidden).map((column, i)=>{
+                const errorMessage = errorMessages[column.name];
+                return /*#__PURE__*/ jsx("div", {
+                    "aria-colindex": i + 1,
+                    className: clsx(`${classBase}Cell`, "vuuTableCell", {
+                        "vuuTableCell-right": "right" === column.align
+                    }),
+                    "data-field": column.name,
+                    role: "cell",
+                    style: {
+                        width: column.width
+                    },
+                    children: column.editable ? getDataItemEditControl({
+                        InputProps,
+                        dataDescriptor: column,
+                        errorMessage,
+                        onCommit
+                    }) : null
+                }, column.name);
+            })
+        ]
+    });
+};
+export { InsertNewRowEditor_InsertNewRowEditor as InsertNewRowEditor };

package/src/bulk-edit/useBulkEditPanel.mjs

@@ -0,0 +1,61 @@
+import { buildValidationChecker } from "@vuu-ui/vuu-data-react";
+import { hasValidationRules, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const addRenderer = (colType, rendererName)=>({
+        name: colType.name,
+        rules: colType.rules,
+        formatting: colType.formatting,
+        renderer: {
+            name: rendererName
+        }
+    });
+const useBulkEditPanel = ({ columns, sessionDs: dataSource })=>{
+    const [rowState, setRowState] = useState(true);
+    const tableConfig = useMemo(()=>({
+            columns: columns ? columns.map((col)=>({
+                    editable: "bulk" === col.editableBulk,
+                    hidden: false === col.editableBulk,
+                    name: col.name,
+                    serverDataType: col.serverDataType ?? "string",
+                    type: isTypeDescriptor(col.type) ? addRenderer(col.type, "input-cell") : "string",
+                    clientSideEditValidationCheck: hasValidationRules(col.type) ? buildValidationChecker(col.type.rules) : void 0,
+                    width: 120
+                })) : dataSource.columns.map((name)=>({
+                    editable: true,
+                    name,
+                    serverDataType: "string"
+                })),
+            columnLayout: "fit",
+            columnDefaultWidth: 100,
+            rowSeparators: true
+        }), [
+        columns,
+        dataSource.columns
+    ]);
+    const handleRowChange = useCallback((isValid)=>{
+        if (isValid !== rowState) setRowState(isValid);
+    }, [
+        rowState
+    ]);
+    const handleBulkChange = useCallback(async (column, value)=>{
+        const response = await dataSource.rpcRequest?.({
+            params: {
+                column: column.name,
+                value
+            },
+            rpcName: "VP_BULK_EDIT_COLUMN_CELLS_RPC",
+            type: "RPC_REQUEST"
+        });
+        console.log({
+            response
+        });
+    }, [
+        dataSource
+    ]);
+    return {
+        tableConfig,
+        onBulkChange: handleBulkChange,
+        onRowChange: handleRowChange
+    };
+};
+export { useBulkEditPanel };

package/src/bulk-edit/useColumnCascadingEditor.mjs

@@ -0,0 +1,124 @@
+import { buildValidationChecker, getEditValidationRules } from "@vuu-ui/vuu-data-react";
+import { getTypedValue, queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useEditableCell } from "../useEditableCell.mjs";
+const getValidationChecker = (descriptor, editPhase)=>{
+    const rules = getEditValidationRules(descriptor, editPhase);
+    return buildValidationChecker(rules);
+};
+const nextValidationState = (state, dataDescriptor, value)=>{
+    const check = getValidationChecker(dataDescriptor, "change");
+    const result = check(value, "change");
+    const { name } = dataDescriptor;
+    const { ok: wasOk, messages: existingMessages } = state;
+    if (!result.ok) return {
+        ok: false,
+        messages: {
+            ...existingMessages,
+            [name]: result.messages.join("\n")
+        }
+    };
+    if (!wasOk) {
+        const fieldsInError = Object.keys(existingMessages);
+        if (fieldsInError.includes(name)) if (1 === fieldsInError.length) return {
+            ok: true,
+            messages: {}
+        };
+        else {
+            const messages = {
+                ...existingMessages
+            };
+            delete messages[name];
+            return {
+                ok: false,
+                messages
+            };
+        }
+    }
+    return state;
+};
+function find(descriptors, fieldname) {
+    const d = descriptors.find(({ name })=>name === fieldname);
+    if (d) return d;
+    throw Error(`DataValueDescriptor not found for field ${fieldname}`);
+}
+const getField = (target)=>{
+    const fieldElement = queryClosest(target, "[data-field]");
+    if (fieldElement) return fieldElement.dataset.field;
+    throw Error("no field ");
+};
+const useBulkEditRow = ({ descriptors, onBulkChange, onRowChange })=>{
+    const formFieldsContainerRef = useRef(null);
+    const focusedFieldRef = useRef("");
+    const [, forceUpdate] = useState({});
+    const validationStateRef = useRef({
+        ok: true,
+        messages: {}
+    });
+    const bulkRowValidationState = useCallback((state)=>{
+        validationStateRef.current = state;
+        onRowChange(state.ok);
+        forceUpdate({});
+    }, [
+        onRowChange
+    ]);
+    const handleFocus = useCallback((evt)=>{
+        if (formFieldsContainerRef.current?.contains(evt.target)) {
+            const fieldName = getField(evt.target);
+            if (fieldName) {
+                if (fieldName) focusedFieldRef.current = fieldName;
+            }
+        }
+    }, []);
+    const handleChange = useCallback((evt)=>{
+        const { current: fieldName } = focusedFieldRef;
+        if (fieldName) {
+            const input = queryClosest(evt.target, "input", true);
+            const dataDescriptor = find(descriptors, fieldName);
+            const value = input.value;
+            const { current: state } = validationStateRef;
+            const newState = nextValidationState(state, dataDescriptor, value);
+            if (newState !== state) bulkRowValidationState(newState);
+        }
+    }, [
+        descriptors,
+        bulkRowValidationState
+    ]);
+    const { current: { messages: errorMessages } } = validationStateRef;
+    const handleCommit = useCallback((evt, value)=>{
+        if ("string" == typeof value && "" !== value.trim()) {
+            const columnName = focusedFieldRef.current;
+            if (columnName) {
+                const column = descriptors.find((c)=>c.name === columnName);
+                if (column && void 0 === errorMessages[columnName]) {
+                    const { serverDataType = "string" } = column;
+                    const typedValue = getTypedValue(value, serverDataType, true);
+                    onBulkChange(column, typedValue);
+                }
+            }
+        }
+    }, [
+        descriptors,
+        errorMessages,
+        onBulkChange
+    ]);
+    const InputProps = useMemo(()=>({
+            inputProps: {
+                placeholder: "Enter value"
+            },
+            onChange: handleChange,
+            variant: "primary"
+        }), [
+        handleChange
+    ]);
+    const onKeyDown = useEditableCell();
+    return {
+        errorMessages,
+        formFieldsContainerRef,
+        InputProps,
+        onCommit: handleCommit,
+        onFocus: handleFocus,
+        onKeyDown
+    };
+};
+export { useBulkEditRow };

package/src/cell-block/CellBlock.css.js

@@ -0,0 +1,95 @@
+const css = `
+.vuuCellBlock {
+  opacity: .3;
+  bottom: anchor(--cellblock-start bottom);
+  left: anchor(--cellblock-start left);
+  right: anchor(--cellblock-start right);
+  top: anchor(--cellblock-start top);
+  background-color: #00bdff;
+  border: 1px solid #00f;
+  position: absolute;
+
+  &.cellblock-direction-n {
+    bottom: anchor(--cellblock-start bottom);
+    left: anchor(--cellblock-start left);
+    right: anchor(--cellblock-start right);
+    top: anchor(--cellblock-end top);
+  }
+
+  &.cellblock-direction-ne {
+    bottom: anchor(--cellblock-start bottom);
+    left: anchor(--cellblock-start left);
+    right: anchor(--cellblock-end right);
+    top: anchor(--cellblock-end top);
+  }
+
+  &.cellblock-direction-e {
+    bottom: anchor(--cellblock-start bottom);
+    left: anchor(--cellblock-start left);
+    right: anchor(--cellblock-end right);
+    top: anchor(--cellblock-start top);
+  }
+
+  &.cellblock-direction-se {
+    bottom: anchor(--cellblock-end bottom);
+    left: anchor(--cellblock-start left);
+    right: anchor(--cellblock-end right);
+    top: anchor(--cellblock-start top);
+  }
+
+  &.cellblock-direction-s {
+    bottom: anchor(--cellblock-end bottom);
+    left: anchor(--cellblock-start left);
+    right: anchor(--cellblock-start right);
+    top: anchor(--cellblock-start top);
+  }
+
+  &.cellblock-direction-sw {
+    bottom: anchor(--cellblock-end bottom);
+    left: anchor(--cellblock-end left);
+    right: anchor(--cellblock-start right);
+    top: anchor(--cellblock-start top);
+  }
+
+  &.cellblock-direction-w {
+    bottom: anchor(--cellblock-start bottom);
+    left: anchor(--cellblock-end left);
+    right: anchor(--cellblock-start right);
+    top: anchor(--cellblock-start top);
+  }
+
+  &.cellblock-direction-nw {
+    bottom: anchor(--cellblock-start bottom);
+    left: anchor(--cellblock-end left);
+    right: anchor(--cellblock-start right);
+    top: anchor(--cellblock-end top);
+  }
+}
+
+.vuu-cellblock-start {
+  anchor-name: --cellblock-start;
+}
+
+.vuuTable.vuu-cellblock-select-in-progress-keyboard {
+  & .vuuTableCell:focus {
+    anchor-name: --cellblock-end;
+  }
+
+  & .vuuCellBlock {
+    pointer-events: none;
+  }
+}
+
+.vuuTable.vuu-cellblock-select-in-progress-mouse {
+  & .vuuCellBlock {
+    pointer-events: none;
+  }
+}
+
+.vuu-cellblock-end {
+  anchor-name: --cellblock-end;
+}
+
+
+`;
+export default css;

package/src/cell-block/CellBlock.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CellBlock_0 from "./CellBlock.css";
+const classBase = "vuuCellBlock";
+const CellBlock_CellBlock = /*#__PURE__*/ forwardRef(function({ className, onCopy, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-cell-block",
+        css: CellBlock_0,
+        window: targetWindow
+    });
+    const handleKeyDown = useCallback(async (evt)=>{
+        if (evt.metaKey && "c" === evt.key) onCopy?.();
+    }, [
+        onCopy
+    ]);
+    const onContextMenu = useCallback(()=>{
+        console.log("on cvontext menu");
+    }, []);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        onContextMenu: onContextMenu,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0
+    });
+});
+export { CellBlock_CellBlock as CellBlock };

package/src/cell-block/cellblock-utils.mjs

@@ -0,0 +1,114 @@
+import { getAriaColIndex, getAriaRowIndex, queryClosest } from "@vuu-ui/vuu-utils";
+import { getAriaCellPos } from "../table-dom-utils.mjs";
+const isNullCellBox = ({ bottom, left, right, top })=>-1 === bottom && -1 === left && -1 === right && -1 === top;
+const Hi = Number.MAX_SAFE_INTEGER;
+const getEndCellDirection = (startBox, endBox)=>{
+    const { bottom: sBottom, left: sLeft, right: sRight, top: sTop } = startBox;
+    const { bottom: eBottom, left: eLeft, right: eRight, top: eTop } = endBox;
+    const north = eTop < sTop;
+    const east = eRight > sRight;
+    const south = eBottom > sBottom;
+    const west = eLeft < sLeft;
+    if (north && east) return "ne";
+    if (south && east) return "se";
+    if (south && west) return "sw";
+    if (north && west) return "nw";
+    if (north) return "n";
+    else if (east) return "e";
+    else if (south) return "s";
+    else if (west) return "w";
+    else return "self";
+};
+const setElementBox = (el, box)=>{
+    const { bottom, left, right, top } = el.getBoundingClientRect();
+    box.bottom = bottom;
+    box.left = left;
+    box.right = right;
+    box.top = top;
+};
+const outsideBox = ({ bottom, left, right, top }, x, y)=>x < left || x > right || y < top || y > bottom;
+const getRowIndex = (cell)=>getAriaRowIndex(queryClosest(cell, ".vuuTableRow"));
+const getTableCellBlock = (startCell, endCell)=>{
+    const colStart = getAriaColIndex(startCell);
+    const colEnd = getAriaColIndex(endCell);
+    const rowStart = getRowIndex(startCell);
+    const rowEnd = getRowIndex(endCell);
+    const columnRange = {
+        from: Math.min(colStart, colEnd),
+        to: Math.max(colStart, colEnd)
+    };
+    const rowRange = {
+        from: Math.min(rowStart, rowEnd),
+        to: Math.max(rowStart, rowEnd)
+    };
+    return {
+        columnRange,
+        rowRange
+    };
+};
+const refState = {
+    cellBlock: null,
+    cellBlockClassName: "",
+    dragState: "pending",
+    endBox: {
+        bottom: -1,
+        left: Hi,
+        right: -1,
+        top: Hi
+    },
+    endCell: null,
+    endPos: [
+        -1,
+        -1
+    ],
+    mousePosX: -1,
+    mousePosY: -1,
+    mouseStartX: -1,
+    mouseStartY: -1,
+    startBox: {
+        bottom: -1,
+        left: -1,
+        right: -1,
+        top: -1
+    },
+    startCell: null,
+    startPos: [
+        -1,
+        -1
+    ]
+};
+const updateCellBlockClassName = (state)=>{
+    const { cellBlock, cellBlockClassName, startBox, endBox } = state;
+    const endBlockDirection = getEndCellDirection(startBox, endBox);
+    const newCellBlockClassName = `cellblock-direction-${endBlockDirection}`;
+    if (newCellBlockClassName !== cellBlockClassName) {
+        if (cellBlockClassName) cellBlock?.classList.replace(cellBlockClassName, newCellBlockClassName);
+        else cellBlock?.classList.add(newCellBlockClassName);
+        state.cellBlockClassName = newCellBlockClassName;
+    }
+};
+const getTextFromCells = (startCell, endCell)=>{
+    const tableBody = queryClosest(startCell, ".vuuTable-body", true);
+    const [startRow, startCol] = getAriaCellPos(startCell);
+    const [endRow, endCol] = getAriaCellPos(endCell);
+    const rowRange = {
+        from: Math.min(startRow, endRow),
+        to: Math.max(startRow, endRow)
+    };
+    const colRange = {
+        from: Math.min(startCol, endCol),
+        to: Math.max(startCol, endCol)
+    };
+    const results = [];
+    for(let rowIdx = rowRange.from; rowIdx <= rowRange.to; rowIdx++){
+        const row = tableBody.querySelector(`.vuuTableRow[aria-rowindex='${rowIdx}']`);
+        const rowData = [];
+        for(let colIdx = colRange.from; colIdx <= colRange.to; colIdx++){
+            const cell = row?.querySelector(`.vuuTableCell[aria-colindex='${colIdx}']`);
+            if (cell) rowData.push(cell.textContent ?? "");
+        }
+        results.push(rowData);
+    }
+    return results.map((r)=>r.join("\t")).join("\n");
+};
+export { getEndCellDirection, getTableCellBlock, getTextFromCells, isNullCellBox, outsideBox, refState, setElementBox, updateCellBlockClassName };