@tiny-codes/react-easy 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/es/components/OverflowTags/index.js +1 -1
- package/es/components/OverflowTags/index.js.map +1 -1
- package/es/components/OverflowTags/style/index.js +1 -0
- package/es/components/OverflowTags/style/index.js.map +1 -1
- package/lib/components/OverflowTags/index.js +1 -1
- package/lib/components/OverflowTags/index.js.map +2 -2
- package/lib/components/OverflowTags/style/index.js +1 -0
- package/lib/components/OverflowTags/style/index.js.map +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -38,7 +38,7 @@ var OverflowTags = function OverflowTags(props) {
|
|
|
38
38
|
token = _theme$useToken.token;
|
|
39
39
|
var _useContext = useContext(ConfigProvider.ConfigContext),
|
|
40
40
|
getPrefixCls = _useContext.getPrefixCls;
|
|
41
|
-
var prefixCls = getPrefixCls('re-
|
|
41
|
+
var prefixCls = getPrefixCls('re-overflow-tags');
|
|
42
42
|
var _useStyle = useStyle(prefixCls),
|
|
43
43
|
_useStyle2 = _slicedToArray(_useStyle, 3),
|
|
44
44
|
wrapCSSVar = _useStyle2[0],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useContext","useMemo","ConfigProvider","Dropdown","Tag","theme","PresetColors","classNames","Overflow","random","useStyle","jsx","_jsx","jsxs","_jsxs","OverflowTags","props","_props$tags","tags","randomColors","getTagNameInProps","getTagName","getTagKey","renderTagInProps","renderTag","tagProps","ellipsisTagProps","className","restProps","_objectWithoutProperties","_excluded","_theme$useToken","useToken","token","_useContext","ConfigContext","getPrefixCls","prefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","colors","filter","c","includes","map","color","concat","tag","name","item","_item$color","customProps","_objectSpread","length","children","data","maxCount","renderItem","renderRest","omittedItems","menu","items","_tag$id","type","key","id","label"],"sources":["../../../src/components/OverflowTags/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { TagProps } from 'antd';\nimport { ConfigProvider, Dropdown, Tag, theme } from 'antd';\nimport { PresetColors } from 'antd/es/theme/internal';\nimport classNames from 'classnames';\nimport type { OverflowProps } from 'rc-overflow';\nimport Overflow from 'rc-overflow';\nimport { random } from '../../utils/math';\nimport useStyle from './style';\n\nexport interface OverflowTagsProps<T extends Record<string, unknown> = Record<string, unknown>>\n extends OverflowProps<T> {\n /**\n * **CN**: 标签集合的数据\n *\n * **EN**: Data collection of tags\n */\n tags: T[] | undefined;\n /**\n * **EN**: Function to get the tag name, default is `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n /**\n * **EN**: Function to render the tag, returns `TagProps`\n *\n * **CN**: 渲染标签的函数，返回`TagProps`\n */\n renderTag?: (tag: T, tags: T[]) => TagProps;\n /**\n * **EN**: Custom properties for the tag component, if `renderTag` is also specified, the latter\n * will override the former\n *\n * **CN**: 自定义标签的组件属性，如果同时指定了`renderTag`，则后者会覆盖前者\n */\n tagProps?: TagProps;\n /**\n * **EN**: When the number of tags exceeds the maximum display count, an ellipsis tag will be\n * shown. This property is used to set the style of the ellipsis tag.\n *\n * **CN**: 当标签数量超过最大显示数量时，会显示省略号的标签，此属性用于设置省略号标签的样式\n */\n ellipsisTagProps?: TagProps;\n /**\n * **EN**: Whether to use random colors, default is `false`. Note that the tag object can also\n * contain a `color` property to specify the color, and the latter takes precedence.\n *\n * **CN**: 是否使用随机颜色，默认`false`。注意，tag对象还可以包含`color`属性来指定颜色，而且后者优先级更高。\n */\n randomColors?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T extends Record<string, any>>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n renderTag: renderTagInProps,\n tagProps,\n ellipsisTagProps,\n className,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('re-
|
|
1
|
+
{"version":3,"names":["useCallback","useContext","useMemo","ConfigProvider","Dropdown","Tag","theme","PresetColors","classNames","Overflow","random","useStyle","jsx","_jsx","jsxs","_jsxs","OverflowTags","props","_props$tags","tags","randomColors","getTagNameInProps","getTagName","getTagKey","renderTagInProps","renderTag","tagProps","ellipsisTagProps","className","restProps","_objectWithoutProperties","_excluded","_theme$useToken","useToken","token","_useContext","ConfigContext","getPrefixCls","prefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","colors","filter","c","includes","map","color","concat","tag","name","item","_item$color","customProps","_objectSpread","length","children","data","maxCount","renderItem","renderRest","omittedItems","menu","items","_tag$id","type","key","id","label"],"sources":["../../../src/components/OverflowTags/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { TagProps } from 'antd';\nimport { ConfigProvider, Dropdown, Tag, theme } from 'antd';\nimport { PresetColors } from 'antd/es/theme/internal';\nimport classNames from 'classnames';\nimport type { OverflowProps } from 'rc-overflow';\nimport Overflow from 'rc-overflow';\nimport { random } from '../../utils/math';\nimport useStyle from './style';\n\nexport interface OverflowTagsProps<T extends Record<string, unknown> = Record<string, unknown>>\n extends OverflowProps<T> {\n /**\n * **CN**: 标签集合的数据\n *\n * **EN**: Data collection of tags\n */\n tags: T[] | undefined;\n /**\n * **EN**: Function to get the tag name, default is `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n /**\n * **EN**: Function to render the tag, returns `TagProps`\n *\n * **CN**: 渲染标签的函数，返回`TagProps`\n */\n renderTag?: (tag: T, tags: T[]) => TagProps;\n /**\n * **EN**: Custom properties for the tag component, if `renderTag` is also specified, the latter\n * will override the former\n *\n * **CN**: 自定义标签的组件属性，如果同时指定了`renderTag`，则后者会覆盖前者\n */\n tagProps?: TagProps;\n /**\n * **EN**: When the number of tags exceeds the maximum display count, an ellipsis tag will be\n * shown. This property is used to set the style of the ellipsis tag.\n *\n * **CN**: 当标签数量超过最大显示数量时，会显示省略号的标签，此属性用于设置省略号标签的样式\n */\n ellipsisTagProps?: TagProps;\n /**\n * **EN**: Whether to use random colors, default is `false`. Note that the tag object can also\n * contain a `color` property to specify the color, and the latter takes precedence.\n *\n * **CN**: 是否使用随机颜色，默认`false`。注意，tag对象还可以包含`color`属性来指定颜色，而且后者优先级更高。\n */\n randomColors?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T extends Record<string, any>>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n renderTag: renderTagInProps,\n tagProps,\n ellipsisTagProps,\n className,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('re-overflow-tags');\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n\n const colors = useMemo(\n () => PresetColors.filter((c) => !['lime', 'yellow', 'magenta'].includes(c)).map((color) => token[`${color}-3`]),\n [token]\n );\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps ? getTagNameInProps(tag) : tag.name;\n },\n [getTagNameInProps]\n );\n const renderTag = (item: T) => {\n const customProps = renderTagInProps?.(item, tags);\n return (\n <Tag\n {...tagProps}\n color={randomColors ? colors[random(0, colors.length - 1)] : (item.color ?? 'default')}\n {...customProps}\n >\n {getTagName(item)}\n </Tag>\n );\n };\n\n return wrapCSSVar(\n <Overflow<T>\n className={classNames(hashId, cssVarCls, prefixCls, className)}\n data={tags}\n maxCount=\"responsive\"\n renderItem={renderTag}\n renderRest={(omittedItems) => (\n <Dropdown\n menu={{\n items: omittedItems.map((tag) => ({\n type: 'item',\n key: getTagKey ? getTagKey(tag) : (tag.id ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n }}\n >\n <Tag {...ellipsisTagProps}>+ {omittedItems.length}...</Tag>\n </Dropdown>\n )}\n {...restProps}\n />\n );\n};\n\nexport default OverflowTags;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["genStyleHooks","genStyle","token","componentCls","_defineProperty","display","flexWrap","maxWidth","position"],"sources":["../../../../src/components/OverflowTags/style/index.ts"],"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 display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default genStyleHooks('re-overflow-tags' as any, genStyle);\n"],"mappings":";;;;AAAA,SAASA,aAAa,QAAQ,wBAAwB;AAOtD,IAAMC,QAA0C,GAAG,SAA7CA,QAA0CA,CAAIC,KAAK,EAAgB;EACvE,IAAQC,YAAY,GAAKD,KAAK,CAAtBC,YAAY;EACpB,OAAAC,eAAA,KACGD,YAAY,EAAG;IACdE,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAE;EACZ,CAAC;AAEL,CAAC;;AAED;AACA,
|
|
1
|
+
{"version":3,"names":["genStyleHooks","genStyle","token","componentCls","_defineProperty","display","flexWrap","width","maxWidth","position"],"sources":["../../../../src/components/OverflowTags/style/index.ts"],"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 display: 'flex',\n flexWrap: 'wrap',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default genStyleHooks('re-overflow-tags' as any, genStyle);\n"],"mappings":";;;;AAAA,SAASA,aAAa,QAAQ,wBAAwB;AAOtD,IAAMC,QAA0C,GAAG,SAA7CA,QAA0CA,CAAIC,KAAK,EAAgB;EACvE,IAAQC,YAAY,GAAKD,KAAK,CAAtBC,YAAY;EACpB,OAAAC,eAAA,KACGD,YAAY,EAAG;IACdE,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,MAAM;IAChBC,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAE;EACZ,CAAC;AAEL,CAAC;;AAED;AACA,eAAeT,aAAa,CAAC,kBAAkB,EAASC,QAAQ,CAAC"}
|
|
@@ -53,7 +53,7 @@ var OverflowTags = (props) => {
|
|
|
53
53
|
} = props;
|
|
54
54
|
const { token } = import_antd.theme.useToken();
|
|
55
55
|
const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
|
|
56
|
-
const prefixCls = getPrefixCls("re-
|
|
56
|
+
const prefixCls = getPrefixCls("re-overflow-tags");
|
|
57
57
|
const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
|
|
58
58
|
const colors = (0, import_react.useMemo)(
|
|
59
59
|
() => import_internal.PresetColors.filter((c) => !["lime", "yellow", "magenta"].includes(c)).map((color) => token[`${color}-3`]),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/OverflowTags/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { TagProps } from 'antd';\nimport { ConfigProvider, Dropdown, Tag, theme } from 'antd';\nimport { PresetColors } from 'antd/es/theme/internal';\nimport classNames from 'classnames';\nimport type { OverflowProps } from 'rc-overflow';\nimport Overflow from 'rc-overflow';\nimport { random } from '../../utils/math';\nimport useStyle from './style';\n\nexport interface OverflowTagsProps<T extends Record<string, unknown> = Record<string, unknown>>\n extends OverflowProps<T> {\n /**\n * **CN**: 标签集合的数据\n *\n * **EN**: Data collection of tags\n */\n tags: T[] | undefined;\n /**\n * **EN**: Function to get the tag name, default is `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n /**\n * **EN**: Function to render the tag, returns `TagProps`\n *\n * **CN**: 渲染标签的函数，返回`TagProps`\n */\n renderTag?: (tag: T, tags: T[]) => TagProps;\n /**\n * **EN**: Custom properties for the tag component, if `renderTag` is also specified, the latter\n * will override the former\n *\n * **CN**: 自定义标签的组件属性，如果同时指定了`renderTag`，则后者会覆盖前者\n */\n tagProps?: TagProps;\n /**\n * **EN**: When the number of tags exceeds the maximum display count, an ellipsis tag will be\n * shown. This property is used to set the style of the ellipsis tag.\n *\n * **CN**: 当标签数量超过最大显示数量时，会显示省略号的标签，此属性用于设置省略号标签的样式\n */\n ellipsisTagProps?: TagProps;\n /**\n * **EN**: Whether to use random colors, default is `false`. Note that the tag object can also\n * contain a `color` property to specify the color, and the latter takes precedence.\n *\n * **CN**: 是否使用随机颜色，默认`false`。注意，tag对象还可以包含`color`属性来指定颜色，而且后者优先级更高。\n */\n randomColors?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T extends Record<string, any>>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n renderTag: renderTagInProps,\n tagProps,\n ellipsisTagProps,\n className,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('re-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;AAEjD,kBAAqD;AACrD,sBAA6B;AAC7B,wBAAuB;AAEvB,yBAAqB;AACrB,kBAAuB;AACvB,mBAAqB;AAoDrB,IAAM,eAAe,CAAgC,UAAgC;AACnF,QAAM;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI,kBAAM,SAAS;AACjC,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,YAAY,aAAa,
|
|
4
|
+
"sourcesContent": ["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { TagProps } from 'antd';\nimport { ConfigProvider, Dropdown, Tag, theme } from 'antd';\nimport { PresetColors } from 'antd/es/theme/internal';\nimport classNames from 'classnames';\nimport type { OverflowProps } from 'rc-overflow';\nimport Overflow from 'rc-overflow';\nimport { random } from '../../utils/math';\nimport useStyle from './style';\n\nexport interface OverflowTagsProps<T extends Record<string, unknown> = Record<string, unknown>>\n extends OverflowProps<T> {\n /**\n * **CN**: 标签集合的数据\n *\n * **EN**: Data collection of tags\n */\n tags: T[] | undefined;\n /**\n * **EN**: Function to get the tag name, default is `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n /**\n * **EN**: Function to render the tag, returns `TagProps`\n *\n * **CN**: 渲染标签的函数，返回`TagProps`\n */\n renderTag?: (tag: T, tags: T[]) => TagProps;\n /**\n * **EN**: Custom properties for the tag component, if `renderTag` is also specified, the latter\n * will override the former\n *\n * **CN**: 自定义标签的组件属性，如果同时指定了`renderTag`，则后者会覆盖前者\n */\n tagProps?: TagProps;\n /**\n * **EN**: When the number of tags exceeds the maximum display count, an ellipsis tag will be\n * shown. This property is used to set the style of the ellipsis tag.\n *\n * **CN**: 当标签数量超过最大显示数量时，会显示省略号的标签，此属性用于设置省略号标签的样式\n */\n ellipsisTagProps?: TagProps;\n /**\n * **EN**: Whether to use random colors, default is `false`. Note that the tag object can also\n * contain a `color` property to specify the color, and the latter takes precedence.\n *\n * **CN**: 是否使用随机颜色，默认`false`。注意，tag对象还可以包含`color`属性来指定颜色，而且后者优先级更高。\n */\n randomColors?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T extends Record<string, any>>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n renderTag: renderTagInProps,\n tagProps,\n ellipsisTagProps,\n className,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('re-overflow-tags');\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n\n const colors = useMemo(\n () => PresetColors.filter((c) => !['lime', 'yellow', 'magenta'].includes(c)).map((color) => token[`${color}-3`]),\n [token]\n );\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps ? getTagNameInProps(tag) : tag.name;\n },\n [getTagNameInProps]\n );\n const renderTag = (item: T) => {\n const customProps = renderTagInProps?.(item, tags);\n return (\n <Tag\n {...tagProps}\n color={randomColors ? colors[random(0, colors.length - 1)] : (item.color ?? 'default')}\n {...customProps}\n >\n {getTagName(item)}\n </Tag>\n );\n };\n\n return wrapCSSVar(\n <Overflow<T>\n className={classNames(hashId, cssVarCls, prefixCls, className)}\n data={tags}\n maxCount=\"responsive\"\n renderItem={renderTag}\n renderRest={(omittedItems) => (\n <Dropdown\n menu={{\n items: omittedItems.map((tag) => ({\n type: 'item',\n key: getTagKey ? getTagKey(tag) : (tag.id ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n }}\n >\n <Tag {...ellipsisTagProps}>+ {omittedItems.length}...</Tag>\n </Dropdown>\n )}\n {...restProps}\n />\n );\n};\n\nexport default OverflowTags;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;AAEjD,kBAAqD;AACrD,sBAA6B;AAC7B,wBAAuB;AAEvB,yBAAqB;AACrB,kBAAuB;AACvB,mBAAqB;AAoDrB,IAAM,eAAe,CAAgC,UAAgC;AACnF,QAAM;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI,kBAAM,SAAS;AACjC,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,YAAY,aAAa,kBAAkB;AACjD,QAAM,CAAC,YAAY,QAAQ,SAAS,QAAI,aAAAA,SAAS,SAAS;AAE1D,QAAM,aAAS;AAAA,IACb,MAAM,6BAAa,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,UAAU,SAAS,EAAE,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,MAAM,GAAG,SAAS,CAAC;AAAA,IAC/G,CAAC,KAAK;AAAA,EACR;AACA,QAAM,iBAAa;AAAA,IACjB,CAAC,QAAW;AACV,aAAO,oBAAoB,kBAAkB,GAAG,IAAI,IAAI;AAAA,IAC1D;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AACA,QAAM,YAAY,CAAC,SAAY;AAC7B,UAAM,cAAc,qDAAmB,MAAM;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO,eAAe,WAAO,oBAAO,GAAG,OAAO,SAAS,CAAC,CAAC,IAAK,KAAK,SAAS;AAAA,QAC3E,GAAG;AAAA;AAAA,MAEH,WAAW,IAAI;AAAA,IAClB;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL;AAAA,MAAC,mBAAAC;AAAA,MAAA;AAAA,QACC,eAAW,kBAAAC,SAAW,QAAQ,WAAW,WAAW,SAAS;AAAA,QAC7D,MAAM;AAAA,QACN,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY,CAAC,iBACX;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,cACJ,OAAO,aAAa,IAAI,CAAC,SAAS;AAAA,gBAChC,MAAM;AAAA,gBACN,KAAK,YAAY,UAAU,GAAG,IAAK,IAAI,MAAM,WAAW,GAAG;AAAA,gBAC3D,OAAO,WAAW,GAAG;AAAA,cACvB,EAAE;AAAA,YACJ;AAAA;AAAA,UAEA,oCAAC,mBAAK,GAAG,oBAAkB,MAAG,aAAa,QAAO,KAAG;AAAA,QACvD;AAAA,QAED,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AAEA,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["useStyle", "Overflow", "classNames"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/OverflowTags/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 display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default genStyleHooks('re-overflow-tags' as any, 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,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAGA,IAAO,oBAAQ,+BAAc,oBAA2B,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 OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default genStyleHooks('re-overflow-tags' as any, 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,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAGA,IAAO,oBAAQ,+BAAc,oBAA2B,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|