@tiny-codes/react-easy 1.7.6 → 1.7.8

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.
Files changed (94) hide show
  1. package/CHANGELOG.md +24 -1
  2. package/es/components/ColumnSetting/index.js +2 -1
  3. package/es/components/ColumnSetting/index.js.map +1 -1
  4. package/es/components/ConfigProvider/context.d.ts +36 -0
  5. package/es/components/ConfigProvider/context.js +1 -0
  6. package/es/components/ConfigProvider/context.js.map +1 -1
  7. package/es/components/ConfigProvider/index.d.ts +5 -3
  8. package/es/components/ConfigProvider/index.js +13 -7
  9. package/es/components/ConfigProvider/index.js.map +1 -1
  10. package/es/components/ConfigProvider/style/index.js +1 -1
  11. package/es/components/ConfigProvider/style/index.js.map +1 -1
  12. package/es/components/ContextMenu/index.js +3 -2
  13. package/es/components/ContextMenu/index.js.map +1 -1
  14. package/es/components/ContextMenu/style/index.js.map +1 -1
  15. package/es/components/DeleteConfirmAction/withDeleteConfirmAction.d.ts +3 -3
  16. package/es/components/EditableText/index.js +3 -2
  17. package/es/components/EditableText/index.js.map +1 -1
  18. package/es/components/EllipsisTypography/withEllipsisTypography.d.ts +16 -0
  19. package/es/components/EllipsisTypography/withEllipsisTypography.js +18 -2
  20. package/es/components/EllipsisTypography/withEllipsisTypography.js.map +1 -1
  21. package/es/components/FloatDrawer/index.js +3 -2
  22. package/es/components/FloatDrawer/index.js.map +1 -1
  23. package/es/components/FloatDrawer/style/index.js +1 -1
  24. package/es/components/FloatDrawer/style/index.js.map +1 -1
  25. package/es/components/Iconfont/createIconfont.d.ts +42 -0
  26. package/es/components/Iconfont/createIconfont.js +57 -0
  27. package/es/components/Iconfont/createIconfont.js.map +1 -0
  28. package/es/components/Iconfont/index.d.ts +1 -0
  29. package/es/components/Iconfont/index.js +2 -0
  30. package/es/components/Iconfont/index.js.map +1 -0
  31. package/es/components/Loading/index.js +3 -2
  32. package/es/components/Loading/index.js.map +1 -1
  33. package/es/components/Loading/style/index.js +1 -1
  34. package/es/components/Loading/style/index.js.map +1 -1
  35. package/es/components/OverflowTags/index.js +3 -2
  36. package/es/components/OverflowTags/index.js.map +1 -1
  37. package/es/components/OverflowTags/style/index.js +1 -1
  38. package/es/components/OverflowTags/style/index.js.map +1 -1
  39. package/es/components/index.d.ts +1 -0
  40. package/es/components/index.js +1 -0
  41. package/es/components/index.js.map +1 -1
  42. package/es/hooks/style/useSplitter.d.ts +3 -0
  43. package/es/hooks/style/useSplitter.js +40 -0
  44. package/es/hooks/style/useSplitter.js.map +1 -0
  45. package/es/hooks/useSplitter.d.ts +52 -9
  46. package/es/hooks/useSplitter.js +69 -39
  47. package/es/hooks/useSplitter.js.map +1 -1
  48. package/lib/components/ColumnSetting/index.js +2 -1
  49. package/lib/components/ColumnSetting/index.js.map +3 -3
  50. package/lib/components/ConfigProvider/context.d.ts +36 -0
  51. package/lib/components/ConfigProvider/context.js +1 -0
  52. package/lib/components/ConfigProvider/context.js.map +2 -2
  53. package/lib/components/ConfigProvider/index.d.ts +5 -3
  54. package/lib/components/ConfigProvider/index.js +10 -2
  55. package/lib/components/ConfigProvider/index.js.map +2 -2
  56. package/lib/components/ConfigProvider/style/index.js +1 -1
  57. package/lib/components/ConfigProvider/style/index.js.map +2 -2
  58. package/lib/components/ContextMenu/index.js +2 -1
  59. package/lib/components/ContextMenu/index.js.map +3 -3
  60. package/lib/components/ContextMenu/style/index.js.map +2 -2
  61. package/lib/components/DeleteConfirmAction/withDeleteConfirmAction.d.ts +3 -3
  62. package/lib/components/EditableText/index.js +3 -2
  63. package/lib/components/EditableText/index.js.map +3 -3
  64. package/lib/components/EllipsisTypography/withEllipsisTypography.d.ts +16 -0
  65. package/lib/components/EllipsisTypography/withEllipsisTypography.js +16 -2
  66. package/lib/components/EllipsisTypography/withEllipsisTypography.js.map +2 -2
  67. package/lib/components/FloatDrawer/index.js +3 -2
  68. package/lib/components/FloatDrawer/index.js.map +3 -3
  69. package/lib/components/FloatDrawer/style/index.js +1 -1
  70. package/lib/components/FloatDrawer/style/index.js.map +2 -2
  71. package/lib/components/Iconfont/createIconfont.d.ts +42 -0
  72. package/lib/components/Iconfont/createIconfont.js +65 -0
  73. package/lib/components/Iconfont/createIconfont.js.map +7 -0
  74. package/lib/components/Iconfont/index.d.ts +1 -0
  75. package/lib/components/Iconfont/index.js +24 -0
  76. package/lib/components/Iconfont/index.js.map +7 -0
  77. package/lib/components/Loading/index.js +3 -2
  78. package/lib/components/Loading/index.js.map +3 -3
  79. package/lib/components/Loading/style/index.js +1 -1
  80. package/lib/components/Loading/style/index.js.map +2 -2
  81. package/lib/components/OverflowTags/index.js +3 -2
  82. package/lib/components/OverflowTags/index.js.map +3 -3
  83. package/lib/components/OverflowTags/style/index.js +1 -1
  84. package/lib/components/OverflowTags/style/index.js.map +2 -2
  85. package/lib/components/index.d.ts +1 -0
  86. package/lib/components/index.js +3 -1
  87. package/lib/components/index.js.map +2 -2
  88. package/lib/hooks/style/useSplitter.d.ts +3 -0
  89. package/lib/hooks/style/useSplitter.js +72 -0
  90. package/lib/hooks/style/useSplitter.js.map +7 -0
  91. package/lib/hooks/useSplitter.d.ts +52 -9
  92. package/lib/hooks/useSplitter.js +56 -26
  93. package/lib/hooks/useSplitter.js.map +3 -3
  94. package/package.json +2 -1
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ContextMenu/index.tsx"],
4
- "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef, useContext, useImperativeHandle, useMemo } from 'react';\nimport { theme as AntdTheme, ConfigProvider, Typography } from 'antd';\nimport classNames from 'classnames';\nimport type { ItemProps, MenuProps, SeparatorProps, ShowContextMenuParams, SubMenuProps } from 'react-contexify';\nimport { Item, Menu, RightSlot, Separator, Submenu, useContextMenu } from 'react-contexify';\nimport { useRefFunction } from '../../hooks';\nimport useStyle from './style';\nimport 'react-contexify/dist/ReactContexify.css';\n\nexport interface ContextMenuProps extends MenuProps {\n /**\n * - **EN:** Menu items to be displayed\n * - **CN:** 要显示的菜单项\n */\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined;\n /**\n * - **EN:** Trigger methods to show the menu, default is `['contextMenu']`\n * - **CN:** 触发显示菜单的方式,默认是 `['contextMenu']`\n */\n trigger?: ('click' | 'doubleClick' | 'hover' | 'contextMenu')[];\n /**\n * - **EN:** Custom properties for the trigger element\n * - **CN:** 触发元素的自定义属性\n */\n triggerProps?: {\n /**\n * - **EN:** Custom class name for the trigger element\n * - **CN:** 触发元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom styles for the trigger element\n * - **CN:** 触发元素的自定义样式\n */\n style?: CSSProperties;\n };\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n}\n// 上下文菜单组件\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>((props, ref) => {\n const {\n id,\n items,\n trigger = ['contextMenu'],\n triggerProps,\n prefixCls: prefixClsInProps,\n className,\n children,\n ...rest\n } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('context-menu', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const { show, hideAll } = useContextMenu({ id });\n const eventNames = useMemo<Record<NonNullable<ContextMenuProps['trigger']>[number], [string, string | undefined]>>(\n () => ({\n click: ['onClick', undefined],\n doubleClick: ['onDoubleClick', undefined],\n hover: ['onPointerEnter', 'onPointerLeave'],\n contextMenu: ['onContextMenu', undefined],\n }),\n []\n );\n\n // Show context menu handler\n const handleShow = useRefFunction(\n (event: React.MouseEvent<HTMLElement>, options?: Pick<ShowContextMenuParams, 'position'>) => {\n show({\n id,\n event,\n props,\n position: options?.position,\n });\n }\n );\n // Hide all context menus handler\n const handleHideAll = useRefFunction(() => {\n hideAll();\n });\n const eventHandlers = useMemo(() => {\n const handlers: Record<string, (event: React.MouseEvent<HTMLElement>) => void> = {};\n if (trigger) {\n trigger.forEach((eventType) => {\n const [handlerName, leaveHandlerName] = eventNames[eventType];\n handlers[handlerName] = (event: React.MouseEvent<HTMLElement>) => {\n handleShow(event);\n };\n if (leaveHandlerName) {\n handlers[leaveHandlerName] = handleHideAll;\n }\n });\n }\n return handlers;\n }, [eventNames, trigger]);\n\n // Expose show and hideAll methods to the ref\n useImperativeHandle(\n ref,\n () => ({\n show: handleShow,\n hideAll: handleHideAll,\n }),\n []\n );\n\n return (\n <>\n {children &&\n wrapCSSVar(\n <div\n {...eventHandlers}\n className={classNames(hashId, cssVarCls, prefixCls, `${prefixCls}-trigger`, triggerProps?.className)}\n style={triggerProps?.style}\n >\n {children}\n </div>\n )}\n {wrapCSSVar(\n <Menu\n id={id}\n className={classNames(\n hashId,\n cssVarCls,\n prefixCls,\n `${prefixCls}-menu`,\n {\n [`${prefixCls}-menu-has-items`]: !!items?.length,\n },\n className\n )}\n {...rest}\n >\n {renderItems(items, { theme: props.theme, cmpPrefixCls: prefixCls })}\n </Menu>\n )}\n </>\n );\n});\nContextMenu.displayName = 'ContextMenu';\n\n// Render menu items\nfunction renderItems(\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined,\n options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] | undefined {\n return items?.map((item, index) => {\n const isSeparator = 'type' in item && item.type === 'separator';\n const isSubmenu = 'type' in item && item.type === 'submenu';\n const menuItem = item as ContextMenuItem;\n\n if (isSeparator) {\n // eslint-disable-next-line react/no-array-index-key\n return <Separator key={`[separator]:${index}`} />;\n }\n\n if (isSubmenu) {\n const subMenu = item as ContextMenuSubmenu;\n return (\n <Submenu {...subMenu} key={subMenu.key}>\n {renderItems(item.items, options)}\n </Submenu>\n );\n }\n\n return (\n <Item\n {...menuItem}\n keyMatcher={\n typeof menuItem.shortcutKey === 'object'\n ? (e) => {\n const shortcutKey = menuItem.shortcutKey as Partial<KeyboardEvent>;\n if (shortcutKey.ctrlKey && !e.ctrlKey) return false;\n if (shortcutKey.altKey && !e.altKey) return false;\n if (shortcutKey.shiftKey && !e.shiftKey) return false;\n if (shortcutKey.metaKey && !e.metaKey) return false;\n if (!shortcutKey.key || shortcutKey.key !== e.key) return false;\n return true;\n }\n : menuItem.shortcutKey\n }\n key={menuItem.key}\n >\n {menuItem.children ? (\n menuItem.children\n ) : (\n <>\n {menuItem.icon}\n <span>{menuItem.label}</span>\n {typeof menuItem.shortcutKey === 'object' && (\n <RightSlot>{getShortcutText(menuItem.shortcutKey, options)}</RightSlot>\n )}\n </>\n )}\n </Item>\n );\n });\n}\n\nfunction getShortcutText(\n event: Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>,\n options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] {\n const { theme, cmpPrefixCls } = options;\n const keys: ReactNode[] = [];\n const Keyboard = (props: { children: ReactNode }) => {\n return (\n <ConfigProvider theme={{ algorithm: theme === 'dark' ? AntdTheme.darkAlgorithm : undefined }}>\n <Typography.Text keyboard className={`${cmpPrefixCls}-shortcut-key`}>\n {props.children}\n </Typography.Text>\n </ConfigProvider>\n );\n };\n if (event.ctrlKey) keys.push(<Keyboard>^</Keyboard>);\n if (event.altKey) keys.push(<Keyboard>⌥</Keyboard>);\n if (event.shiftKey) keys.push(<Keyboard>⇧</Keyboard>);\n if (event.metaKey) keys.push(<Keyboard>⌘</Keyboard>);\n if (event.key) {\n keys.push(<Keyboard>{event.key}</Keyboard>);\n }\n return keys;\n}\n\nexport interface ContextMenuRef {\n show: (event: React.MouseEvent<HTMLElement>) => void;\n hideAll: () => void;\n}\n\nexport interface ContextMenuItem extends Omit<ItemProps, 'children' | 'keyMatcher'> {\n key: string;\n className?: string;\n icon?: ReactNode;\n label?: ReactNode;\n shortcutKey?:\n | Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>\n | ItemProps['keyMatcher'];\n children?: ReactNode;\n}\n\nexport interface ContextMenuSeparator extends SeparatorProps {\n type: 'separator';\n}\n\nexport interface ContextMenuSubmenu extends SubMenuProps {\n key: string;\n type: 'submenu';\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[];\n}\n\nexport default ContextMenu;\n"],
5
- "mappings": "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",
6
- "names": ["useStyle", "classNames", "AntdTheme"]
4
+ "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef, useContext, useImperativeHandle, useMemo } from 'react';\nimport { ConfigProvider as AntConfigProvider, theme as AntdTheme, Typography } from 'antd';\nimport classNames from 'classnames';\nimport type { ItemProps, MenuProps, SeparatorProps, ShowContextMenuParams, SubMenuProps } from 'react-contexify';\nimport { Item, Menu, RightSlot, Separator, Submenu, useContextMenu } from 'react-contexify';\nimport { useRefFunction } from '../../hooks';\nimport ConfigProvider from '../ConfigProvider';\nimport useStyle from './style';\nimport 'react-contexify/dist/ReactContexify.css';\n\nexport interface ContextMenuProps extends MenuProps {\n /**\n * - **EN:** Menu items to be displayed\n * - **CN:** 要显示的菜单项\n */\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined;\n /**\n * - **EN:** Trigger methods to show the menu, default is `['contextMenu']`\n * - **CN:** 触发显示菜单的方式,默认是 `['contextMenu']`\n */\n trigger?: ('click' | 'doubleClick' | 'hover' | 'contextMenu')[];\n /**\n * - **EN:** Custom properties for the trigger element\n * - **CN:** 触发元素的自定义属性\n */\n triggerProps?: {\n /**\n * - **EN:** Custom class name for the trigger element\n * - **CN:** 触发元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom styles for the trigger element\n * - **CN:** 触发元素的自定义样式\n */\n style?: CSSProperties;\n };\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n}\n// 上下文菜单组件\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>((props, ref) => {\n const {\n id,\n items,\n trigger = ['contextMenu'],\n triggerProps,\n prefixCls: prefixClsInProps,\n className,\n children,\n ...rest\n } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('context-menu', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const { show, hideAll } = useContextMenu({ id });\n const eventNames = useMemo<Record<NonNullable<ContextMenuProps['trigger']>[number], [string, string | undefined]>>(\n () => ({\n click: ['onClick', undefined],\n doubleClick: ['onDoubleClick', undefined],\n hover: ['onPointerEnter', 'onPointerLeave'],\n contextMenu: ['onContextMenu', undefined],\n }),\n []\n );\n\n // Show context menu handler\n const handleShow = useRefFunction(\n (event: React.MouseEvent<HTMLElement>, options?: Pick<ShowContextMenuParams, 'position'>) => {\n show({\n id,\n event,\n props,\n position: options?.position,\n });\n }\n );\n // Hide all context menus handler\n const handleHideAll = useRefFunction(() => {\n hideAll();\n });\n const eventHandlers = useMemo(() => {\n const handlers: Record<string, (event: React.MouseEvent<HTMLElement>) => void> = {};\n if (trigger) {\n trigger.forEach((eventType) => {\n const [handlerName, leaveHandlerName] = eventNames[eventType];\n handlers[handlerName] = (event: React.MouseEvent<HTMLElement>) => {\n handleShow(event);\n };\n if (leaveHandlerName) {\n handlers[leaveHandlerName] = handleHideAll;\n }\n });\n }\n return handlers;\n }, [eventNames, trigger]);\n\n // Expose show and hideAll methods to the ref\n useImperativeHandle(\n ref,\n () => ({\n show: handleShow,\n hideAll: handleHideAll,\n }),\n []\n );\n\n return (\n <>\n {children &&\n wrapCSSVar(\n <div\n {...eventHandlers}\n className={classNames(hashId, cssVarCls, prefixCls, `${prefixCls}-trigger`, triggerProps?.className)}\n style={triggerProps?.style}\n >\n {children}\n </div>\n )}\n {wrapCSSVar(\n <Menu\n id={id}\n className={classNames(\n hashId,\n cssVarCls,\n prefixCls,\n `${prefixCls}-menu`,\n {\n [`${prefixCls}-menu-has-items`]: !!items?.length,\n },\n className\n )}\n {...rest}\n >\n {renderItems(items, { theme: props.theme, cmpPrefixCls: prefixCls })}\n </Menu>\n )}\n </>\n );\n});\nContextMenu.displayName = 'ContextMenu';\n\n// Render menu items\nfunction renderItems(\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined,\n options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] | undefined {\n return items?.map((item, index) => {\n const isSeparator = 'type' in item && item.type === 'separator';\n const isSubmenu = 'type' in item && item.type === 'submenu';\n const menuItem = item as ContextMenuItem;\n\n if (isSeparator) {\n // eslint-disable-next-line react/no-array-index-key\n return <Separator key={`[separator]:${index}`} />;\n }\n\n if (isSubmenu) {\n const subMenu = item as ContextMenuSubmenu;\n return (\n <Submenu {...subMenu} key={subMenu.key}>\n {renderItems(item.items, options)}\n </Submenu>\n );\n }\n\n return (\n <Item\n {...menuItem}\n keyMatcher={\n typeof menuItem.shortcutKey === 'object'\n ? (e) => {\n const shortcutKey = menuItem.shortcutKey as Partial<KeyboardEvent>;\n if (shortcutKey.ctrlKey && !e.ctrlKey) return false;\n if (shortcutKey.altKey && !e.altKey) return false;\n if (shortcutKey.shiftKey && !e.shiftKey) return false;\n if (shortcutKey.metaKey && !e.metaKey) return false;\n if (!shortcutKey.key || shortcutKey.key !== e.key) return false;\n return true;\n }\n : menuItem.shortcutKey\n }\n key={menuItem.key}\n >\n {menuItem.children ? (\n menuItem.children\n ) : (\n <>\n {menuItem.icon}\n <span>{menuItem.label}</span>\n {typeof menuItem.shortcutKey === 'object' && (\n <RightSlot>{getShortcutText(menuItem.shortcutKey, options)}</RightSlot>\n )}\n </>\n )}\n </Item>\n );\n });\n}\n\nfunction getShortcutText(\n event: Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>,\n options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] {\n const { theme, cmpPrefixCls } = options;\n const keys: ReactNode[] = [];\n const Keyboard = (props: { children: ReactNode }) => {\n return (\n <AntConfigProvider theme={{ algorithm: theme === 'dark' ? AntdTheme.darkAlgorithm : undefined }}>\n <Typography.Text keyboard className={`${cmpPrefixCls}-shortcut-key`}>\n {props.children}\n </Typography.Text>\n </AntConfigProvider>\n );\n };\n if (event.ctrlKey) keys.push(<Keyboard>^</Keyboard>);\n if (event.altKey) keys.push(<Keyboard>⌥</Keyboard>);\n if (event.shiftKey) keys.push(<Keyboard>⇧</Keyboard>);\n if (event.metaKey) keys.push(<Keyboard>⌘</Keyboard>);\n if (event.key) {\n keys.push(<Keyboard>{event.key}</Keyboard>);\n }\n return keys;\n}\n\nexport interface ContextMenuRef {\n show: (event: React.MouseEvent<HTMLElement>) => void;\n hideAll: () => void;\n}\n\nexport interface ContextMenuItem extends Omit<ItemProps, 'children' | 'keyMatcher'> {\n key: string;\n className?: string;\n icon?: ReactNode;\n label?: ReactNode;\n shortcutKey?:\n | Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>\n | ItemProps['keyMatcher'];\n children?: ReactNode;\n}\n\nexport interface ContextMenuSeparator extends SeparatorProps {\n type: 'separator';\n}\n\nexport interface ContextMenuSubmenu extends SubMenuProps {\n key: string;\n type: 'submenu';\n items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[];\n}\n\nexport default ContextMenu;\n"],
5
+ "mappings": "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",
6
+ "names": ["ConfigProvider", "useStyle", "classNames", "AntConfigProvider", "AntdTheme"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/ContextMenu/style/index.ts"],
4
- "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n '&-trigger': {\n width: 'fit-content',\n },\n '.contexify&-menu': {\n padding: 0,\n '&-has-items': {\n padding: 'var(--contexify-menu-padding)',\n },\n [`${componentCls}-shortcut-key`]: {\n kbd: {\n fontFamily: '-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,sans-serif',\n },\n },\n },\n },\n };\n};\n\nexport default genStyleHooks('ContextMenu' as never, genStyle);\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,aAAa,IAAI;AACzB,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,aAAa;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,oBAAoB;AAAA,QAClB,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,QACX;AAAA,QACA,CAAC,GAAG,2BAA2B,GAAG;AAAA,UAChC,KAAK;AAAA,YACH,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,eAAwB,QAAQ;",
4
+ "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype ContextMenuToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<ContextMenuToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n '&-trigger': {\n width: 'fit-content',\n },\n '.contexify&-menu': {\n padding: 0,\n '&-has-items': {\n padding: 'var(--contexify-menu-padding)',\n },\n [`${componentCls}-shortcut-key`]: {\n kbd: {\n fontFamily: '-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,sans-serif',\n },\n },\n },\n },\n };\n};\n\nexport default genStyleHooks('ContextMenu' as never, genStyle);\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA4C,CAAC,UAAqB;AACtE,QAAM,EAAE,aAAa,IAAI;AACzB,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,aAAa;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,oBAAoB;AAAA,QAClB,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,QACX;AAAA,QACA,CAAC,GAAG,2BAA2B,GAAG;AAAA,UAChC,KAAK;AAAA,YACH,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,eAAwB,QAAQ;",
6
6
  "names": []
7
7
  }
