@vuu-ui/vuu-utils 3.0.0 → 3.1.0-beta.2

package/src/tree-utils.js

@@ -0,0 +1,96 @@
+import { metadataKeys } from "./column-utils.js";
+const { COUNT: COUNT, DEPTH: DEPTH, IDX: IDX, KEY: KEY } = metadataKeys;
+const timestamp = 0;
+const isNew = false;
+const treeToDataSourceRows = (treeSourceNodes, iconProvider)=>{
+    const columns = [];
+    columns.push({
+        hidden: true,
+        name: "nodeData",
+        type: "json"
+    }, {
+        getIcon: iconProvider?.getIcon,
+        name: "Level 1",
+        type: "string"
+    }, {
+        getIcon: iconProvider?.getIcon,
+        name: "Level 2",
+        type: "string"
+    });
+    const rows = [];
+    addChildValues(rows, treeSourceNodes, columns, iconProvider);
+    return [
+        columns,
+        rows
+    ];
+};
+const addChildValues = (rows, treeSourceNodes, cols, iconProvider, index = {
+    value: 0
+}, keyBase = "$root", depth = 1)=>{
+    let leafCount = 0;
+    let rowCount = 0;
+    if (depth === cols.length - 1) cols.push({
+        getIcon: iconProvider?.getIcon,
+        name: `Level ${cols.length}`,
+        type: "string"
+    });
+    for(let i = 0; i < treeSourceNodes.length; i++, index.value += 1){
+        const { childNodes, icon, label, nodeData } = treeSourceNodes[i];
+        const blanks = Array(depth - 1).fill("");
+        const fullKey = `${keyBase}|${label}`;
+        const row = [
+            index.value,
+            index.value,
+            false,
+            false,
+            depth,
+            0,
+            fullKey,
+            0,
+            timestamp,
+            isNew,
+            nodeData,
+            ...blanks,
+            label
+        ];
+        if (icon) iconProvider?.setIcon(fullKey, icon);
+        rows.push(row);
+        rowCount += 1;
+        if (childNodes && childNodes.length > 0) {
+            const [nestedLeafCount, nestedRowCount] = addChildValues(rows, childNodes, cols, iconProvider, {
+                value: index.value + 1
+            }, fullKey, depth + 1);
+            row[COUNT] = nestedLeafCount;
+            leafCount += nestedLeafCount;
+            rowCount += nestedRowCount;
+            index.value += nestedRowCount;
+        } else leafCount += 1;
+    }
+    return [
+        leafCount,
+        rowCount
+    ];
+};
+const lastPathSegment = (path, separator = "/")=>{
+    const root = path.endsWith(separator) ? path.slice(0, -1) : path;
+    return root.slice(root.lastIndexOf(separator) + 1);
+};
+const dropLastPathSegment = (path, separator = "/")=>path.slice(0, path.lastIndexOf(separator));
+const getParentRow = (rows, row)=>{
+    const { [IDX]: idx, [DEPTH]: depth } = row;
+    for(let i = idx - 1; i >= 0; i--){
+        const nextRow = rows[i];
+        if (nextRow[DEPTH] === depth - 1) return nextRow;
+    }
+};
+const rowsAreSiblings = (key1, key2)=>dropLastPathSegment(key1, "|") === dropLastPathSegment(key2, "|");
+const missingAncestor = (row, previousRow)=>{
+    if (previousRow) {
+        const prevKey = previousRow[KEY];
+        const key = row[KEY];
+        if (key.startsWith(prevKey)) ;
+        else if (!rowsAreSiblings(prevKey, key)) return true;
+    } else if (row[DEPTH] > 1) return true;
+    return false;
+};
+export { dropLastPathSegment, getParentRow, lastPathSegment, missingAncestor, treeToDataSourceRows };

package/src/ts-utils.js

@@ -0,0 +1,6 @@
+function isNotNullOrUndefined(value) {
+    return null != value;
+}
+const isObject = (o)=>"object" == typeof o && null !== o;
+const elementImplementsJSONSerialization = (element)=>"function" == typeof element.type.toJSON;
+export { elementImplementsJSONSerialization, isNotNullOrUndefined, isObject };

package/src/typeahead-utils.js

@@ -0,0 +1,4 @@
+const NO_DATA_MATCH = [
+    "No matching data"
+];
+export { NO_DATA_MATCH };

package/src/url-utils.js

@@ -0,0 +1,12 @@
+function getUrlParameter(paramName, defaultValue) {
+    const url = new URL(document.location.href);
+    const parameter = url.searchParams.get(paramName);
+    if (parameter) return parameter;
+    const hashParams = url.hash;
+    const regex = new RegExp(`${paramName}=([a-zA-Z]*)`);
+    const result = regex.exec(hashParams);
+    if (result) return result[1];
+    return defaultValue;
+}
+const hasUrlParameter = (paramName)=>new URL(document.location.href).searchParams.has(paramName);
+export { getUrlParameter, hasUrlParameter };

