@aloudata/aloudata-design 3.0.15 → 3.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tabs/index.js +1 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tree/Tree2.js +4 -2
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/package.json +1 -1
package/dist/Tabs/index.js
CHANGED
|
@@ -118,7 +118,7 @@ function Tabs(props) {
|
|
|
118
118
|
style: paddingVal ? { margin: `0 ${paddingVal}px` } : void 0,
|
|
119
119
|
children: /* @__PURE__ */ jsx("div", {
|
|
120
120
|
ref: navListRef,
|
|
121
|
-
className: cn("ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden", isVertical && "tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch", centered && !isVertical && "tw-justify-center", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !monospace && "tw-gap-8"),
|
|
121
|
+
className: cn("ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden", isVertical && "tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch", centered && !isVertical && "tw-justify-center", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !isVertical && !monospace && "tw-gap-8"),
|
|
122
122
|
style: !isVertical ? {
|
|
123
123
|
scrollbarWidth: "none",
|
|
124
124
|
msOverflowStyle: "none"
|
package/dist/Tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n key: string;\n label: React.ReactNode;\n children?: React.ReactNode;\n disabled?: boolean;\n closable?: boolean;\n icon?: React.ReactNode;\n forceRender?: boolean;\n className?: string;\n}\n\nexport interface ITabsProps {\n size?: TabsSize;\n activeKey?: string;\n defaultActiveKey?: string;\n onChange?: (activeKey: string) => void;\n onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n destroyInactiveTabPane?: boolean;\n centered?: boolean;\n adaptHeight?: boolean;\n tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n className?: string;\n children?: React.ReactNode;\n headerBackgroundColor?: string;\n monospace?: boolean;\n padding?: boolean | number;\n compact?: boolean;\n hasDividing?: boolean;\n items?: TabItem[];\n type?: 'line' | 'card' | 'editable-card';\n tabBarExtraContent?:\n | React.ReactNode\n | { left?: React.ReactNode; right?: React.ReactNode };\n onEdit?: (\n targetKey: string | React.MouseEvent | React.KeyboardEvent,\n action: 'add' | 'remove',\n ) => void;\n hideAdd?: boolean;\n style?: React.CSSProperties;\n tabBarStyle?: React.CSSProperties;\n popupClassName?: string;\n tabBarGutter?: number;\n moreIcon?: React.ReactNode;\n /** 透传到 Tabs 根容器的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到 Tabs 根容器的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nexport default function Tabs(props: ITabsProps) {\n const {\n size,\n className,\n adaptHeight,\n style = {},\n monospace: propsMonospace,\n tabPosition = 'top',\n padding: propsPadding = false,\n compact,\n hasDividing = true,\n items,\n activeKey: controlledActiveKey,\n defaultActiveKey,\n onChange,\n onTabClick,\n destroyInactiveTabPane,\n centered,\n tabBarExtraContent,\n headerBackgroundColor,\n children,\n type,\n onEdit,\n hideAdd,\n tabBarStyle,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const isEditable = type === 'editable-card';\n const isCard = type === 'card' || type === 'editable-card';\n\n // Derive items from children if not provided\n const resolvedItems: TabItem[] = useMemo(() => {\n if (items) return items;\n return React.Children.toArray(children)\n .filter(React.isValidElement)\n .map((child: any) => ({\n key: child.key || child.props.key || '',\n label: child.props.tab,\n children: child.props.children,\n disabled: child.props.disabled,\n closable: child.props.closable,\n forceRender: child.props.forceRender,\n }));\n }, [items, children]);\n\n const firstKey = resolvedItems[0]?.key || '';\n const [innerActiveKey, setInnerActiveKey] = useState(\n defaultActiveKey || firstKey,\n );\n const mergedActiveKey =\n controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey)\n ? mergedActiveKey\n : firstKey;\n\n const handleTabClick = (key: string, e: React.MouseEvent) => {\n if (controlledActiveKey === undefined) {\n setInnerActiveKey(key);\n }\n onChange?.(key);\n onTabClick?.(key, e);\n };\n\n const handleRemove = (key: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onEdit?.(key, 'remove');\n };\n\n const handleAdd = (e: React.MouseEvent) => {\n onEdit?.(e, 'add');\n };\n\n const monospace = tabPosition !== 'top' ? false : propsMonospace;\n const paddingVal = useMemo(() => {\n if (tabPosition !== 'top') return 0;\n if (typeof propsPadding === 'number') return propsPadding;\n if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n return 0;\n }, [propsPadding, tabPosition]);\n\n const isTop = tabPosition === 'top';\n const isBottom = tabPosition === 'bottom';\n const isLeft = tabPosition === 'left';\n const isRight = tabPosition === 'right';\n const isVertical = tabPosition === 'left' || tabPosition === 'right';\n const rootDirectionClass = isRight\n ? 'tw-flex-row-reverse'\n : isLeft\n ? 'tw-flex-row'\n : isBottom\n ? 'tw-flex-col-reverse'\n : 'tw-flex-col';\n\n const extraLeft =\n tabBarExtraContent &&\n typeof tabBarExtraContent === 'object' &&\n 'left' in tabBarExtraContent\n ? tabBarExtraContent.left\n : null;\n const extraRight = tabBarExtraContent\n ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n ? tabBarExtraContent.right\n : React.isValidElement(tabBarExtraContent)\n ? tabBarExtraContent\n : null\n : null;\n\n // Scroll state for overflow\n const navListRef = useRef<HTMLDivElement>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const checkScroll = useCallback(() => {\n const el = navListRef.current;\n if (!el || isVertical) {\n setCanScrollLeft(false);\n setCanScrollRight(false);\n return;\n }\n const { scrollLeft, scrollWidth, clientWidth } = el;\n setCanScrollLeft(scrollLeft > 1);\n setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n }, [isVertical]);\n\n useEffect(() => {\n checkScroll();\n const el = navListRef.current;\n if (!el) return;\n // Use ResizeObserver to detect size changes\n let ro: ResizeObserver | undefined;\n if (typeof ResizeObserver !== 'undefined') {\n ro = new ResizeObserver(() => checkScroll());\n ro.observe(el);\n }\n el.addEventListener('scroll', checkScroll, { passive: true });\n return () => {\n el.removeEventListener('scroll', checkScroll);\n ro?.disconnect();\n };\n }, [checkScroll, resolvedItems.length]);\n\n const scrollBy = (delta: number) => {\n const el = navListRef.current;\n if (el) {\n el.scrollBy({ left: delta, behavior: 'smooth' });\n }\n };\n\n const showScrollButtons = canScrollLeft || canScrollRight;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs ant-tabs tw-flex',\n rootDirectionClass,\n adaptHeight && 'ald-adapt-height tw-h-full',\n size !== 'small' && 'ald-tabs-default',\n monospace && 'ald-tabs-monospace',\n compact && 'ald-tabs-compact',\n !hasDividing && 'ald-tabs-no-dividing',\n className,\n )}\n style={\n {\n ...style,\n '--header-bg-color': headerBackgroundColor,\n '--tabs-padding': `${paddingVal}px`,\n } as React.CSSProperties\n }\n >\n {/* Tab nav */}\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-nav ant-tabs-nav tw-flex',\n isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n isTop && 'tw-mb-5',\n isBottom && 'tw-mt-5',\n isTop &&\n hasDividing &&\n 'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n isBottom &&\n hasDividing &&\n 'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--global-cool-grey-100)]',\n isTop && compact && '!tw-mb-0',\n isBottom && compact && '!tw-mt-0',\n isLeft &&\n 'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n isRight &&\n 'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--global-cool-grey-100)]',\n )}\n style={\n headerBackgroundColor || tabBarStyle\n ? {\n ...tabBarStyle,\n ...(headerBackgroundColor\n ? { backgroundColor: headerBackgroundColor }\n : {}),\n }\n : undefined\n }\n >\n {extraLeft}\n\n {/* Scroll left button */}\n {showScrollButtons && !isVertical && (\n <button\n type=\"button\"\n className={cn(\n 'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n !canScrollLeft && 'tw-invisible',\n )}\n onClick={() => scrollBy(-200)}\n aria-label=\"Scroll tabs left\"\n >\n <ChevronLeftLine size={16} />\n </button>\n )}\n\n <div\n className={cn(\n 'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n isVertical\n ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n : 'tw-min-w-0 tw-flex-1',\n )}\n style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\n >\n <div\n ref={navListRef}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden',\n isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n centered && !isVertical && 'tw-justify-center',\n monospace && '[&>*]:tw-flex-1',\n isCard ? 'tw-gap-1' : !monospace && 'tw-gap-8',\n )}\n style={\n !isVertical\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n >\n {resolvedItems.map((item) => {\n const isActive = activeKey === item.key;\n // For editable-card, closable defaults to true unless explicitly set to false\n const showClose = isEditable && item.closable !== false;\n\n return (\n <div\n key={item.key}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n isVertical && 'tw-w-full tw-self-stretch',\n // Card / editable-card styling\n isCard\n ? cn(\n 'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n 'tw-gap-sp-75',\n isActive\n ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n )\n : cn(\n size === 'small'\n ? 'tw-py-2 tw-text-xs tw-leading-4'\n : 'tw-py-2.5 tw-text-sm tw-leading-5',\n monospace && 'tw-justify-center',\n isActive\n ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n ),\n item.disabled &&\n 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n )}\n onClick={\n item.disabled\n ? undefined\n : (e) => handleTabClick(item.key, e)\n }\n >\n {item.icon}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n {/* Close button for editable-card */}\n {showClose && (\n <span\n className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n onClick={(e) => handleRemove(item.key, e)}\n aria-label={`Remove ${item.label}`}\n >\n <CloseLightLine size={12} />\n </span>\n )}\n {/* Active indicator for non-card line tabs */}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n {!isCard && isActive && isTop && (\n <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isBottom && (\n <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isLeft && (\n <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isRight && (\n <div className=\"tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Scroll right button */}\n {showScrollButtons && !isVertical && (\n <button\n type=\"button\"\n className={cn(\n 'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n !canScrollRight && 'tw-invisible',\n )}\n onClick={() => scrollBy(200)}\n aria-label=\"Scroll tabs right\"\n >\n <ChevronRightLine size={16} />\n </button>\n )}\n\n {/* Add button for editable-card */}\n {isEditable && !hideAdd && (\n <button\n type=\"button\"\n className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n onClick={handleAdd}\n aria-label=\"Add tab\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n </svg>\n </button>\n )}\n\n {extraRight}\n </div>\n\n {/* Tab content */}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div\n className={cn(\n 'ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1',\n adaptHeight && 'tw-h-full',\n )}\n style={\n paddingVal\n ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n : undefined\n }\n >\n {resolvedItems.map((item) => {\n const isActive = item.key === activeKey;\n if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n return null;\n }\n return (\n <div\n key={item.key}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-tabpane ant-tabs-tabpane',\n // v2 行为:adaptHeight 时 tabpane 撑满内容区,子元素的百分比高度才能解析\n adaptHeight && 'tw-h-full tw-overflow-y-auto',\n isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n )}\n role=\"tabpanel\"\n >\n {item.children}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n key: string;\n label: React.ReactNode;\n children?: React.ReactNode;\n disabled?: boolean;\n closable?: boolean;\n icon?: React.ReactNode;\n forceRender?: boolean;\n className?: string;\n}\n\nexport interface ITabsProps {\n size?: TabsSize;\n activeKey?: string;\n defaultActiveKey?: string;\n onChange?: (activeKey: string) => void;\n onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n destroyInactiveTabPane?: boolean;\n centered?: boolean;\n adaptHeight?: boolean;\n tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n className?: string;\n children?: React.ReactNode;\n headerBackgroundColor?: string;\n monospace?: boolean;\n padding?: boolean | number;\n compact?: boolean;\n hasDividing?: boolean;\n items?: TabItem[];\n type?: 'line' | 'card' | 'editable-card';\n tabBarExtraContent?:\n | React.ReactNode\n | { left?: React.ReactNode; right?: React.ReactNode };\n onEdit?: (\n targetKey: string | React.MouseEvent | React.KeyboardEvent,\n action: 'add' | 'remove',\n ) => void;\n hideAdd?: boolean;\n style?: React.CSSProperties;\n tabBarStyle?: React.CSSProperties;\n popupClassName?: string;\n tabBarGutter?: number;\n moreIcon?: React.ReactNode;\n /** 透传到 Tabs 根容器的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到 Tabs 根容器的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nexport default function Tabs(props: ITabsProps) {\n const {\n size,\n className,\n adaptHeight,\n style = {},\n monospace: propsMonospace,\n tabPosition = 'top',\n padding: propsPadding = false,\n compact,\n hasDividing = true,\n items,\n activeKey: controlledActiveKey,\n defaultActiveKey,\n onChange,\n onTabClick,\n destroyInactiveTabPane,\n centered,\n tabBarExtraContent,\n headerBackgroundColor,\n children,\n type,\n onEdit,\n hideAdd,\n tabBarStyle,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const isEditable = type === 'editable-card';\n const isCard = type === 'card' || type === 'editable-card';\n\n // Derive items from children if not provided\n const resolvedItems: TabItem[] = useMemo(() => {\n if (items) return items;\n return React.Children.toArray(children)\n .filter(React.isValidElement)\n .map((child: any) => ({\n key: child.key || child.props.key || '',\n label: child.props.tab,\n children: child.props.children,\n disabled: child.props.disabled,\n closable: child.props.closable,\n forceRender: child.props.forceRender,\n }));\n }, [items, children]);\n\n const firstKey = resolvedItems[0]?.key || '';\n const [innerActiveKey, setInnerActiveKey] = useState(\n defaultActiveKey || firstKey,\n );\n const mergedActiveKey =\n controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey)\n ? mergedActiveKey\n : firstKey;\n\n const handleTabClick = (key: string, e: React.MouseEvent) => {\n if (controlledActiveKey === undefined) {\n setInnerActiveKey(key);\n }\n onChange?.(key);\n onTabClick?.(key, e);\n };\n\n const handleRemove = (key: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onEdit?.(key, 'remove');\n };\n\n const handleAdd = (e: React.MouseEvent) => {\n onEdit?.(e, 'add');\n };\n\n const monospace = tabPosition !== 'top' ? false : propsMonospace;\n const paddingVal = useMemo(() => {\n if (tabPosition !== 'top') return 0;\n if (typeof propsPadding === 'number') return propsPadding;\n if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n return 0;\n }, [propsPadding, tabPosition]);\n\n const isTop = tabPosition === 'top';\n const isBottom = tabPosition === 'bottom';\n const isLeft = tabPosition === 'left';\n const isRight = tabPosition === 'right';\n const isVertical = tabPosition === 'left' || tabPosition === 'right';\n const rootDirectionClass = isRight\n ? 'tw-flex-row-reverse'\n : isLeft\n ? 'tw-flex-row'\n : isBottom\n ? 'tw-flex-col-reverse'\n : 'tw-flex-col';\n\n const extraLeft =\n tabBarExtraContent &&\n typeof tabBarExtraContent === 'object' &&\n 'left' in tabBarExtraContent\n ? tabBarExtraContent.left\n : null;\n const extraRight = tabBarExtraContent\n ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n ? tabBarExtraContent.right\n : React.isValidElement(tabBarExtraContent)\n ? tabBarExtraContent\n : null\n : null;\n\n // Scroll state for overflow\n const navListRef = useRef<HTMLDivElement>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const checkScroll = useCallback(() => {\n const el = navListRef.current;\n if (!el || isVertical) {\n setCanScrollLeft(false);\n setCanScrollRight(false);\n return;\n }\n const { scrollLeft, scrollWidth, clientWidth } = el;\n setCanScrollLeft(scrollLeft > 1);\n setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n }, [isVertical]);\n\n useEffect(() => {\n checkScroll();\n const el = navListRef.current;\n if (!el) return;\n // Use ResizeObserver to detect size changes\n let ro: ResizeObserver | undefined;\n if (typeof ResizeObserver !== 'undefined') {\n ro = new ResizeObserver(() => checkScroll());\n ro.observe(el);\n }\n el.addEventListener('scroll', checkScroll, { passive: true });\n return () => {\n el.removeEventListener('scroll', checkScroll);\n ro?.disconnect();\n };\n }, [checkScroll, resolvedItems.length]);\n\n const scrollBy = (delta: number) => {\n const el = navListRef.current;\n if (el) {\n el.scrollBy({ left: delta, behavior: 'smooth' });\n }\n };\n\n const showScrollButtons = canScrollLeft || canScrollRight;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs ant-tabs tw-flex',\n rootDirectionClass,\n adaptHeight && 'ald-adapt-height tw-h-full',\n size !== 'small' && 'ald-tabs-default',\n monospace && 'ald-tabs-monospace',\n compact && 'ald-tabs-compact',\n !hasDividing && 'ald-tabs-no-dividing',\n className,\n )}\n style={\n {\n ...style,\n '--header-bg-color': headerBackgroundColor,\n '--tabs-padding': `${paddingVal}px`,\n } as React.CSSProperties\n }\n >\n {/* Tab nav */}\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-nav ant-tabs-nav tw-flex',\n isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n isTop && 'tw-mb-5',\n isBottom && 'tw-mt-5',\n isTop &&\n hasDividing &&\n 'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n isBottom &&\n hasDividing &&\n 'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--global-cool-grey-100)]',\n isTop && compact && '!tw-mb-0',\n isBottom && compact && '!tw-mt-0',\n isLeft &&\n 'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n isRight &&\n 'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--global-cool-grey-100)]',\n )}\n style={\n headerBackgroundColor || tabBarStyle\n ? {\n ...tabBarStyle,\n ...(headerBackgroundColor\n ? { backgroundColor: headerBackgroundColor }\n : {}),\n }\n : undefined\n }\n >\n {extraLeft}\n\n {/* Scroll left button */}\n {showScrollButtons && !isVertical && (\n <button\n type=\"button\"\n className={cn(\n 'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n !canScrollLeft && 'tw-invisible',\n )}\n onClick={() => scrollBy(-200)}\n aria-label=\"Scroll tabs left\"\n >\n <ChevronLeftLine size={16} />\n </button>\n )}\n\n <div\n className={cn(\n 'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n isVertical\n ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n : 'tw-min-w-0 tw-flex-1',\n )}\n style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\n >\n <div\n ref={navListRef}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden',\n isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n centered && !isVertical && 'tw-justify-center',\n monospace && '[&>*]:tw-flex-1',\n isCard ? 'tw-gap-1' : !isVertical && !monospace && 'tw-gap-8',\n )}\n style={\n !isVertical\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n >\n {resolvedItems.map((item) => {\n const isActive = activeKey === item.key;\n // For editable-card, closable defaults to true unless explicitly set to false\n const showClose = isEditable && item.closable !== false;\n\n return (\n <div\n key={item.key}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n isVertical && 'tw-w-full tw-self-stretch',\n // Card / editable-card styling\n isCard\n ? cn(\n 'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n 'tw-gap-sp-75',\n isActive\n ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n )\n : cn(\n size === 'small'\n ? 'tw-py-2 tw-text-xs tw-leading-4'\n : 'tw-py-2.5 tw-text-sm tw-leading-5',\n monospace && 'tw-justify-center',\n isActive\n ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n ),\n item.disabled &&\n 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n )}\n onClick={\n item.disabled\n ? undefined\n : (e) => handleTabClick(item.key, e)\n }\n >\n {item.icon}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n {/* Close button for editable-card */}\n {showClose && (\n <span\n className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n onClick={(e) => handleRemove(item.key, e)}\n aria-label={`Remove ${item.label}`}\n >\n <CloseLightLine size={12} />\n </span>\n )}\n {/* Active indicator for non-card line tabs */}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n {!isCard && isActive && isTop && (\n <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isBottom && (\n <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isLeft && (\n <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n {!isCard && isActive && isRight && (\n <div className=\"tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n )}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Scroll right button */}\n {showScrollButtons && !isVertical && (\n <button\n type=\"button\"\n className={cn(\n 'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n !canScrollRight && 'tw-invisible',\n )}\n onClick={() => scrollBy(200)}\n aria-label=\"Scroll tabs right\"\n >\n <ChevronRightLine size={16} />\n </button>\n )}\n\n {/* Add button for editable-card */}\n {isEditable && !hideAdd && (\n <button\n type=\"button\"\n className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n onClick={handleAdd}\n aria-label=\"Add tab\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n </svg>\n </button>\n )}\n\n {extraRight}\n </div>\n\n {/* Tab content */}\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div\n className={cn(\n 'ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1',\n adaptHeight && 'tw-h-full',\n )}\n style={\n paddingVal\n ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n : undefined\n }\n >\n {resolvedItems.map((item) => {\n const isActive = item.key === activeKey;\n if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n return null;\n }\n return (\n <div\n key={item.key}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-tabs-tabpane ant-tabs-tabpane',\n // v2 行为:adaptHeight 时 tabpane 撑满内容区,子元素的百分比高度才能解析\n adaptHeight && 'tw-h-full tw-overflow-y-auto',\n isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n )}\n role=\"tabpanel\"\n >\n {item.children}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}
|
package/dist/Tree/Tree2.js
CHANGED
|
@@ -137,9 +137,11 @@ var Tree = React$1.forwardRef((props, ref) => {
|
|
|
137
137
|
*/
|
|
138
138
|
const composedAllowDrop = React$1.useMemo(() => composeAllowDrop(rest.allowDrop, dropOnlyResolvers?.nodeDroppable), [rest.allowDrop, dropOnlyResolvers]);
|
|
139
139
|
const renderIndent = (nodeProps) => {
|
|
140
|
-
const { pos } = nodeProps;
|
|
140
|
+
const { pos, isLeaf } = nodeProps;
|
|
141
|
+
const level = Math.max(0, (pos?.split("-").length ?? 2) - 2);
|
|
142
|
+
const leafSwitcherWidth = isLeaf && !showLine ? TREE_SWITCH_CION_SIZE : 0;
|
|
141
143
|
return /* @__PURE__ */ jsx("span", { style: {
|
|
142
|
-
width:
|
|
144
|
+
width: level * TREE_SWITCH_CION_SIZE + leafSwitcherWidth,
|
|
143
145
|
flexShrink: 0
|
|
144
146
|
} });
|
|
145
147
|
};
|
package/dist/Tree/Tree2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { composeAllowDrop } from './utils/composeAllowDrop';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DropOnlyResolvers {\n nodeDraggable: DraggableFn | undefined;\n nodeDroppable: DraggableFn;\n}\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n /** 节点是否可作为 drag source(拖起来)。返回 false:不显示 drag handle、不能起拖。 */\n nodeDraggable?: DraggableFn;\n /**\n * 节点是否可作为 drop target(接收落入)。返回 true:即使 nodeDraggable=false 仍注册\n * onDragOver/onDrop 等 listener,浏览器才会真正派发 drop 事件。\n *\n * 解决 rc-tree 5.x 把\"可拖\"与\"可放\"绑到同一个 nodeDraggable 的限制——之前要让\"类目可接收\n * 资源拖入但本身不可拖\"只能让 nodeDraggable 全返回 true,再用业务侧 CSS hack 隐藏 drag icon。\n *\n * 默认不传 = 沿用 nodeDraggable 行为(向后兼容)。\n */\n nodeDroppable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n const renderedHandler = handlerRender(node) as React.ReactNode;\n const hasHandler =\n renderedHandler !== null &&\n renderedHandler !== undefined &&\n renderedHandler !== false;\n return (\n <span\n className={cn(\n 'ald-tree-title-layout',\n hasHandler && 'ald-tree-title-layout-with-handler',\n )}\n >\n <span className=\"ald-tree-title-content\">{renderedTitle}</span>\n {showTabLeader && hasHandler && (\n <div className=\"ald-tree-tab-leader\"></div>\n )}\n {hasHandler && (\n <span className=\"ald-tree-title-handler\">{renderedHandler}</span>\n )}\n </span>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n // 一次性吃掉 draggable 的归一化:rc-tree 看到的 mergedDraggable + 我们内部用的\n // dropOnlyResolvers(原样保留用户 nodeDraggable/nodeDroppable)。集中一处避免两处 useMemo\n // 的判断散开导致字段扩展时遗漏。\n const { draggableConfig, dropOnlyResolvers } = React.useMemo(() => {\n if (!draggable) {\n return {\n draggableConfig: false as const,\n dropOnlyResolvers: null as DropOnlyResolvers | null,\n };\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = { icon: newIcon };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = {\n ...draggable,\n icon: draggable.icon === undefined ? newIcon : draggable.icon,\n };\n break;\n default:\n break;\n }\n\n // rc-tree 5.x 把\"可拖(drag source)\"与\"可放(drop target)\"绑到同一个 nodeDraggable:\n // 该返回 false 时 onDragOver/onDrop 也连带不注册,浏览器认为该节点 not droppable\n // → drop 事件根本不派发。为了让\"类目可接收资源拖入但本身不可拖\",把 rc-tree 看到的\n // nodeDraggable 改成 nodeDraggable || nodeDroppable,从而保证 drop listener 仍注册。\n // 真正的 drag-source 阻断由 document 级 dragstart capture handler 负责(见下方 effect)。\n let resolvers: DropOnlyResolvers | null = null;\n if (mergedDraggable.nodeDroppable) {\n const userNodeDraggable = mergedDraggable.nodeDraggable;\n const userNodeDroppable = mergedDraggable.nodeDroppable;\n resolvers = {\n nodeDraggable: userNodeDraggable,\n nodeDroppable: userNodeDroppable,\n };\n mergedDraggable = {\n ...mergedDraggable,\n nodeDraggable: (node: DataNode) =>\n (userNodeDraggable ? userNodeDraggable(node) : true) ||\n userNodeDroppable(node),\n };\n }\n\n return { draggableConfig: mergedDraggable, dropOnlyResolvers: resolvers };\n }, [draggable]);\n\n /**\n * drop-only 节点不能真的起拖。\n *\n * 历史教训:以前在 props.onDragStart 里调 preventDefault。问题是 rc-tree 内部\n * onNodeDragStart(Tree.js:88-99)会在调用 user onDragStart **之前**把\n * draggingNodeKey/dragNodeProps 写进 state;TreeNode(TreeNode.js:112)也已经先\n * setDragNodeHighlight(true)。然后 preventDefault 让浏览器取消拖拽,dragend 不再派发\n * → onWindowDragEnd 永远不触发 → state 卡在\"正在拖类目\",外层 .ald-tree-treenode\n * 卡着 `dragging`、内层 .ald-tree-node-content-wrapper 卡着 `ald-tree-node-selected`\n * 高亮,直到下一次合法 dragstart 才被覆盖。\n *\n * 修复手段:document 级 dragstart capture handler,在 rc-tree 的 React 监听器之前\n * stopPropagation+preventDefault,让 TreeNode 的 onDragStart 整段都不执行,rc-tree\n * 内部 state 彻底不写入。document 是 React root 容器的祖先,capture 阶段先于 React\n * delegation 监听器,因此 stopPropagation 能彻底拦截。\n */\n React.useLayoutEffect(() => {\n if (!dropOnlyResolvers) return;\n const handler = (e: DragEvent) => {\n const target = e.target as HTMLElement | null;\n if (!target?.closest) return;\n if (target.closest('.ald-tree-treenode-drop-only')) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n document.addEventListener('dragstart', handler, true);\n return () => document.removeEventListener('dragstart', handler, true);\n }, [dropOnlyResolvers]);\n\n /**\n * nodeDroppable 同时收口到 rc-tree 的 allowDrop:避免出现\"nodeDroppable=false 但 rc-tree\n * 默认 allowDrop=()=>true 仍然接收 drop\"的语义裂缝。用户自传的 allowDrop 与 nodeDroppable\n * 取 AND(任一拒绝即拒绝)。\n */\n const composedAllowDrop = React.useMemo(\n () => composeAllowDrop(rest.allowDrop, dropOnlyResolvers?.nodeDroppable),\n [rest.allowDrop, dropOnlyResolvers],\n );\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos } = nodeProps as AldTreeNodeProps & { pos?: string };\n // rc-tree `pos` 格式:\"0\" 是虚拟根,\"0-0\" 是首层节点,\"0-0-1\" 是 leaf。\n // 顶层节点 level=0 不缩进;每层 +1 unit(switcher 宽度),与 antd Tree 行为一致。\n // 不再为 leaf 额外补 switcher 宽度——leaf 自身的 switcher-noop 已经占位,\n // 旧公式 `isLeaf + level * (iconSize/2)` 会让 leaf 比同级 group 视觉额外右移半个 unit。\n // `?? 2` 兜底:当 pos 缺失时按\"首层节点 `0-0` 长度 = 2\"处理,结果 level=0 不缩进;\n // 切勿改成 1 或 0,否则缺 pos 的节点会被错误右移。\n const level = Math.max(0, (pos?.split('-').length ?? 2) - 2);\n return (\n <span\n style={{ width: level * TREE_SWITCH_CION_SIZE, flexShrink: 0 }}\n ></span>\n );\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n /** 给 drop-only 节点的 wrapper 加 'ald-tree-treenode-drop-only' className(rc-tree 5.x\n * 会把 DataNode.className 透传到 .ald-tree-treenode 上)。css 据此隐藏 drag handle icon\n * 并提供 not-allowed cursor,区分纯 drop target 与真正可拖节点。 */\n const finalTreeData = React.useMemo(() => {\n if (!dropOnlyResolvers || !newTreeData) return newTreeData;\n const { nodeDraggable, nodeDroppable } = dropOnlyResolvers;\n return produce(newTreeData, (draft) => {\n const visit = (nodes: DataNode[] | undefined) => {\n if (!nodes) return;\n for (const node of nodes) {\n const isDraggable = nodeDraggable ? nodeDraggable(node) : true;\n const isDroppable = nodeDroppable(node);\n if (!isDraggable && isDroppable) {\n const existing = node.className ?? '';\n if (!existing.includes('ald-tree-treenode-drop-only')) {\n node.className = cn(existing, 'ald-tree-treenode-drop-only');\n }\n }\n visit(node.children as DataNode[] | undefined);\n }\n };\n visit(draft as DataNode[]);\n });\n }, [newTreeData, dropOnlyResolvers]);\n\n const noChildren = React.useMemo(() => {\n if (finalTreeData?.length) {\n return finalTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [finalTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n allowDrop={composedAllowDrop}\n prefixCls={prefixCls}\n treeData={finalTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { composeAllowDrop } from './utils/composeAllowDrop';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DropOnlyResolvers {\n nodeDraggable: DraggableFn | undefined;\n nodeDroppable: DraggableFn;\n}\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n /** 节点是否可作为 drag source(拖起来)。返回 false:不显示 drag handle、不能起拖。 */\n nodeDraggable?: DraggableFn;\n /**\n * 节点是否可作为 drop target(接收落入)。返回 true:即使 nodeDraggable=false 仍注册\n * onDragOver/onDrop 等 listener,浏览器才会真正派发 drop 事件。\n *\n * 解决 rc-tree 5.x 把\"可拖\"与\"可放\"绑到同一个 nodeDraggable 的限制——之前要让\"类目可接收\n * 资源拖入但本身不可拖\"只能让 nodeDraggable 全返回 true,再用业务侧 CSS hack 隐藏 drag icon。\n *\n * 默认不传 = 沿用 nodeDraggable 行为(向后兼容)。\n */\n nodeDroppable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n const renderedHandler = handlerRender(node) as React.ReactNode;\n const hasHandler =\n renderedHandler !== null &&\n renderedHandler !== undefined &&\n renderedHandler !== false;\n return (\n <span\n className={cn(\n 'ald-tree-title-layout',\n hasHandler && 'ald-tree-title-layout-with-handler',\n )}\n >\n <span className=\"ald-tree-title-content\">{renderedTitle}</span>\n {showTabLeader && hasHandler && (\n <div className=\"ald-tree-tab-leader\"></div>\n )}\n {hasHandler && (\n <span className=\"ald-tree-title-handler\">{renderedHandler}</span>\n )}\n </span>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n // 一次性吃掉 draggable 的归一化:rc-tree 看到的 mergedDraggable + 我们内部用的\n // dropOnlyResolvers(原样保留用户 nodeDraggable/nodeDroppable)。集中一处避免两处 useMemo\n // 的判断散开导致字段扩展时遗漏。\n const { draggableConfig, dropOnlyResolvers } = React.useMemo(() => {\n if (!draggable) {\n return {\n draggableConfig: false as const,\n dropOnlyResolvers: null as DropOnlyResolvers | null,\n };\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = { icon: newIcon };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = {\n ...draggable,\n icon: draggable.icon === undefined ? newIcon : draggable.icon,\n };\n break;\n default:\n break;\n }\n\n // rc-tree 5.x 把\"可拖(drag source)\"与\"可放(drop target)\"绑到同一个 nodeDraggable:\n // 该返回 false 时 onDragOver/onDrop 也连带不注册,浏览器认为该节点 not droppable\n // → drop 事件根本不派发。为了让\"类目可接收资源拖入但本身不可拖\",把 rc-tree 看到的\n // nodeDraggable 改成 nodeDraggable || nodeDroppable,从而保证 drop listener 仍注册。\n // 真正的 drag-source 阻断由 document 级 dragstart capture handler 负责(见下方 effect)。\n let resolvers: DropOnlyResolvers | null = null;\n if (mergedDraggable.nodeDroppable) {\n const userNodeDraggable = mergedDraggable.nodeDraggable;\n const userNodeDroppable = mergedDraggable.nodeDroppable;\n resolvers = {\n nodeDraggable: userNodeDraggable,\n nodeDroppable: userNodeDroppable,\n };\n mergedDraggable = {\n ...mergedDraggable,\n nodeDraggable: (node: DataNode) =>\n (userNodeDraggable ? userNodeDraggable(node) : true) ||\n userNodeDroppable(node),\n };\n }\n\n return { draggableConfig: mergedDraggable, dropOnlyResolvers: resolvers };\n }, [draggable]);\n\n /**\n * drop-only 节点不能真的起拖。\n *\n * 历史教训:以前在 props.onDragStart 里调 preventDefault。问题是 rc-tree 内部\n * onNodeDragStart(Tree.js:88-99)会在调用 user onDragStart **之前**把\n * draggingNodeKey/dragNodeProps 写进 state;TreeNode(TreeNode.js:112)也已经先\n * setDragNodeHighlight(true)。然后 preventDefault 让浏览器取消拖拽,dragend 不再派发\n * → onWindowDragEnd 永远不触发 → state 卡在\"正在拖类目\",外层 .ald-tree-treenode\n * 卡着 `dragging`、内层 .ald-tree-node-content-wrapper 卡着 `ald-tree-node-selected`\n * 高亮,直到下一次合法 dragstart 才被覆盖。\n *\n * 修复手段:document 级 dragstart capture handler,在 rc-tree 的 React 监听器之前\n * stopPropagation+preventDefault,让 TreeNode 的 onDragStart 整段都不执行,rc-tree\n * 内部 state 彻底不写入。document 是 React root 容器的祖先,capture 阶段先于 React\n * delegation 监听器,因此 stopPropagation 能彻底拦截。\n */\n React.useLayoutEffect(() => {\n if (!dropOnlyResolvers) return;\n const handler = (e: DragEvent) => {\n const target = e.target as HTMLElement | null;\n if (!target?.closest) return;\n if (target.closest('.ald-tree-treenode-drop-only')) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n document.addEventListener('dragstart', handler, true);\n return () => document.removeEventListener('dragstart', handler, true);\n }, [dropOnlyResolvers]);\n\n /**\n * nodeDroppable 同时收口到 rc-tree 的 allowDrop:避免出现\"nodeDroppable=false 但 rc-tree\n * 默认 allowDrop=()=>true 仍然接收 drop\"的语义裂缝。用户自传的 allowDrop 与 nodeDroppable\n * 取 AND(任一拒绝即拒绝)。\n */\n const composedAllowDrop = React.useMemo(\n () => composeAllowDrop(rest.allowDrop, dropOnlyResolvers?.nodeDroppable),\n [rest.allowDrop, dropOnlyResolvers],\n );\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos, isLeaf } = nodeProps as AldTreeNodeProps & { pos?: string };\n // rc-tree `pos` 格式:\"0\" 是虚拟根,\"0-0\" 是首层节点,\"0-0-1\" 是 leaf。\n // 顶层节点 level=0 不缩进;每层 +1 unit(switcher 宽度),与 antd Tree 行为一致。\n // leaf 在未开启 showLine 时 renderSwitcherIcon 返回 null,没有真实 switcher 占位;\n // 需要补一个 switcher 宽度,保证业务图标和同级可展开节点对齐。\n // `?? 2` 兜底:当 pos 缺失时按\"首层节点 `0-0` 长度 = 2\"处理,结果 level=0 不缩进;\n // 切勿改成 1 或 0,否则缺 pos 的节点会被错误右移。\n const level = Math.max(0, (pos?.split('-').length ?? 2) - 2);\n const leafSwitcherWidth = isLeaf && !showLine ? TREE_SWITCH_CION_SIZE : 0;\n return (\n <span\n style={{\n width: level * TREE_SWITCH_CION_SIZE + leafSwitcherWidth,\n flexShrink: 0,\n }}\n ></span>\n );\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n /** 给 drop-only 节点的 wrapper 加 'ald-tree-treenode-drop-only' className(rc-tree 5.x\n * 会把 DataNode.className 透传到 .ald-tree-treenode 上)。css 据此隐藏 drag handle icon\n * 并提供 not-allowed cursor,区分纯 drop target 与真正可拖节点。 */\n const finalTreeData = React.useMemo(() => {\n if (!dropOnlyResolvers || !newTreeData) return newTreeData;\n const { nodeDraggable, nodeDroppable } = dropOnlyResolvers;\n return produce(newTreeData, (draft) => {\n const visit = (nodes: DataNode[] | undefined) => {\n if (!nodes) return;\n for (const node of nodes) {\n const isDraggable = nodeDraggable ? nodeDraggable(node) : true;\n const isDroppable = nodeDroppable(node);\n if (!isDraggable && isDroppable) {\n const existing = node.className ?? '';\n if (!existing.includes('ald-tree-treenode-drop-only')) {\n node.className = cn(existing, 'ald-tree-treenode-drop-only');\n }\n }\n visit(node.children as DataNode[] | undefined);\n }\n };\n visit(draft as DataNode[]);\n });\n }, [newTreeData, dropOnlyResolvers]);\n\n const noChildren = React.useMemo(() => {\n if (finalTreeData?.length) {\n return finalTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [finalTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n allowDrop={composedAllowDrop}\n prefixCls={prefixCls}\n treeData={finalTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAM,wBAAwB;AAC9B,IAAM,0BAA0B;AAmLhC,IAAM,OAAO,QAAM,YAA4B,OAAO,QAAQ;CAC5D,MAAM,EAAE,WAAW,QAAM,WAAW,cAAc;CAClD,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,cAAc,WAAW,YAAY,QAAM,WAAW,cAAc;CAC5E,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,EACJ,WACA,WAAW,OACX,UACA,YAAY,OACZ,UACA,YAAY,OACZ,aAAa,MACb,WACA,aACA,eACA,gBAAgB,MAChB,gBACA,UACA,mBACA,SAAS;EAAE,GAAG;EAAgB,cAAc;EAAO,EACnD,GAAG,SACD;CACJ,MAAM,YAAY,aAAa,QAAQ,WAAW;CAElD,MAAM,oBAAoB,QAAM,aAC7B,SAAmB;EAClB,MAAM,gBAAgB,cAClB,YAAY,KAAK,GACjB,OAAO,KAAK,UAAU,aACtB,KAAK,MAAM,KAAK,GAChB,KAAK;EACT,MAAM,kBAAkB,cAAc,KAAK;EAC3C,MAAM,aACJ,oBAAoB,QACpB,oBAAoB,UACpB,oBAAoB;AACtB,SACE,qBAAC,QAAD;GACE,WAAW,GACT,yBACA,cAAc,qCACf;aAJH;IAME,oBAAC,QAAD;KAAM,WAAU;eAA0B;KAAqB,CAAA;IAC9D,iBAAiB,cAChB,oBAAC,OAAD,EAAK,WAAU,uBAA4B,CAAA;IAE5C,cACC,oBAAC,QAAD;KAAM,WAAU;eAA0B;KAAuB,CAAA;IAE9D;;IAGX;EAAC;EAAa;EAAe;EAAc,CAC5C;CACD,MAAM,WAAW;EACf,GAAG;EACH;EACA;EACA;EACA;EACA;EACA,UAAU,QAAQ,SAAS;EAC3B;EACA,aAAa;EACd;CAKD,MAAM,EAAE,iBAAiB,sBAAsB,QAAM,cAAc;AACjE,MAAI,CAAC,UACH,QAAO;GACL,iBAAiB;GACjB,mBAAmB;GACpB;EAEH,MAAM,UACJ,oBAAC,QAAD;GACE,MAAM;GACN,OAAO;GACG,CAAA;EAEd,IAAI,kBAAmC,EAAE,MAAM,SAAS;AACxD,UAAQ,OAAO,WAAf;GACE,KAAK;AACH,oBAAgB,gBAAgB;AAChC;GACF,KAAK;AACH,sBAAkB;KAChB,GAAG;KACH,MAAM,UAAU,SAAS,SAAY,UAAU,UAAU;KAC1D;AACD;GACF,QACE;;EAQJ,IAAI,YAAsC;AAC1C,MAAI,gBAAgB,eAAe;GACjC,MAAM,oBAAoB,gBAAgB;GAC1C,MAAM,oBAAoB,gBAAgB;AAC1C,eAAY;IACV,eAAe;IACf,eAAe;IAChB;AACD,qBAAkB;IAChB,GAAG;IACH,gBAAgB,UACb,oBAAoB,kBAAkB,KAAK,GAAG,SAC/C,kBAAkB,KAAK;IAC1B;;AAGH,SAAO;GAAE,iBAAiB;GAAiB,mBAAmB;GAAW;IACxE,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;AAkBf,SAAM,sBAAsB;AAC1B,MAAI,CAAC,kBAAmB;EACxB,MAAM,WAAW,MAAiB;GAChC,MAAM,SAAS,EAAE;AACjB,OAAI,CAAC,QAAQ,QAAS;AACtB,OAAI,OAAO,QAAQ,+BAA+B,EAAE;AAClD,MAAE,gBAAgB;AAClB,MAAE,iBAAiB;;;AAGvB,WAAS,iBAAiB,aAAa,SAAS,KAAK;AACrD,eAAa,SAAS,oBAAoB,aAAa,SAAS,KAAK;IACpE,CAAC,kBAAkB,CAAC;;;;;;CAOvB,MAAM,oBAAoB,QAAM,cACxB,iBAAiB,KAAK,WAAW,mBAAmB,cAAc,EACxE,CAAC,KAAK,WAAW,kBAAkB,CACpC;CACD,MAAM,gBAAgB,cAAgC;EACpD,MAAM,EAAE,KAAK,WAAW;EAOxB,MAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,UAAU,KAAK,EAAE;EAC5D,MAAM,oBAAoB,UAAU,CAAC,WAAW,wBAAwB;AACxE,SACE,oBAAC,QAAD,EACE,OAAO;GACL,OAAO,QAAQ,wBAAwB;GACvC,YAAY;GACb,EACK,CAAA;;CAGZ,MAAM,cAAc,QAAM,cAAc;AACtC,MAAI,CAAC,kBAAkB,CAAC,SAAU,QAAO;EAEzC,MAAM,sBAAsB,SAA4B;GAEtD,IAAI,oBAAoB;AACxB,OAAI,eAAe,KAAK,CACtB,qBAAoB;AAGtB,OAAI,KAAK,SAQP,qBANqC,KAAK,SAAS,QAChD,KAAK,UAAU;AACd,WAAO,mBAAmB,MAAM,IAAI;MAEtC,kBACD;AAKH,OAAI,kBACF,MAAK,YAAY,KAAK,WAAW,SAAS,wBAAwB,GAC9D,KAAK,YACL,GAAG,KAAK,WAAW,wBAAwB;OAG/C,MAAK,WAAW,QADJ,2BACiB,IAAI;AAEnC,OAAI,qBAAqB,OAAO,KAAK,UAAU,WAC7C,MAAK,QACH,oBAAC,eAAD;IAAe,SAAS;cACrB,KAAK;IACQ,CAAA;AAGpB,UAAO;;AAOT,SALoB,QAAQ,WAAW,UAAU;AAC/C,QAAK,MAAM,YAAY,MACrB,oBAAmB,SAAS;IAE9B;IAED;EAAC;EAAgB;EAAU;EAAkB,CAAC;;;;CAKjD,MAAM,gBAAgB,QAAM,cAAc;AACxC,MAAI,CAAC,qBAAqB,CAAC,YAAa,QAAO;EAC/C,MAAM,EAAE,eAAe,kBAAkB;AACzC,SAAO,QAAQ,cAAc,UAAU;GACrC,MAAM,SAAS,UAAkC;AAC/C,QAAI,CAAC,MAAO;AACZ,SAAK,MAAM,QAAQ,OAAO;KACxB,MAAM,cAAc,gBAAgB,cAAc,KAAK,GAAG;KAC1D,MAAM,cAAc,cAAc,KAAK;AACvC,SAAI,CAAC,eAAe,aAAa;MAC/B,MAAM,WAAW,KAAK,aAAa;AACnC,UAAI,CAAC,SAAS,SAAS,8BAA8B,CACnD,MAAK,YAAY,GAAG,UAAU,8BAA8B;;AAGhE,WAAM,KAAK,SAAmC;;;AAGlD,SAAM,MAAoB;IAC1B;IACD,CAAC,aAAa,kBAAkB,CAAC;CAEpC,MAAM,aAAa,QAAM,cAAc;AACrC,MAAI,eAAe,OACjB,QAAO,cAAc,OAAO,SAAS;AACnC,UAAO,CAAC,KAAK,UAAU,UAAU,KAAK,WAAW;IACjD;AAEJ,SAAO;IACN,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,QAAD;EACE,YAAY;EACP;EACI;EACT,GAAI;EACJ,WAAW;EACA;EACX,UAAU;EACV,WAAW,GACT;IACG,GAAG,UAAU,cAAc,CAAC;IAC5B,GAAG,UAAU,eAAe;IAC5B,GAAG,UAAU,iBAAiB,CAAC;IAC/B,GAAG,UAAU,UAAU,SAAS;IAChC,GAAG,UAAU,QAAQ,cAAc;IACnC,uBAAuB;IACvB,GAAG,UAAU,gBAAgB;GAC/B,EAED,YACA,UACD;EACU;EACX,WACE,YACE,oBAAC,QAAD,EAAM,WAAW,GAAG,UAAU,kBAAoB,CAAA,GAElD;EAGQ;EAEZ,eAAe,cAAgC;AAC7C,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,UAAU,EACvB,mBACC,WACA,oBAAC,MAAD;IACE,MAAM;IACN,OAAO;cAEN,EAAE,KAAK;IACY,CAAA,EACtB,UACA,WACA,sBACD,CACA,EAAA,CAAA;;EAGP,WAAW;EAEV;EACM,CAAA;EAEX"}
|