@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/tree-view/hooks.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { TreeDataItem, TreeDataItemWithMeta } from "./types";
+
+/**
+ * Hook for managing tree search functionality
+ */
+export function useTreeSearch<T extends TreeDataItem>({
+  data,
+  searchQuery,
+  isCaseSensitive = false,
+  isRegex = false,
+}: {
+  data: T[];
+  searchQuery: string;
+  isCaseSensitive?: boolean;
+  isRegex?: boolean;
+}) {
+  const [isRegexValid, setIsRegexValid] = useState(true);
+
+  const { filteredData, matchingIds, searchResultsCount } = useMemo(() => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    if (!searchQuery) {
+      return {
+        filteredData: data,
+        matchingIds: new Set<string>(),
+        searchResultsCount: 0,
+      };
+    }
+
+    const matchingAndAncestorIds = new Set<string>();
+    const directMatchIds = new Set<string>();
+    let regex: RegExp | null = null;
+
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+        if (!isRegexValid) setIsRegexValid(true);
+      } catch {
+        if (isRegexValid) setIsRegexValid(false);
+        return {
+          filteredData: [],
+          matchingIds: new Set<string>(),
+          searchResultsCount: 0,
+        };
+      }
+    }
+
+    data.forEach((item) => {
+      let labelMatches = false;
+      if (regex) {
+        labelMatches = regex.test(item.label);
+      } else {
+        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
+        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
+        labelMatches = source.includes(query);
+      }
+
+      if (labelMatches) {
+        directMatchIds.add(item.id);
+        matchingAndAncestorIds.add(item.id);
+        // Add all ancestors to show the path to matching items
+        let current = item.parentId;
+        while (current) {
+          const parent = dataMap.get(current);
+          if (parent) {
+            matchingAndAncestorIds.add(parent.id);
+            current = parent.parentId;
+          } else {
+            break;
+          }
+        }
+      }
+    });
+
+    const filtered = data.filter((item) => matchingAndAncestorIds.has(item.id));
+
+    return {
+      filteredData: filtered,
+      matchingIds: directMatchIds,
+      searchResultsCount: directMatchIds.size,
+    };
+  }, [searchQuery, data, isCaseSensitive, isRegex, isRegexValid]);
+
+  // Helper function to render labels with search highlighting
+  const renderLabel = useCallback(
+    (label: string, itemId: string) => {
+      if (!searchQuery || !isRegexValid || !matchingIds.has(itemId)) {
+        return label;
+      }
+
+      let regex;
+      try {
+        regex = new RegExp(`(${searchQuery})`, isCaseSensitive ? "g" : "gi");
+      } catch {
+        return label;
+      }
+
+      const parts = label.split(regex);
+
+      return (
+        <>
+          {parts.map((part, i) =>
+            i % 2 === 1 ? (
+              <span key={i} className="rounded-uk-xs bg-accent-warning">
+                {part}
+              </span>
+            ) : (
+              part
+            ),
+          )}
+        </>
+      );
+    },
+    [searchQuery, isCaseSensitive, isRegexValid, matchingIds],
+  );
+
+  return {
+    filteredData,
+    searchResultsCount,
+    isRegexValid,
+    renderLabel,
+    hasActiveSearch: !!searchQuery,
+  };
+}
+
+/**
+ * Hook for managing tree expand/collapse state and visibility
+ */
+export function useTreeState<T extends TreeDataItem>({
+  data,
+  defaultExpanded = true,
+  expandedItems: externalExpandedItems,
+  onToggleItem: externalOnToggleItem,
+}: {
+  data: T[];
+  defaultExpanded?: boolean;
+  expandedItems?: Set<string>;
+  onToggleItem?: (id: string) => void;
+}) {
+  // Internal state (used if external state not provided)
+  const [internalExpandedItems, setInternalExpandedItems] = useState(() => {
+    const initial = new Set<string>();
+    if (defaultExpanded) {
+      data.forEach((item) => {
+        if (item.isCollapsible) initial.add(item.id);
+      });
+    }
+    return initial;
+  });
+
+  // Use external state if provided, otherwise use internal
+  const expandedItems = externalExpandedItems ?? internalExpandedItems;
+
+  const toggleItem = useCallback(
+    (id: string) => {
+      if (externalOnToggleItem) {
+        externalOnToggleItem(id);
+      } else {
+        setInternalExpandedItems((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(id)) {
+            newSet.delete(id);
+          } else {
+            newSet.add(id);
+          }
+          return newSet;
+        });
+      }
+    },
+    [externalOnToggleItem],
+  );
+
+  const expandAll = useCallback(() => {
+    const allCollapsible = new Set<string>();
+    data.forEach((item) => {
+      if (item.isCollapsible) allCollapsible.add(item.id);
+    });
+
+    if (externalExpandedItems) {
+      // If using external state, we need to call toggle for each item
+      allCollapsible.forEach((id) => {
+        if (!expandedItems.has(id) && externalOnToggleItem) {
+          externalOnToggleItem(id);
+        }
+      });
+    } else {
+      setInternalExpandedItems(allCollapsible);
+    }
+  }, [data, expandedItems, externalExpandedItems, externalOnToggleItem]);
+
+  const collapseAll = useCallback(() => {
+    if (externalExpandedItems) {
+      // If using external state, we need to call toggle for each item
+      expandedItems.forEach((id) => {
+        if (externalOnToggleItem) {
+          externalOnToggleItem(id);
+        }
+      });
+    } else {
+      setInternalExpandedItems(new Set());
+    }
+  }, [expandedItems, externalExpandedItems, externalOnToggleItem]);
+
+  // Build children map for hierarchy
+  const childrenMap = useMemo(() => {
+    const map = new Map<string | null, T[]>();
+    data.forEach((item) => {
+      if (!map.has(item.parentId)) {
+        map.set(item.parentId, []);
+      }
+      map.get(item.parentId)!.push(item);
+    });
+    return map;
+  }, [data]);
+
+  // Check if an item has descendants
+  const hasDescendants = useCallback(
+    (itemId: string): boolean => {
+      return (childrenMap.get(itemId) || []).length > 0;
+    },
+    [childrenMap],
+  );
+
+  // Build data with metadata (ancestors, indent, isLast)
+  const dataWithMeta = useMemo((): TreeDataItemWithMeta<T>[] => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    const getAncestors = (item: T) => {
+      const ancestors: T[] = [];
+      let current = item.parentId;
+      while (current) {
+        const parent = dataMap.get(current);
+        if (parent) {
+          ancestors.unshift(parent);
+          current = parent.parentId;
+        } else {
+          break;
+        }
+      }
+      return ancestors;
+    };
+
+    const sortedData: T[] = [];
+    const visited = new Set<string>();
+
+    const traverseNode = (nodeId: string | null) => {
+      const children = childrenMap.get(nodeId) || [];
+      children.forEach((child) => {
+        if (!visited.has(child.id)) {
+          visited.add(child.id);
+          sortedData.push(child);
+          traverseNode(child.id);
+        }
+      });
+    };
+
+    traverseNode(null);
+
+    return sortedData.map((item) => {
+      const siblings = childrenMap.get(item.parentId) || [];
+      const isLast = siblings.length > 0 && siblings[siblings.length - 1].id === item.id;
+      const ancestors = getAncestors(item);
+      const indent = ancestors.length;
+      return { ...item, indent, isLast, ancestors };
+    });
+  }, [data, childrenMap]);
+
+  // Get visible items (respecting expand/collapse state)
+  const visibleData = useMemo(() => {
+    const isVisible = (item: TreeDataItemWithMeta<T>) => {
+      return item.ancestors.every(
+        (ancestor) => !ancestor.isCollapsible || expandedItems.has(ancestor.id),
+      );
+    };
+    return dataWithMeta.filter(isVisible);
+  }, [dataWithMeta, expandedItems]);
+
+  return {
+    visibleData,
+    expandedItems,
+    toggleItem,
+    expandAll,
+    collapseAll,
+    hasDescendants,
+    dataWithMeta,
+  };
+}

package/src/ui/tree-view/index.ts

@@ -0,0 +1,4 @@
+export * from "./TreeView";
+export * from "./TreeSearchBar";
+export * from "./hooks";
+export * from "./types";

package/src/ui/tree-view/types.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+
+/**
+ * Minimal tree node shape
+ */
+export type TreeDataItem = {
+  id: string;
+  parentId: string | null;
+  label: string;
+  isCollapsible?: boolean;
+  actions?: ReactNode;
+  disable?: boolean;
+  [key: string]: unknown;
+};
+
+/**
+ * Tree node with computed metadata
+ */
+export type TreeDataItemWithMeta<T extends TreeDataItem> = T & {
+  indent: number;
+  isLast: boolean;
+  ancestors: T[];
+};