package/src/useId.js

@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+let vuuComponentIdCount = 0;
+const useId = (id)=>useMemo(()=>id ?? `vuu-${++vuuComponentIdCount}`, [
+        id
+    ]);
+export { useId };

package/src/useLayoutEffectSkipFirst.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect, useRef } from "react";
+const useLayoutEffectSkipFirst = (func, deps)=>{
+    const goodToGo = useRef(false);
+    useLayoutEffect(()=>{
+        if (goodToGo.current) func();
+        else goodToGo.current = true;
+    }, deps);
+};
+export { useLayoutEffectSkipFirst };

package/src/useResizeObserver.js

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useRef } from "react";
+const WidthHeight = [
+    "height",
+    "width"
+];
+const WidthOnly = [
+    "width"
+];
+const observedMap = new Map();
+const getTargetSize = (element, size, dimension)=>{
+    switch(dimension){
+        case "height":
+            return size.height;
+        case "clientHeight":
+            return Math.floor(element.clientHeight);
+        case "clientWidth":
+            return Math.floor(element.clientWidth);
+        case "contentHeight":
+            return size.contentHeight;
+        case "contentWidth":
+            return size.contentWidth;
+        case "scrollHeight":
+            return Math.ceil(Math.floor(element.scrollHeight));
+        case "scrollWidth":
+            return Math.ceil(Math.floor(element.scrollWidth));
+        case "width":
+            return size.width;
+        default:
+            return 0;
+    }
+};
+const resizeObserver = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const { target, borderBoxSize, contentBoxSize } = entry;
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+            const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+            const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+            const { onResize, measurements } = observedTarget;
+            let sizeChanged = false;
+            for (const [dimension, size] of Object.entries(measurements)){
+                const newSize = getTargetSize(target, {
+                    height,
+                    width,
+                    contentHeight,
+                    contentWidth
+                }, dimension);
+                if (newSize !== size) {
+                    sizeChanged = true;
+                    measurements[dimension] = newSize;
+                }
+            }
+            if (sizeChanged) onResize && onResize(measurements);
+        }
+    }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+    const dimensionsRef = useRef(dimensions);
+    const measure = useCallback((target)=>{
+        const { width, height } = target.getBoundingClientRect();
+        const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+        const flooredHeight = Math.floor(height);
+        const flooredWidth = Math.floor(width);
+        return dimensionsRef.current.reduce((map, dim)=>{
+            map[dim] = getTargetSize(target, {
+                width: flooredWidth,
+                height: flooredHeight,
+                contentHeight,
+                contentWidth
+            }, dim);
+            return map;
+        }, {});
+    }, []);
+    useEffect(()=>{
+        const target = ref.current;
+        async function registerObserver() {
+            observedMap.set(target, {
+                measurements: {}
+            });
+            const observedTarget = observedMap.get(target);
+            if (observedTarget) {
+                const measurements = measure(target);
+                observedTarget.measurements = measurements;
+                resizeObserver.observe(target);
+                if (reportInitialSize) onResize(measurements);
+            } else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation", "font-weight:bold; color:red;");
+        }
+        if (target) {
+            if (observedMap.has(target)) console.log("useResizeObserver attemping to observe same element twice", {
+                target
+            });
+            registerObserver();
+        }
+        return ()=>{
+            if (target && observedMap.has(target)) {
+                resizeObserver.unobserve(target);
+                observedMap.delete(target);
+            }
+        };
+    }, [
+        measure,
+        ref
+    ]);
+    useEffect(()=>{
+        const target = ref.current;
+        const record = observedMap.get(target);
+        if (record) {
+            if (dimensionsRef.current !== dimensions) {
+                dimensionsRef.current = dimensions;
+                const measurements = measure(target);
+                record.measurements = measurements;
+            }
+            record.onResize = onResize;
+        }
+    }, [
+        dimensions,
+        measure,
+        ref,
+        onResize
+    ]);
+}
+export { WidthHeight, WidthOnly, useResizeObserver };

package/src/useStateRef.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef, useState } from "react";
+const isSimpleStateValue = (arg)=>"function" != typeof arg;
+const useStateRef = (initialValue)=>{
+    const [value, _setValue] = useState(initialValue);
+    const ref = useRef(value);
+    const setValue = useCallback((arg)=>{
+        if (isSimpleStateValue(arg)) {
+            ref.current = arg;
+            _setValue(arg);
+        } else {
+            const { current: prev } = ref;
+            ref.current = arg(prev);
+            _setValue(ref.current);
+        }
+    }, []);
+    return [
+        ref,
+        setValue
+    ];
+};
+export { useStateRef };