@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

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

@@ -1,296 +1,296 @@
-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 { FlatNode, ScrollSlider } from './scroll-slider';
-import { EntryPopover } from './entry-popover';
-import { buildEntryTreeFromAliasMap, buildFlowCenterTree } from './build-tree';
-import type { BsEntrySelectProps, BsEntrySelectChangeResult, EntryTreeItem } from './types';
-import { MenuLinesIcon } from '../bs-icons';
-import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
-
-export type { BsEntrySelectProps, BsEntrySelectChangeResult };
-
-export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
-  (
-    {
-      appDetails,
-      currentAppId,
-      value: controlledValue,
-      defaultValue,
-      onChange,
-      placeholder: _placeholder = '请选择',
-      disabled = false,
-      className,
-      showSlider = true,
-      showCurrentAppEntriesOnly = false,
-      sliderVariant = 'default',
-    },
-    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 [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-    const [sliderHasOverflow, setSliderHasOverflow] = useState(false);
-
-    const { popoverStyle, updatePopoverPosition } =
-      useSelectPopoverPosition(triggerRef);
-
-    const handleOverflowChange = useCallback((hasOverflow: boolean) => {
-      setSliderHasOverflow(hasOverflow);
-    }, []);
-
-    const selectedEntryId = controlledValue ?? internalValue;
-
-    const otherAppIds = useMemo(() => {
-      return Object.keys(appDetails).filter((id) => id !== currentAppId);
-    }, [appDetails, currentAppId]);
-
-    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-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 handleClose = useCallback(() => {
-      setIsOpen(false);
-      setSearchQuery('');
-      if (triggerRef.current) {
-        triggerRef.current.style.backgroundColor = '';
-      }
-    }, []);
-
-    const handleToggle = useCallback(() => {
-      if (disabled) return;
-      if (isOpen) {
-        handleClose();
-      } else {
-        setIsOpen(true);
-        updatePopoverPosition();
-      }
-    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
-
-    const handleSelect = useCallback(
-      (result: BsEntrySelectChangeResult) => {
-        setInternalValue(result.entry.entryId);
-        onChange?.(result);
-        handleClose();
-      },
-      [onChange, handleClose],
-    );
-
-    // Event listeners for popover (click outside, scroll, resize)
-    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]);
-
-    // Keyboard escape listener
-    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 [];
-
-      const showFlowCenter = (appDetails[currentAppId ?? '']?.isFlow ?? false);
-
-      const flowCenterNodes: FlatNode[] = [];
-
-      // Flow center — first tab in tabs mode for flow-type apps
-      if (showFlowCenter) {
-        const flowTree = buildFlowCenterTree();
-        flowCenterNodes.push(
-          ...flowTree.map((node) => ({
-            node,
-            appId: currentAppId ?? '',
-            section: 'current' as const,
-          })),
-        );
-      }
-
-      const flowCenterItems: EntryTreeItem[] = flowCenterNodes.map(n => n.node);
-      const result = buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
-
-      return flowCenterItems.concat(result);
-    }, [
-      appDetails,
-      currentAppId,
-      searchQuery,
-      currentAppId != null ? (appDetails[currentAppId]?.entryList?.length ?? 0) : 0,
-    ]);
-
-    const hasSearch = searchQuery.trim().length > 0;
-
-    const isTabMode = sliderVariant === 'tabs';
-
-    const tabCls = isTabMode ? "h-full" : ""
-
-    return (
-      <div ref={ref} className={cn('relative inline-flex items-center gap-[10px] min-w-0', tabCls ,className)}>
-        {/* Scroll slider — greedy width */}
-        {showSlider && (
-          <ScrollSlider
-            appDetails={appDetails}
-            currentAppId={currentAppId}
-            selectedEntryId={selectedEntryId}
-            onSelect={handleSelect}
-            onOverflowChange={handleOverflowChange}
-            showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
-            variant={sliderVariant}
-          />
-        )}
-
-        {/* Trigger — hidden when slider shows all nodes without overflow */}
-        {(!showSlider || sliderHasOverflow) && (
-          <div
-            ref={setTriggerRef}
-            className={cn(
-              'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none shrink-0',
-              transCls,
-              isOpen && 'bg-[#EFF0F6]',
-              disabled && 'opacity-50 cursor-not-allowed',
-            )}
-            onClick={handleToggle}
-          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">
-            <MenuLinesIcon />
-            <span>全部</span>
-            {/* {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}>
-              <EntryPopover
-                searchQuery={searchQuery}
-                onSearchChange={setSearchQuery}
-                currentAppTree={currentAppTree}
-                currentAppId={currentAppId}
-                otherAppIds={otherAppIds}
-                appDetails={appDetails}
-                selectedEntryId={selectedEntryId}
-                hasCurrentApp={hasCurrentApp}
-                hasOtherApps={hasOtherApps}
-                hasAnyContent={hasAnyContent}
-                hasSearch={hasSearch}
-                showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
-                onSelect={handleSelect}
-              />
-            </div>,
-            portalContainer || document.body,
-          )}
-      </div>
-    );
-  },
-);
-
-BsEntrySelect.displayName = 'BsEntrySelect';
+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 { FlatNode, ScrollSlider } from './scroll-slider';
+import { EntryPopover } from './entry-popover';
+import { buildEntryTreeFromAliasMap, buildFlowCenterTree } from './build-tree';
+import type { BsEntrySelectProps, BsEntrySelectChangeResult, EntryTreeItem } from './types';
+import { MenuLinesIcon } from '../bs-icons';
+import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
+
+export type { BsEntrySelectProps, BsEntrySelectChangeResult };
+
+export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
+  (
+    {
+      appDetails,
+      currentAppId,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder: _placeholder = '请选择',
+      disabled = false,
+      className,
+      showSlider = true,
+      showCurrentAppEntriesOnly = false,
+      sliderVariant = 'default',
+    },
+    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 [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+    const [sliderHasOverflow, setSliderHasOverflow] = useState(false);
+
+    const { popoverStyle, updatePopoverPosition } =
+      useSelectPopoverPosition(triggerRef);
+
+    const handleOverflowChange = useCallback((hasOverflow: boolean) => {
+      setSliderHasOverflow(hasOverflow);
+    }, []);
+
+    const selectedEntryId = controlledValue ?? internalValue;
+
+    const otherAppIds = useMemo(() => {
+      return Object.keys(appDetails).filter((id) => id !== currentAppId);
+    }, [appDetails, currentAppId]);
+
+    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-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 handleClose = useCallback(() => {
+      setIsOpen(false);
+      setSearchQuery('');
+      if (triggerRef.current) {
+        triggerRef.current.style.backgroundColor = '';
+      }
+    }, []);
+
+    const handleToggle = useCallback(() => {
+      if (disabled) return;
+      if (isOpen) {
+        handleClose();
+      } else {
+        setIsOpen(true);
+        updatePopoverPosition();
+      }
+    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
+
+    const handleSelect = useCallback(
+      (result: BsEntrySelectChangeResult) => {
+        setInternalValue(result.entry.entryId);
+        onChange?.(result);
+        handleClose();
+      },
+      [onChange, handleClose],
+    );
+
+    // Event listeners for popover (click outside, scroll, resize)
+    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]);
+
+    // Keyboard escape listener
+    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 [];
+
+      const showFlowCenter = (appDetails[currentAppId ?? '']?.isFlow ?? false);
+
+      const flowCenterNodes: FlatNode[] = [];
+
+      // Flow center — first tab in tabs mode for flow-type apps
+      if (showFlowCenter) {
+        const flowTree = buildFlowCenterTree();
+        flowCenterNodes.push(
+          ...flowTree.map((node) => ({
+            node,
+            appId: currentAppId ?? '',
+            section: 'current' as const,
+          })),
+        );
+      }
+
+      const flowCenterItems: EntryTreeItem[] = flowCenterNodes.map(n => n.node);
+      const result = buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
+
+      return flowCenterItems.concat(result);
+    }, [
+      appDetails,
+      currentAppId,
+      searchQuery,
+      currentAppId != null ? (appDetails[currentAppId]?.entryList?.length ?? 0) : 0,
+    ]);
+
+    const hasSearch = searchQuery.trim().length > 0;
+
+    const isTabMode = sliderVariant === 'tabs';
+
+    const tabCls = isTabMode ? "h-full" : ""
+
+    return (
+      <div ref={ref} className={cn('relative inline-flex items-center gap-[10px] min-w-0', tabCls ,className)}>
+        {/* Scroll slider — greedy width */}
+        {showSlider && (
+          <ScrollSlider
+            appDetails={appDetails}
+            currentAppId={currentAppId}
+            selectedEntryId={selectedEntryId}
+            onSelect={handleSelect}
+            onOverflowChange={handleOverflowChange}
+            showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
+            variant={sliderVariant}
+          />
+        )}
+
+        {/* Trigger — hidden when slider shows all nodes without overflow */}
+        {(!showSlider || sliderHasOverflow) && (
+          <div
+            ref={setTriggerRef}
+            className={cn(
+              'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none shrink-0',
+              transCls,
+              isOpen && 'bg-[#EFF0F6]',
+              disabled && 'opacity-50 cursor-not-allowed',
+            )}
+            onClick={handleToggle}
+          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">
+            <MenuLinesIcon />
+            <span>全部</span>
+            {/* {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}>
+              <EntryPopover
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                currentAppTree={currentAppTree}
+                currentAppId={currentAppId}
+                otherAppIds={otherAppIds}
+                appDetails={appDetails}
+                selectedEntryId={selectedEntryId}
+                hasCurrentApp={hasCurrentApp}
+                hasOtherApps={hasOtherApps}
+                hasAnyContent={hasAnyContent}
+                hasSearch={hasSearch}
+                showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
+                onSelect={handleSelect}
+              />
+            </div>,
+            portalContainer || document.body,
+          )}
+      </div>
+    );
+  },
+);
+
+BsEntrySelect.displayName = 'BsEntrySelect';