@@ -11,9 +11,9 @@ import { type ActionComponentInterface } from '../ConfirmAction/withConfirmActio
11
11
  */
12
12
  export default function withDeleteConfirmAction<P extends ActionCompConstraint, OuterTriggerProp extends object, OuterEvent extends keyof OuterTriggerProp, Ref extends object>(ActionComponent: ActionComponentInterface<P, Ref>, defaultProps?: Partial<Omit<P, keyof ActionCompConstraint> & ConfirmActionProps<OuterTriggerProp, OuterEvent>> | ((actualProps: Omit<P, keyof ActionCompConstraint> & ConfirmActionProps<OuterTriggerProp, OuterEvent>) => Partial<Omit<P, keyof ActionCompConstraint> & ConfirmActionProps<OuterTriggerProp, OuterEvent>>)): (<TriggerProp extends object, Event extends keyof TriggerProp>(props: import("react").PropsWithoutRef<Omit<P, keyof ActionCompConstraint>> & Omit<import("antd").ModalFuncProps, "onOk"> & import("../ConfirmAction").ConfirmActionTrigger<TriggerProp, Event> & {
13
13
  danger?: boolean | undefined;
14
- titleColor?: import("antd/es/typography/Base").BaseType | "primary" | undefined;
15
- contentColor?: import("antd/es/typography/Base").BaseType | "primary" | undefined;
16
- iconColor?: import("antd/es/typography/Base").BaseType | "primary" | undefined;
14
+ titleColor?: "primary" | import("antd/es/typography/Base").BaseType | undefined;
15
+ contentColor?: "primary" | import("antd/es/typography/Base").BaseType | undefined;
16
+ iconColor?: "primary" | import("antd/es/typography/Base").BaseType | undefined;
17
17
  onOk?: ((...args: Parameters<TriggerProp[Event]>) => unknown) | undefined;
18
18
  afterOk?: ((data?: any) => void) | undefined;
19
19
  } & import("react").RefAttributes<import("../ConfirmAction").ConfirmActionRef<Ref>>) => import("react").ReactNode) & import("../ConfirmAction/withConfirmAction").TypedTriggers<P, Ref>;
