@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/bs-entry-select.tsx

@@ -1,724 +0,0 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import type { IAppDetail, IEntryDetail } from '@baishuyun/types';
-import { SolidArrowDownIcon as  ChevronDownIcon } from './bs-icons';
-const ChevronRightIcon = ({ size }: { size?: number }) => (
-  <ChevronDownIcon className="-rotate-90" size={size} />
-)
-
-export interface BsEntrySelectChangeResult {
-  entry: IEntryDetail;
-  appId: string;
-  section: 'current' | 'other';
-}
-
-export interface BsEntrySelectProps {
-  appDetails: Record<string, IAppDetail>;
-  currentAppId?: string;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (result: BsEntrySelectChangeResult | null) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-interface EntryTreeItem {
-  id: string;
-  name: string;
-  icon: number;
-  type: string;
-  children: EntryTreeItem[];
-  depth: number;
-  isSelectable: boolean;
-  entry: IEntryDetail | null;
-}
-
-const DEPTH_PADDING: Record<number, string> = {
-  0: 'pl-[10px]',
-  1: 'pl-[32px]',
-  2: 'pl-[32px]',
-  3: 'pl-[54px]',
-  4: 'pl-[78px]',
-  5: 'pl-[102px]',
-};
-
-function getDepthPadding(depth: number): string {
-  return DEPTH_PADDING[Math.min(depth, 5)] ?? DEPTH_PADDING[5];
-}
-
-function getEntryIconClass(entry: IEntryDetail): string {
-  const isNew = entry.icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr}  icon${newStr}-bsy-form-${entry.icon}`;
-}
-
-function buildEntryTreeFromAliasMap(
-  appDetail: IAppDetail,
-  searchQuery: string,
-): EntryTreeItem[] {
-  const { entryIdAliasMap, entryMap } = appDetail;
-  const aliasKeys = Object.keys(entryIdAliasMap);
-  if (aliasKeys.length === 0) return [];
-
-  const childrenByParent = new Map<string, string[]>();
-  for (const id of aliasKeys) {
-    const aliasItem = entryIdAliasMap[id];
-    const parentKey = aliasItem.parent || '0';
-    if (!childrenByParent.has(parentKey)) {
-      childrenByParent.set(parentKey, []);
-    }
-    childrenByParent.get(parentKey)!.push(id);
-  }
-
-  // Root parents: any parent value that is not itself a key in entryIdAliasMap.
-  // Also include the sentinel '0' for entries with empty/falsy parent.
-  const allParentValues = new Set(childrenByParent.keys());
-  const rootParents = Array.from(allParentValues).filter(
-    (p) => p === '0' || !entryIdAliasMap[p],
-  );
-
-  const lowerQuery = searchQuery.toLowerCase().trim();
-
-  function buildRecursive(parentId: string, depth: number): EntryTreeItem[] {
-    const childIds = childrenByParent.get(parentId) || [];
-    const nodes: EntryTreeItem[] = [];
-
-    for (const id of childIds) {
-      const aliasItem = entryIdAliasMap[id];
-      const entryDetail = entryMap[id] || null;
-      const name = entryDetail?.name || id;
-      const icon = entryDetail?.icon || 0;
-      const isGroup = aliasItem.type === 'group';
-
-      const children = buildRecursive(id, depth + 1);
-      const selfMatch = !lowerQuery || name.toLowerCase().includes(lowerQuery);
-
-      if (isGroup) {
-        if (selfMatch || children.length > 0) {
-          nodes.push({
-            id,
-            name,
-            icon,
-            type: 'group',
-            children,
-            depth,
-            isSelectable: false,
-            entry: entryDetail,
-          });
-        }
-      } else {
-        if (selfMatch) {
-          nodes.push({
-            id,
-            name,
-            icon,
-            type: aliasItem.type,
-            children: [],
-            depth,
-            isSelectable: true,
-            entry: entryDetail,
-          });
-        }
-      }
-    }
-
-    return nodes;
-  }
-
-  // Build from each root parent, all at depth 0
-  const result: EntryTreeItem[] = [];
-  for (const rootId of rootParents) {
-    result.push(...buildRecursive(rootId, 0));
-  }
-  return result;
-}
-
-function findSelected(
-  appDetails: Record<string, IAppDetail>,
-  entryId: string,
-  currentAppId?: string,
-): BsEntrySelectChangeResult | null {
-  for (const [appId, detail] of Object.entries(appDetails)) {
-    if (detail.entryMap[entryId]) {
-      return {
-        entry: detail.entryMap[entryId],
-        appId,
-        section: appId === currentAppId ? 'current' : 'other',
-      };
-    }
-  }
-  return null;
-}
-
-function SearchInput({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        className="text-[#999999] shrink-0"
-      >
-        <circle cx="7" cy="7" r="4.5" />
-        <path d="M10.5 10.5L14 14" />
-      </svg>
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder="输入表单名称来搜索"
-        className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
-      />
-    </div>
-  );
-}
-
-function EntryItem({
-  item,
-  depth,
-  isSelected,
-  onClick,
-}: {
-  item: EntryTreeItem;
-  depth: number;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px]',
-        getDepthPadding(depth),
-        'hover:bg-[#EFF0F6]',
-        isSelected && 'bg-[#EFF0F6]',
-        transCls,
-      )}
-      onClick={onClick}
-    >
-      <span className="flex items-center gap-[6px] min-w-0 flex-1">
-        <i
-          className={
-            item.entry
-              ? getEntryIconClass(item.entry)
-              : 'node-icon icon-bsy-form icon-new-bsy-form-25'
-          }
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
-        <span className="text-[14px] text-[#030303] truncate">
-          {item.name}
-        </span>
-      </span>
-    </div>
-  );
-}
-
-function TreeItemNode({
-  item,
-  selectedEntryId,
-  appId,
-  section,
-  onSelect,
-}: {
-  item: EntryTreeItem;
-  selectedEntryId: string | undefined;
-  appId: string;
-  section: 'current' | 'other';
-  onSelect: (result: BsEntrySelectChangeResult) => void;
-}) {
-  const [expanded, setExpanded] = useState(true);
-
-  if (item.type === '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]',
-              transCls,
-              expanded && 'rotate-90',
-            )}
-          >
-            <ChevronRightIcon size={16} />
-          </span>
-          <i
-            className="icon-bsy-folder-close"
-            style={{ fontSize: 16, lineHeight: 1 }}
-          />
-          <span className="text-[14px] text-[#030303] truncate">
-            {item.name}
-          </span>
-        </div>
-        {expanded &&
-          item.children.map((child) => (
-            <TreeItemNode
-              key={child.id}
-              item={child}
-              selectedEntryId={selectedEntryId}
-              appId={appId}
-              section={section}
-              onSelect={onSelect}
-            />
-          ))}
-      </div>
-    );
-  }
-
-  return (
-    <EntryItem
-      item={item}
-      depth={item.depth}
-      isSelected={selectedEntryId === item.id}
-      onClick={() => {
-        if (item.entry) {
-          onSelect({ entry: item.entry, appId, section });
-        }
-      }}
-    />
-  );
-}
-
-function AppGroupFolder({
-  label,
-  searchQuery,
-  children,
-}: {
-  label: string;
-  searchQuery: string;
-  children: React.ReactNode;
-}) {
-  const [expanded, setExpanded] = useState(true);
-  const hasSearch = searchQuery.trim().length > 0;
-
-  useEffect(() => {
-    if (hasSearch) {
-      setExpanded(true);
-    }
-  }, [hasSearch]);
-
-  return (
-    <div>
-      <div
-        className={cn(
-          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
-          'hover:bg-[#EFF0F6]',
-          'border-b border-[#E0E0E0]',
-          'rounded-b-none',
-          transCls,
-        )}
-        style={{ paddingLeft: 10, paddingTop: 9 }}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <span
-          className={cn(
-            'shrink-0 flex items-center justify-center w-[16px] h-[16px]',
-            transCls,
-            expanded && 'rotate-90',
-          )}
-        >
-          <ChevronRightIcon size={16} />
-        </span>
-        <i
-          className="icon-bsy-folder-close"
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
-        <span className="text-[12px] text-[#666666]">{label}</span>
-      </div>
-      {expanded && (
-        <div className="flex flex-col">{children}</div>
-      )}
-    </div>
-  );
-}
-
-function OtherAppSection({
-  appId,
-  appDetail,
-  searchQuery,
-  selectedEntryId,
-  section,
-  onSelect,
-}: {
-  appId: string;
-  appDetail: IAppDetail;
-  searchQuery: string;
-  selectedEntryId: string | undefined;
-  section: 'current' | 'other';
-  onSelect: (result: BsEntrySelectChangeResult) => void;
-}) {
-  const [expanded, setExpanded] = useState(true);
-  const hasSearch = searchQuery.trim().length > 0;
-
-  useEffect(() => {
-    if (hasSearch) {
-      setExpanded(true);
-    }
-  }, [hasSearch]);
-
-  const tree = useMemo(() => {
-    return buildEntryTreeFromAliasMap(appDetail, searchQuery);
-  }, [appDetail, searchQuery]);
-
-  return (
-    <div>
-      <div
-        className={cn(
-          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
-          'hover:bg-[#EFF0F6]',
-          transCls,
-        )}
-        style={{ paddingLeft: 15 }}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <span
-          className={cn(
-            'shrink-0 flex items-center justify-center w-[18px] h-[18px]',
-            transCls,
-            expanded && 'rotate-90',
-          )}
-        >
-          <ChevronRightIcon size={18} />
-        </span>
-        <i
-          className="node-icon icon-bsy-form icon-new-bsy-form-0"
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
-        <span className="text-[14px] text-[#030303] truncate">
-          {appDetail.name}
-        </span>
-      </div>
-      {expanded && tree.length > 0 && (
-        <div className="flex flex-col" style={{ paddingLeft: 15 }}>
-          {tree.map((node) => (
-            <TreeItemNode
-              key={node.id}
-              item={node}
-              selectedEntryId={selectedEntryId}
-              appId={appId}
-              section={section}
-              onSelect={onSelect}
-            />
-          ))}
-        </div>
-      )}
-      {expanded && tree.length === 0 && hasSearch && (
-        <div className="text-[12px] text-[#999999] py-[8px] pl-[32px]">
-          无匹配结果
-        </div>
-      )}
-      {expanded && tree.length === 0 && !hasSearch && (
-        <div className="text-[12px] text-[#999999] py-[8px] pl-[32px]">
-          暂无表单
-        </div>
-      )}
-    </div>
-  );
-}
-
-export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
-  (
-    {
-      appDetails,
-      currentAppId,
-      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 selectedEntryId = controlledValue ?? internalValue;
-
-    const selectedResult = useMemo(() => {
-      if (!selectedEntryId) return null;
-      return findSelected(appDetails, selectedEntryId, currentAppId);
-    }, [appDetails, selectedEntryId, currentAppId]);
-
-    const otherAppIds = useMemo(() => {
-      return Object.keys(appDetails).filter((id) => id !== currentAppId);
-    }, [appDetails, currentAppId]);
-
-    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,
-      });
-    }, []);
-
-    useEffect(() => {
-      const triggerEl = triggerRef.current;
-      if (!triggerEl) return;
-      const rootNode = triggerEl.getRootNode();
-      if (rootNode instanceof ShadowRoot) {
-        const existing = rootNode.querySelector<HTMLElement>(
-          '[data-bs-entry-select-portal]',
-        );
-        if (existing) {
-          setPortalContainer(existing);
-          return;
-        }
-        const container = document.createElement('div');
-        container.setAttribute('data-bs-entry-select-portal', 'true');
-        rootNode.appendChild(container);
-        setPortalContainer(container);
-        return;
-      }
-      setPortalContainer(null);
-    }, []);
-
-    const handleOpen = useCallback(() => {
-      if (disabled) return;
-      setIsOpen(true);
-      updatePopoverPosition();
-    }, [disabled, updatePopoverPosition]);
-
-    const handleClose = useCallback(() => {
-      setIsOpen(false);
-      setSearchQuery('');
-      if (triggerRef.current) {
-        triggerRef.current.style.backgroundColor = '';
-      }
-    }, []);
-
-    const handleSelect = useCallback(
-      (result: BsEntrySelectChangeResult) => {
-        setInternalValue(result.entry.entryId);
-        onChange?.(result);
-        handleClose();
-      },
-      [onChange, handleClose],
-    );
-
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const handleClickOutside = (e: MouseEvent) => {
-        const path = e.composedPath();
-        if (
-          (popoverRef.current && path.includes(popoverRef.current)) ||
-          (triggerRef.current && path.includes(triggerRef.current))
-        ) {
-          return;
-        }
-        handleClose();
-      };
-
-      const handleScroll = () => {
-        updatePopoverPosition();
-      };
-
-      const handleResize = () => {
-        updatePopoverPosition();
-      };
-
-      document.addEventListener('mousedown', handleClickOutside);
-      window.addEventListener('scroll', handleScroll, true);
-      window.addEventListener('resize', handleResize);
-
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-        window.removeEventListener('scroll', handleScroll, true);
-        window.removeEventListener('resize', handleResize);
-      };
-    }, [isOpen, handleClose, updatePopoverPosition]);
-
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          handleClose();
-        }
-      };
-
-      document.addEventListener('keydown', handleEscape);
-      return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, handleClose]);
-
-    const hasCurrentApp = Boolean(currentAppId && appDetails[currentAppId]);
-    const hasOtherApps = otherAppIds.length > 0;
-    const hasAnyContent = hasCurrentApp || hasOtherApps;
-
-    const currentAppTree = useMemo(() => {
-      if (!currentAppId || !appDetails[currentAppId]) return [];
-      return buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
-    }, [appDetails, currentAppId, searchQuery]);
-
-    const hasSearch = searchQuery.trim().length > 0;
-
-    return (
-      <div ref={ref} className={cn('relative inline-block', className)}>
-        {/* Trigger */}
-        <div
-          ref={triggerRef}
-          className={cn(
-            'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none',
-            transCls,
-            isOpen && 'bg-[#EFF0F6]',
-            disabled && 'opacity-50 cursor-not-allowed',
-          )}
-          onClick={handleOpen}
-          onMouseEnter={(e) => {
-            if (!isOpen && !disabled) {
-              (e.currentTarget as HTMLElement).style.backgroundColor =
-                '#EFF0F6';
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (!isOpen) {
-              (e.currentTarget as HTMLElement).style.backgroundColor = '';
-            }
-          }}
-        >
-          <span className="flex items-center gap-[10px] min-w-0 flex-1">
-            {selectedResult ? (
-              <>
-                <i
-                  className={getEntryIconClass(selectedResult.entry)}
-                  style={{ fontSize: 16, lineHeight: 1 }}
-                />
-                <span className="text-[14px] text-[#030303] truncate">
-                  {selectedResult.entry.name}
-                </span>
-              </>
-            ) : (
-              <span className="text-[14px] text-[#999999] truncate">
-                {placeholder}
-              </span>
-            )}
-          </span>
-          <span
-            className={cn(
-              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
-              transCls,
-              isOpen && 'rotate-180',
-            )}
-          >
-            <ChevronDownIcon size={16} />
-          </span>
-        </div>
-
-        {/* Popover */}
-        {isOpen &&
-          createPortal(
-            <div
-              ref={popoverRef}
-              style={popoverStyle}
-              className={cn(
-                'bg-white rounded-[10px] shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)] p-[4px]',
-                'flex flex-col gap-[4px]',
-                transCls,
-              )}
-            >
-              <SearchInput
-                  value={searchQuery}
-                  onChange={setSearchQuery}
-                />
-
-              <div className="flex flex-col gap-[4px] max-h-[400px] overflow-y-auto">
-                {hasCurrentApp && (
-                  <AppGroupFolder
-                    label="当前应用表单"
-                    searchQuery={searchQuery}
-                  >
-                    {currentAppTree.length > 0 ? (
-                      currentAppTree.map((node) => (
-                        <TreeItemNode
-                          key={node.id}
-                          item={node}
-                          selectedEntryId={selectedEntryId}
-                          appId={currentAppId!}
-                          section="current"
-                          onSelect={handleSelect}
-                        />
-                      ))
-                    ) : hasSearch ? (
-                      <div className="text-[12px] text-[#999999] py-[8px] pl-[22px]">
-                        无匹配结果
-                      </div>
-                    ) : (
-                      <div className="text-[12px] text-[#999999] py-[8px] pl-[22px]">
-                        暂无表单
-                      </div>
-                    )}
-                  </AppGroupFolder>
-                )}
-
-                {hasOtherApps && (
-                  <AppGroupFolder
-                    label="其他应用表单"
-                    searchQuery={searchQuery}
-                  >
-                    {otherAppIds.map((appId) => (
-                      <OtherAppSection
-                        key={appId}
-                        appId={appId}
-                        appDetail={appDetails[appId]}
-                        searchQuery={searchQuery}
-                        selectedEntryId={selectedEntryId}
-                        section="other"
-                        onSelect={handleSelect}
-                      />
-                    ))}
-                  </AppGroupFolder>
-                )}
-
-                {!hasAnyContent && (
-                  <div className="text-[14px] text-[#999999] py-[12px] text-center">
-                    暂无应用
-                  </div>
-                )}
-              </div>
-            </div>,
-            portalContainer || document.body,
-          )}
-      </div>
-    );
-  },
-);
-
-BsEntrySelect.displayName = 'BsEntrySelect';