@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/components/agent-helper/form-select/index.tsx

@@ -0,0 +1,581 @@
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
+
+const FolderIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
+  </svg>
+);
+
+// ── Types ─────────────────────────────────────────────────────────
+
+export interface FormSelectItem {
+  id: string;
+  name: string;
+  icon?: number;
+  type?: string;
+  parent?: string;
+  itemType?: 'form' | 'group';
+}
+
+export interface FormSelectChangeResult {
+  form: FormSelectItem;
+}
+
+export interface FormSelectProps {
+  items: FormSelectItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (result: FormSelectChangeResult) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ── Tree types ────────────────────────────────────────────────────
+
+interface FormTreeItem {
+  id: string;
+  name: string;
+  icon: number;
+  type: string;
+  itemType: 'form' | 'group';
+  children: FormTreeItem[];
+  depth: number;
+  form: FormSelectItem | null;
+}
+
+// ── Depth padding ─────────────────────────────────────────────────
+
+const DEPTH_PADDING: Record<number, string> = {
+  0: 'pl-[10px]',
+  1: 'pl-[32px]',
+  2: 'pl-[54px]',
+  3: 'pl-[76px]',
+};
+
+function getDepthPadding(depth: number): string {
+  return DEPTH_PADDING[Math.min(depth, 3)] ?? DEPTH_PADDING[3];
+}
+
+// ── Tree builder ──────────────────────────────────────────────────
+
+function buildFormTree(items: FormSelectItem[], searchQuery: string): FormTreeItem[] {
+  const lowerQuery = searchQuery.toLowerCase().trim();
+
+  // Build parent → children map
+  const childrenByParent = new Map<string, FormSelectItem[]>();
+  for (const item of items) {
+    const parentKey = item.parent || '0';
+    if (!childrenByParent.has(parentKey)) {
+      childrenByParent.set(parentKey, []);
+    }
+    childrenByParent.get(parentKey)!.push(item);
+  }
+
+  // Root parents: any parent key that is '0' or not in items
+  const allItemIds = new Set(items.map((i) => i.id));
+  const allParentKeys = new Set(childrenByParent.keys());
+  const rootParents = Array.from(allParentKeys).filter(
+    (p) => p === '0' || !allItemIds.has(p),
+  );
+
+  function buildRecursive(parentId: string, depth: number): FormTreeItem[] {
+    const childItems = childrenByParent.get(parentId) || [];
+    const nodes: FormTreeItem[] = [];
+
+    for (const item of childItems) {
+      const isGroup = item.itemType === 'group';
+      const children = buildRecursive(item.id, depth + 1);
+      const nameMatch = !lowerQuery || item?.name?.toLowerCase().includes(lowerQuery);
+
+      if (isGroup) {
+        if (nameMatch || children.length > 0) {
+          nodes.push({
+            id: item.id,
+            name: item.name,
+            icon: item.icon ?? 0,
+            type: item.type ?? 'group',
+            itemType: 'group',
+            children,
+            depth,
+            form: item,
+          });
+        }
+      } else {
+        if (nameMatch) {
+          nodes.push({
+            id: item.id,
+            name: item.name,
+            icon: item.icon ?? 0,
+            type: item.type ?? 'form',
+            itemType: 'form',
+            children: [],
+            depth,
+            form: item,
+          });
+        }
+      }
+    }
+
+    return nodes;
+  }
+
+  const result: FormTreeItem[] = [];
+  for (const rootId of rootParents) {
+    result.push(...buildRecursive(rootId, 0));
+  }
+  return result;
+}
+
+// ── Form Icon ─────────────────────────────────────────────────────
+
+function getFormIconClass(icon: number): string {
+  const isNew = icon >= 25;
+  const newStr = isNew ? '-new' : '';
+  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
+}
+
+// ── Entry Item ────────────────────────────────────────────────────
+
+function FormEntryItem({
+  item,
+  depth,
+  isSelected,
+  onClick,
+}: {
+  item: FormTreeItem;
+  depth: number;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
+        getDepthPadding(depth),
+        isSelected ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+        transCls,
+      )}
+      onClick={onClick}
+    >
+      <span className="flex items-center gap-[6px] min-w-0 flex-1">
+        <i
+          className={getFormIconClass(item.icon)}
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[14px] leading-[normal] truncate">
+          {item.name}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+// ── Tree Item Node ────────────────────────────────────────────────
+
+function FormTreeItemNode({
+  item,
+  selectedFormId,
+  onSelect,
+}: {
+  item: FormTreeItem;
+  selectedFormId: string | undefined;
+  onSelect: (result: FormSelectChangeResult) => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (item.itemType === 'group') {
+    return (
+      <div>
+        <div
+          className={cn(
+            'flex items-center gap-[6px] h-[34px] px-[10px] cursor-pointer rounded-[4px]',
+            getDepthPadding(item.depth),
+            'hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+              transCls,
+              expanded && 'rotate-90',
+            )}
+          >
+            <SolidArrowDownIcon className="-rotate-90" size={16} />
+          </span>
+          <FolderIcon />
+          <span className="text-[14px] text-[#030303] truncate">
+            {item.name}
+          </span>
+        </div>
+        {expanded &&
+          item.children.map((child) => (
+            <FormTreeItemNode
+              key={child.id}
+              item={child}
+              selectedFormId={selectedFormId}
+              onSelect={onSelect}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <FormEntryItem
+      item={item}
+      depth={item.depth}
+      isSelected={selectedFormId === item.id}
+      onClick={() => {
+        if (item.form) {
+          onSelect({ form: item.form });
+        }
+      }}
+    />
+  );
+}
+
+// ── Popover ───────────────────────────────────────────────────────
+
+function FormPopover({
+  searchQuery,
+  onSearchChange,
+  tree,
+  selectedFormId,
+  onSelect,
+  hasSearch,
+}: {
+  searchQuery: string;
+  onSearchChange: (v: string) => void;
+  tree: FormTreeItem[];
+  selectedFormId: string | undefined;
+  onSelect: (result: FormSelectChangeResult) => void;
+  hasSearch: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
+        'flex flex-col gap-[4px]',
+      )}
+    >
+      {/* Search input */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="输入表单名称来搜索"
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* Form list */}
+      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
+        {tree.length > 0 ? (
+          tree.map((node) => (
+            <FormTreeItemNode
+              key={node.id}
+              item={node}
+              selectedFormId={selectedFormId}
+              onSelect={onSelect}
+            />
+          ))
+        ) : hasSearch ? (
+          <div className="text-[12px] text-[#999999] py-[8px] text-center">
+            无匹配结果
+          </div>
+        ) : (
+          <div className="text-[12px] text-[#999999] py-[8px] text-center">
+            暂无表单
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Main Component ────────────────────────────────────────────────
+
+export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
+  (
+    {
+      items,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = '请选择表单',
+      disabled = false,
+      className,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [internalValue, setInternalValue] = useState<string | undefined>(
+      defaultValue,
+    );
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+    const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+    const selectedFormId = controlledValue ?? internalValue;
+
+    // Build the form tree
+    const tree = useMemo(() => {
+      return buildFormTree(items, searchQuery);
+    }, [items, searchQuery]);
+
+    // Find selected form
+    const selectedForm = useMemo(() => {
+      if (!selectedFormId) return null;
+      return items.find((item) => item.id === selectedFormId && item.itemType !== 'group') ?? null;
+    }, [items, selectedFormId]);
+
+    const hasSearch = searchQuery.trim().length > 0;
+
+    // ── Position helpers ──────────────────────────────────────────
+
+    const updatePopoverPosition = useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPopoverStyle({
+        position: 'fixed',
+        top: rect.bottom + 4,
+        left: rect.left,
+        minWidth: Math.max(rect.width, 240),
+        zIndex: 9999,
+        pointerEvents: 'auto',
+      });
+    }, []);
+
+    const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
+      (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (!node) {
+        setPortalContainer(null);
+        return;
+      }
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>(
+          '[data-bs-form-select-portal]',
+        );
+        if (existing) {
+          setPortalContainer(existing);
+          return;
+        }
+        // Append portal inside the React root container so React event
+        // delegation sees events from portal content. The React root is
+        // the element that ReactDOM.createRoot() was called on.
+        const reactRoot = rootNode.getElementById('ai-office-container') || rootNode;
+        const container = document.createElement('div');
+        container.setAttribute('data-bs-form-select-portal', 'true');
+        reactRoot.appendChild(container);
+        setPortalContainer(container);
+        return;
+      }
+      setPortalContainer(null);
+    }, []);
+
+    // ── Handlers ──────────────────────────────────────────────────
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+      setSearchQuery('');
+    }, []);
+
+    const handleToggle = useCallback(() => {
+      if (disabled) return;
+      if (isOpen) {
+        handleClose();
+      } else {
+        setIsOpen(true);
+        updatePopoverPosition();
+      }
+    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
+
+    const handleSelect = useCallback(
+      (result: FormSelectChangeResult) => {
+        setInternalValue(result.form.id);
+        onChange?.(result);
+        handleClose();
+      },
+      [onChange, handleClose],
+    );
+
+    // ── Event listeners ───────────────────────────────────────────
+
+    // Click-outside: close popover when clicking outside both the trigger and popover.
+    // Uses native mousedown on the trigger's root node (ShadowRoot or document) so it
+    // works regardless of stacking contexts. Mousedown events on the popover itself are
+    // stopped from propagating, so this listener only sees external clicks.
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+      const eventTarget = rootNode ?? document;
+
+      const handleClickOutside = (e: Event) => {
+        const target = e.target as HTMLElement;
+        if (
+          (popoverRef.current && popoverRef.current.contains(target)) ||
+          (triggerRef.current && triggerRef.current.contains(target))
+        ) {
+          return;
+        }
+        handleClose();
+      };
+
+      eventTarget.addEventListener('mousedown', handleClickOutside);
+
+      return () => {
+        eventTarget.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [isOpen, handleClose]);
+
+    // Keep popover positioned correctly when the viewport resizes
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleResize = () => {
+        updatePopoverPosition();
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, [isOpen, updatePopoverPosition]);
+
+    // Poll popover position every frame to track scroll (scroll events aren't
+    // composed, so they don't cross shadow boundaries)
+    useLayoutEffect(() => {
+      if (!isOpen) return;
+
+      let rafId: number;
+      const poll = () => {
+        updatePopoverPosition();
+        rafId = requestAnimationFrame(poll);
+      };
+      rafId = requestAnimationFrame(poll);
+
+      return () => cancelAnimationFrame(rafId);
+    }, [isOpen, updatePopoverPosition]);
+
+    // Keyboard: close on Escape
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleEscape = (e: Event) => {
+        if ((e as KeyboardEvent).key === 'Escape') {
+          handleClose();
+        }
+      };
+
+      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+      const eventTarget = rootNode ?? document;
+      eventTarget.addEventListener('keydown', handleEscape);
+      return () => eventTarget.removeEventListener('keydown', handleEscape);
+    }, [isOpen, handleClose]);
+
+    // Prevent native events inside the popover from bubbling to document-
+    // level listeners (e.g. Radix DismissableLayer, react-remove-scroll).
+    // Without this, a parent Drawer would: (a) close on click, (b) capture
+    // wheel events making the popover list unscrollable.
+    useEffect(() => {
+      if (!isOpen) return;
+      const el = popoverRef.current;
+      if (!el) return;
+
+      const blockEvents = (e: Event) => e.stopPropagation();
+      el.addEventListener('mousedown', blockEvents);
+      el.addEventListener('pointerdown', blockEvents);
+      el.addEventListener('wheel', blockEvents);
+      return () => {
+        el.removeEventListener('mousedown', blockEvents);
+        el.removeEventListener('pointerdown', blockEvents);
+        el.removeEventListener('wheel', blockEvents);
+      };
+    }, [isOpen]);
+
+    // ── Render ────────────────────────────────────────────────────
+
+    return (
+      <div ref={ref} className={cn('relative inline-flex min-w-0 w-full', className)}>
+        {/* Trigger */}
+        <div
+          ref={setTriggerRef}
+          className={cn(
+            'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none w-full',
+            'bg-white border',
+            isOpen
+              ? 'border-[#0265FF]'
+              : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            transCls,
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          onClick={handleToggle}
+        >
+          <span className="flex items-center gap-[6px] min-w-0 flex-1">
+            {selectedForm ? (
+              <>
+                <i
+                  className={getFormIconClass(selectedForm.icon ?? 0)}
+                  style={{ fontSize: 16, lineHeight: 1 }}
+                />
+                <span className="text-[14px] text-[#030303] leading-[normal] truncate">
+                  {selectedForm.name}
+                </span>
+              </>
+            ) : (
+              <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                {placeholder}
+              </span>
+            )}
+          </span>
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+              transCls,
+              isOpen && 'rotate-180',
+            )}
+          >
+            <SolidArrowDownIcon size={16} />
+          </span>
+        </div>
+
+        {/* Popover */}
+        {isOpen &&
+          createPortal(
+            <div ref={popoverRef} style={popoverStyle}>
+              <FormPopover
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                tree={tree}
+                selectedFormId={selectedFormId}
+                onSelect={handleSelect}
+                hasSearch={hasSearch}
+              />
+            </div>,
+            portalContainer || document.body,
+          )}
+      </div>
+    );
+  },
+);
+
+FormSelect.displayName = 'FormSelect';