@@ -37,6 +37,7 @@ var import_antd = require("antd");
37
37
  var import_classnames = __toESM(require("classnames"));
38
38
  var import_icons = require("@ant-design/icons");
39
39
  var import_useT = __toESM(require("../../hooks/useT"));
40
+ var import_ConfigProvider = __toESM(require("../ConfigProvider"));
40
41
  var import_form = __toESM(require("./form"));
41
42
  var import_style = __toESM(require("./style"));
42
43
  var getEllipsisConfig = (content) => ({
@@ -75,8 +76,8 @@ var EditableText = (props) => {
75
76
  onChange,
76
77
  onEditingChange
77
78
  } = props;
78
- const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
79
- const prefixCls = getPrefixCls("easy-editable-text", prefixClsInProps);
79
+ const { getPrefixCls } = (0, import_react.useContext)(import_ConfigProvider.default.ConfigContext);
80
+ const prefixCls = getPrefixCls("editable-text", prefixClsInProps);
80
81
  const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
81
82
  const t = (0, import_useT.default)();
82
83
  const [isEditing, setIsEditing] = (0, import_react.useState)(editing);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/EditableText/index.tsx"],
4
- "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport { ConfigProvider, Flex, Typography } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { LinkProps } from 'antd/es/typography/Link';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport names from 'classnames';\nimport { EditOutlined } from '@ant-design/icons';\nimport useT from '../../hooks/useT';\nimport EditableTextForm, { type EditableFormProps, type RenderInputInterface } from './form';\nimport useStyle from './style';\n\nconst getEllipsisConfig = (content: ReactNode | undefined): EllipsisConfig => ({\n tooltip: {\n title: content,\n overlayStyle: { maxWidth: 500 },\n },\n});\n\nexport interface EditableTextProps<\n V = string,\n TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text',\n IT extends 'Input' | 'TextArea' | RenderInputInterface = 'Input',\n> extends Omit<EditableFormProps<V, IT>, 'block'> {\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Custom read-only display text, replacing `value` display\n * - **CN:** 自定义只读显示文本,替代`value`显示\n *\n * @default true\n */\n displayText?: boolean | ReactNode | ((value: V | undefined) => ReactNode);\n /**\n * - **EN:** Another way to customize read-only display text, with higher priority than\n * `displayText`. This method does not support text truncation.\n * - **CN:** 另外一种方式自定义只读显示文本,优先级高于`displayText`,这种方式无文本省略效果\n */\n children?: ReactNode;\n /**\n * - **EN:** Whether to allow editing. If set to `false`, the edit button will not be displayed.\n * - **CN:** 是否允许编辑,如果设置为`false`,则不显示编辑按钮\n *\n * @default true\n */\n editable?: boolean;\n /**\n * - **EN:** Whether to open edit mode.\n * - **CN:** 是否打开编辑模式\n *\n * @default false\n */\n editing?: boolean;\n /**\n * - **EN:** Whether to display as a block-level element, with width 100%\n * - **CN:** 是否显示为块级元素,宽度100%\n *\n * @default false\n */\n block?:\n | boolean\n | {\n /**\n * - **EN:** Whether to display as a block-level element in view mode, with width 100%\n * - **CN:** 只读模式是否显示为块级元素,宽度100%\n *\n * @default false\n */\n view?: boolean;\n /**\n * - **EN:** Whether to display as a block-level element in edit mode, with width 100%\n * - **CN:** 编辑模式是否显示为块级元素,宽度100%\n *\n * @default false\n */\n editing?: boolean;\n };\n /**\n * - **EN:** Component container class name.\n * - **CN:** 组件容器类名\n */\n className?: string;\n /**\n * - **EN:** Component container style.\n * - **CN:** 组件容器样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Semantic class names.\n * - **CN:** 语义化类名\n */\n classNames?: {\n /**\n * - **EN:** Read-only text class name\n * - **CN:** 只读文本类名\n */\n text?: string;\n /**\n * - **EN:** Edit button class name\n * - **CN:** 编辑按钮类名\n */\n editIcon?: string;\n } & EditableFormProps<V, IT>['classNames'];\n /**\n * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`\n * - **CN:** 在`onOk`保存后,通过`onChange`把修改后的值传递出去\n */\n onChange?: (value: V | undefined) => void;\n /**\n * - **EN:** Event triggered when the editing state changes\n * - **CN:** 编辑状态改变事件\n */\n onEditingChange?: (editing: boolean) => void;\n /**\n * - **EN:** Whether to display as a block-level element, with width 100%\n * - **CN:** 语义化样式\n */\n styles?: {\n /**\n * - **EN:** Read-only text class name\n * - **CN:** 只读文本类名\n */\n text?: CSSProperties;\n /**\n * - **EN:** Edit button style\n * - **CN:** 编辑按钮样式\n */\n editIcon?: CSSProperties;\n } & EditableFormProps<V, IT>['styles'];\n\n /**\n * - **EN:** Custom component type for rendering the text\n * - **CN:** 自定义设置渲染文本组件的组件类型\n *\n * @default Typography.Text\n */\n textComp?: TT;\n /**\n * - **EN:** Text component props\n * - **CN:** 文本组件属性\n */\n textProps?: TT extends 'Text'\n ? TextProps\n : TT extends 'Paragraph'\n ? ParagraphProps\n : TT extends 'Title'\n ? TitleProps\n : TT extends 'Link'\n ? LinkProps\n : never;\n /**\n * - **EN:** Custom edit icon\n * - **CN:** 自定义编辑图标\n */\n editIcon?: ReactNode;\n /**\n * **EN:** Edit button vertical alignment\n *\n * **CN:** 编辑按钮垂直对齐方式\n *\n * - `start` - align to the top | 顶部对齐\n * - `center` - align to the center | 居中对齐\n * - `end` - align to the bottom | 底部对齐\n * - `baseline` - align to the text baseline, useful when the text has line height set |\n * 与文本基线对齐,在文本设置了行高时会非常有用\n *\n * @default 'center'\n */\n editIconAlign?: CSSProperties['alignItems'];\n}\n\n/**\n * - **EN:** Editable text component, providing a read-only display and an edit mode.\n * - **CN:** 可编辑文本组件,提供只读显示和编辑模式。\n *\n * @example\n * <EditableText value=\"Editable Text\" onOk={(value) => console.log('Saved value:', value)} />;\n */\nconst EditableText = <\n V,\n TT extends 'Text' | 'Paragraph' | 'Title' | 'Link',\n IT extends 'Input' | 'TextArea' | RenderInputInterface,\n>(\n props: EditableTextProps<V, TT, IT>\n) => {\n const {\n prefixCls: prefixClsInProps,\n value: valueInProps,\n displayText: displayTextInProps,\n editable = true,\n editing = false,\n className = '',\n style = {},\n classNames,\n styles: styleNames,\n block: blockInProps,\n textComp = 'Text',\n textProps,\n editIcon,\n editIconAlign = 'center',\n children,\n formProps,\n formItemProps,\n inputComp: inputCompInProps,\n inputProps,\n required,\n actionAlign,\n submitProps,\n cancelProps,\n onOk,\n onCancel,\n onChange,\n onEditingChange,\n } = props;\n\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-editable-text', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const t = useT();\n const [isEditing, setIsEditing] = useState<boolean>(editing);\n const TypographyComponent = Typography[textComp];\n const [value, setValue] = useState(valueInProps);\n const inputComp = inputCompInProps ?? (textComp === 'Paragraph' ? 'TextArea' : 'Input');\n const viewBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.view;\n const editingBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.editing;\n const editableRef = React.useRef(editable);\n editableRef.current = editable;\n const displayText = useMemo(() => {\n if (typeof displayTextInProps === 'function') {\n return displayTextInProps(value);\n }\n return displayTextInProps ?? value?.toString();\n }, [displayTextInProps, value]);\n\n // value受控\n useEffect(() => {\n setValue(valueInProps);\n }, [valueInProps]);\n // editing受控\n useEffect(() => {\n if (editableRef.current) {\n setIsEditing(editing);\n }\n }, [editing]);\n\n // 编辑状态改变\n const handleEditingChange = (editing: boolean) => {\n setIsEditing(editing);\n onEditingChange?.(editing);\n };\n // 提交编辑\n const handleOk = async (val: V | undefined) => {\n try {\n await onOk?.(val);\n onChange?.(val);\n setValue(val);\n handleEditingChange(false);\n } catch (error) {\n console.error(error);\n }\n };\n // 取消编辑\n const handleCancel = async () => {\n handleEditingChange(false);\n await onCancel?.();\n };\n\n return wrapCSSVar(\n <div className={names(prefixCls, hashId, cssVarCls, className)} style={style}>\n {isEditing ? (\n <div className={`${prefixCls}-edit-mode`}>\n <EditableTextForm\n prefixCls={prefixCls}\n value={value}\n required={required}\n formProps={formProps}\n formItemProps={formItemProps}\n inputComp={inputComp}\n inputProps={inputProps}\n block={editingBlock}\n classNames={classNames}\n styles={styleNames}\n actionAlign={actionAlign}\n submitProps={submitProps}\n cancelProps={cancelProps}\n onOk={handleOk}\n onCancel={handleCancel}\n />\n </div>\n ) : (\n <Flex\n className={names(`${prefixCls}-view-mode`, {\n [`${prefixCls}-single-line`]: textComp !== 'Paragraph',\n [`${prefixCls}-has-children`]: !!children,\n [`${prefixCls}-view-mode-block`]: viewBlock,\n })}\n align={editIconAlign}\n >\n <div className={`${prefixCls}-text-content`}>\n {children ?? (\n <TypographyComponent\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(textProps as any)}\n className={names(classNames?.text, classNames?.text, textProps?.className)}\n style={{\n marginBottom: textComp === 'Title' ? 0 : undefined, // 去掉标题组件的默认下边距\n ...(textProps?.style ?? styleNames?.text),\n }}\n ellipsis={textProps?.ellipsis ?? getEllipsisConfig(displayText)}\n >\n {displayText}\n </TypographyComponent>\n )}\n </div>\n {/* 编辑按钮 */}\n {editable && (\n <div\n className={names(`${prefixCls}-edit-icon`, classNames?.editIcon)}\n style={styleNames?.editIcon}\n title={t('components.EditableText.edit')}\n onClick={() => handleEditingChange(true)}\n >\n {editIcon ?? <EditOutlined />}\n </div>\n )}\n </Flex>\n )}\n </div>\n );\n};\n\ntype EditableTextInterface = typeof EditableText & {\n getEllipsisConfig: typeof getEllipsisConfig;\n};\n\nEditableText.getEllipsisConfig = getEllipsisConfig;\n\nexport default EditableText as EditableTextInterface;\n"],
5
- "mappings": "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",
6
- "names": ["useStyle", "useT", "React", "editing", "names", "EditableTextForm"]
4
+ "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport { Flex, Typography } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { LinkProps } from 'antd/es/typography/Link';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport names from 'classnames';\nimport { EditOutlined } from '@ant-design/icons';\nimport useT from '../../hooks/useT';\nimport ConfigProvider from '../ConfigProvider';\nimport EditableTextForm, { type EditableFormProps, type RenderInputInterface } from './form';\nimport useStyle from './style';\n\nconst getEllipsisConfig = (content: ReactNode | undefined): EllipsisConfig => ({\n tooltip: {\n title: content,\n overlayStyle: { maxWidth: 500 },\n },\n});\n\nexport interface EditableTextProps<\n V = string,\n TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text',\n IT extends 'Input' | 'TextArea' | RenderInputInterface = 'Input',\n> extends Omit<EditableFormProps<V, IT>, 'block'> {\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Custom read-only display text, replacing `value` display\n * - **CN:** 自定义只读显示文本,替代`value`显示\n *\n * @default true\n */\n displayText?: boolean | ReactNode | ((value: V | undefined) => ReactNode);\n /**\n * - **EN:** Another way to customize read-only display text, with higher priority than\n * `displayText`. This method does not support text truncation.\n * - **CN:** 另外一种方式自定义只读显示文本,优先级高于`displayText`,这种方式无文本省略效果\n */\n children?: ReactNode;\n /**\n * - **EN:** Whether to allow editing. If set to `false`, the edit button will not be displayed.\n * - **CN:** 是否允许编辑,如果设置为`false`,则不显示编辑按钮\n *\n * @default true\n */\n editable?: boolean;\n /**\n * - **EN:** Whether to open edit mode.\n * - **CN:** 是否打开编辑模式\n *\n * @default false\n */\n editing?: boolean;\n /**\n * - **EN:** Whether to display as a block-level element, with width 100%\n * - **CN:** 是否显示为块级元素,宽度100%\n *\n * @default false\n */\n block?:\n | boolean\n | {\n /**\n * - **EN:** Whether to display as a block-level element in view mode, with width 100%\n * - **CN:** 只读模式是否显示为块级元素,宽度100%\n *\n * @default false\n */\n view?: boolean;\n /**\n * - **EN:** Whether to display as a block-level element in edit mode, with width 100%\n * - **CN:** 编辑模式是否显示为块级元素,宽度100%\n *\n * @default false\n */\n editing?: boolean;\n };\n /**\n * - **EN:** Component container class name.\n * - **CN:** 组件容器类名\n */\n className?: string;\n /**\n * - **EN:** Component container style.\n * - **CN:** 组件容器样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Semantic class names.\n * - **CN:** 语义化类名\n */\n classNames?: {\n /**\n * - **EN:** Read-only text class name\n * - **CN:** 只读文本类名\n */\n text?: string;\n /**\n * - **EN:** Edit button class name\n * - **CN:** 编辑按钮类名\n */\n editIcon?: string;\n } & EditableFormProps<V, IT>['classNames'];\n /**\n * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`\n * - **CN:** 在`onOk`保存后,通过`onChange`把修改后的值传递出去\n */\n onChange?: (value: V | undefined) => void;\n /**\n * - **EN:** Event triggered when the editing state changes\n * - **CN:** 编辑状态改变事件\n */\n onEditingChange?: (editing: boolean) => void;\n /**\n * - **EN:** Whether to display as a block-level element, with width 100%\n * - **CN:** 语义化样式\n */\n styles?: {\n /**\n * - **EN:** Read-only text class name\n * - **CN:** 只读文本类名\n */\n text?: CSSProperties;\n /**\n * - **EN:** Edit button style\n * - **CN:** 编辑按钮样式\n */\n editIcon?: CSSProperties;\n } & EditableFormProps<V, IT>['styles'];\n\n /**\n * - **EN:** Custom component type for rendering the text\n * - **CN:** 自定义设置渲染文本组件的组件类型\n *\n * @default Typography.Text\n */\n textComp?: TT;\n /**\n * - **EN:** Text component props\n * - **CN:** 文本组件属性\n */\n textProps?: TT extends 'Text'\n ? TextProps\n : TT extends 'Paragraph'\n ? ParagraphProps\n : TT extends 'Title'\n ? TitleProps\n : TT extends 'Link'\n ? LinkProps\n : never;\n /**\n * - **EN:** Custom edit icon\n * - **CN:** 自定义编辑图标\n */\n editIcon?: ReactNode;\n /**\n * **EN:** Edit button vertical alignment\n *\n * **CN:** 编辑按钮垂直对齐方式\n *\n * - `start` - align to the top | 顶部对齐\n * - `center` - align to the center | 居中对齐\n * - `end` - align to the bottom | 底部对齐\n * - `baseline` - align to the text baseline, useful when the text has line height set |\n * 与文本基线对齐,在文本设置了行高时会非常有用\n *\n * @default 'center'\n */\n editIconAlign?: CSSProperties['alignItems'];\n}\n\n/**\n * - **EN:** Editable text component, providing a read-only display and an edit mode.\n * - **CN:** 可编辑文本组件,提供只读显示和编辑模式。\n *\n * @example\n * <EditableText value=\"Editable Text\" onOk={(value) => console.log('Saved value:', value)} />;\n */\nconst EditableText = <\n V,\n TT extends 'Text' | 'Paragraph' | 'Title' | 'Link',\n IT extends 'Input' | 'TextArea' | RenderInputInterface,\n>(\n props: EditableTextProps<V, TT, IT>\n) => {\n const {\n prefixCls: prefixClsInProps,\n value: valueInProps,\n displayText: displayTextInProps,\n editable = true,\n editing = false,\n className = '',\n style = {},\n classNames,\n styles: styleNames,\n block: blockInProps,\n textComp = 'Text',\n textProps,\n editIcon,\n editIconAlign = 'center',\n children,\n formProps,\n formItemProps,\n inputComp: inputCompInProps,\n inputProps,\n required,\n actionAlign,\n submitProps,\n cancelProps,\n onOk,\n onCancel,\n onChange,\n onEditingChange,\n } = props;\n\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('editable-text', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const t = useT();\n const [isEditing, setIsEditing] = useState<boolean>(editing);\n const TypographyComponent = Typography[textComp];\n const [value, setValue] = useState(valueInProps);\n const inputComp = inputCompInProps ?? (textComp === 'Paragraph' ? 'TextArea' : 'Input');\n const viewBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.view;\n const editingBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.editing;\n const editableRef = React.useRef(editable);\n editableRef.current = editable;\n const displayText = useMemo(() => {\n if (typeof displayTextInProps === 'function') {\n return displayTextInProps(value);\n }\n return displayTextInProps ?? value?.toString();\n }, [displayTextInProps, value]);\n\n // value受控\n useEffect(() => {\n setValue(valueInProps);\n }, [valueInProps]);\n // editing受控\n useEffect(() => {\n if (editableRef.current) {\n setIsEditing(editing);\n }\n }, [editing]);\n\n // 编辑状态改变\n const handleEditingChange = (editing: boolean) => {\n setIsEditing(editing);\n onEditingChange?.(editing);\n };\n // 提交编辑\n const handleOk = async (val: V | undefined) => {\n try {\n await onOk?.(val);\n onChange?.(val);\n setValue(val);\n handleEditingChange(false);\n } catch (error) {\n console.error(error);\n }\n };\n // 取消编辑\n const handleCancel = async () => {\n handleEditingChange(false);\n await onCancel?.();\n };\n\n return wrapCSSVar(\n <div className={names(prefixCls, hashId, cssVarCls, className)} style={style}>\n {isEditing ? (\n <div className={`${prefixCls}-edit-mode`}>\n <EditableTextForm\n prefixCls={prefixCls}\n value={value}\n required={required}\n formProps={formProps}\n formItemProps={formItemProps}\n inputComp={inputComp}\n inputProps={inputProps}\n block={editingBlock}\n classNames={classNames}\n styles={styleNames}\n actionAlign={actionAlign}\n submitProps={submitProps}\n cancelProps={cancelProps}\n onOk={handleOk}\n onCancel={handleCancel}\n />\n </div>\n ) : (\n <Flex\n className={names(`${prefixCls}-view-mode`, {\n [`${prefixCls}-single-line`]: textComp !== 'Paragraph',\n [`${prefixCls}-has-children`]: !!children,\n [`${prefixCls}-view-mode-block`]: viewBlock,\n })}\n align={editIconAlign}\n >\n <div className={`${prefixCls}-text-content`}>\n {children ?? (\n <TypographyComponent\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(textProps as any)}\n className={names(classNames?.text, classNames?.text, textProps?.className)}\n style={{\n marginBottom: textComp === 'Title' ? 0 : undefined, // 去掉标题组件的默认下边距\n ...(textProps?.style ?? styleNames?.text),\n }}\n ellipsis={textProps?.ellipsis ?? getEllipsisConfig(displayText)}\n >\n {displayText}\n </TypographyComponent>\n )}\n </div>\n {/* 编辑按钮 */}\n {editable && (\n <div\n className={names(`${prefixCls}-edit-icon`, classNames?.editIcon)}\n style={styleNames?.editIcon}\n title={t('components.EditableText.edit')}\n onClick={() => handleEditingChange(true)}\n >\n {editIcon ?? <EditOutlined />}\n </div>\n )}\n </Flex>\n )}\n </div>\n );\n};\n\ntype EditableTextInterface = typeof EditableText & {\n getEllipsisConfig: typeof getEllipsisConfig;\n};\n\nEditableText.getEllipsisConfig = getEllipsisConfig;\n\nexport default EditableText as EditableTextInterface;\n"],
5
+ "mappings": "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",
6
+ "names": ["ConfigProvider", "useStyle", "useT", "React", "editing", "names", "EditableTextForm"]
7
7
  }
