@lobehub/ui 5.9.2 → 5.9.4
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/es/A/index.mjs.map +1 -1
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/Alert/Alert.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/ConfigProvider/index.mjs.map +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +19 -3
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/EditorSlashMenu/useNormalizedItems.mjs.map +1 -1
- package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/Form/components/FormFlatGroup.mjs.map +1 -1
- package/es/Grid/Grid.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map +1 -1
- package/es/Highlighter/const.mjs.map +1 -1
- package/es/Hotkey/Hotkey.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/Icon/style.mjs.map +1 -1
- package/es/Image/components/Toolbar.mjs.map +1 -1
- package/es/Img/index.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs.map +1 -1
- package/es/Markdown/components/CodeBlock.mjs.map +1 -1
- package/es/Markdown/markdown.style.mjs.map +1 -1
- package/es/Markdown/plugins/remarkBr.mjs.map +1 -1
- package/es/Markdown/plugins/remarkColor.mjs.map +1 -1
- package/es/Markdown/plugins/remarkGfmPlus.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/utils.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map +1 -1
- package/es/Modal/imperative.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/SortableList/SortableList.mjs.map +1 -1
- package/es/SortableList/components/SortableItem.mjs.map +1 -1
- package/es/Text/Text.mjs.map +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/es/Toc/style.mjs.map +1 -1
- package/es/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipInGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/Tooltip/useMergedTooltipProps.mjs.map +1 -1
- package/es/awesome/Spline/ParentSize.mjs.map +1 -1
- package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/ContextMenu/store.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/useSheetDrag.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/useSnapPoints.mjs.map +1 -1
- package/es/base-ui/Modal/atoms.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Modal/style.mjs +1 -0
- package/es/base-ui/Modal/style.mjs.map +1 -1
- package/es/base-ui/Modal/zIndexManager.mjs.map +1 -1
- package/es/base-ui/Popover/useMergedPopoverProps.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Toast/imperative.mjs.map +1 -1
- package/es/brand/BrandLoading/index.mjs.map +1 -1
- package/es/brand/Logo3d/index.mjs.map +1 -1
- package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/hooks/useHighlight.mjs.map +1 -1
- package/es/hooks/useMarkdown/latex.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownComponents.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownContent.mjs.map +1 -1
- package/es/hooks/useMermaid.mjs.map +1 -1
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/hooks/useStreamHighlight.mjs.map +1 -1
- package/es/hooks/useStreamMermaid.mjs.map +1 -1
- package/es/i18n/useTranslation.mjs.map +1 -1
- package/es/mdx/mdxComponents/CodeBlock.mjs.map +1 -1
- package/es/styles/customTheme.mjs.map +1 -1
- package/es/styles/theme/customStylishStatic.mjs +15 -0
- package/es/styles/theme/customStylishStatic.mjs.map +1 -1
- package/es/styles/theme/token/base.mjs.map +1 -1
- package/es/utils/blobToPng.mjs.map +1 -1
- package/es/utils/placement.mjs.map +1 -1
- package/es/utils/smoothCorners.mjs.map +1 -1
- package/package.json +1 -1
package/es/A/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/A/index.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\n\nimport { ConfigContext } from '@/ConfigProvider';\nimport { type AProps } from '@/types';\n\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\n\nconst A: FC<AProps & { ref?: Ref<HTMLAnchorElement> }> = (props) => {\n const config = use(ConfigContext);\n const render = config?.aAs || 'a';\n\n const AContainer = useMemo(() => createContainer(render), [render]);\n\n return <AContainer {...props} />;\n};\n\nA.displayName = 'A';\n\nexport default A;\n"],"mappings":";;;;;AAOA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,MAAM,CAAC;AAE3F,MAAM,KAAoD,UAAU;CAElE,MAAM,SADS,IAAI,
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/A/index.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\n\nimport { ConfigContext } from '@/ConfigProvider';\nimport { type AProps } from '@/types';\n\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\n\nconst A: FC<AProps & { ref?: Ref<HTMLAnchorElement> }> = (props) => {\n const config = use(ConfigContext);\n const render = config?.aAs || 'a';\n\n const AContainer = useMemo(() => createContainer(render), [render]);\n\n return <AContainer {...props} />;\n};\n\nA.displayName = 'A';\n\nexport default A;\n"],"mappings":";;;;;AAOA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,MAAM,CAAC;AAE3F,MAAM,KAAoD,UAAU;CAElE,MAAM,SADS,IAAI,cACE,EAAE,OAAO;AAI9B,QAAO,oBAFY,cAAc,gBAAgB,OAAO,EAAE,CAAC,OAAO,CAEhD,EAAX,EAAY,GAAI,OAAS,CAAA;;AAGlC,EAAE,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { styles } from './style';\nimport { type AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n ({\n children,\n className: userClassName,\n style: userStyle,\n accordion = false,\n defaultExpandedKeys,\n expandedKeys: expandedKeysProp,\n onExpandedChange,\n variant = 'borderless',\n gap,\n showDivider = false,\n disableAnimation = false,\n hideIndicator = false,\n indicatorPlacement = 'start',\n keepContentMounted = true,\n classNames,\n styles: customStyles,\n motionProps,\n ref,\n ...rest\n }) => {\n // Convert children to array and filter valid elements\n const validChildren = Children.toArray(children).filter(isValidElement);\n\n // Collect all item keys\n const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n onChange: onExpandedChange,\n value: expandedKeysProp,\n });\n\n const toggleExpand = useCallback(\n (key: Key) => {\n const prev = expandedKeys;\n let newKeys: Key[];\n\n if (accordion) {\n newKeys = prev.includes(key) ? [] : [key];\n } else {\n newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n }\n\n setExpandedKeys(newKeys);\n },\n [accordion, expandedKeys, setExpandedKeys],\n );\n\n const isExpanded = useCallback(\n (key: Key) => {\n return expandedKeys.includes(key);\n },\n [expandedKeys],\n );\n\n const contextValue = {\n disableAnimation,\n expandedKeys,\n hideIndicator,\n indicatorPlacement,\n isExpanded,\n keepContentMounted,\n motionProps,\n onToggle: toggleExpand,\n showDivider,\n variant,\n };\n\n const content = (\n <>\n {validChildren.map((child, index) => {\n // Extract itemKey from child props to use as React key\n const childKey = (child.props as any).itemKey || index;\n return (\n <Fragment key={childKey}>\n {child}\n {showDivider && index < validChildren.length - 1 && (\n <Divider className={styles.divider} />\n )}\n </Fragment>\n );\n })}\n </>\n );\n\n return (\n <AccordionContext value={contextValue}>\n <div\n className={cx(styles.base, classNames?.base, userClassName)}\n ref={ref}\n style={{\n gap: gap,\n ...customStyles?.base,\n ...userStyle,\n }}\n {...rest}\n >\n {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n </div>\n </AccordionContext>\n );\n },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CAEJ,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAI;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,kBAAgB,QAAQ;IAE1B;EAAC;EAAW;EAAc;EAAgB,CAC3C;CASD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA,YAZiB,aAChB,QAAa;AACZ,UAAO,aAAa,SAAS,IAAI;KAEnC,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { styles } from './style';\nimport { type AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n ({\n children,\n className: userClassName,\n style: userStyle,\n accordion = false,\n defaultExpandedKeys,\n expandedKeys: expandedKeysProp,\n onExpandedChange,\n variant = 'borderless',\n gap,\n showDivider = false,\n disableAnimation = false,\n hideIndicator = false,\n indicatorPlacement = 'start',\n keepContentMounted = true,\n classNames,\n styles: customStyles,\n motionProps,\n ref,\n ...rest\n }) => {\n // Convert children to array and filter valid elements\n const validChildren = Children.toArray(children).filter(isValidElement);\n\n // Collect all item keys\n const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n onChange: onExpandedChange,\n value: expandedKeysProp,\n });\n\n const toggleExpand = useCallback(\n (key: Key) => {\n const prev = expandedKeys;\n let newKeys: Key[];\n\n if (accordion) {\n newKeys = prev.includes(key) ? [] : [key];\n } else {\n newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n }\n\n setExpandedKeys(newKeys);\n },\n [accordion, expandedKeys, setExpandedKeys],\n );\n\n const isExpanded = useCallback(\n (key: Key) => {\n return expandedKeys.includes(key);\n },\n [expandedKeys],\n );\n\n const contextValue = {\n disableAnimation,\n expandedKeys,\n hideIndicator,\n indicatorPlacement,\n isExpanded,\n keepContentMounted,\n motionProps,\n onToggle: toggleExpand,\n showDivider,\n variant,\n };\n\n const content = (\n <>\n {validChildren.map((child, index) => {\n // Extract itemKey from child props to use as React key\n const childKey = (child.props as any).itemKey || index;\n return (\n <Fragment key={childKey}>\n {child}\n {showDivider && index < validChildren.length - 1 && (\n <Divider className={styles.divider} />\n )}\n </Fragment>\n );\n })}\n </>\n );\n\n return (\n <AccordionContext value={contextValue}>\n <div\n className={cx(styles.base, classNames?.base, userClassName)}\n ref={ref}\n style={{\n gap: gap,\n ...customStyles?.base,\n ...userStyle,\n }}\n {...rest}\n >\n {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n </div>\n </AccordionContext>\n );\n },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CAEJ,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAI;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,kBAAgB,QAAQ;IAE1B;EAAC;EAAW;EAAc;EAAgB,CAC3C;CASD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA,YAZiB,aAChB,QAAa;AACZ,UAAO,aAAa,SAAS,IAAI;KAEnC,CAAC,aAAa,CAQJ;EACV;EACA;EACA,UAAU;EACV;EACA;EACD;CAED,MAAM,UACJ,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,UAAD,EAAA,UAAA,CACG,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,SAAW,CAAA,CAE/B,EAAA,EALI,SAKJ;GAEb,EACD,CAAA;AAGL,QACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,SAAsB,CAAA;GAC9D,CAAA;EACW,CAAA;EAGxB;AAED,UAAU,cAAc"}
|
package/es/Alert/Alert.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.mjs","names":["Alert","AntdAlert","Flexbox"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport { Alert as AntdAlert } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { camelCase } from 'es-toolkit/compat';\nimport { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { Accordion, AccordionItem } from '@/Accordion';\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { extraHeaderVariants, extraVariants, rootVariants } from './style';\nimport type { AlertProps } from './type';\n\nconst typeIcons = {\n error: XCircle,\n info: Info,\n secondary: AlertTriangle,\n success: CheckCircle,\n warning: AlertTriangle,\n};\n\nconst colors = (theme: any, type: string = 'info', ...keys: string[]) => {\n if (type === 'secondary') return theme[camelCase(['color', ...keys].join('-'))] as string;\n return theme[camelCase(['color', type, ...keys].join('-'))] as string;\n};\n\nconst Alert = memo<AlertProps>(\n ({\n closable = false,\n description,\n showIcon = true,\n type = 'info',\n glass,\n icon,\n colorfulText = true,\n iconProps,\n style,\n extra,\n classNames,\n styles: customStyles,\n text,\n extraDefaultExpand = false,\n extraIsolate,\n banner,\n variant = 'filled',\n ref,\n ...rest\n }) => {\n const theme = useTheme();\n const hasTitle = !!description;\n const isClosable = !!closable;\n const isShowIcon = !!showIcon;\n\n const isInsideExtra = Boolean(!extraIsolate && !!extra);\n\n const alert = (\n <AntdAlert\n banner={banner}\n description={description}\n ref={ref}\n showIcon={showIcon}\n type={type === 'secondary' ? 'info' : type}\n className={cx(\n rootVariants({\n closable: isClosable,\n colorfulText,\n glass,\n hasExtra: isInsideExtra,\n hasTitle,\n showIcon: isShowIcon,\n variant,\n }),\n classNames?.alert,\n )}\n closable={\n typeof closable === 'boolean'\n ? closable\n : {\n closeIcon: <ActionIcon color={colors(theme, type)} icon={X} size={'small'} />,\n ...closable,\n }\n }\n icon={\n <Icon\n color={type === 'secondary' ? cssVar.colorTextSecondary : undefined}\n icon={icon || typeIcons[type]}\n size={description ? 24 : 18}\n {...iconProps}\n />\n }\n style={{\n background: colors(theme, type, 'fillTertiary'),\n borderColor: colors(theme, type, 'fillSecondary'),\n color: colorfulText ? colors(theme, type) : undefined,\n ...style,\n ...customStyles?.alert,\n }}\n {...rest}\n />\n );\n\n if (!extra) return alert;\n\n if (extraIsolate)\n return (\n <Flexbox className={classNames?.container} gap={8}>\n {alert}\n {extra}\n </Flexbox>\n );\n\n return (\n <Flexbox className={classNames?.container} style={customStyles?.container}>\n {alert}\n <Flexbox\n className={extraVariants({ banner, variant })}\n style={{\n background: colors(theme, type, 'fillTertiary'),\n borderColor: colors(theme, type, 'fillSecondary'),\n color: colors(theme, type),\n fontSize: description ? 14 : 12,\n }}\n >\n <Accordion defaultExpandedKeys={extraDefaultExpand ? ['extra'] : []}>\n <AccordionItem\n itemKey={'extra'}\n title={text?.detail || 'Show Details'}\n classNames={{\n content: classNames?.extraContent,\n header: extraHeaderVariants({ hasTitle, variant }),\n }}\n styles={{\n content: {\n fontSize: 12,\n ...customStyles?.extraContent,\n },\n header: {\n borderColor: colors(theme, type, 'fillSecondary'),\n },\n indicator: {\n color: colors(theme, type),\n },\n title: {\n color: colors(theme, type),\n fontSize: 12,\n },\n }}\n >\n {extra}\n </AccordionItem>\n </Accordion>\n </Flexbox>\n </Flexbox>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,YAAY;CAChB,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,SAAS;CACV;AAED,MAAM,UAAU,OAAY,OAAe,QAAQ,GAAG,SAAmB;AACvE,KAAI,SAAS,YAAa,QAAO,MAAM,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC;AAC9E,QAAO,MAAM,UAAU;EAAC;EAAS;EAAM,GAAG;EAAK,CAAC,KAAK,IAAI,CAAC;;AAG5D,MAAMA,UAAQ,MACX,EACC,WAAW,OACX,aACA,WAAW,MACX,OAAO,QACP,OACA,MACA,eAAe,MACf,WACA,OACA,OACA,YACA,QAAQ,cACR,MACA,qBAAqB,OACrB,cACA,QACA,UAAU,UACV,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,WAAW,CAAC,CAAC;CAMnB,MAAM,QACJ,oBAACC,OAAD;EACU;EACK;EACR;EACK;EACV,MAAM,SAAS,cAAc,SAAS;EACtC,WAAW,GACT,aAAa;GACX,
|
|
1
|
+
{"version":3,"file":"Alert.mjs","names":["Alert","AntdAlert","Flexbox"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport { Alert as AntdAlert } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { camelCase } from 'es-toolkit/compat';\nimport { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { Accordion, AccordionItem } from '@/Accordion';\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { extraHeaderVariants, extraVariants, rootVariants } from './style';\nimport type { AlertProps } from './type';\n\nconst typeIcons = {\n error: XCircle,\n info: Info,\n secondary: AlertTriangle,\n success: CheckCircle,\n warning: AlertTriangle,\n};\n\nconst colors = (theme: any, type: string = 'info', ...keys: string[]) => {\n if (type === 'secondary') return theme[camelCase(['color', ...keys].join('-'))] as string;\n return theme[camelCase(['color', type, ...keys].join('-'))] as string;\n};\n\nconst Alert = memo<AlertProps>(\n ({\n closable = false,\n description,\n showIcon = true,\n type = 'info',\n glass,\n icon,\n colorfulText = true,\n iconProps,\n style,\n extra,\n classNames,\n styles: customStyles,\n text,\n extraDefaultExpand = false,\n extraIsolate,\n banner,\n variant = 'filled',\n ref,\n ...rest\n }) => {\n const theme = useTheme();\n const hasTitle = !!description;\n const isClosable = !!closable;\n const isShowIcon = !!showIcon;\n\n const isInsideExtra = Boolean(!extraIsolate && !!extra);\n\n const alert = (\n <AntdAlert\n banner={banner}\n description={description}\n ref={ref}\n showIcon={showIcon}\n type={type === 'secondary' ? 'info' : type}\n className={cx(\n rootVariants({\n closable: isClosable,\n colorfulText,\n glass,\n hasExtra: isInsideExtra,\n hasTitle,\n showIcon: isShowIcon,\n variant,\n }),\n classNames?.alert,\n )}\n closable={\n typeof closable === 'boolean'\n ? closable\n : {\n closeIcon: <ActionIcon color={colors(theme, type)} icon={X} size={'small'} />,\n ...closable,\n }\n }\n icon={\n <Icon\n color={type === 'secondary' ? cssVar.colorTextSecondary : undefined}\n icon={icon || typeIcons[type]}\n size={description ? 24 : 18}\n {...iconProps}\n />\n }\n style={{\n background: colors(theme, type, 'fillTertiary'),\n borderColor: colors(theme, type, 'fillSecondary'),\n color: colorfulText ? colors(theme, type) : undefined,\n ...style,\n ...customStyles?.alert,\n }}\n {...rest}\n />\n );\n\n if (!extra) return alert;\n\n if (extraIsolate)\n return (\n <Flexbox className={classNames?.container} gap={8}>\n {alert}\n {extra}\n </Flexbox>\n );\n\n return (\n <Flexbox className={classNames?.container} style={customStyles?.container}>\n {alert}\n <Flexbox\n className={extraVariants({ banner, variant })}\n style={{\n background: colors(theme, type, 'fillTertiary'),\n borderColor: colors(theme, type, 'fillSecondary'),\n color: colors(theme, type),\n fontSize: description ? 14 : 12,\n }}\n >\n <Accordion defaultExpandedKeys={extraDefaultExpand ? ['extra'] : []}>\n <AccordionItem\n itemKey={'extra'}\n title={text?.detail || 'Show Details'}\n classNames={{\n content: classNames?.extraContent,\n header: extraHeaderVariants({ hasTitle, variant }),\n }}\n styles={{\n content: {\n fontSize: 12,\n ...customStyles?.extraContent,\n },\n header: {\n borderColor: colors(theme, type, 'fillSecondary'),\n },\n indicator: {\n color: colors(theme, type),\n },\n title: {\n color: colors(theme, type),\n fontSize: 12,\n },\n }}\n >\n {extra}\n </AccordionItem>\n </Accordion>\n </Flexbox>\n </Flexbox>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,YAAY;CAChB,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,SAAS;CACV;AAED,MAAM,UAAU,OAAY,OAAe,QAAQ,GAAG,SAAmB;AACvE,KAAI,SAAS,YAAa,QAAO,MAAM,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC;AAC9E,QAAO,MAAM,UAAU;EAAC;EAAS;EAAM,GAAG;EAAK,CAAC,KAAK,IAAI,CAAC;;AAG5D,MAAMA,UAAQ,MACX,EACC,WAAW,OACX,aACA,WAAW,MACX,OAAO,QACP,OACA,MACA,eAAe,MACf,WACA,OACA,OACA,YACA,QAAQ,cACR,MACA,qBAAqB,OACrB,cACA,QACA,UAAU,UACV,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,WAAW,CAAC,CAAC;CAMnB,MAAM,QACJ,oBAACC,OAAD;EACU;EACK;EACR;EACK;EACV,MAAM,SAAS,cAAc,SAAS;EACtC,WAAW,GACT,aAAa;GACX,UAAU,CAdE,CAAC;GAeb;GACA;GACA,UAdc,QAAQ,CAAC,gBAAgB,CAAC,CAAC,MAclB;GACvB;GACA,UAAU,CAlBE,CAAC;GAmBb;GACD,CAAC,EACF,YAAY,MACb;EACD,UACE,OAAO,aAAa,YAChB,WACA;GACE,WAAW,oBAAC,YAAD;IAAY,OAAO,OAAO,OAAO,KAAK;IAAE,MAAM;IAAG,MAAM;IAAW,CAAA;GAC7E,GAAG;GACJ;EAEP,MACE,oBAAC,MAAD;GACE,OAAO,SAAS,cAAc,OAAO,qBAAqB,KAAA;GAC1D,MAAM,QAAQ,UAAU;GACxB,MAAM,cAAc,KAAK;GACzB,GAAI;GACJ,CAAA;EAEJ,OAAO;GACL,YAAY,OAAO,OAAO,MAAM,eAAe;GAC/C,aAAa,OAAO,OAAO,MAAM,gBAAgB;GACjD,OAAO,eAAe,OAAO,OAAO,KAAK,GAAG,KAAA;GAC5C,GAAG;GACH,GAAG,cAAc;GAClB;EACD,GAAI;EACJ,CAAA;AAGJ,KAAI,CAAC,MAAO,QAAO;AAEnB,KAAI,aACF,QACE,qBAACC,mBAAD;EAAS,WAAW,YAAY;EAAW,KAAK;YAAhD,CACG,OACA,MACO;;AAGd,QACE,qBAACA,mBAAD;EAAS,WAAW,YAAY;EAAW,OAAO,cAAc;YAAhE,CACG,OACD,oBAACA,mBAAD;GACE,WAAW,cAAc;IAAE;IAAQ;IAAS,CAAC;GAC7C,OAAO;IACL,YAAY,OAAO,OAAO,MAAM,eAAe;IAC/C,aAAa,OAAO,OAAO,MAAM,gBAAgB;IACjD,OAAO,OAAO,OAAO,KAAK;IAC1B,UAAU,cAAc,KAAK;IAC9B;aAED,oBAAC,WAAD;IAAW,qBAAqB,qBAAqB,CAAC,QAAQ,GAAG,EAAE;cACjE,oBAAC,eAAD;KACE,SAAS;KACT,OAAO,MAAM,UAAU;KACvB,YAAY;MACV,SAAS,YAAY;MACrB,QAAQ,oBAAoB;OAAE;OAAU;OAAS,CAAC;MACnD;KACD,QAAQ;MACN,SAAS;OACP,UAAU;OACV,GAAG,cAAc;OAClB;MACD,QAAQ,EACN,aAAa,OAAO,OAAO,MAAM,gBAAgB,EAClD;MACD,WAAW,EACT,OAAO,OAAO,OAAO,KAAK,EAC3B;MACD,OAAO;OACL,OAAO,OAAO,OAAO,KAAK;OAC1B,UAAU;OACX;MACF;eAEA;KACa,CAAA;IACN,CAAA;GACJ,CAAA,CACF;;EAGf;AAED,QAAM,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupProps } from './type';\n\nconst CheckboxGroup: FC<CheckboxGroupProps> = ({\n defaultValue,\n disabled,\n onChange,\n options,\n textProps,\n value,\n shape,\n size,\n ...rest\n}) => {\n const [selectedValues, setSelectedValues] = useMergeState<string[]>(defaultValue || [], {\n defaultValue,\n onChange,\n value,\n });\n\n const handleChange = (optionValue: string, checked: boolean) => {\n const newValues = checked\n ? [...selectedValues, optionValue]\n : selectedValues.filter((v) => v !== optionValue);\n\n setSelectedValues(newValues);\n };\n\n const normalizedOptions = options.map((option) => {\n if (typeof option === 'string') {\n return {\n disabled: false,\n label: option,\n value: option,\n };\n }\n return option;\n });\n\n return (\n <Flexbox horizontal align={'center'} gap={16} wrap={'wrap'} {...rest}>\n {normalizedOptions.map((option) => {\n const isChecked = selectedValues.includes(option.value);\n const isDisabled = disabled || option.disabled;\n\n return (\n <Checkbox\n checked={isChecked}\n disabled={isDisabled}\n key={String(option.value)}\n shape={shape}\n size={size}\n textProps={textProps}\n onChange={(checked) => handleChange(option.value, checked)}\n >\n {option.label}\n </Checkbox>\n );\n })}\n </Flexbox>\n );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;AAQA,MAAM,iBAAyC,EAC7C,cACA,UACA,UACA,SACA,WACA,OACA,OACA,MACA,GAAG,WACC;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,cAAwB,gBAAgB,EAAE,EAAE;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aAAqB,YAAqB;AAK9D,oBAJkB,UACd,CAAC,GAAG,gBAAgB,YAAY,GAChC,eAAe,QAAQ,MAAM,MAAM,YAAY,CAEvB;;CAG9B,MAAM,oBAAoB,QAAQ,KAAK,WAAW;AAChD,MAAI,OAAO,WAAW,SACpB,QAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACR;AAEH,SAAO;GACP;AAEF,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAI,MAAM;EAAQ,GAAI;YAC7D,kBAAkB,KAAK,WAAW;AAIjC,UACE,oBAAC,UAAD;IACE,SALc,eAAe,SAAS,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupProps } from './type';\n\nconst CheckboxGroup: FC<CheckboxGroupProps> = ({\n defaultValue,\n disabled,\n onChange,\n options,\n textProps,\n value,\n shape,\n size,\n ...rest\n}) => {\n const [selectedValues, setSelectedValues] = useMergeState<string[]>(defaultValue || [], {\n defaultValue,\n onChange,\n value,\n });\n\n const handleChange = (optionValue: string, checked: boolean) => {\n const newValues = checked\n ? [...selectedValues, optionValue]\n : selectedValues.filter((v) => v !== optionValue);\n\n setSelectedValues(newValues);\n };\n\n const normalizedOptions = options.map((option) => {\n if (typeof option === 'string') {\n return {\n disabled: false,\n label: option,\n value: option,\n };\n }\n return option;\n });\n\n return (\n <Flexbox horizontal align={'center'} gap={16} wrap={'wrap'} {...rest}>\n {normalizedOptions.map((option) => {\n const isChecked = selectedValues.includes(option.value);\n const isDisabled = disabled || option.disabled;\n\n return (\n <Checkbox\n checked={isChecked}\n disabled={isDisabled}\n key={String(option.value)}\n shape={shape}\n size={size}\n textProps={textProps}\n onChange={(checked) => handleChange(option.value, checked)}\n >\n {option.label}\n </Checkbox>\n );\n })}\n </Flexbox>\n );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;AAQA,MAAM,iBAAyC,EAC7C,cACA,UACA,UACA,SACA,WACA,OACA,OACA,MACA,GAAG,WACC;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,cAAwB,gBAAgB,EAAE,EAAE;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aAAqB,YAAqB;AAK9D,oBAJkB,UACd,CAAC,GAAG,gBAAgB,YAAY,GAChC,eAAe,QAAQ,MAAM,MAAM,YAAY,CAEvB;;CAG9B,MAAM,oBAAoB,QAAQ,KAAK,WAAW;AAChD,MAAI,OAAO,WAAW,SACpB,QAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACR;AAEH,SAAO;GACP;AAEF,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAI,MAAM;EAAQ,GAAI;YAC7D,kBAAkB,KAAK,WAAW;AAIjC,UACE,oBAAC,UAAD;IACE,SALc,eAAe,SAAS,OAAO,MAK3B;IAClB,UALe,YAAY,OAAO;IAO3B;IACD;IACK;IACX,WAAW,YAAY,aAAa,OAAO,OAAO,QAAQ;cAEzD,OAAO;IACC,EAPJ,OAAO,OAAO,MAAM,CAOhB;IAEb;EACM,CAAA;;AAId,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type ElementType,\n memo,\n type ReactNode,\n use,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type I18nContextValue,\n type TranslationKey,\n type TranslationResourcesInput,\n type TranslationResourcesMap,\n} from '@/i18n/types';\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nexport interface Config {\n aAs?: ElementType;\n customCdnFn?: CdnFn;\n imgAs?: ElementType;\n imgUnoptimized?: boolean;\n proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n locale: 'en',\n t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n children: ReactNode;\n config?: Config;\n // i18n props - flattened at top level\n locale?: string;\n motion: MotionComponentType;\n resources?: TranslationResourcesInput;\n}\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n typeof (value as { then?: unknown })?.then === 'function';\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n ({ children, config, locale, resources, motion }) => {\n const fallbackLocale = locale ?? 'en';\n const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n () => (resources && !isThenable(resources) ? resources : undefined),\n );\n const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n const latestRequestId = useRef(0);\n\n useEffect(() => {\n const requestId = ++latestRequestId.current;\n\n if (!resources) {\n setResolvedResources(undefined);\n setResolvedLocale(fallbackLocale);\n return;\n }\n\n if (isThenable(resources)) {\n const targetLocale = fallbackLocale;\n resources\n .then((nextResources) => {\n if (latestRequestId.current !== requestId) return;\n setResolvedResources(nextResources);\n setResolvedLocale(targetLocale);\n })\n .catch(() => {\n if (latestRequestId.current !== requestId) return;\n });\n return;\n }\n\n setResolvedResources(resources);\n setResolvedLocale(fallbackLocale);\n }, [fallbackLocale, resources]);\n\n const currentResources = isThenable(resources) ? resolvedResources : resources;\n const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;\n\n const i18nValue = useMemo((): I18nContextValue => {\n const resourceList = Array.isArray(currentResources)\n ? currentResources\n : currentResources\n ? Object.values(currentResources)\n : [];\n const mergedResources = Object.assign({}, ...resourceList);\n const t = (key: TranslationKey): string => mergedResources[key] || key;\n return { locale: currentLocale, t };\n }, [currentLocale, currentResources]);\n\n return (\n <I18nContextInternal value={i18nValue}>\n <ConfigContext value={config ?? null}>\n <MotionComponent value={motion}>{children}</MotionComponent>\n </ConfigContext>\n </I18nContextInternal>\n );\n },\n);\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n const config = use(ConfigContext);\n if (!config) return cdnFallback;\n if (config?.proxy !== 'custom')\n return ({ pkg, version, path }) =>\n genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;AA+BA,MAAa,gBAAgB,cAA6B,KAAK;AAG/D,MAAM,sBAAsB,cAAgC;CAC1D,QAAQ;CACR,IAAI,QAAwB;CAC7B,CAAC;AAWF,MAAM,cAAc,UAClB,OAAQ,OAA8B,SAAS;AAEjD,MAAM,iBAAiB,MACpB,EAAE,UAAU,QAAQ,QAAQ,WAAW,aAAa;CACnD,MAAM,iBAAiB,UAAU;CACjC,MAAM,CAAC,mBAAmB,wBAAwB,eACzC,aAAa,CAAC,WAAW,UAAU,GAAG,YAAY,KAAA,EAC1D;CACD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,eAAe;CACpE,MAAM,kBAAkB,OAAO,EAAE;AAEjC,iBAAgB;EACd,MAAM,YAAY,EAAE,gBAAgB;AAEpC,MAAI,CAAC,WAAW;AACd,wBAAqB,KAAA,EAAU;AAC/B,qBAAkB,eAAe;AACjC;;AAGF,MAAI,WAAW,UAAU,EAAE;GACzB,MAAM,eAAe;AACrB,aACG,MAAM,kBAAkB;AACvB,QAAI,gBAAgB,YAAY,UAAW;AAC3C,yBAAqB,cAAc;AACnC,sBAAkB,aAAa;KAC/B,CACD,YAAY;AACX,QAAI,gBAAgB,YAAY,UAAW;KAC3C;AACJ;;AAGF,uBAAqB,UAAU;AAC/B,oBAAkB,eAAe;IAChC,CAAC,gBAAgB,UAAU,CAAC;CAE/B,MAAM,mBAAmB,WAAW,UAAU,GAAG,oBAAoB;CACrE,MAAM,gBAAgB,WAAW,UAAU,GAAG,iBAAiB;AAa/D,QACE,oBAAC,qBAAD;EAAqB,OAZL,cAAgC;GAChD,MAAM,eAAe,MAAM,QAAQ,iBAAiB,GAChD,mBACA,mBACE,OAAO,OAAO,iBAAiB,GAC/B,EAAE;GACR,MAAM,kBAAkB,OAAO,OAAO,EAAE,EAAE,GAAG,aAAa;GAC1D,MAAM,KAAK,QAAgC,gBAAgB,QAAQ;AACnE,UAAO;IAAE,QAAQ;IAAe;IAAG;KAClC,CAAC,eAAe,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type ElementType,\n memo,\n type ReactNode,\n use,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type I18nContextValue,\n type TranslationKey,\n type TranslationResourcesInput,\n type TranslationResourcesMap,\n} from '@/i18n/types';\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nexport interface Config {\n aAs?: ElementType;\n customCdnFn?: CdnFn;\n imgAs?: ElementType;\n imgUnoptimized?: boolean;\n proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n locale: 'en',\n t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n children: ReactNode;\n config?: Config;\n // i18n props - flattened at top level\n locale?: string;\n motion: MotionComponentType;\n resources?: TranslationResourcesInput;\n}\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n typeof (value as { then?: unknown })?.then === 'function';\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n ({ children, config, locale, resources, motion }) => {\n const fallbackLocale = locale ?? 'en';\n const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n () => (resources && !isThenable(resources) ? resources : undefined),\n );\n const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n const latestRequestId = useRef(0);\n\n useEffect(() => {\n const requestId = ++latestRequestId.current;\n\n if (!resources) {\n setResolvedResources(undefined);\n setResolvedLocale(fallbackLocale);\n return;\n }\n\n if (isThenable(resources)) {\n const targetLocale = fallbackLocale;\n resources\n .then((nextResources) => {\n if (latestRequestId.current !== requestId) return;\n setResolvedResources(nextResources);\n setResolvedLocale(targetLocale);\n })\n .catch(() => {\n if (latestRequestId.current !== requestId) return;\n });\n return;\n }\n\n setResolvedResources(resources);\n setResolvedLocale(fallbackLocale);\n }, [fallbackLocale, resources]);\n\n const currentResources = isThenable(resources) ? resolvedResources : resources;\n const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;\n\n const i18nValue = useMemo((): I18nContextValue => {\n const resourceList = Array.isArray(currentResources)\n ? currentResources\n : currentResources\n ? Object.values(currentResources)\n : [];\n const mergedResources = Object.assign({}, ...resourceList);\n const t = (key: TranslationKey): string => mergedResources[key] || key;\n return { locale: currentLocale, t };\n }, [currentLocale, currentResources]);\n\n return (\n <I18nContextInternal value={i18nValue}>\n <ConfigContext value={config ?? null}>\n <MotionComponent value={motion}>{children}</MotionComponent>\n </ConfigContext>\n </I18nContextInternal>\n );\n },\n);\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n const config = use(ConfigContext);\n if (!config) return cdnFallback;\n if (config?.proxy !== 'custom')\n return ({ pkg, version, path }) =>\n genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;AA+BA,MAAa,gBAAgB,cAA6B,KAAK;AAG/D,MAAM,sBAAsB,cAAgC;CAC1D,QAAQ;CACR,IAAI,QAAwB;CAC7B,CAAC;AAWF,MAAM,cAAc,UAClB,OAAQ,OAA8B,SAAS;AAEjD,MAAM,iBAAiB,MACpB,EAAE,UAAU,QAAQ,QAAQ,WAAW,aAAa;CACnD,MAAM,iBAAiB,UAAU;CACjC,MAAM,CAAC,mBAAmB,wBAAwB,eACzC,aAAa,CAAC,WAAW,UAAU,GAAG,YAAY,KAAA,EAC1D;CACD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,eAAe;CACpE,MAAM,kBAAkB,OAAO,EAAE;AAEjC,iBAAgB;EACd,MAAM,YAAY,EAAE,gBAAgB;AAEpC,MAAI,CAAC,WAAW;AACd,wBAAqB,KAAA,EAAU;AAC/B,qBAAkB,eAAe;AACjC;;AAGF,MAAI,WAAW,UAAU,EAAE;GACzB,MAAM,eAAe;AACrB,aACG,MAAM,kBAAkB;AACvB,QAAI,gBAAgB,YAAY,UAAW;AAC3C,yBAAqB,cAAc;AACnC,sBAAkB,aAAa;KAC/B,CACD,YAAY;AACX,QAAI,gBAAgB,YAAY,UAAW;KAC3C;AACJ;;AAGF,uBAAqB,UAAU;AAC/B,oBAAkB,eAAe;IAChC,CAAC,gBAAgB,UAAU,CAAC;CAE/B,MAAM,mBAAmB,WAAW,UAAU,GAAG,oBAAoB;CACrE,MAAM,gBAAgB,WAAW,UAAU,GAAG,iBAAiB;AAa/D,QACE,oBAAC,qBAAD;EAAqB,OAZL,cAAgC;GAChD,MAAM,eAAe,MAAM,QAAQ,iBAAiB,GAChD,mBACA,mBACE,OAAO,OAAO,iBAAiB,GAC/B,EAAE;GACR,MAAM,kBAAkB,OAAO,OAAO,EAAE,EAAE,GAAG,aAAa;GAC1D,MAAM,KAAK,QAAgC,gBAAgB,QAAQ;AACnE,UAAO;IAAE,QAAQ;IAAe;IAAG;KAClC,CAAC,eAAe,iBAAiB,CAGG;YACnC,oBAAC,eAAD;GAAe,OAAO,UAAU;aAC9B,oBAAC,iBAAD;IAAiB,OAAO;IAAS;IAA2B,CAAA;GAC9C,CAAA;EACI,CAAA;EAG3B;AAKD,MAAM,eAAsB,EAAE,KAAK,SAAS,WAC1C,UAAU;CAAE;CAAM;CAAK,OAAO;CAAU;CAAS,CAAC;AAEpD,MAAa,iBAAwB;CACnC,MAAM,SAAS,IAAI,cAAc;AACjC,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,QAAQ,UAAU,SACpB,SAAQ,EAAE,KAAK,SAAS,WACtB,UAAU;EAAE;EAAM;EAAK,OAAO,OAAO;EAAc;EAAS,CAAC;AACjE,QAAO,QAAQ,eAAe;;AAIhC,MAAa,gBAAgB,IAAI,oBAAoB"}
|
|
@@ -48,6 +48,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
|
|
|
48
48
|
const resetTransitionTimeoutRef = useRef(void 0);
|
|
49
49
|
const resizableRef = useRef(null);
|
|
50
50
|
const initialExpandedSizeRef = useRef(void 0);
|
|
51
|
+
const outerRef = useRef(null);
|
|
51
52
|
const { direction: antdDirection } = use(ConfigProvider.ConfigContext);
|
|
52
53
|
const direction = dir ?? antdDirection;
|
|
53
54
|
const internalPlacement = useMemo(() => {
|
|
@@ -239,12 +240,19 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
|
|
|
239
240
|
]);
|
|
240
241
|
const handleResize = useCallback((_event, _direction, el, delta) => {
|
|
241
242
|
const nextSize = clampResizeSize(el);
|
|
243
|
+
if (stableLayout && outerRef.current) {
|
|
244
|
+
const dimension = isVertical ? nextSize.height : nextSize.width;
|
|
245
|
+
if (dimension) if (isVertical) outerRef.current.style.height = dimension;
|
|
246
|
+
else outerRef.current.style.width = dimension;
|
|
247
|
+
}
|
|
242
248
|
setExpandedMainSize(nextSize);
|
|
243
249
|
onSizeDragging?.(delta, nextSize);
|
|
244
250
|
}, [
|
|
245
251
|
clampResizeSize,
|
|
252
|
+
isVertical,
|
|
246
253
|
onSizeDragging,
|
|
247
|
-
setExpandedMainSize
|
|
254
|
+
setExpandedMainSize,
|
|
255
|
+
stableLayout
|
|
248
256
|
]);
|
|
249
257
|
const triggerResetWithoutTransition = useCallback(() => {
|
|
250
258
|
if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
|
|
@@ -288,19 +296,26 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
|
|
|
288
296
|
clearTimeout(resetTransitionTimeoutRef.current);
|
|
289
297
|
resetTransitionTimeoutRef.current = void 0;
|
|
290
298
|
}
|
|
299
|
+
if (stableLayout && outerRef.current) outerRef.current.style.transition = "none";
|
|
291
300
|
setShouldTransition(false);
|
|
292
301
|
setShowExpand(false);
|
|
293
|
-
}, [handleResetSize]);
|
|
302
|
+
}, [handleResetSize, stableLayout]);
|
|
294
303
|
const handleResizeStop = useCallback((_event, _direction, el, delta) => {
|
|
295
304
|
const nextSize = clampResizeSize(el);
|
|
296
305
|
setExpandedMainSize(nextSize);
|
|
297
306
|
setShouldTransition(true);
|
|
298
307
|
setShowExpand(true);
|
|
308
|
+
if (stableLayout && outerRef.current) {
|
|
309
|
+
outerRef.current.style.removeProperty("width");
|
|
310
|
+
outerRef.current.style.removeProperty("height");
|
|
311
|
+
outerRef.current.style.removeProperty("transition");
|
|
312
|
+
}
|
|
299
313
|
onSizeChange?.(delta, nextSize);
|
|
300
314
|
}, [
|
|
301
315
|
clampResizeSize,
|
|
302
316
|
onSizeChange,
|
|
303
|
-
setExpandedMainSize
|
|
317
|
+
setExpandedMainSize,
|
|
318
|
+
stableLayout
|
|
304
319
|
]);
|
|
305
320
|
const resizeHandleClassName = useMemo(() => cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight), [reversed, showHandleHighlight]);
|
|
306
321
|
if (fullscreen) return /* @__PURE__ */ jsx("div", {
|
|
@@ -413,6 +428,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
|
|
|
413
428
|
})
|
|
414
429
|
})
|
|
415
430
|
}), stableLayout ? /* @__PURE__ */ jsx("div", {
|
|
431
|
+
ref: outerRef,
|
|
416
432
|
style: sidebarOuterStyle,
|
|
417
433
|
children: panelNode
|
|
418
434
|
}) : panelNode]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n startTransition,\n use,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n bottom: ChevronUp,\n left: ChevronRight,\n right: ChevronLeft,\n top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n bottom: { marginTop: 4 },\n left: { marginRight: 4 },\n right: { marginLeft: 4 },\n top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n if (typeof value === 'string' && value.length > 0) return value;\n return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n headerHeight = 0,\n fullscreen,\n maxHeight,\n pin = true,\n mode = 'fixed',\n children,\n placement = 'right',\n resize,\n style,\n showBorder = true,\n showHandleHighlight = false,\n showHandleWideArea = true,\n backgroundColor,\n size,\n stableLayout = false,\n defaultSize: customizeDefaultSize,\n minWidth,\n minHeight,\n maxWidth,\n onSizeChange,\n onSizeDragging,\n expandable = true,\n expand,\n defaultExpand = true,\n onExpandChange,\n className,\n showHandleWhenCollapsed,\n destroyOnClose,\n styles: customStyles,\n classNames,\n dir,\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n const isVertical = placement === 'top' || placement === 'bottom';\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resizableRef = useRef<Resizable>(null);\n const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n\n const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n const direction = dir ?? antdDirection;\n\n const internalPlacement = useMemo(() => {\n if (direction !== 'rtl') return placement;\n if (placement === 'left') return 'right';\n if (placement === 'right') return 'left';\n return placement;\n }, [direction, placement]);\n\n const cssVariables = {\n '--draggable-panel-bg': backgroundColor || '',\n '--draggable-panel-header-height': `${headerHeight}px`,\n } as Record<string, string>;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n const [shouldTransition, setShouldTransition] = useState(true);\n const [showExpand, setShowExpand] = useState(true);\n\n useEffect(() => {\n if (pin) return;\n\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n\n if (isHovering && !isExpand) {\n startTransition(() => setIsExpand(true));\n } else if (!isHovering && isExpand) {\n hoverTimeoutRef.current = setTimeout(() => {\n startTransition(() => setIsExpand(false));\n }, 150);\n }\n }, [pin, isHovering, isExpand, setIsExpand]);\n\n useEffect(() => {\n return () => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n initialExpandedSizeRef.current = undefined;\n }, [internalPlacement]);\n\n const reversed = reversePlacement(internalPlacement);\n const canResizing = resize !== false && isExpand;\n\n const resizing = useMemo(\n () => ({\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n [reversed]: true,\n ...(resize as Enable),\n }),\n [reversed, resize],\n );\n\n const defaultSize: Size = useMemo(() => {\n if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n return { height: '100%', width: 280, ...customizeDefaultSize };\n }, [isVertical, customizeDefaultSize]);\n const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n const sizeProps = useMemo(() => {\n if (!stableLayout && !isExpand) {\n return isVertical\n ? { minHeight: 0, size: { height: 0 } }\n : { minWidth: 0, size: { width: 0 } };\n }\n\n return {\n defaultSize,\n maxHeight: normalizedMaxHeight,\n maxWidth: normalizedMaxWidth,\n minHeight: normalizedMinHeight,\n minWidth: normalizedMinWidth,\n size: size as Size,\n };\n }, [\n stableLayout,\n isExpand,\n isVertical,\n defaultSize,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n size,\n ]);\n\n const fallbackExpandedSize = isVertical ? '180px' : '280px';\n const controlledExpandedSize = useMemo(() => {\n const controlledSize = isVertical ? size?.height : size?.width;\n if (controlledSize === undefined) return undefined;\n return toCssSize(controlledSize, fallbackExpandedSize);\n }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n const defaultExpandedSize = useMemo(() => {\n const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n return toCssSize(initialSize, fallbackExpandedSize);\n }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n horizontal?: string;\n vertical?: string;\n }>({});\n const expandedOuterSize =\n controlledExpandedSize ??\n (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n defaultExpandedSize;\n\n const setExpandedMainSize = useCallback(\n (nextSize: Size) => {\n if (!stableLayout) return;\n\n const currentSize = isVertical ? nextSize.height : nextSize.width;\n if (!currentSize) return;\n\n const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n setResizedExpandedSize((state) =>\n isVertical\n ? { ...state, vertical: normalizedSize }\n : { ...state, horizontal: normalizedSize },\n );\n },\n [fallbackExpandedSize, isVertical, stableLayout],\n );\n\n const captureInitialExpandedSize = useCallback(() => {\n if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n if (!rect) return undefined;\n\n const nextInitialSize = isVertical\n ? ({ height: rect.height, width: '100%' } as Size)\n : ({ height: '100%', width: rect.width } as Size);\n\n initialExpandedSizeRef.current = nextInitialSize;\n return nextInitialSize;\n }, [isVertical]);\n\n useEffect(() => {\n if (!isExpand) return;\n captureInitialExpandedSize();\n }, [captureInitialExpandedSize, isExpand]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const clampResizeSize = useCallback(\n (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const currentMainSize = isVertical ? rect.height : rect.width;\n const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n let clampedMainSize = currentMainSize;\n if (typeof minMainSize === 'number')\n clampedMainSize = Math.max(clampedMainSize, minMainSize);\n if (typeof maxMainSize === 'number')\n clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n if (\n !Number.isFinite(clampedMainSize) ||\n Math.abs(clampedMainSize - currentMainSize) < 0.5\n ) {\n return { height: el.style.height, width: el.style.width };\n }\n\n const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n resizableRef.current?.updateSize({ height, width });\n\n return { height, width };\n },\n [\n isVertical,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n ],\n );\n\n const handleResize = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n setExpandedMainSize(nextSize);\n onSizeDragging?.(delta, nextSize);\n },\n [clampResizeSize, onSizeDragging, setExpandedMainSize],\n );\n\n const triggerResetWithoutTransition = useCallback(() => {\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n\n setShouldTransition(false);\n resetTransitionTimeoutRef.current = setTimeout(() => {\n setShouldTransition(true);\n }, 0);\n }, []);\n\n const handleResetSize = useCallback(() => {\n if (!canResizing) return;\n\n const resetSize = captureInitialExpandedSize();\n if (!resetSize) return;\n\n triggerResetWithoutTransition();\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n resizableRef.current?.updateSize(resetSize);\n setExpandedMainSize(resetSize);\n\n onSizeChange?.(\n isVertical\n ? { height: nextMainSize - prevMainSize, width: 0 }\n : { height: 0, width: nextMainSize - prevMainSize },\n resetSize,\n );\n }, [\n canResizing,\n captureInitialExpandedSize,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n triggerResetWithoutTransition,\n ]);\n\n const handleResizeStart = useCallback(\n (event: { detail?: number }) => {\n if (event.detail === 2) {\n handleResetSize();\n return false;\n }\n\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n resetTransitionTimeoutRef.current = undefined;\n }\n\n setShouldTransition(false);\n setShowExpand(false);\n },\n [handleResetSize],\n );\n\n const handleResizeStop = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n setExpandedMainSize(nextSize);\n setShouldTransition(true);\n setShowExpand(true);\n onSizeChange?.(delta, nextSize);\n },\n [clampResizeSize, onSizeChange, setExpandedMainSize],\n );\n\n const resizeHandleClassName = useMemo(\n () =>\n cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n [reversed, showHandleHighlight],\n );\n\n if (fullscreen) {\n return (\n <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n {children}\n </div>\n );\n }\n\n const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n const stableOuterFlex = stableLayout\n ? ({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n } as const)\n : {};\n\n const sidebarOuterStyle = isVertical\n ? {\n height: isExpand ? expandedOuterSize : 0,\n overflow: 'hidden',\n transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: '100%',\n ...stableOuterFlex,\n }\n : {\n overflow: 'hidden',\n transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: isExpand ? expandedOuterSize : 0,\n ...(stableLayout\n ? {\n ...stableOuterFlex,\n flex: 1,\n minWidth: 0,\n height: '100%',\n }\n : {}),\n };\n\n const stableInnerStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n const sidebarInnerStyle: CSSProperties = stableLayout\n ? stableInnerStyle\n : isVertical\n ? { height: '100%', width: '100%' }\n : { width: '100%' };\n\n const stableAsideStyle: CSSProperties = stableLayout\n ? {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n ...(mode === 'fixed' ? { height: '100%' } : {}),\n }\n : {};\n\n const stableResizableStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n\n const panelNode = (!destroyOnClose || isExpand) && (\n <Resizable\n ref={resizableRef}\n {...sizeProps}\n className={cx(styles.panel, classNames?.content)}\n enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n handleClasses={\n canResizing\n ? {\n [reversed]: resizeHandleClassName,\n }\n : {}\n }\n style={{\n ...cssVariables,\n transition: shouldTransition ? undefined : 'none',\n ...(stableLayout ? stableResizableStyle : {}),\n ...style,\n }}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {stableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n </Resizable>\n );\n\n return (\n <aside\n dir={dir}\n ref={ref}\n style={{ ...cssVariables, ...stableAsideStyle }}\n className={cx(\n panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n className,\n )}\n >\n {expandable && showExpand && (\n <Center\n className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n style={{\n opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n }}\n >\n <Center\n className={classNames?.handle}\n style={customStyles?.handle}\n onClick={toggleExpand}\n >\n <Icon\n className={styles.handlerIcon}\n icon={Arrow}\n size={16}\n style={{\n ...MARGIN_MAP[internalPlacement],\n transform: `rotate(${isExpand ? 180 : 0}deg)`,\n transition: 'transform 0.3s ease',\n }}\n />\n </Center>\n </Center>\n )}\n {stableLayout ? <div style={sidebarOuterStyle}>{panelNode}</div> : panelNode}\n </aside>\n );\n },\n isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n startTransition,\n use,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n bottom: ChevronUp,\n left: ChevronRight,\n right: ChevronLeft,\n top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n bottom: { marginTop: 4 },\n left: { marginRight: 4 },\n right: { marginLeft: 4 },\n top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n if (typeof value === 'string' && value.length > 0) return value;\n return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n headerHeight = 0,\n fullscreen,\n maxHeight,\n pin = true,\n mode = 'fixed',\n children,\n placement = 'right',\n resize,\n style,\n showBorder = true,\n showHandleHighlight = false,\n showHandleWideArea = true,\n backgroundColor,\n size,\n stableLayout = false,\n defaultSize: customizeDefaultSize,\n minWidth,\n minHeight,\n maxWidth,\n onSizeChange,\n onSizeDragging,\n expandable = true,\n expand,\n defaultExpand = true,\n onExpandChange,\n className,\n showHandleWhenCollapsed,\n destroyOnClose,\n styles: customStyles,\n classNames,\n dir,\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n const isVertical = placement === 'top' || placement === 'bottom';\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resizableRef = useRef<Resizable>(null);\n const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n const outerRef = useRef<HTMLDivElement>(null);\n\n const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n const direction = dir ?? antdDirection;\n\n const internalPlacement = useMemo(() => {\n if (direction !== 'rtl') return placement;\n if (placement === 'left') return 'right';\n if (placement === 'right') return 'left';\n return placement;\n }, [direction, placement]);\n\n const cssVariables = {\n '--draggable-panel-bg': backgroundColor || '',\n '--draggable-panel-header-height': `${headerHeight}px`,\n } as Record<string, string>;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n const [shouldTransition, setShouldTransition] = useState(true);\n const [showExpand, setShowExpand] = useState(true);\n\n useEffect(() => {\n if (pin) return;\n\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n\n if (isHovering && !isExpand) {\n startTransition(() => setIsExpand(true));\n } else if (!isHovering && isExpand) {\n hoverTimeoutRef.current = setTimeout(() => {\n startTransition(() => setIsExpand(false));\n }, 150);\n }\n }, [pin, isHovering, isExpand, setIsExpand]);\n\n useEffect(() => {\n return () => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n initialExpandedSizeRef.current = undefined;\n }, [internalPlacement]);\n\n const reversed = reversePlacement(internalPlacement);\n const canResizing = resize !== false && isExpand;\n\n const resizing = useMemo(\n () => ({\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n [reversed]: true,\n ...(resize as Enable),\n }),\n [reversed, resize],\n );\n\n const defaultSize: Size = useMemo(() => {\n if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n return { height: '100%', width: 280, ...customizeDefaultSize };\n }, [isVertical, customizeDefaultSize]);\n const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n const sizeProps = useMemo(() => {\n if (!stableLayout && !isExpand) {\n return isVertical\n ? { minHeight: 0, size: { height: 0 } }\n : { minWidth: 0, size: { width: 0 } };\n }\n\n return {\n defaultSize,\n maxHeight: normalizedMaxHeight,\n maxWidth: normalizedMaxWidth,\n minHeight: normalizedMinHeight,\n minWidth: normalizedMinWidth,\n size: size as Size,\n };\n }, [\n stableLayout,\n isExpand,\n isVertical,\n defaultSize,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n size,\n ]);\n\n const fallbackExpandedSize = isVertical ? '180px' : '280px';\n const controlledExpandedSize = useMemo(() => {\n const controlledSize = isVertical ? size?.height : size?.width;\n if (controlledSize === undefined) return undefined;\n return toCssSize(controlledSize, fallbackExpandedSize);\n }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n const defaultExpandedSize = useMemo(() => {\n const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n return toCssSize(initialSize, fallbackExpandedSize);\n }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n horizontal?: string;\n vertical?: string;\n }>({});\n const expandedOuterSize =\n controlledExpandedSize ??\n (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n defaultExpandedSize;\n\n const setExpandedMainSize = useCallback(\n (nextSize: Size) => {\n if (!stableLayout) return;\n\n const currentSize = isVertical ? nextSize.height : nextSize.width;\n if (!currentSize) return;\n\n const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n setResizedExpandedSize((state) =>\n isVertical\n ? { ...state, vertical: normalizedSize }\n : { ...state, horizontal: normalizedSize },\n );\n },\n [fallbackExpandedSize, isVertical, stableLayout],\n );\n\n const captureInitialExpandedSize = useCallback(() => {\n if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n if (!rect) return undefined;\n\n const nextInitialSize = isVertical\n ? ({ height: rect.height, width: '100%' } as Size)\n : ({ height: '100%', width: rect.width } as Size);\n\n initialExpandedSizeRef.current = nextInitialSize;\n return nextInitialSize;\n }, [isVertical]);\n\n useEffect(() => {\n if (!isExpand) return;\n captureInitialExpandedSize();\n }, [captureInitialExpandedSize, isExpand]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const clampResizeSize = useCallback(\n (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const currentMainSize = isVertical ? rect.height : rect.width;\n const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n let clampedMainSize = currentMainSize;\n if (typeof minMainSize === 'number')\n clampedMainSize = Math.max(clampedMainSize, minMainSize);\n if (typeof maxMainSize === 'number')\n clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n if (\n !Number.isFinite(clampedMainSize) ||\n Math.abs(clampedMainSize - currentMainSize) < 0.5\n ) {\n return { height: el.style.height, width: el.style.width };\n }\n\n const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n resizableRef.current?.updateSize({ height, width });\n\n return { height, width };\n },\n [\n isVertical,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n ],\n );\n\n const handleResize = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n if (stableLayout && outerRef.current) {\n // Sync outer DOM width immediately so it doesn't lag behind the\n // re-resizable inline style (which would otherwise trigger a 0.2s\n // width transition on the outer/aside each frame during drag).\n const dimension = isVertical ? nextSize.height : nextSize.width;\n if (dimension) {\n if (isVertical) outerRef.current.style.height = dimension;\n else outerRef.current.style.width = dimension;\n }\n }\n setExpandedMainSize(nextSize);\n onSizeDragging?.(delta, nextSize);\n },\n [clampResizeSize, isVertical, onSizeDragging, setExpandedMainSize, stableLayout],\n );\n\n const triggerResetWithoutTransition = useCallback(() => {\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n\n setShouldTransition(false);\n resetTransitionTimeoutRef.current = setTimeout(() => {\n setShouldTransition(true);\n }, 0);\n }, []);\n\n const handleResetSize = useCallback(() => {\n if (!canResizing) return;\n\n const resetSize = captureInitialExpandedSize();\n if (!resetSize) return;\n\n triggerResetWithoutTransition();\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n resizableRef.current?.updateSize(resetSize);\n setExpandedMainSize(resetSize);\n\n onSizeChange?.(\n isVertical\n ? { height: nextMainSize - prevMainSize, width: 0 }\n : { height: 0, width: nextMainSize - prevMainSize },\n resetSize,\n );\n }, [\n canResizing,\n captureInitialExpandedSize,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n triggerResetWithoutTransition,\n ]);\n\n const handleResizeStart = useCallback(\n (event: { detail?: number }) => {\n if (event.detail === 2) {\n handleResetSize();\n return false;\n }\n\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n resetTransitionTimeoutRef.current = undefined;\n }\n\n // Synchronously disable the outer transition so the first drag frame\n // does not animate. `setShouldTransition(false)` below is asynchronous\n // and would only take effect after the next React commit.\n if (stableLayout && outerRef.current) {\n outerRef.current.style.transition = 'none';\n }\n setShouldTransition(false);\n setShowExpand(false);\n },\n [handleResetSize, stableLayout],\n );\n\n const handleResizeStop = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n setExpandedMainSize(nextSize);\n setShouldTransition(true);\n setShowExpand(true);\n // Clear imperative inline overrides so React resumes owning the outer\n // width/transition on the next render.\n if (stableLayout && outerRef.current) {\n outerRef.current.style.removeProperty('width');\n outerRef.current.style.removeProperty('height');\n outerRef.current.style.removeProperty('transition');\n }\n onSizeChange?.(delta, nextSize);\n },\n [clampResizeSize, onSizeChange, setExpandedMainSize, stableLayout],\n );\n\n const resizeHandleClassName = useMemo(\n () =>\n cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n [reversed, showHandleHighlight],\n );\n\n if (fullscreen) {\n return (\n <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n {children}\n </div>\n );\n }\n\n const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n const stableOuterFlex = stableLayout\n ? ({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n } as const)\n : {};\n\n const sidebarOuterStyle = isVertical\n ? {\n height: isExpand ? expandedOuterSize : 0,\n overflow: 'hidden',\n transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: '100%',\n ...stableOuterFlex,\n }\n : {\n overflow: 'hidden',\n transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: isExpand ? expandedOuterSize : 0,\n ...(stableLayout\n ? {\n ...stableOuterFlex,\n flex: 1,\n minWidth: 0,\n height: '100%',\n }\n : {}),\n };\n\n const stableInnerStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n const sidebarInnerStyle: CSSProperties = stableLayout\n ? stableInnerStyle\n : isVertical\n ? { height: '100%', width: '100%' }\n : { width: '100%' };\n\n const stableAsideStyle: CSSProperties = stableLayout\n ? {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n ...(mode === 'fixed' ? { height: '100%' } : {}),\n }\n : {};\n\n const stableResizableStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n\n const panelNode = (!destroyOnClose || isExpand) && (\n <Resizable\n ref={resizableRef}\n {...sizeProps}\n className={cx(styles.panel, classNames?.content)}\n enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n handleClasses={\n canResizing\n ? {\n [reversed]: resizeHandleClassName,\n }\n : {}\n }\n style={{\n ...cssVariables,\n transition: shouldTransition ? undefined : 'none',\n ...(stableLayout ? stableResizableStyle : {}),\n ...style,\n }}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {stableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n </Resizable>\n );\n\n return (\n <aside\n dir={dir}\n ref={ref}\n style={{ ...cssVariables, ...stableAsideStyle }}\n className={cx(\n panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n className,\n )}\n >\n {expandable && showExpand && (\n <Center\n className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n style={{\n opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n }}\n >\n <Center\n className={classNames?.handle}\n style={customStyles?.handle}\n onClick={toggleExpand}\n >\n <Icon\n className={styles.handlerIcon}\n icon={Arrow}\n size={16}\n style={{\n ...MARGIN_MAP[internalPlacement],\n transform: `rotate(${isExpand ? 180 : 0}deg)`,\n transition: 'transform 0.3s ease',\n }}\n />\n </Center>\n </Center>\n )}\n {stableLayout ? (\n <div ref={outerRef} style={sidebarOuterStyle}>\n {panelNode}\n </div>\n ) : (\n panelNode\n )}\n </aside>\n );\n },\n isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n expandedWidth: number;\n internalWidth: number;\n isAnimating: boolean;\n isResizing: boolean;\n renderExpand: boolean;\n}\n\ntype SideNavAction =\n | { type: 'START_RESIZE' }\n | { type: 'STOP_RESIZE' }\n | { type: 'START_ANIMATION' }\n | { type: 'STOP_ANIMATION' }\n | { payload: number; type: 'SET_WIDTH' }\n | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n | { payload: number; type: 'ANIMATE_EXPAND' }\n | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n switch (action.type) {\n case 'START_RESIZE': {\n return { ...state, isResizing: true };\n }\n case 'STOP_RESIZE': {\n return { ...state, isResizing: false };\n }\n case 'START_ANIMATION': {\n return { ...state, isAnimating: true };\n }\n case 'STOP_ANIMATION': {\n return { ...state, isAnimating: false };\n }\n case 'SET_WIDTH': {\n return { ...state, internalWidth: action.payload };\n }\n case 'SET_EXPANDED_WIDTH': {\n return { ...state, expandedWidth: action.payload };\n }\n case 'SET_RENDER_EXPAND': {\n return { ...state, renderExpand: action.payload };\n }\n case 'ANIMATE_EXPAND': {\n return { ...state, internalWidth: action.payload, renderExpand: true };\n }\n case 'ANIMATE_COLLAPSE': {\n return { ...state, internalWidth: action.payload };\n }\n default: {\n return state;\n }\n }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n ({\n body,\n className,\n classNames,\n defaultExpand = DEFAULT_EXPAND,\n defaultWidth,\n expand,\n expandable = true,\n footer,\n header,\n maxWidth,\n minWidth = DEFAULT_MIN_WIDTH,\n onExpandChange,\n onWidthChange,\n onWidthDragging,\n placement = 'left',\n resizable = true,\n showBorder = true,\n showHandle = true,\n showHandleWhenCollapsed = false,\n showHandleHighlight = false,\n backgroundColor,\n styles: customStyles,\n width,\n ...rest\n }) => {\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--draggable-side-nav-bg': backgroundColor || '',\n }),\n [backgroundColor],\n );\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n\n // Expand state management\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n // Use refs for animation timeouts to avoid memory leaks\n const animationTimeoutRef = useRef<any>(undefined);\n const collapseTimeoutRef = useRef<any>(undefined);\n\n // Compute default expanded width - memoize to avoid recalculation\n const computedDefaultExpandedWidth = useMemo(\n () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n [defaultWidth],\n );\n\n // Initialize state with useReducer for better performance\n const initialState: SideNavState = {\n expandedWidth: width ?? computedDefaultExpandedWidth,\n internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n isAnimating: false,\n isResizing: false,\n renderExpand: isExpand,\n };\n\n const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n // 计算折叠阈值:展开最小宽度和折叠宽度的中间值\n const collapseThreshold = useMemo(() => {\n return minWidth + (state.expandedWidth - minWidth) / 3;\n }, [minWidth, state.expandedWidth]);\n\n // Toggle expand state with smooth animation\n const toggleExpand = useCallback(() => {\n if (!expandable) return;\n\n // 在动画或拖拽期间阻止新的切换操作,避免状态混乱\n if (state.isAnimating || state.isResizing) return;\n\n // 清除之前的动画\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 立即设置动画状态,避免其他 useEffect 干扰\n dispatch({ type: 'START_ANIMATION' });\n setIsExpand(!isExpand);\n\n // 动画完成后重置状态 - 与宽度动画时长一致\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n // 用于跟踪上一次的 expand 状态,以检测外部变化\n const prevExpandRef = useRef(isExpand);\n\n // 监听外部 expand prop 变化,触发动画\n useEffect(() => {\n // 检测到 expand 状态变化,且不在拖拽和动画中\n if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 立即设置动画状态,避免其他 useEffect 干扰\n dispatch({ type: 'START_ANIMATION' });\n\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n\n prevExpandRef.current = isExpand;\n }\n }, [isExpand, state.isResizing, state.isAnimating]);\n\n // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n useEffect(() => {\n if (state.isAnimating) {\n // 使用 requestAnimationFrame 确保动画平滑\n const rafId = requestAnimationFrame(() => {\n if (isExpand) {\n // 展开动画:立即切换内容(先切换内容,再开始宽度动画)\n dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n } else {\n // 折叠动画:延迟切换内容,在动画接近结束时才切换(300ms,略早于动画结束)\n dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n if (collapseTimeoutRef.current) {\n clearTimeout(collapseTimeoutRef.current);\n }\n collapseTimeoutRef.current = setTimeout(() => {\n dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n }, COLLAPSE_ANIMATION_DELAY);\n }\n });\n\n return () => {\n cancelAnimationFrame(rafId);\n };\n }\n }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n // 同步非动画期间的 renderExpand 状态(如拖拽)\n // 使用 ref 追踪上一次的 isResizing 状态,只在拖拽结束时同步\n const prevIsResizingRef = useRef(state.isResizing);\n useEffect(() => {\n const wasResizing = prevIsResizingRef.current;\n prevIsResizingRef.current = state.isResizing;\n\n // 只在拖拽刚结束时同步 renderExpand,避免干扰正常的展开/折叠动画\n if (wasResizing && !state.isResizing && !state.isAnimating) {\n dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n }\n }, [isExpand, state.isAnimating, state.isResizing]);\n\n // 处理外部 width prop 变化\n // width 表示展开时的宽度,实际显示宽度根据 isExpand 状态决定\n useEffect(() => {\n if (width !== undefined && !state.isResizing && !state.isAnimating) {\n // 更新展开宽度记录\n dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n // 根据当前状态设置实际宽度\n if (isExpand) {\n dispatch({ payload: width, type: 'SET_WIDTH' });\n }\n // 如果是折叠状态,保持 minWidth,不改变 internalWidth\n }\n }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n // 计算当前的 body 内容 - 使用 renderExpand\n const currentBody = useMemo(() => {\n return body(state.renderExpand);\n }, [body, state.renderExpand]);\n\n // 计算当前的 header(支持函数和静态值)- 使用 renderExpand\n const currentHeader = useMemo(() => {\n return typeof header === 'function' ? header(state.renderExpand) : header;\n }, [header, state.renderExpand]);\n\n // 计算当前的 footer(支持函数和静态值)- 使用 renderExpand\n const currentFooter = useMemo(() => {\n return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n }, [footer, state.renderExpand]);\n\n // Handle resize - memoize to prevent recreating on every render\n const handleResize: ResizeCallback = useCallback(\n (_, __, ref, delta) => {\n const currentWidth = ref.offsetWidth;\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n onWidthDragging?.(delta, currentWidth);\n },\n [onWidthDragging],\n );\n\n const handleResizeStart = useCallback(() => {\n dispatch({ type: 'START_RESIZE' });\n }, []);\n\n const handleResizeStop: ResizeCallback = useCallback(\n (_, __, ref, delta) => {\n dispatch({ type: 'STOP_RESIZE' });\n\n const currentWidth = ref.offsetWidth;\n\n // 清除之前的动画\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 根据拖拽后的宽度决定是折叠还是展开\n if (expandable) {\n const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n const shouldExpand =\n !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n if (shouldCollapse || shouldExpand) {\n // 立即设置动画状态\n dispatch({ type: 'START_ANIMATION' });\n\n if (shouldCollapse) {\n setIsExpand(false);\n dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n } else {\n setIsExpand(true);\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n } else if (isExpand) {\n // 展开状态下正常拖拽,记住宽度\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n } else {\n // 如果不可折叠,仅更新宽度\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n\n onWidthChange?.(delta, currentWidth);\n },\n [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n );\n\n // Arrow icon based on placement and expand state\n const ArrowIcon = useMemo(() => {\n if (placement === 'left') {\n // 左侧:展开时箭头向左(折叠方向),折叠时箭头向右(展开方向)\n return ChevronLeft;\n }\n // 右侧:展开时箭头向右(折叠方向),折叠时箭头向左(展开方向)\n return ChevronRight;\n }, [placement]);\n\n // Memoize handle styles to prevent recreation\n const handleRootStyle = useMemo<CSSProperties>(\n () => ({\n display: 'flex',\n opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n transition: 'opacity 0.25s ease',\n }),\n [isExpand, showHandleWhenCollapsed, isHovering],\n );\n\n const handleCenterStyle = useMemo<CSSProperties>(\n () => ({\n ...customStyles?.handle,\n cursor: 'pointer',\n }),\n [customStyles?.handle],\n );\n\n const handleIconWrapperStyle = useMemo<CSSProperties>(\n () => ({\n marginLeft: placement === 'right' ? 4 : 0,\n marginRight: placement === 'left' ? 4 : 0,\n transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n }),\n [placement, isExpand],\n );\n\n // Toggle handle with smooth transitions\n const handle = useMemo(\n () =>\n showHandle &&\n expandable && (\n <div\n style={handleRootStyle}\n className={cx(\n styles.toggleRoot,\n placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n )}\n >\n <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\n <div style={handleIconWrapperStyle}>\n <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\n </div>\n </Center>\n </div>\n ),\n [\n showHandle,\n expandable,\n styles.toggleRoot,\n styles.toggleLeft,\n styles.toggleRight,\n styles.handlerIcon,\n placement,\n handleRootStyle,\n classNames?.handle,\n toggleExpand,\n handleCenterStyle,\n handleIconWrapperStyle,\n ArrowIcon,\n cx,\n ],\n );\n\n // Size configuration - 使用内部宽度状态\n const sizeConfig = useMemo(() => {\n return {\n maxWidth: maxWidth,\n minWidth: minWidth,\n size: { height: '100%', width: state.internalWidth },\n };\n }, [state.internalWidth, minWidth, maxWidth]);\n\n // Resize enable configuration - 始终允许拖拽\n const resizeEnable = useMemo(() => {\n if (!resizable) {\n return RESIZE_DISABLED;\n }\n return {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: placement === 'right',\n right: placement === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n };\n }, [resizable, placement]);\n\n // Memoize handle classes to prevent recreation\n const handleClasses = useMemo(\n () => ({\n [placement === 'left' ? 'right' : 'left']: cx(\n styles.resizeHandle,\n showHandleHighlight && styles.resizeHandleHighlight,\n placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n ),\n }),\n [placement, styles, showHandleHighlight, cx],\n );\n\n // Memoize container style to prevent recreation\n const containerStyle = useMemo<CSSProperties>(\n () => ({\n ...customStyles?.container,\n ...rest.style,\n // 拖拽时不要动画,点击 handle 时有流畅的弹性动画\n transition: state.isResizing\n ? 'none'\n : state.isAnimating\n ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n : 'none',\n }),\n [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n );\n\n // Memoize class names\n const containerClassName = useMemo(\n () => cx(styles.container, classNames?.container, className),\n [cx, styles.container, classNames?.container, className],\n );\n\n const contentClassName = useMemo(\n () =>\n cx(\n showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\n styles.menuOverride,\n classNames?.content,\n ),\n [\n cx,\n styles.contentContainer,\n styles.contentContainerNoBorder,\n styles.menuOverride,\n classNames?.content,\n showBorder,\n ],\n );\n\n const headerClassName = useMemo(\n () => cx(styles.header, classNames?.header),\n [cx, styles.header, classNames?.header],\n );\n\n const bodyClassName = useMemo(\n () => cx(styles.body, classNames?.body),\n [cx, styles.body, classNames?.body],\n );\n\n const footerClassName = useMemo(\n () => cx(styles.footer, classNames?.footer),\n [cx, styles.footer, classNames?.footer],\n );\n\n // Cleanup timeouts on unmount\n useEffect(() => {\n return () => {\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n if (collapseTimeoutRef.current) {\n clearTimeout(collapseTimeoutRef.current);\n }\n };\n }, []);\n\n return (\n <aside ref={ref}>\n <Resizable\n {...sizeConfig}\n className={containerClassName}\n enable={resizeEnable}\n handleClasses={handleClasses}\n style={containerStyle}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {handle}\n <Flexbox\n className={contentClassName}\n style={{\n ...cssVariables,\n ...customStyles?.content,\n }}\n >\n {currentHeader && (\n <div className={headerClassName} style={customStyles?.header}>\n {currentHeader}\n </div>\n )}\n <div className={bodyClassName} style={customStyles?.body}>\n {currentBody}\n </div>\n {currentFooter && (\n <div className={footerClassName} style={customStyles?.footer}>\n {currentFooter}\n </div>\n )}\n </Flexbox>\n </Resizable>\n </aside>\n );\n },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n expandedWidth: number;\n internalWidth: number;\n isAnimating: boolean;\n isResizing: boolean;\n renderExpand: boolean;\n}\n\ntype SideNavAction =\n | { type: 'START_RESIZE' }\n | { type: 'STOP_RESIZE' }\n | { type: 'START_ANIMATION' }\n | { type: 'STOP_ANIMATION' }\n | { payload: number; type: 'SET_WIDTH' }\n | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n | { payload: number; type: 'ANIMATE_EXPAND' }\n | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n switch (action.type) {\n case 'START_RESIZE': {\n return { ...state, isResizing: true };\n }\n case 'STOP_RESIZE': {\n return { ...state, isResizing: false };\n }\n case 'START_ANIMATION': {\n return { ...state, isAnimating: true };\n }\n case 'STOP_ANIMATION': {\n return { ...state, isAnimating: false };\n }\n case 'SET_WIDTH': {\n return { ...state, internalWidth: action.payload };\n }\n case 'SET_EXPANDED_WIDTH': {\n return { ...state, expandedWidth: action.payload };\n }\n case 'SET_RENDER_EXPAND': {\n return { ...state, renderExpand: action.payload };\n }\n case 'ANIMATE_EXPAND': {\n return { ...state, internalWidth: action.payload, renderExpand: true };\n }\n case 'ANIMATE_COLLAPSE': {\n return { ...state, internalWidth: action.payload };\n }\n default: {\n return state;\n }\n }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n ({\n body,\n className,\n classNames,\n defaultExpand = DEFAULT_EXPAND,\n defaultWidth,\n expand,\n expandable = true,\n footer,\n header,\n maxWidth,\n minWidth = DEFAULT_MIN_WIDTH,\n onExpandChange,\n onWidthChange,\n onWidthDragging,\n placement = 'left',\n resizable = true,\n showBorder = true,\n showHandle = true,\n showHandleWhenCollapsed = false,\n showHandleHighlight = false,\n backgroundColor,\n styles: customStyles,\n width,\n ...rest\n }) => {\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--draggable-side-nav-bg': backgroundColor || '',\n }),\n [backgroundColor],\n );\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n\n // Expand state management\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n // Use refs for animation timeouts to avoid memory leaks\n const animationTimeoutRef = useRef<any>(undefined);\n const collapseTimeoutRef = useRef<any>(undefined);\n\n // Compute default expanded width - memoize to avoid recalculation\n const computedDefaultExpandedWidth = useMemo(\n () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n [defaultWidth],\n );\n\n // Initialize state with useReducer for better performance\n const initialState: SideNavState = {\n expandedWidth: width ?? computedDefaultExpandedWidth,\n internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n isAnimating: false,\n isResizing: false,\n renderExpand: isExpand,\n };\n\n const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n // 计算折叠阈值:展开最小宽度和折叠宽度的中间值\n const collapseThreshold = useMemo(() => {\n return minWidth + (state.expandedWidth - minWidth) / 3;\n }, [minWidth, state.expandedWidth]);\n\n // Toggle expand state with smooth animation\n const toggleExpand = useCallback(() => {\n if (!expandable) return;\n\n // 在动画或拖拽期间阻止新的切换操作,避免状态混乱\n if (state.isAnimating || state.isResizing) return;\n\n // 清除之前的动画\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 立即设置动画状态,避免其他 useEffect 干扰\n dispatch({ type: 'START_ANIMATION' });\n setIsExpand(!isExpand);\n\n // 动画完成后重置状态 - 与宽度动画时长一致\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n // 用于跟踪上一次的 expand 状态,以检测外部变化\n const prevExpandRef = useRef(isExpand);\n\n // 监听外部 expand prop 变化,触发动画\n useEffect(() => {\n // 检测到 expand 状态变化,且不在拖拽和动画中\n if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 立即设置动画状态,避免其他 useEffect 干扰\n dispatch({ type: 'START_ANIMATION' });\n\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n\n prevExpandRef.current = isExpand;\n }\n }, [isExpand, state.isResizing, state.isAnimating]);\n\n // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n useEffect(() => {\n if (state.isAnimating) {\n // 使用 requestAnimationFrame 确保动画平滑\n const rafId = requestAnimationFrame(() => {\n if (isExpand) {\n // 展开动画:立即切换内容(先切换内容,再开始宽度动画)\n dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n } else {\n // 折叠动画:延迟切换内容,在动画接近结束时才切换(300ms,略早于动画结束)\n dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n if (collapseTimeoutRef.current) {\n clearTimeout(collapseTimeoutRef.current);\n }\n collapseTimeoutRef.current = setTimeout(() => {\n dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n }, COLLAPSE_ANIMATION_DELAY);\n }\n });\n\n return () => {\n cancelAnimationFrame(rafId);\n };\n }\n }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n // 同步非动画期间的 renderExpand 状态(如拖拽)\n // 使用 ref 追踪上一次的 isResizing 状态,只在拖拽结束时同步\n const prevIsResizingRef = useRef(state.isResizing);\n useEffect(() => {\n const wasResizing = prevIsResizingRef.current;\n prevIsResizingRef.current = state.isResizing;\n\n // 只在拖拽刚结束时同步 renderExpand,避免干扰正常的展开/折叠动画\n if (wasResizing && !state.isResizing && !state.isAnimating) {\n dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n }\n }, [isExpand, state.isAnimating, state.isResizing]);\n\n // 处理外部 width prop 变化\n // width 表示展开时的宽度,实际显示宽度根据 isExpand 状态决定\n useEffect(() => {\n if (width !== undefined && !state.isResizing && !state.isAnimating) {\n // 更新展开宽度记录\n dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n // 根据当前状态设置实际宽度\n if (isExpand) {\n dispatch({ payload: width, type: 'SET_WIDTH' });\n }\n // 如果是折叠状态,保持 minWidth,不改变 internalWidth\n }\n }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n // 计算当前的 body 内容 - 使用 renderExpand\n const currentBody = useMemo(() => {\n return body(state.renderExpand);\n }, [body, state.renderExpand]);\n\n // 计算当前的 header(支持函数和静态值)- 使用 renderExpand\n const currentHeader = useMemo(() => {\n return typeof header === 'function' ? header(state.renderExpand) : header;\n }, [header, state.renderExpand]);\n\n // 计算当前的 footer(支持函数和静态值)- 使用 renderExpand\n const currentFooter = useMemo(() => {\n return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n }, [footer, state.renderExpand]);\n\n // Handle resize - memoize to prevent recreating on every render\n const handleResize: ResizeCallback = useCallback(\n (_, __, ref, delta) => {\n const currentWidth = ref.offsetWidth;\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n onWidthDragging?.(delta, currentWidth);\n },\n [onWidthDragging],\n );\n\n const handleResizeStart = useCallback(() => {\n dispatch({ type: 'START_RESIZE' });\n }, []);\n\n const handleResizeStop: ResizeCallback = useCallback(\n (_, __, ref, delta) => {\n dispatch({ type: 'STOP_RESIZE' });\n\n const currentWidth = ref.offsetWidth;\n\n // 清除之前的动画\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n\n // 根据拖拽后的宽度决定是折叠还是展开\n if (expandable) {\n const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n const shouldExpand =\n !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n if (shouldCollapse || shouldExpand) {\n // 立即设置动画状态\n dispatch({ type: 'START_ANIMATION' });\n\n if (shouldCollapse) {\n setIsExpand(false);\n dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n } else {\n setIsExpand(true);\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n\n animationTimeoutRef.current = setTimeout(() => {\n dispatch({ type: 'STOP_ANIMATION' });\n }, ANIMATION_DURATION);\n } else if (isExpand) {\n // 展开状态下正常拖拽,记住宽度\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n } else {\n // 如果不可折叠,仅更新宽度\n dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n }\n\n onWidthChange?.(delta, currentWidth);\n },\n [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n );\n\n // Arrow icon based on placement and expand state\n const ArrowIcon = useMemo(() => {\n if (placement === 'left') {\n // 左侧:展开时箭头向左(折叠方向),折叠时箭头向右(展开方向)\n return ChevronLeft;\n }\n // 右侧:展开时箭头向右(折叠方向),折叠时箭头向左(展开方向)\n return ChevronRight;\n }, [placement]);\n\n // Memoize handle styles to prevent recreation\n const handleRootStyle = useMemo<CSSProperties>(\n () => ({\n display: 'flex',\n opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n transition: 'opacity 0.25s ease',\n }),\n [isExpand, showHandleWhenCollapsed, isHovering],\n );\n\n const handleCenterStyle = useMemo<CSSProperties>(\n () => ({\n ...customStyles?.handle,\n cursor: 'pointer',\n }),\n [customStyles?.handle],\n );\n\n const handleIconWrapperStyle = useMemo<CSSProperties>(\n () => ({\n marginLeft: placement === 'right' ? 4 : 0,\n marginRight: placement === 'left' ? 4 : 0,\n transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n }),\n [placement, isExpand],\n );\n\n // Toggle handle with smooth transitions\n const handle = useMemo(\n () =>\n showHandle &&\n expandable && (\n <div\n style={handleRootStyle}\n className={cx(\n styles.toggleRoot,\n placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n )}\n >\n <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\n <div style={handleIconWrapperStyle}>\n <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\n </div>\n </Center>\n </div>\n ),\n [\n showHandle,\n expandable,\n styles.toggleRoot,\n styles.toggleLeft,\n styles.toggleRight,\n styles.handlerIcon,\n placement,\n handleRootStyle,\n classNames?.handle,\n toggleExpand,\n handleCenterStyle,\n handleIconWrapperStyle,\n ArrowIcon,\n cx,\n ],\n );\n\n // Size configuration - 使用内部宽度状态\n const sizeConfig = useMemo(() => {\n return {\n maxWidth: maxWidth,\n minWidth: minWidth,\n size: { height: '100%', width: state.internalWidth },\n };\n }, [state.internalWidth, minWidth, maxWidth]);\n\n // Resize enable configuration - 始终允许拖拽\n const resizeEnable = useMemo(() => {\n if (!resizable) {\n return RESIZE_DISABLED;\n }\n return {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: placement === 'right',\n right: placement === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n };\n }, [resizable, placement]);\n\n // Memoize handle classes to prevent recreation\n const handleClasses = useMemo(\n () => ({\n [placement === 'left' ? 'right' : 'left']: cx(\n styles.resizeHandle,\n showHandleHighlight && styles.resizeHandleHighlight,\n placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n ),\n }),\n [placement, styles, showHandleHighlight, cx],\n );\n\n // Memoize container style to prevent recreation\n const containerStyle = useMemo<CSSProperties>(\n () => ({\n ...customStyles?.container,\n ...rest.style,\n // 拖拽时不要动画,点击 handle 时有流畅的弹性动画\n transition: state.isResizing\n ? 'none'\n : state.isAnimating\n ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n : 'none',\n }),\n [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n );\n\n // Memoize class names\n const containerClassName = useMemo(\n () => cx(styles.container, classNames?.container, className),\n [cx, styles.container, classNames?.container, className],\n );\n\n const contentClassName = useMemo(\n () =>\n cx(\n showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\n styles.menuOverride,\n classNames?.content,\n ),\n [\n cx,\n styles.contentContainer,\n styles.contentContainerNoBorder,\n styles.menuOverride,\n classNames?.content,\n showBorder,\n ],\n );\n\n const headerClassName = useMemo(\n () => cx(styles.header, classNames?.header),\n [cx, styles.header, classNames?.header],\n );\n\n const bodyClassName = useMemo(\n () => cx(styles.body, classNames?.body),\n [cx, styles.body, classNames?.body],\n );\n\n const footerClassName = useMemo(\n () => cx(styles.footer, classNames?.footer),\n [cx, styles.footer, classNames?.footer],\n );\n\n // Cleanup timeouts on unmount\n useEffect(() => {\n return () => {\n if (animationTimeoutRef.current) {\n clearTimeout(animationTimeoutRef.current);\n }\n if (collapseTimeoutRef.current) {\n clearTimeout(collapseTimeoutRef.current);\n }\n };\n }, []);\n\n return (\n <aside ref={ref}>\n <Resizable\n {...sizeConfig}\n className={containerClassName}\n enable={resizeEnable}\n handleClasses={handleClasses}\n style={containerStyle}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {handle}\n <Flexbox\n className={contentClassName}\n style={{\n ...cssVariables,\n ...customStyles?.content,\n }}\n >\n {currentHeader && (\n <div className={headerClassName} style={customStyles?.header}>\n {currentHeader}\n </div>\n )}\n <div className={bodyClassName} style={customStyles?.body}>\n {currentBody}\n </div>\n {currentFooter && (\n <div className={footerClassName} style={customStyles?.footer}>\n {currentFooter}\n </div>\n )}\n </Flexbox>\n </Resizable>\n </aside>\n );\n },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNormalizedItems.mjs","names":[],"sources":["../../src/EditorSlashMenu/useNormalizedItems.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { EditorSlashMenuGroup, EditorSlashMenuItems, EditorSlashMenuOption } from './type';\nimport { isGroup } from './utils';\n\nexport const useNormalizedItems = (items: EditorSlashMenuItems) => {\n const resolvedItems = useMemo(() => {\n const hasAnyGroup = items.some(isGroup);\n if (!hasAnyGroup) return items as EditorSlashMenuOption[];\n\n // Normalize: keep order, but ensure all entries are groups.\n const groups: EditorSlashMenuGroup[] = [];\n let buffer: EditorSlashMenuOption[] = [];\n\n const flush = () => {\n if (buffer.length) {\n groups.push({ items: buffer });\n buffer = [];\n }\n };\n\n for (const entry of items) {\n if (isGroup(entry)) {\n flush();\n groups.push(entry);\n } else {\n buffer.push(entry);\n }\n }\n flush();\n\n return groups;\n }, [items]);\n\n const hasAnyIcon = useMemo(() => {\n const walk = (entry: EditorSlashMenuOption | EditorSlashMenuGroup): boolean => {\n if (isGroup(entry)) return entry.items.some(walk as any);\n return Boolean(entry.icon);\n };\n return items.some(walk as any);\n }, [items]);\n\n return { hasAnyIcon, resolvedItems };\n};\n"],"mappings":";;;AAKA,MAAa,sBAAsB,UAAgC;CACjE,MAAM,gBAAgB,cAAc;AAElC,MAAI,CADgB,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"useNormalizedItems.mjs","names":[],"sources":["../../src/EditorSlashMenu/useNormalizedItems.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { EditorSlashMenuGroup, EditorSlashMenuItems, EditorSlashMenuOption } from './type';\nimport { isGroup } from './utils';\n\nexport const useNormalizedItems = (items: EditorSlashMenuItems) => {\n const resolvedItems = useMemo(() => {\n const hasAnyGroup = items.some(isGroup);\n if (!hasAnyGroup) return items as EditorSlashMenuOption[];\n\n // Normalize: keep order, but ensure all entries are groups.\n const groups: EditorSlashMenuGroup[] = [];\n let buffer: EditorSlashMenuOption[] = [];\n\n const flush = () => {\n if (buffer.length) {\n groups.push({ items: buffer });\n buffer = [];\n }\n };\n\n for (const entry of items) {\n if (isGroup(entry)) {\n flush();\n groups.push(entry);\n } else {\n buffer.push(entry);\n }\n }\n flush();\n\n return groups;\n }, [items]);\n\n const hasAnyIcon = useMemo(() => {\n const walk = (entry: EditorSlashMenuOption | EditorSlashMenuGroup): boolean => {\n if (isGroup(entry)) return entry.items.some(walk as any);\n return Boolean(entry.icon);\n };\n return items.some(walk as any);\n }, [items]);\n\n return { hasAnyIcon, resolvedItems };\n};\n"],"mappings":";;;AAKA,MAAa,sBAAsB,UAAgC;CACjE,MAAM,gBAAgB,cAAc;AAElC,MAAI,CADgB,MAAM,KAAK,QACf,CAAE,QAAO;EAGzB,MAAM,SAAiC,EAAE;EACzC,IAAI,SAAkC,EAAE;EAExC,MAAM,cAAc;AAClB,OAAI,OAAO,QAAQ;AACjB,WAAO,KAAK,EAAE,OAAO,QAAQ,CAAC;AAC9B,aAAS,EAAE;;;AAIf,OAAK,MAAM,SAAS,MAClB,KAAI,QAAQ,MAAM,EAAE;AAClB,UAAO;AACP,UAAO,KAAK,MAAM;QAElB,QAAO,KAAK,MAAM;AAGtB,SAAO;AAEP,SAAO;IACN,CAAC,MAAM,CAAC;AAUX,QAAO;EAAE,YARU,cAAc;GAC/B,MAAM,QAAQ,UAAiE;AAC7E,QAAI,QAAQ,MAAM,CAAE,QAAO,MAAM,MAAM,KAAK,KAAY;AACxD,WAAO,QAAQ,MAAM,KAAK;;AAE5B,UAAO,MAAM,KAAK,KAAY;KAC7B,CAAC,MAAM,CAES;EAAE;EAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, message, Upload, type UploadProps } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.addEventListener('load', () => {\n onUploadImage(String(reader.result));\n });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n const editor = useRef<any>(null);\n const [previewImage, setPreviewImage] = useState('');\n const { t } = useTranslation(emojiPickerMessages);\n\n const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n const beforeUpload = useCallback(\n (file: FileType) => {\n const isJpgOrPng =\n file.type === 'image/jpeg' ||\n file.type === 'image/png' ||\n file.type === 'image/gif' ||\n file.type === 'image/webp';\n if (!isJpgOrPng) {\n message.error(fileTypeErrorText);\n return;\n }\n return createUploadImageHandler((avatar) => {\n setPreviewImage(avatar);\n })(file);\n },\n [fileTypeErrorText],\n );\n\n const handleUpload = () => {\n if (!editor.current) return;\n const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n const dataUrl = canvasScaled.toDataURL();\n onChange(dataUrl);\n\n if (!onUpload) return;\n\n // 使用 toBlob 直接获取 Blob,然后创建 File 对象\n canvasScaled.toBlob(\n (blob) => {\n if (blob) {\n const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n onUpload(file);\n }\n },\n 'image/webp',\n 0.95,\n ); // 0.95 是图片质量\n };\n\n return (\n <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n {!previewImage && (\n <Dragger\n accept={'image'}\n beforeUpload={beforeUpload}\n itemRender={() => void 0}\n maxCount={1}\n multiple={false}\n >\n <Center gap={16} height={compressSize} width={compressSize}>\n <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n <Center horizontal gap={4}>\n <Tag>JPG</Tag>\n <Tag>PNG</Tag>\n <Tag>GIF</Tag>\n <Tag>WEBP</Tag>\n </Center>\n </Center>\n </Dragger>\n )}\n {previewImage && (\n <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n <AvatarEditor\n border={0}\n borderRadius={shape === 'square' ? undefined : compressSize / 2}\n height={compressSize}\n image={previewImage}\n ref={editor}\n width={compressSize}\n />\n\n <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n <Button\n icon={ChevronLeftIcon}\n style={{ flex: 'none' }}\n onClick={() => setPreviewImage('')}\n />\n <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n {uploadBtnText}\n </Button>\n </Flexbox>\n </Center>\n )}\n </Flexbox>\n );\n },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,
|
|
1
|
+
{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, message, Upload, type UploadProps } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.addEventListener('load', () => {\n onUploadImage(String(reader.result));\n });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n const editor = useRef<any>(null);\n const [previewImage, setPreviewImage] = useState('');\n const { t } = useTranslation(emojiPickerMessages);\n\n const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n const beforeUpload = useCallback(\n (file: FileType) => {\n const isJpgOrPng =\n file.type === 'image/jpeg' ||\n file.type === 'image/png' ||\n file.type === 'image/gif' ||\n file.type === 'image/webp';\n if (!isJpgOrPng) {\n message.error(fileTypeErrorText);\n return;\n }\n return createUploadImageHandler((avatar) => {\n setPreviewImage(avatar);\n })(file);\n },\n [fileTypeErrorText],\n );\n\n const handleUpload = () => {\n if (!editor.current) return;\n const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n const dataUrl = canvasScaled.toDataURL();\n onChange(dataUrl);\n\n if (!onUpload) return;\n\n // 使用 toBlob 直接获取 Blob,然后创建 File 对象\n canvasScaled.toBlob(\n (blob) => {\n if (blob) {\n const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n onUpload(file);\n }\n },\n 'image/webp',\n 0.95,\n ); // 0.95 是图片质量\n };\n\n return (\n <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n {!previewImage && (\n <Dragger\n accept={'image'}\n beforeUpload={beforeUpload}\n itemRender={() => void 0}\n maxCount={1}\n multiple={false}\n >\n <Center gap={16} height={compressSize} width={compressSize}>\n <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n <Center horizontal gap={4}>\n <Tag>JPG</Tag>\n <Tag>PNG</Tag>\n <Tag>GIF</Tag>\n <Tag>WEBP</Tag>\n </Center>\n </Center>\n </Dragger>\n )}\n {previewImage && (\n <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n <AvatarEditor\n border={0}\n borderRadius={shape === 'square' ? undefined : compressSize / 2}\n height={compressSize}\n image={previewImage}\n ref={editor}\n width={compressSize}\n />\n\n <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n <Button\n icon={ChevronLeftIcon}\n style={{ flex: 'none' }}\n onClick={() => setPreviewImage('')}\n />\n <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n {uploadBtnText}\n </Button>\n </Flexbox>\n </Center>\n )}\n </Flexbox>\n );\n },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WACb,CAAC;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UAAS,IADQ,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CACtD,CAAC;KAGlB,cACA,IACD;;AAGH,QACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;YAA9D,CACG,CAAC,gBACA,oBAAC,SAAD;GACE,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAAC,QAAD;IAAQ,KAAK;IAAI,QAAQ;IAAc,OAAO;cAA9C;KACE,oBAAC,MAAD;MAAM,OAAO,OAAO;MAAsB,MAAM;MAAa,MAAM;MAAM,CAAA;KACzE,oBAAC,MAAD;MAAM,OAAO,OAAO;gBAAqB;MAAuB,CAAA;KAChE,qBAAC,QAAD;MAAQ,YAAA;MAAW,KAAK;gBAAxB;OACE,oBAACC,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,QAAU,CAAA;OACR;;KACF;;GACD,CAAA,EAEX,gBACC,qBAAC,QAAD;GAAQ,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;aAAxD,CACE,oBAAC,cAAD;IACE,QAAQ;IACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;IACP,CAAA,EAEF,qBAACD,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;cAApE,CACE,oBAACE,UAAD;KACE,MAAM;KACN,OAAO,EAAE,MAAM,QAAQ;KACvB,eAAe,gBAAgB,GAAG;KAClC,CAAA,EACF,oBAACA,UAAD;KAAQ,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;KAAW,SAAS;eACpE;KACM,CAAA,CACD;MACH;KAEH;;EAGf;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n ({\n value,\n defaultAvatar = DEFAULT_AVATAR,\n onChange,\n locale = 'en-US',\n allowUpload,\n allowDelete,\n allowModelAvatar,\n texts,\n onDelete,\n compressSize = 256,\n customEmojis,\n className,\n loading,\n onUpload,\n customTabs = [],\n popupClassName,\n popupStyle,\n customRender,\n open,\n defaultOpen = false,\n onOpenChange,\n popupProps,\n shape,\n contentProps,\n ...rest\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const { t } = useTranslation(emojiPickerMessages);\n const [visible, setVisible] = useMergeState(defaultOpen, {\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n value: open,\n });\n const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n const theme = useTheme();\n const pickerCssVariables = useMemo<Record<string, string>>(\n () => ({\n '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n }),\n [theme.colorPrimary, theme.colorBgElevated],\n );\n\n const { data: i18n } = useSWR(\n locale,\n async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n { revalidateOnFocus: false, revalidateOnMount: false },\n );\n\n const [ava, setAva] = useMergeState(defaultAvatar, {\n defaultValue: defaultAvatar,\n onChange,\n value,\n });\n\n const handleAvatarChange = (emoji: string) => {\n setAva(emoji);\n setVisible(false);\n };\n\n // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n const mergedCustomEmojis = useMemo(() => {\n if (!allowModelAvatar) return customEmojis;\n\n const modelIcons = toc.filter((item) => item.group !== 'application');\n\n const modelEmojisCategory = {\n id: 'models',\n name: 'Models / Providers',\n emojis: modelIcons.map((item) => ({\n id: item.id.toLowerCase(),\n name: item.title,\n keywords: [item.title, item.id, item.fullTitle],\n skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n })),\n };\n\n return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n }, [allowModelAvatar, customEmojis]);\n\n const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n const uploadText = texts?.upload ?? t('emojiPicker.upload');\n const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n const items: TabsProps['items'] = [\n !hideEmojiTab && {\n key: 'emoji',\n label: (\n <Tooltip title={emojiText}>\n <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n allowUpload && {\n key: 'upload',\n label: (\n <Tooltip title={uploadText}>\n <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n ].filter(Boolean) as TabsProps['items'];\n\n const showTabs = allowDelete || (items && items.length > 1);\n\n const content = (\n <Flexbox\n className={cx(styles.picker, popupClassName)}\n ref={ref}\n style={{\n minWidth: 310,\n paddingTop: showTabs ? 4 : 0,\n ...pickerCssVariables,\n ...popupStyle,\n }}\n {...contentProps}\n >\n {showTabs && (\n <Flexbox\n horizontal\n align={'center'}\n className={styles.tabs}\n justify={'space-between'}\n paddingInline={10}\n >\n <Tabs\n compact\n activeKey={tab}\n items={items}\n size={'small'}\n onChange={(key) => setTab(key as any)}\n />\n {allowDelete && (\n <ActionIcon\n icon={TrashIcon}\n title={deleteText}\n size={{\n blockSize: 32,\n size: 18,\n }}\n onClick={() => {\n handleAvatarChange(defaultAvatar);\n onDelete?.();\n }}\n />\n )}\n </Flexbox>\n )}\n {tab === 'emoji' && (\n <Picker\n custom={mergedCustomEmojis}\n data={data}\n i18n={i18n}\n icons={'outline'}\n locale={locale.split('-')[0]}\n navPosition={showTabs ? 'bottom' : 'top'}\n previewPosition={'none'}\n skinTonePosition={'none'}\n theme={theme.isDarkMode ? 'dark' : 'light'}\n onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n />\n )}\n {tab === 'upload' && (\n <AvatarUploader\n compressSize={compressSize}\n shape={shape}\n texts={texts}\n onChange={handleAvatarChange}\n onUpload={onUpload}\n />\n )}\n {customTabs.map(\n (item) =>\n tab === item.value && (\n <Flexbox key={item.value} padding={10}>\n {item.render(handleAvatarChange)}\n </Flexbox>\n ),\n )}\n </Flexbox>\n );\n\n return (\n <Popover\n className={cx(styles.popover)}\n content={content}\n defaultOpen={defaultOpen}\n open={visible}\n placement={'bottom'}\n trigger={'click'}\n classNames={{\n content: styles.popover,\n root: styles.positioner,\n }}\n onOpenChange={(v) => {\n if (loading) return;\n setVisible(v);\n }}\n {...popupProps}\n >\n {customRender ? (\n customRender(ava)\n ) : (\n <Avatar\n avatar={ava}\n className={cx(styles.root, className)}\n loading={loading}\n shape={shape}\n {...rest}\n />\n )}\n </Popover>\n );\n },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n ({\n value,\n defaultAvatar = DEFAULT_AVATAR,\n onChange,\n locale = 'en-US',\n allowUpload,\n allowDelete,\n allowModelAvatar,\n texts,\n onDelete,\n compressSize = 256,\n customEmojis,\n className,\n loading,\n onUpload,\n customTabs = [],\n popupClassName,\n popupStyle,\n customRender,\n open,\n defaultOpen = false,\n onOpenChange,\n popupProps,\n shape,\n contentProps,\n ...rest\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const { t } = useTranslation(emojiPickerMessages);\n const [visible, setVisible] = useMergeState(defaultOpen, {\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n value: open,\n });\n const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n const theme = useTheme();\n const pickerCssVariables = useMemo<Record<string, string>>(\n () => ({\n '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n }),\n [theme.colorPrimary, theme.colorBgElevated],\n );\n\n const { data: i18n } = useSWR(\n locale,\n async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n { revalidateOnFocus: false, revalidateOnMount: false },\n );\n\n const [ava, setAva] = useMergeState(defaultAvatar, {\n defaultValue: defaultAvatar,\n onChange,\n value,\n });\n\n const handleAvatarChange = (emoji: string) => {\n setAva(emoji);\n setVisible(false);\n };\n\n // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n const mergedCustomEmojis = useMemo(() => {\n if (!allowModelAvatar) return customEmojis;\n\n const modelIcons = toc.filter((item) => item.group !== 'application');\n\n const modelEmojisCategory = {\n id: 'models',\n name: 'Models / Providers',\n emojis: modelIcons.map((item) => ({\n id: item.id.toLowerCase(),\n name: item.title,\n keywords: [item.title, item.id, item.fullTitle],\n skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n })),\n };\n\n return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n }, [allowModelAvatar, customEmojis]);\n\n const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n const uploadText = texts?.upload ?? t('emojiPicker.upload');\n const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n const items: TabsProps['items'] = [\n !hideEmojiTab && {\n key: 'emoji',\n label: (\n <Tooltip title={emojiText}>\n <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n allowUpload && {\n key: 'upload',\n label: (\n <Tooltip title={uploadText}>\n <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n ].filter(Boolean) as TabsProps['items'];\n\n const showTabs = allowDelete || (items && items.length > 1);\n\n const content = (\n <Flexbox\n className={cx(styles.picker, popupClassName)}\n ref={ref}\n style={{\n minWidth: 310,\n paddingTop: showTabs ? 4 : 0,\n ...pickerCssVariables,\n ...popupStyle,\n }}\n {...contentProps}\n >\n {showTabs && (\n <Flexbox\n horizontal\n align={'center'}\n className={styles.tabs}\n justify={'space-between'}\n paddingInline={10}\n >\n <Tabs\n compact\n activeKey={tab}\n items={items}\n size={'small'}\n onChange={(key) => setTab(key as any)}\n />\n {allowDelete && (\n <ActionIcon\n icon={TrashIcon}\n title={deleteText}\n size={{\n blockSize: 32,\n size: 18,\n }}\n onClick={() => {\n handleAvatarChange(defaultAvatar);\n onDelete?.();\n }}\n />\n )}\n </Flexbox>\n )}\n {tab === 'emoji' && (\n <Picker\n custom={mergedCustomEmojis}\n data={data}\n i18n={i18n}\n icons={'outline'}\n locale={locale.split('-')[0]}\n navPosition={showTabs ? 'bottom' : 'top'}\n previewPosition={'none'}\n skinTonePosition={'none'}\n theme={theme.isDarkMode ? 'dark' : 'light'}\n onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n />\n )}\n {tab === 'upload' && (\n <AvatarUploader\n compressSize={compressSize}\n shape={shape}\n texts={texts}\n onChange={handleAvatarChange}\n onUpload={onUpload}\n />\n )}\n {customTabs.map(\n (item) =>\n tab === item.value && (\n <Flexbox key={item.value} padding={10}>\n {item.render(handleAvatarChange)}\n </Flexbox>\n ),\n )}\n </Flexbox>\n );\n\n return (\n <Popover\n className={cx(styles.popover)}\n content={content}\n defaultOpen={defaultOpen}\n open={visible}\n placement={'bottom'}\n trigger={'click'}\n classNames={{\n content: styles.popover,\n root: styles.positioner,\n }}\n onOpenChange={(v) => {\n if (loading) return;\n setVisible(v);\n }}\n {...popupProps}\n >\n {customRender ? (\n customRender(ava)\n ) : (\n <Avatar\n avatar={ava}\n className={cx(styles.root, className)}\n loading={loading}\n shape={shape}\n {...rest}\n />\n )}\n </Popover>\n );\n },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox"],"sources":["../../../src/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { flatGroupStyles, flatGroupVariants } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n ({ className, children, variant = 'borderless', ...rest }) => {\n const { mobile } = useResponsive();\n const styles = flatGroupStyles;\n\n return (\n <Flexbox\n className={cx(mobile ? styles.mobile : flatGroupVariants({ variant }), className)}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;AAUA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,GAAG,WAAW;CAC5D,MAAM,EAAE,WAAW,eAAe;AAGlC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox","styles"],"sources":["../../../src/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { flatGroupStyles, flatGroupVariants } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n ({ className, children, variant = 'borderless', ...rest }) => {\n const { mobile } = useResponsive();\n const styles = flatGroupStyles;\n\n return (\n <Flexbox\n className={cx(mobile ? styles.mobile : flatGroupVariants({ variant }), className)}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;AAUA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,GAAG,WAAW;CAC5D,MAAM,EAAE,WAAW,eAAe;AAGlC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAASC,gBAAO,SAAS,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;EACjF,GAAI;EAEH;EACO,CAAA;EAGf;AAED,cAAc,cAAc"}
|
package/es/Grid/Grid.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n className,\n gap = '1em',\n rows = 3,\n children,\n maxItemWidth = 240,\n ref,\n style,\n ...rest\n}) => {\n // Convert props to CSS variables\n const cssVariables = useMemo<Record<string, string>>(() => {\n const vars: Record<string, string> = {\n '--grid-gap': isString(gap) ? gap : `${gap}px`,\n '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n '--grid-rows': `${rows}`,\n };\n return vars;\n }, [gap, maxItemWidth, rows]);\n\n return (\n <Flexbox\n className={cx(styles, className)}\n gap={gap as any}\n ref={ref}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,
|
|
1
|
+
{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n className,\n gap = '1em',\n rows = 3,\n children,\n maxItemWidth = 240,\n ref,\n style,\n ...rest\n}) => {\n // Convert props to CSS variables\n const cssVariables = useMemo<Record<string, string>>(() => {\n const vars: Record<string, string> = {\n '--grid-gap': isString(gap) ? gap : `${gap}px`,\n '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n '--grid-rows': `${rows}`,\n };\n return vars;\n }, [gap, maxItemWidth, rows]);\n\n return (\n <Flexbox\n className={cx(styles, className)}\n gap={gap as any}\n ref={ref}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,SAAO;GAJL,cAAc,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;GAET;IACV;EAAC;EAAK;EAAc;EAAK,CAAC;AAE7B,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;EACO,CAAA;;AAId,KAAK,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n const options = useMemo(\n () => [\n {\n aliases: ['text', 'txt'],\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.txt`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n Plaintext\n </Text>\n </Flexbox>\n ),\n value: 'plaintext',\n },\n ...bundledLanguagesInfo.map((item) => ({\n aliases: item.aliases,\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.${item?.aliases?.[0] || item.id}`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n {item.name}\n </Text>\n </Flexbox>\n ),\n title: (item.aliases || [item.id])\n .filter(Boolean)\n .map((item) => `*.${item}`)\n .join(','),\n value: item.id,\n })),\n ],\n [],\n );\n\n return (\n <Select\n showSearch\n className={'languageTitle'}\n options={options}\n size={'small'}\n suffixIcon={false}\n variant={'borderless'}\n style={{\n maxWidth: 240,\n width: '100%',\n }}\n onClick={stopPropagation}\n {...rest}\n />\n );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;AA+C5E,QACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW;EACX,SAlDY,cACR,CACJ;GACE,SAAS,CAAC,QAAQ,MAAM;GACxB,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU;KACV,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eAAI;KAEtB,CAAA,CACC;;GAEZ,OAAO;GACR,EACD,GAAG,qBAAqB,KAAK,UAAU;GACrC,SAAS,KAAK;GACd,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;KAC1C,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eACtB,KAAK;KACD,CAAA,CACC;;GAEZ,QAAQ,KAAK,WAAW,CAAC,KAAK,GAAG,EAC9B,OAAO,QAAQ,CACf,KAAK,SAAS,KAAK,OAAO,CAC1B,KAAK,IAAI;GACZ,OAAO,KAAK;GACb,EAAE,CACJ,EACD,EAAE,
|
|
1
|
+
{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n const options = useMemo(\n () => [\n {\n aliases: ['text', 'txt'],\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.txt`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n Plaintext\n </Text>\n </Flexbox>\n ),\n value: 'plaintext',\n },\n ...bundledLanguagesInfo.map((item) => ({\n aliases: item.aliases,\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.${item?.aliases?.[0] || item.id}`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n {item.name}\n </Text>\n </Flexbox>\n ),\n title: (item.aliases || [item.id])\n .filter(Boolean)\n .map((item) => `*.${item}`)\n .join(','),\n value: item.id,\n })),\n ],\n [],\n );\n\n return (\n <Select\n showSearch\n className={'languageTitle'}\n options={options}\n size={'small'}\n suffixIcon={false}\n variant={'borderless'}\n style={{\n maxWidth: 240,\n width: '100%',\n }}\n onClick={stopPropagation}\n {...rest}\n />\n );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;AA+C5E,QACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW;EACX,SAlDY,cACR,CACJ;GACE,SAAS,CAAC,QAAQ,MAAM;GACxB,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU;KACV,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eAAI;KAEtB,CAAA,CACC;;GAEZ,OAAO;GACR,EACD,GAAG,qBAAqB,KAAK,UAAU;GACrC,SAAS,KAAK;GACd,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;KAC1C,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eACtB,KAAK;KACD,CAAA,CACC;;GAEZ,QAAQ,KAAK,WAAW,CAAC,KAAK,GAAG,EAC9B,OAAO,QAAQ,CACf,KAAK,SAAS,KAAK,OAAO,CAC1B,KAAK,IAAI;GACZ,OAAO,KAAK;GACb,EAAE,CACJ,EACD,EAAE,CAOgB;EAChB,MAAM;EACN,YAAY;EACZ,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACR;EACD,SAAS;EACT,GAAI;EACJ,CAAA;EAEJ"}
|