@@ -4,7 +4,23 @@ import type { TextProps } from 'antd/es/typography/Text';
4
4
  import type { TitleProps } from 'antd/es/typography/Title';
5
5
  declare function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(Component: ComponentType<MakeEllipsisTypographyProps<T>>): (props: MakeEllipsisTypographyProps<T>) => import("react/jsx-runtime").JSX.Element;
6
6
  export type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {
7
+ /**
8
+ * - **EN:** The text content to display. If not provided, the children will be used.
9
+ * - **CN:** 要显示的文本内容。如果未提供,将使用子元素。
10
+ */
7
11
  text?: string | undefined;
12
+ /**
13
+ * - **EN:** The children content to display. The `text` prop will take precedence if both are
14
+ * provided.
15
+ * - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性,将优先使用 `text`。
16
+ */
8
17
  children?: string | undefined | null;
18
+ /**
19
+ * - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.
20
+ * - **CN:** 是否监控组件的大小并相应地调整省略号。
21
+ *
22
+ * @default true
23
+ */
24
+ watchResize?: boolean;
9
25
  };
10
26
  export default withEllipsisTypography;
@@ -24,11 +24,14 @@ __export(withEllipsisTypography_exports, {
24
24
  module.exports = __toCommonJS(withEllipsisTypography_exports);
25
25
  var import_react = require("react");
26
26
  var import_antd = require("antd");
27
+ var import_react_resize_detector = require("react-resize-detector");
28
+ var import_hooks = require("../../hooks");
27
29
  function withEllipsisTypography(Component) {
28
30
  return function EllipsisText(props) {
29
- const { ellipsis = true, children, text = children, ...rest } = props;
31
+ const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;
30
32
  const [isEllipsis, setIsEllipsis] = (0, import_react.useState)(false);
31
33
  const [dom, setDom] = (0, import_react.useState)(null);
34
+ const domRef = (0, import_hooks.useRefValue)(dom);
32
35
  const isAutoEllipsis = (0, import_react.useMemo)(() => ellipsis === true, [ellipsis]);
33
36
  const isAutoTooltip = (0, import_react.useMemo)(() => typeof ellipsis === "object" && ellipsis.tooltip === true, [ellipsis]);
34
37
  const isAutoTooltipTitle = (0, import_react.useMemo)(
@@ -40,10 +43,21 @@ function withEllipsisTypography(Component) {
40
43
  [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]
41
44
  );
42
45
  const tooltipTitle = (0, import_react.useMemo)(() => isEllipsis ? text : void 0, [isEllipsis, text]);
46
+ const detectEllipsis = (0, import_hooks.useRefFunction)(
47
+ () => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)
48
+ );
49
+ (0, import_react_resize_detector.useResizeDetector)({
50
+ targetRef: watchResize ? domRef : void 0,
51
+ onResize: detectEllipsis,
52
+ refreshRate: 10,
53
+ refreshOptions: {
54
+ leading: false
55
+ }
56
+ });
43
57
  (0, import_react.useEffect)(() => {
44
58
  if (dom && isAuto) {
45
59
  Promise.resolve().then(() => {
46
- setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);
60
+ detectEllipsis();
47
61
  });
48
62
  }
49
63
  }, [text, isAuto, dom]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],
4
- "sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, children, text = children, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n text?: string | undefined;\n children?: string | undefined | null;\n};\n\nexport default withEllipsisTypography;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;AAMxB,SAAS,uBACP,WACA;AACA,SAAO,SAAS,aAAa,OAAuC;AAClE,UAAM,EAAE,WAAW,MAAM,UAAU,OAAO,UAAU,GAAG,KAAK,IAAI;AAChE,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,UAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,MAAM,CAAC,QAAQ,CAAC;AAClE,UAAM,oBAAgB,sBAAQ,MAAM,OAAO,aAAa,YAAY,SAAS,YAAY,MAAM,CAAC,QAAQ,CAAC;AACzG,UAAM,yBAAqB;AAAA,MACzB,MACE,OAAO,aAAa,YACpB,SAAS,WACT,OAAO,SAAS,YAAY,YAC5B,WAAW,SAAS,WACpB,SAAS,QAAQ,UAAU;AAAA,MAC7B,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS;AAAA,MACb,MAAM,kBAAkB,iBAAiB;AAAA,MACzC,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,IACpD;AACA,UAAM,mBAAe,sBAAQ,MAAO,aAAa,OAAO,QAAY,CAAC,YAAY,IAAI,CAAC;AAEtF,gCAAU,MAAM;AACd,UAAI,OAAO,QAAQ;AACjB,gBAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,wBAAc,IAAI,cAAc,IAAI,eAAe,IAAI,eAAe,IAAI,YAAY;AAAA,QACxF,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;AAEtB,WACE,oCAAC,uBAAS,GAAK,qCAA6B,SAA0B,OAAO,gBAC3E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEJ,GAAI;AAAA,QACL,UACE,iBACI,EAAE,SAAS,OAAU,IACrB,gBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,QACX,IACA,qBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,YACP,GAAK,qCAA6B;AAAA,YAClC,OAAO;AAAA,UACT;AAAA,QACF,IACA;AAAA;AAAA,MAGT;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AAOA,IAAO,iCAAQ;",
4
+ "sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { useRefFunction, useRefValue } from '../../hooks';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const domRef = useRefValue(dom);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n const detectEllipsis = useRefFunction(\n () => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)\n );\n useResizeDetector({\n targetRef: watchResize ? domRef : undefined,\n onResize: detectEllipsis,\n refreshRate: 10,\n refreshOptions: {\n leading: false,\n },\n });\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n detectEllipsis();\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n /**\n * - **EN:** The text content to display. If not provided, the children will be used.\n * - **CN:** 要显示的文本内容。如果未提供,将使用子元素。\n */\n text?: string | undefined;\n /**\n * - **EN:** The children content to display. The `text` prop will take precedence if both are\n * provided.\n * - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性,将优先使用 `text`。\n */\n children?: string | undefined | null;\n /**\n * - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.\n * - **CN:** 是否监控组件的大小并相应地调整省略号。\n *\n * @default true\n */\n watchResize?: boolean;\n};\n\nexport default withEllipsisTypography;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;AAKxB,mCAAkC;AAClC,mBAA4C;AAE5C,SAAS,uBACP,WACA;AACA,SAAO,SAAS,aAAa,OAAuC;AAClE,UAAM,EAAE,WAAW,MAAM,UAAU,OAAO,UAAU,cAAc,MAAM,GAAG,KAAK,IAAI;AACpF,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,UAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,UAAM,aAAS,0BAAY,GAAG;AAC9B,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,MAAM,CAAC,QAAQ,CAAC;AAClE,UAAM,oBAAgB,sBAAQ,MAAM,OAAO,aAAa,YAAY,SAAS,YAAY,MAAM,CAAC,QAAQ,CAAC;AACzG,UAAM,yBAAqB;AAAA,MACzB,MACE,OAAO,aAAa,YACpB,SAAS,WACT,OAAO,SAAS,YAAY,YAC5B,WAAW,SAAS,WACpB,SAAS,QAAQ,UAAU;AAAA,MAC7B,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS;AAAA,MACb,MAAM,kBAAkB,iBAAiB;AAAA,MACzC,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,IACpD;AACA,UAAM,mBAAe,sBAAQ,MAAO,aAAa,OAAO,QAAY,CAAC,YAAY,IAAI,CAAC;AAEtF,UAAM,qBAAiB;AAAA,MACrB,MAAM,OAAO,cAAc,IAAI,cAAc,IAAI,eAAe,IAAI,eAAe,IAAI,YAAY;AAAA,IACrG;AACA,wDAAkB;AAAA,MAChB,WAAW,cAAc,SAAS;AAAA,MAClC,UAAU;AAAA,MACV,aAAa;AAAA,MACb,gBAAgB;AAAA,QACd,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAED,gCAAU,MAAM;AACd,UAAI,OAAO,QAAQ;AACjB,gBAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,yBAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;AAEtB,WACE,oCAAC,uBAAS,GAAK,qCAA6B,SAA0B,OAAO,gBAC3E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEJ,GAAI;AAAA,QACL,UACE,iBACI,EAAE,SAAS,OAAU,IACrB,gBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,QACX,IACA,qBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,YACP,GAAK,qCAA6B;AAAA,YAClC,OAAO;AAAA,UACT;AAAA,QACF,IACA;AAAA;AAAA,MAGT;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AAuBA,IAAO,iCAAQ;",
6
6
  "names": []
7
7
  }
@@ -37,6 +37,7 @@ var import_antd = require("antd");
37
37
  var import_classnames = __toESM(require("classnames"));
38
38
  var import_icons = require("@ant-design/icons");
39
39
  var import_useRefFunction = __toESM(require("../../hooks/useRefFunction"));
40
+ var import_ConfigProvider = __toESM(require("../ConfigProvider"));
40
41
  var import_style = __toESM(require("./style"));
41
42
  var FloatDrawer = (props) => {
42
43
  const {
@@ -61,8 +62,8 @@ var FloatDrawer = (props) => {
61
62
  onResize,
62
63
  onClick
63
64
  } = props;
64
- const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
65
- const prefixCls = getPrefixCls("easy-float-drawer", prefixClsInProps);
65
+ const { getPrefixCls } = (0, import_react.useContext)(import_ConfigProvider.default.ConfigContext);
66
+ const prefixCls = getPrefixCls("float-drawer", prefixClsInProps);
66
67
  const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
67
68
  const [drawerRef, setDrawerRef] = (0, import_react.useState)(null);
68
69
  const [size, setSize] = (0, import_react.useState)(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/FloatDrawer/index.tsx"],
4
- "sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CardProps } from 'antd';\nimport { Card, ConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';\nimport useRefFunction from '../../hooks/useRefFunction';\nimport useStyle from './style';\n\nexport interface FloatDrawerProps {\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Whether the drawer is open\n * - **CN:** 抽屉是否打开\n */\n open?: boolean;\n /**\n * - **EN:** Position of the drawer\n * - **CN:** 抽屉的位置\n *\n * @default 'right'\n */\n position?: 'left' | 'right' | 'top' | 'bottom';\n /**\n * - **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the\n * width, otherwise it is the height. If not set, the drawer will adapt to the content size.\n * - **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧,则为宽度,否则为高度。不设置时,抽屉会根据内容自适应大小。\n */\n defaultSize?: number;\n /**\n * - **EN:** Minimum size of the drawer\n * - **CN:** 抽屉的最小宽度\n *\n * @default 0\n */\n minSize?: number;\n /**\n * - **EN:** Maximum size of the drawer\n * - **CN:** 抽屉的最大宽度\n *\n * @default Infinity\n */\n maxSize?: number;\n /**\n * - **EN:** Offset of the drawer from the edge of the screen, supports all CSS length units,\n * default is `0`.\n *\n * > The drawer will be hidden outside the parent container's edge, but since the parent container\n * > may have padding or border, the drawer may not be completely hidden. You can adjust the\n * > `edgeOffset` to ensure the drawer is completely hidden outside the parent container.\n *\n * - **CN:** 抽屉距离屏幕边缘的偏移量,支持所有的CSS长度单位, 默认`0`。\n *\n * > 抽屉会隐藏在父容器的外边缘, 但由于父容器可能有padding或border, 导致抽屉不能完全隐藏, 因此可以通过设置 `edgeOffset` 来调整抽屉的偏移量,\n * > 以确保抽屉完全隐藏在父容器之外。\n *\n * @default 0\n */\n edgeOffset?: CSSProperties['width'];\n /**\n * - **EN:** Whether to show the toggle button, default is `true`.\n * - **CN:** 是否显示展开/收起按钮,默认`true`。\n *\n * @default true\n */\n showToggle?: boolean;\n /**\n * - **EN:** Whether the drawer is resizable, default is `true`.\n * - **CN:** 抽屉是否可调整大小, 默认`true`。\n *\n * @default true\n */\n resizable?: boolean;\n /**\n * - **EN:** Whether to destroy the drawer content when closed, default is `false`.\n * - **CN:** 抽屉关闭时是否销毁内容,默认`false`。\n *\n * @default false\n */\n destroyOnClose?: boolean;\n /**\n * - **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be\n * cached.\n * - **CN:** 指定一个localStorage缓存键,用于记忆抽屉宽度。如果不设置,则不使用缓存。\n */\n cacheKey?: string;\n /**\n * - **EN:** Custom class name for the root element\n * - **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom class names for specific elements\n * - **CN:** 特定元素的自定义类名\n */\n classNames?: {\n /**\n * - **EN:** Class name for the drawer element\n * - **CN:** 抽屉元素的类名\n */\n drawer?: string;\n /**\n * - **EN:** Class name for the expand handle\n * - **CN:** 展开手柄的类名\n */\n toggle?: string;\n /**\n * - **EN:** Class name for the resize handle\n * - **CN:** 调整大小手柄的类名\n */\n resizeHandle?: string;\n /**\n * - **EN:** Class name for the handle icon\n * - **CN:** 手柄图标的类名\n */\n handleIcon?: string;\n /**\n * - **EN:** Class name for the content area\n * - **CN:** 内容区域的类名\n */\n content?: string;\n /**\n * - **EN:** Class name for the card element\n * - **CN:** 卡片元素的类名\n */\n card?: string;\n };\n /**\n * - **EN:** Custom styles for the root element\n * - **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Custom styles for specific elements\n * - **CN:** 特定元素的自定义样式\n */\n styles?: {\n /**\n * - **EN:** Styles for the drawer element\n * - **CN:** 抽屉元素的样式\n */\n drawer?: CSSProperties;\n /**\n * - **EN:** Styles for the expand handle\n * - **CN:** 展开手柄的样式\n */\n toggle?: CSSProperties;\n /**\n * - **EN:** Styles for the resize handle\n * - **CN:** 调整大小手柄的样式\n */\n resizeHandle?: CSSProperties;\n /**\n * - **EN:** Styles for the handle icon\n * - **CN:** 手柄图标的样式\n */\n handleIcon?: CSSProperties;\n /**\n * - **EN:** Styles for the content area\n * - **CN:** 内容区域的样式\n */\n content?: CSSProperties;\n /**\n * - **EN:** Styles for the card element\n * - **CN:** 卡片元素的样式\n */\n card?: CSSProperties;\n };\n /**\n * - **EN:** Custom properties for the card element\n * - **CN:** 卡片元素的自定义属性\n */\n cardProps?: Omit<CardProps, 'children'>;\n /**\n * - **EN:** Content to be rendered inside the drawer\n * - **CN:** 抽屉内容\n */\n children?: ReactNode;\n /**\n * - **EN:** Callback function when the open state changes\n * - **CN:** 打开状态变化时的回调函数\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * - **EN:** Callback function when the drawer is resized\n * - **CN:** 抽屉调整大小时的回调函数\n */\n onResize?: (size: number) => void;\n /**\n * - **EN:** Event handler for click events on the drawer container and its internal elements\n * - **CN:** 点击抽屉容器及内部元素时的事件\n */\n onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * - **EN:** FloatDrawer component for creating a draggable, resizable drawer\n * - **CN:** FloatDrawer组件,用于创建可拖动、可调整大小的抽屉\n */\nconst FloatDrawer: FC<FloatDrawerProps> = (props) => {\n const {\n prefixCls: prefixClsInProps,\n open,\n position = 'right',\n cardProps,\n children,\n className,\n classNames: classNamesInProps,\n style,\n styles,\n cacheKey,\n defaultSize,\n minSize = 0,\n maxSize = +Infinity,\n edgeOffset,\n showToggle = true,\n resizable = true,\n destroyOnClose = false,\n onOpenChange,\n onResize,\n onClick,\n } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-float-drawer', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n const [size, setSize] = useState(\n cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize\n );\n const sizeMap = useMemo(() => {\n const type = position === 'left' || position === 'right' ? 'width' : 'height';\n return {\n [type]: size,\n };\n }, [position, size]);\n const [isOpen, setIsOpen] = useState<boolean>();\n const [isDragging, setIsDragging] = useState(false);\n const dragStartPos = useRef<number>(0);\n const dragStartSize = useRef<number>(size);\n const classString = classNames(\n prefixCls,\n className,\n {\n [`${prefixCls}-open`]: isOpen,\n [`${prefixCls}-closed`]: !isOpen,\n [`${prefixCls}-${position}`]: position,\n },\n hashId,\n cssVarCls\n );\n const closeIcon = useMemo(() => {\n return position === 'left' ? (\n <RightOutlined />\n ) : position === 'top' ? (\n <DownOutlined />\n ) : position === 'bottom' ? (\n <UpOutlined />\n ) : (\n <LeftOutlined />\n );\n }, [position]);\n const openIcon = useMemo(() => {\n return position === 'left' ? (\n <LeftOutlined />\n ) : position === 'top' ? (\n <UpOutlined />\n ) : position === 'bottom' ? (\n <DownOutlined />\n ) : (\n <RightOutlined />\n );\n }, [position]);\n\n // Handle drawer visibility\n const toggleDrawer = () => {\n setIsOpen(!isOpen);\n onOpenChange?.(!isOpen);\n };\n\n // Handle resize events\n const handleResizeStart = useRefFunction((e: React.MouseEvent) => {\n setIsDragging(true);\n if (position === 'top' || position === 'bottom') {\n dragStartPos.current = e.clientY;\n } else {\n dragStartPos.current = e.clientX;\n }\n dragStartSize.current = size;\n e.preventDefault();\n });\n const handleResize = useRefFunction((e: MouseEvent) => {\n if (isDragging && dragStartSize.current) {\n let newSize: number;\n if (position === 'left') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientX);\n } else if (position === 'top') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientY);\n } else if (position === 'bottom') {\n newSize = dragStartSize.current - (e.clientY - dragStartPos.current);\n } else {\n newSize = dragStartSize.current - (e.clientX - dragStartPos.current);\n }\n if (newSize >= minSize && newSize <= maxSize) {\n setSize(newSize);\n if (cacheKey) {\n localStorage.setItem(cacheKey, String(newSize));\n }\n onResize?.(newSize);\n }\n }\n });\n const handleResizeEnd = useRefFunction(() => {\n setIsDragging(false);\n });\n\n // Monitor drawer ref, calculate size if not set\n // This is useful for initial rendering when size is not provided\n useEffect(() => {\n if (drawerRef && size === undefined) {\n const rect = drawerRef.getBoundingClientRect();\n setSize(position === 'left' || position === 'right' ? rect.width : rect.height);\n }\n }, [drawerRef, position, size]);\n\n // Controlled open state\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n // Handle global events\n useEffect(() => {\n if (isDragging) {\n window.addEventListener('mousemove', handleResize);\n window.addEventListener('mouseup', handleResizeEnd);\n } else {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n }\n return () => {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n };\n }, [isDragging]);\n\n return wrapCSSVar(\n <div\n className={classString}\n style={{\n // @ts-expect-error: because of dynamic CSS variables\n '--edge-offset': typeof edgeOffset === 'number' ? `${edgeOffset}px` : edgeOffset,\n ...style,\n }}\n onClick={onClick}\n >\n <div\n ref={setDrawerRef}\n className={classNames(`${prefixCls}-drawer`, classNamesInProps?.drawer)}\n style={{ ...sizeMap, ...styles?.drawer }}\n >\n {resizable && (\n <div\n className={classNames(\n `${prefixCls}-resize-handle`,\n isDragging && `${prefixCls}-resize-handle-dragging`,\n classNamesInProps?.resizeHandle\n )}\n style={styles?.resizeHandle}\n onMouseDown={handleResizeStart}\n />\n )}\n <div className={classNames(`${prefixCls}-content`, classNamesInProps?.content)} style={styles?.content}>\n <Card\n bordered={false}\n variant=\"borderless\"\n className={classNames(`${prefixCls}-card`, classNamesInProps?.card)}\n style={styles?.card}\n {...cardProps}\n >\n {!destroyOnClose || isOpen ? children : null}\n </Card>\n </div>\n {showToggle && (\n <div\n className={classNames(`${prefixCls}-toggle`, classNamesInProps?.toggle)}\n style={styles?.toggle}\n onClick={toggleDrawer}\n >\n <div\n className={classNames(`${prefixCls}-handle-icon`, classNamesInProps?.handleIcon)}\n style={styles?.handleIcon}\n >\n {isOpen ? openIcon : closeIcon}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default FloatDrawer;\n"],
5
- "mappings": "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",
6
- "names": ["useStyle", "classNames", "useRefFunction"]
4
+ "sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CardProps } from 'antd';\nimport { Card } from 'antd';\nimport classNames from 'classnames';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';\nimport useRefFunction from '../../hooks/useRefFunction';\nimport ConfigProvider from '../ConfigProvider';\nimport useStyle from './style';\n\nexport interface FloatDrawerProps {\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Whether the drawer is open\n * - **CN:** 抽屉是否打开\n */\n open?: boolean;\n /**\n * - **EN:** Position of the drawer\n * - **CN:** 抽屉的位置\n *\n * @default 'right'\n */\n position?: 'left' | 'right' | 'top' | 'bottom';\n /**\n * - **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the\n * width, otherwise it is the height. If not set, the drawer will adapt to the content size.\n * - **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧,则为宽度,否则为高度。不设置时,抽屉会根据内容自适应大小。\n */\n defaultSize?: number;\n /**\n * - **EN:** Minimum size of the drawer\n * - **CN:** 抽屉的最小宽度\n *\n * @default 0\n */\n minSize?: number;\n /**\n * - **EN:** Maximum size of the drawer\n * - **CN:** 抽屉的最大宽度\n *\n * @default Infinity\n */\n maxSize?: number;\n /**\n * - **EN:** Offset of the drawer from the edge of the screen, supports all CSS length units,\n * default is `0`.\n *\n * > The drawer will be hidden outside the parent container's edge, but since the parent container\n * > may have padding or border, the drawer may not be completely hidden. You can adjust the\n * > `edgeOffset` to ensure the drawer is completely hidden outside the parent container.\n *\n * - **CN:** 抽屉距离屏幕边缘的偏移量,支持所有的CSS长度单位, 默认`0`。\n *\n * > 抽屉会隐藏在父容器的外边缘, 但由于父容器可能有padding或border, 导致抽屉不能完全隐藏, 因此可以通过设置 `edgeOffset` 来调整抽屉的偏移量,\n * > 以确保抽屉完全隐藏在父容器之外。\n *\n * @default 0\n */\n edgeOffset?: CSSProperties['width'];\n /**\n * - **EN:** Whether to show the toggle button, default is `true`.\n * - **CN:** 是否显示展开/收起按钮,默认`true`。\n *\n * @default true\n */\n showToggle?: boolean;\n /**\n * - **EN:** Whether the drawer is resizable, default is `true`.\n * - **CN:** 抽屉是否可调整大小, 默认`true`。\n *\n * @default true\n */\n resizable?: boolean;\n /**\n * - **EN:** Whether to destroy the drawer content when closed, default is `false`.\n * - **CN:** 抽屉关闭时是否销毁内容,默认`false`。\n *\n * @default false\n */\n destroyOnClose?: boolean;\n /**\n * - **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be\n * cached.\n * - **CN:** 指定一个localStorage缓存键,用于记忆抽屉宽度。如果不设置,则不使用缓存。\n */\n cacheKey?: string;\n /**\n * - **EN:** Custom class name for the root element\n * - **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom class names for specific elements\n * - **CN:** 特定元素的自定义类名\n */\n classNames?: {\n /**\n * - **EN:** Class name for the drawer element\n * - **CN:** 抽屉元素的类名\n */\n drawer?: string;\n /**\n * - **EN:** Class name for the expand handle\n * - **CN:** 展开手柄的类名\n */\n toggle?: string;\n /**\n * - **EN:** Class name for the resize handle\n * - **CN:** 调整大小手柄的类名\n */\n resizeHandle?: string;\n /**\n * - **EN:** Class name for the handle icon\n * - **CN:** 手柄图标的类名\n */\n handleIcon?: string;\n /**\n * - **EN:** Class name for the content area\n * - **CN:** 内容区域的类名\n */\n content?: string;\n /**\n * - **EN:** Class name for the card element\n * - **CN:** 卡片元素的类名\n */\n card?: string;\n };\n /**\n * - **EN:** Custom styles for the root element\n * - **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Custom styles for specific elements\n * - **CN:** 特定元素的自定义样式\n */\n styles?: {\n /**\n * - **EN:** Styles for the drawer element\n * - **CN:** 抽屉元素的样式\n */\n drawer?: CSSProperties;\n /**\n * - **EN:** Styles for the expand handle\n * - **CN:** 展开手柄的样式\n */\n toggle?: CSSProperties;\n /**\n * - **EN:** Styles for the resize handle\n * - **CN:** 调整大小手柄的样式\n */\n resizeHandle?: CSSProperties;\n /**\n * - **EN:** Styles for the handle icon\n * - **CN:** 手柄图标的样式\n */\n handleIcon?: CSSProperties;\n /**\n * - **EN:** Styles for the content area\n * - **CN:** 内容区域的样式\n */\n content?: CSSProperties;\n /**\n * - **EN:** Styles for the card element\n * - **CN:** 卡片元素的样式\n */\n card?: CSSProperties;\n };\n /**\n * - **EN:** Custom properties for the card element\n * - **CN:** 卡片元素的自定义属性\n */\n cardProps?: Omit<CardProps, 'children'>;\n /**\n * - **EN:** Content to be rendered inside the drawer\n * - **CN:** 抽屉内容\n */\n children?: ReactNode;\n /**\n * - **EN:** Callback function when the open state changes\n * - **CN:** 打开状态变化时的回调函数\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * - **EN:** Callback function when the drawer is resized\n * - **CN:** 抽屉调整大小时的回调函数\n */\n onResize?: (size: number) => void;\n /**\n * - **EN:** Event handler for click events on the drawer container and its internal elements\n * - **CN:** 点击抽屉容器及内部元素时的事件\n */\n onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * - **EN:** FloatDrawer component for creating a draggable, resizable drawer\n * - **CN:** FloatDrawer组件,用于创建可拖动、可调整大小的抽屉\n */\nconst FloatDrawer: FC<FloatDrawerProps> = (props) => {\n const {\n prefixCls: prefixClsInProps,\n open,\n position = 'right',\n cardProps,\n children,\n className,\n classNames: classNamesInProps,\n style,\n styles,\n cacheKey,\n defaultSize,\n minSize = 0,\n maxSize = +Infinity,\n edgeOffset,\n showToggle = true,\n resizable = true,\n destroyOnClose = false,\n onOpenChange,\n onResize,\n onClick,\n } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('float-drawer', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n const [size, setSize] = useState(\n cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize\n );\n const sizeMap = useMemo(() => {\n const type = position === 'left' || position === 'right' ? 'width' : 'height';\n return {\n [type]: size,\n };\n }, [position, size]);\n const [isOpen, setIsOpen] = useState<boolean>();\n const [isDragging, setIsDragging] = useState(false);\n const dragStartPos = useRef<number>(0);\n const dragStartSize = useRef<number>(size);\n const classString = classNames(\n prefixCls,\n className,\n {\n [`${prefixCls}-open`]: isOpen,\n [`${prefixCls}-closed`]: !isOpen,\n [`${prefixCls}-${position}`]: position,\n },\n hashId,\n cssVarCls\n );\n const closeIcon = useMemo(() => {\n return position === 'left' ? (\n <RightOutlined />\n ) : position === 'top' ? (\n <DownOutlined />\n ) : position === 'bottom' ? (\n <UpOutlined />\n ) : (\n <LeftOutlined />\n );\n }, [position]);\n const openIcon = useMemo(() => {\n return position === 'left' ? (\n <LeftOutlined />\n ) : position === 'top' ? (\n <UpOutlined />\n ) : position === 'bottom' ? (\n <DownOutlined />\n ) : (\n <RightOutlined />\n );\n }, [position]);\n\n // Handle drawer visibility\n const toggleDrawer = () => {\n setIsOpen(!isOpen);\n onOpenChange?.(!isOpen);\n };\n\n // Handle resize events\n const handleResizeStart = useRefFunction((e: React.MouseEvent) => {\n setIsDragging(true);\n if (position === 'top' || position === 'bottom') {\n dragStartPos.current = e.clientY;\n } else {\n dragStartPos.current = e.clientX;\n }\n dragStartSize.current = size;\n e.preventDefault();\n });\n const handleResize = useRefFunction((e: MouseEvent) => {\n if (isDragging && dragStartSize.current) {\n let newSize: number;\n if (position === 'left') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientX);\n } else if (position === 'top') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientY);\n } else if (position === 'bottom') {\n newSize = dragStartSize.current - (e.clientY - dragStartPos.current);\n } else {\n newSize = dragStartSize.current - (e.clientX - dragStartPos.current);\n }\n if (newSize >= minSize && newSize <= maxSize) {\n setSize(newSize);\n if (cacheKey) {\n localStorage.setItem(cacheKey, String(newSize));\n }\n onResize?.(newSize);\n }\n }\n });\n const handleResizeEnd = useRefFunction(() => {\n setIsDragging(false);\n });\n\n // Monitor drawer ref, calculate size if not set\n // This is useful for initial rendering when size is not provided\n useEffect(() => {\n if (drawerRef && size === undefined) {\n const rect = drawerRef.getBoundingClientRect();\n setSize(position === 'left' || position === 'right' ? rect.width : rect.height);\n }\n }, [drawerRef, position, size]);\n\n // Controlled open state\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n // Handle global events\n useEffect(() => {\n if (isDragging) {\n window.addEventListener('mousemove', handleResize);\n window.addEventListener('mouseup', handleResizeEnd);\n } else {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n }\n return () => {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n };\n }, [isDragging]);\n\n return wrapCSSVar(\n <div\n className={classString}\n style={{\n // @ts-expect-error: because of dynamic CSS variables\n '--edge-offset': typeof edgeOffset === 'number' ? `${edgeOffset}px` : edgeOffset,\n ...style,\n }}\n onClick={onClick}\n >\n <div\n ref={setDrawerRef}\n className={classNames(`${prefixCls}-drawer`, classNamesInProps?.drawer)}\n style={{ ...sizeMap, ...styles?.drawer }}\n >\n {resizable && (\n <div\n className={classNames(\n `${prefixCls}-resize-handle`,\n isDragging && `${prefixCls}-resize-handle-dragging`,\n classNamesInProps?.resizeHandle\n )}\n style={styles?.resizeHandle}\n onMouseDown={handleResizeStart}\n />\n )}\n <div className={classNames(`${prefixCls}-content`, classNamesInProps?.content)} style={styles?.content}>\n <Card\n bordered={false}\n variant=\"borderless\"\n className={classNames(`${prefixCls}-card`, classNamesInProps?.card)}\n style={styles?.card}\n {...cardProps}\n >\n {!destroyOnClose || isOpen ? children : null}\n </Card>\n </div>\n {showToggle && (\n <div\n className={classNames(`${prefixCls}-toggle`, classNamesInProps?.toggle)}\n style={styles?.toggle}\n onClick={toggleDrawer}\n >\n <div\n className={classNames(`${prefixCls}-handle-icon`, classNamesInProps?.handleIcon)}\n style={styles?.handleIcon}\n >\n {isOpen ? openIcon : closeIcon}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default FloatDrawer;\n"],
5
+ "mappings": "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",
6
+ "names": ["ConfigProvider", "useStyle", "classNames", "useRefFunction"]
7
7
  }
@@ -243,5 +243,5 @@ var genStyle = (token) => {
243
243
  }
244
244
  };
245
245
  };
246
- var style_default = (0, import_genStyleUtils.genStyleHooks)("EasyFloatDrawer", genStyle);
246
+ var style_default = (0, import_genStyleUtils.genStyleHooks)("FloatDrawer", genStyle);
247
247
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/FloatDrawer/style/index.ts"],
4
- "sourcesContent": ["import type { AliasToken, GenerateStyle } from 'antd/es/theme/interface';\nimport { genStyleHooks } from 'antd/es/theme/util/genStyleUtils';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\nimport { FastColor } from '@ant-design/fast-color';\nimport { getColorLuminance } from '../../../utils';\n\ntype REFloatDrawerToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<REFloatDrawerToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n position: 'absolute',\n display: 'flex',\n overflow: 'visible',\n ['&-left']: {\n left: 0,\n top: 0,\n bottom: 0,\n },\n ['&-right']: {\n right: 0,\n top: 0,\n bottom: 0,\n },\n ['&-top']: {\n left: 0,\n right: 0,\n top: 0,\n },\n ['&-bottom']: {\n left: 0,\n right: 0,\n bottom: 0,\n },\n\n [`&${componentCls}-open`]: {\n // visibility: 'visible',\n },\n [`&${componentCls}-closed`]: {\n pointerEvents: 'none',\n },\n [`${componentCls}-drawer`]: {\n transition: 'transform 0.3s ease-in-out',\n overflow: 'visible',\n },\n [`&${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-right ${componentCls}-drawer`]: {\n height: '100%',\n },\n [`&${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-bottom ${componentCls}-drawer`]: {\n width: '100%',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-right ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translate(0, 0)',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer`]: {\n // On the left side: the shadow casts to the right\n boxShadow: `2px 0 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 1.5px 0 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-right ${componentCls}-drawer`]: {\n // On the right side: the shadow casts to the left\n boxShadow: `-2px 0 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, -1.5px 0 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-top ${componentCls}-drawer`]: {\n // On the top side: the shadow casts downward\n boxShadow: `0 2px 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 0 1.5px 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n // On the bottom side: the shadow casts upward\n boxShadow: `0 -2px 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 0 -1.5px 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-closed${componentCls}-left ${componentCls}-drawer`]: {\n transform: 'translateX(calc(-100% - var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-right ${componentCls}-drawer`]: {\n transform: 'translateX(calc(100% + var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-top ${componentCls}-drawer`]: {\n transform: 'translateY(calc(-100% - var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translateY(calc(100% + var(--edge-offset, 0px)))',\n },\n [`${componentCls}-toggle`]: {\n position: 'absolute',\n zIndex: 2,\n cursor: 'pointer',\n color: token.colorTextTertiary,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#fafafa' : '#141414',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n '&:hover': {\n color: token.colorText,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#f0f0f0' : '#1a1a1a',\n },\n },\n [`&${componentCls}-left ${componentCls}-toggle,\n &${componentCls}-right ${componentCls}-toggle`]: {\n top: '50%',\n width: 24,\n height: 60,\n },\n [`&${componentCls}-top ${componentCls}-toggle,\n &${componentCls}-bottom ${componentCls}-toggle`]: {\n left: '50%',\n width: 60,\n height: 24,\n },\n [`&${componentCls}-left ${componentCls}-toggle`]: {\n right: 0,\n transform: 'translate(100%, -50%)',\n borderRadius: '0 8px 8px 0',\n // On the left side: the shadow casts to the right and upward/downward in half size\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-right ${componentCls}-toggle`]: {\n left: 0,\n transform: 'translate(-100%, -50%)',\n borderRadius: '8px 0 0 8px',\n // On the right side: the shadow casts to the left and upward/downward in half size\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-top ${componentCls}-toggle`]: {\n bottom: 0,\n transform: 'translate(-50%, 100%)',\n borderRadius: '0 0 8px 8px',\n // On the top side: the shadow casts downward and left/right in half size\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px 4px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px 4px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-bottom ${componentCls}-toggle`]: {\n top: 0,\n transform: 'translate(-50%, -100%)',\n borderRadius: '8px 8px 0 0',\n // On the bottom side: the shadow casts upward and left/right in half size\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -4px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -4px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`${componentCls}-handle-icon`]: {\n userSelect: 'none',\n lineHeight: 0,\n },\n [`${componentCls}-resize-handle`]: {\n position: 'absolute',\n border: `1px solid transparent`,\n zIndex: 1,\n backgroundColor: token.colorBgTextHover,\n '&:hover': {\n backgroundColor: token.colorBgTextActive,\n },\n '&&-dragging': {\n backgroundColor: token.colorBgTextActive,\n },\n },\n [`&${componentCls}-left ${componentCls}-resize-handle`]: {\n right: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-right ${componentCls}-resize-handle`]: {\n left: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-top ${componentCls}-resize-handle`]: {\n bottom: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`&${componentCls}-bottom ${componentCls}-resize-handle`]: {\n top: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`${componentCls}-content`]: {\n height: '100%',\n [`${componentCls}-card`]: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n\n [`${token.antCls}-card-body`]: {\n flex: 1,\n minHeight: 0,\n overflow: 'auto',\n },\n },\n },\n },\n };\n};\n\nexport default genStyleHooks('EasyFloatDrawer' as never, genStyle);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import type { AliasToken, GenerateStyle } from 'antd/es/theme/interface';\nimport { genStyleHooks } from 'antd/es/theme/util/genStyleUtils';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\nimport { FastColor } from '@ant-design/fast-color';\nimport { getColorLuminance } from '../../../utils';\n\ntype FloatDrawerToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<FloatDrawerToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n position: 'absolute',\n display: 'flex',\n overflow: 'visible',\n ['&-left']: {\n left: 0,\n top: 0,\n bottom: 0,\n },\n ['&-right']: {\n right: 0,\n top: 0,\n bottom: 0,\n },\n ['&-top']: {\n left: 0,\n right: 0,\n top: 0,\n },\n ['&-bottom']: {\n left: 0,\n right: 0,\n bottom: 0,\n },\n\n [`&${componentCls}-open`]: {\n // visibility: 'visible',\n },\n [`&${componentCls}-closed`]: {\n pointerEvents: 'none',\n },\n [`${componentCls}-drawer`]: {\n transition: 'transform 0.3s ease-in-out',\n overflow: 'visible',\n },\n [`&${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-right ${componentCls}-drawer`]: {\n height: '100%',\n },\n [`&${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-bottom ${componentCls}-drawer`]: {\n width: '100%',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-right ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translate(0, 0)',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer`]: {\n // On the left side: the shadow casts to the right\n boxShadow: `2px 0 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 1.5px 0 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-right ${componentCls}-drawer`]: {\n // On the right side: the shadow casts to the left\n boxShadow: `-2px 0 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, -1.5px 0 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-top ${componentCls}-drawer`]: {\n // On the top side: the shadow casts downward\n boxShadow: `0 2px 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 0 1.5px 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n // On the bottom side: the shadow casts upward\n boxShadow: `0 -2px 12px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, 0 -1.5px 6px ${new FastColor(token.colorTextBase).setA(0.02).toRgbString()}`,\n },\n [`&${componentCls}-closed${componentCls}-left ${componentCls}-drawer`]: {\n transform: 'translateX(calc(-100% - var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-right ${componentCls}-drawer`]: {\n transform: 'translateX(calc(100% + var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-top ${componentCls}-drawer`]: {\n transform: 'translateY(calc(-100% - var(--edge-offset, 0px)))',\n },\n [`&${componentCls}-closed${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translateY(calc(100% + var(--edge-offset, 0px)))',\n },\n [`${componentCls}-toggle`]: {\n position: 'absolute',\n zIndex: 2,\n cursor: 'pointer',\n color: token.colorTextTertiary,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#fafafa' : '#141414',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n '&:hover': {\n color: token.colorText,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#f0f0f0' : '#1a1a1a',\n },\n },\n [`&${componentCls}-left ${componentCls}-toggle,\n &${componentCls}-right ${componentCls}-toggle`]: {\n top: '50%',\n width: 24,\n height: 60,\n },\n [`&${componentCls}-top ${componentCls}-toggle,\n &${componentCls}-bottom ${componentCls}-toggle`]: {\n left: '50%',\n width: 60,\n height: 24,\n },\n [`&${componentCls}-left ${componentCls}-toggle`]: {\n right: 0,\n transform: 'translate(100%, -50%)',\n borderRadius: '0 8px 8px 0',\n // On the left side: the shadow casts to the right and upward/downward in half size\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-right ${componentCls}-toggle`]: {\n left: 0,\n transform: 'translate(-100%, -50%)',\n borderRadius: '8px 0 0 8px',\n // On the right side: the shadow casts to the left and upward/downward in half size\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `0px 2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -2px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -4px 0px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-top ${componentCls}-toggle`]: {\n bottom: 0,\n transform: 'translate(-50%, 100%)',\n borderRadius: '0 0 8px 8px',\n // On the top side: the shadow casts downward and left/right in half size\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px 4px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px 4px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`&${componentCls}-bottom ${componentCls}-toggle`]: {\n top: 0,\n transform: 'translate(-50%, -100%)',\n borderRadius: '8px 8px 0 0',\n // On the bottom side: the shadow casts upward and left/right in half size\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.08).toRgbString()}, \n 0px -4px 8px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}`,\n '&:hover': {\n boxShadow: `2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n -2px 0px 4px ${new FastColor(token.colorTextBase).setA(0.1).toRgbString()}, \n 0px -4px 8px ${new FastColor(token.colorTextBase).setA(0.12).toRgbString()}`,\n },\n },\n [`${componentCls}-handle-icon`]: {\n userSelect: 'none',\n lineHeight: 0,\n },\n [`${componentCls}-resize-handle`]: {\n position: 'absolute',\n border: `1px solid transparent`,\n zIndex: 1,\n backgroundColor: token.colorBgTextHover,\n '&:hover': {\n backgroundColor: token.colorBgTextActive,\n },\n '&&-dragging': {\n backgroundColor: token.colorBgTextActive,\n },\n },\n [`&${componentCls}-left ${componentCls}-resize-handle`]: {\n right: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-right ${componentCls}-resize-handle`]: {\n left: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-top ${componentCls}-resize-handle`]: {\n bottom: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`&${componentCls}-bottom ${componentCls}-resize-handle`]: {\n top: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`${componentCls}-content`]: {\n height: '100%',\n [`${componentCls}-card`]: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n\n [`${token.antCls}-card-body`]: {\n flex: 1,\n minHeight: 0,\n overflow: 'auto',\n },\n },\n },\n },\n };\n};\n\nexport default genStyleHooks('FloatDrawer' as never, genStyle);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,42 @@
1
+ import { type CSSProperties, type FC } from 'react';
2
+ import type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';
3
+ /**
4
+ * - **EN:** Props for the Iconfont component
5
+ * - **CN:** Iconfont 组件的props
6
+ */
7
+ export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size' | 'spin' | 'rotate'> {
8
+ /**
9
+ * - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`
10
+ * - **CN:** 图标名称。在 iconfont 中找到某个图标,点击`复制代码`
11
+ */
12
+ type: T;
13
+ /**
14
+ * - **EN:** Whether the icon should spin continuously, can be used to indicate loading
15
+ * - **CN:** 图标是否持续旋转,可以实现 loading 的效果
16
+ *
17
+ * @default false
18
+ */
19
+ spin?: boolean;
20
+ /**
21
+ * - **EN:** Rotate the icon by a fixed angle clockwise
22
+ * - **CN:** 图标顺时针旋转一个固定角度
23
+ *
24
+ * @default 0
25
+ */
26
+ rotate?: number;
27
+ /**
28
+ * - **EN:** Icon size, an alias for `style.fontSize`
29
+ * - **CN:** 图标尺寸,是 `style.fontSize` 的别名
30
+ */
31
+ size?: CSSProperties['fontSize'];
32
+ }
33
+ /**
34
+ * - **EN:** Create an Iconfont component with a specified iconfont script URL.
35
+ * - **CN:** 创建一个Iconfont组件,指定iconfont的脚本地址
36
+ *
37
+ * @param scriptUrl - Path to the iconfont script | 字体图标的路径
38
+ */
39
+ export declare const createIconfont: <T extends string = string>(scriptUrl: string, options?: {
40
+ /** Icon name prefix | 图标名称前缀 */
41
+ iconPrefix?: string;
42
+ }) => FC<IconfontProps<T>>;