@tiny-codes/react-easy 1.7.3 → 1.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/es/components/OverflowTags/index.d.ts +7 -1
- package/es/components/OverflowTags/index.js +6 -5
- package/es/components/OverflowTags/index.js.map +1 -1
- package/lib/components/OverflowTags/index.d.ts +7 -1
- package/lib/components/OverflowTags/index.js +4 -1
- package/lib/components/OverflowTags/index.js.map +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { TagProps } from 'antd';
|
|
2
|
+
import type { DropdownProps, TagProps } from 'antd';
|
|
3
3
|
import type { OverflowProps } from 'rc-overflow';
|
|
4
4
|
export interface OverflowTagsProps<T> extends Omit<OverflowProps<T>, 'renderItem'> {
|
|
5
5
|
/**
|
|
@@ -44,6 +44,12 @@ export interface OverflowTagsProps<T> extends Omit<OverflowProps<T>, 'renderItem
|
|
|
44
44
|
omittedItems: T[];
|
|
45
45
|
allTags: T[];
|
|
46
46
|
}) => TagProps);
|
|
47
|
+
/**
|
|
48
|
+
* **EN**: Custom properties for the dropdown component when tags are overflowed
|
|
49
|
+
*
|
|
50
|
+
* **CN**: 当标签溢出时，下拉菜单的自定义属性
|
|
51
|
+
*/
|
|
52
|
+
ellipsisDropdownProps?: DropdownProps;
|
|
47
53
|
/**
|
|
48
54
|
* **EN**: Whether to use random colors, default is `false`. Note that the tag object can also
|
|
49
55
|
* contain a `color` property to specify the color, and the latter takes precedence.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["tags", "randomColors", "getTagName", "getTagKey", "tagProps", "ellipsisTagProps", "className", "prefixCls"];
|
|
1
|
+
var _excluded = ["tags", "randomColors", "getTagName", "getTagKey", "tagProps", "ellipsisTagProps", "ellipsisDropdownProps", "className", "prefixCls"];
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -47,6 +47,7 @@ var OverflowTags = function OverflowTags(props) {
|
|
|
47
47
|
getTagKey = props.getTagKey,
|
|
48
48
|
tagProps = props.tagProps,
|
|
49
49
|
ellipsisTagProps = props.ellipsisTagProps,
|
|
50
|
+
ellipsisDropdownProps = props.ellipsisDropdownProps,
|
|
50
51
|
className = props.className,
|
|
51
52
|
prefixClsInProps = props.prefixCls,
|
|
52
53
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
@@ -95,8 +96,8 @@ var OverflowTags = function OverflowTags(props) {
|
|
|
95
96
|
maxCount: "responsive",
|
|
96
97
|
renderItem: renderTag,
|
|
97
98
|
renderRest: function renderRest(omittedItems) {
|
|
98
|
-
return /*#__PURE__*/_jsx(Dropdown, {
|
|
99
|
-
menu: {
|
|
99
|
+
return /*#__PURE__*/_jsx(Dropdown, _objectSpread(_objectSpread({}, ellipsisDropdownProps), {}, {
|
|
100
|
+
menu: _objectSpread({
|
|
100
101
|
items: omittedItems.map(function (tag) {
|
|
101
102
|
var _ref2, _getValue2;
|
|
102
103
|
return {
|
|
@@ -105,14 +106,14 @@ var OverflowTags = function OverflowTags(props) {
|
|
|
105
106
|
label: getTagName(tag)
|
|
106
107
|
};
|
|
107
108
|
})
|
|
108
|
-
},
|
|
109
|
+
}, ellipsisDropdownProps === null || ellipsisDropdownProps === void 0 ? void 0 : ellipsisDropdownProps.menu),
|
|
109
110
|
children: /*#__PURE__*/_jsxs(Tag, _objectSpread(_objectSpread({}, typeof ellipsisTagProps === 'function' ? ellipsisTagProps(omittedItems[0], {
|
|
110
111
|
omittedItems: omittedItems,
|
|
111
112
|
allTags: tags
|
|
112
113
|
}) : ellipsisTagProps), {}, {
|
|
113
114
|
children: ["+ ", omittedItems.length, "..."]
|
|
114
115
|
}))
|
|
115
|
-
});
|
|
116
|
+
}));
|
|
116
117
|
}
|
|
117
118
|
}, restProps)));
|
|
118
119
|
};
|
|
@@ -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","tagProps","ellipsisTagProps","className","prefixClsInProps","prefixCls","restProps","_objectWithoutProperties","_excluded","_theme$useToken","useToken","token","_useContext","ConfigContext","getPrefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","colors","filter","c","includes","map","color","concat","getValue","tag","field","_typeof","record","undefined","_ref","_getValue","toString","renderTag","item","_objectSpread","icon","length","children","data","maxCount","renderItem","renderRest","omittedItems","menu","items","_ref2","_getValue2","type","key","label","allTags"],"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 Omit<OverflowProps<T>, 'renderItem'> {\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.label` or `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.label`或`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.value` or `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.value`或`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n\n /**\n * **EN**: Custom tag rendering function\n *\n * **CN**: 标签渲染函数\n */\n renderTag?: OverflowProps<T>['renderItem'];\n /**\n * **EN**: Custom properties for the tag component\n *\n * **CN**: 自定义标签的组件属性\n */\n tagProps?: TagProps | ((tag: T, options: { tags: T[] }) => 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 | ((tag: T, options: { omittedItems: T[]; allTags: T[] }) => 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/**\n * - **EN:** Overflow tags component, used to display a collection of tags that can overflow and be\n * truncated. It supports displaying tags in a dropdown when the number of tags exceeds the\n * maximum display count. It also supports custom tag rendering and properties.\n * - **CN:** 溢出标签组件，用于显示一组可以溢出和截断的标签集合。当标签数量超过最大显示数量时，支持在下拉菜单中显示标签。还支持自定义标签渲染和属性。\n *\n * @example\n * <OverflowTags\n * tags={[\n * { value: 1, label: 'Tag1', icon: <Icon1 /> },\n * { value: 2, label: 'Tag2', icon: <Icon2 /> },\n * ]}\n * tagProps={{ color: 'blue' }}\n * ellipsisTagProps={{ color: 'grey' }}\n * />;\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T,>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n tagProps,\n ellipsisTagProps,\n className,\n prefixCls: prefixClsInProps,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-overflow-tags', prefixClsInProps);\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 getValue = useCallback((tag: T | undefined, field: string) => {\n if (tag != null && typeof tag === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const record = tag as Record<string, any>;\n return record[field];\n }\n return undefined;\n }, []);\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps\n ? getTagNameInProps(tag)\n : (getValue(tag, 'label') ?? getValue(tag, 'name') ?? tag?.toString());\n },\n [getTagNameInProps, getValue]\n );\n const renderTag = (item: T) => {\n return (\n <Tag\n icon={getValue(item, 'icon')}\n color={randomColors ? colors[random(0, colors.length - 1)] : getValue(item, 'color') || 'default'}\n {...(typeof tagProps === 'function' ? tagProps(item, { tags }) : tagProps)}\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) : (getValue(tag, 'value') ?? getValue(tag, 'id') ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n }}\n >\n <Tag\n {...(typeof ellipsisTagProps === 'function'\n ? ellipsisTagProps(omittedItems[0], { omittedItems, allTags: tags })\n : ellipsisTagProps)}\n >\n + {omittedItems.length}...\n </Tag>\n </Dropdown>\n )}\n {...restProps}\n />\n );\n};\n\nexport default OverflowTags;\n"],"mappings":"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"}
|
|
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","tagProps","ellipsisTagProps","ellipsisDropdownProps","className","prefixClsInProps","prefixCls","restProps","_objectWithoutProperties","_excluded","_theme$useToken","useToken","token","_useContext","ConfigContext","getPrefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","colors","filter","c","includes","map","color","concat","getValue","tag","field","_typeof","record","undefined","_ref","_getValue","toString","renderTag","item","_objectSpread","icon","length","children","data","maxCount","renderItem","renderRest","omittedItems","menu","items","_ref2","_getValue2","type","key","label","allTags"],"sources":["../../../src/components/OverflowTags/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { DropdownProps, 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 Omit<OverflowProps<T>, 'renderItem'> {\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.label` or `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.label`或`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.value` or `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.value`或`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n\n /**\n * **EN**: Custom tag rendering function\n *\n * **CN**: 标签渲染函数\n */\n renderTag?: OverflowProps<T>['renderItem'];\n /**\n * **EN**: Custom properties for the tag component\n *\n * **CN**: 自定义标签的组件属性\n */\n tagProps?: TagProps | ((tag: T, options: { tags: T[] }) => 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 | ((tag: T, options: { omittedItems: T[]; allTags: T[] }) => TagProps);\n /**\n * **EN**: Custom properties for the dropdown component when tags are overflowed\n *\n * **CN**: 当标签溢出时，下拉菜单的自定义属性\n */\n ellipsisDropdownProps?: DropdownProps;\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/**\n * - **EN:** Overflow tags component, used to display a collection of tags that can overflow and be\n * truncated. It supports displaying tags in a dropdown when the number of tags exceeds the\n * maximum display count. It also supports custom tag rendering and properties.\n * - **CN:** 溢出标签组件，用于显示一组可以溢出和截断的标签集合。当标签数量超过最大显示数量时，支持在下拉菜单中显示标签。还支持自定义标签渲染和属性。\n *\n * @example\n * <OverflowTags\n * tags={[\n * { value: 1, label: 'Tag1', icon: <Icon1 /> },\n * { value: 2, label: 'Tag2', icon: <Icon2 /> },\n * ]}\n * tagProps={{ color: 'blue' }}\n * ellipsisTagProps={{ color: 'grey' }}\n * />;\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T,>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n tagProps,\n ellipsisTagProps,\n ellipsisDropdownProps,\n className,\n prefixCls: prefixClsInProps,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-overflow-tags', prefixClsInProps);\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 getValue = useCallback((tag: T | undefined, field: string) => {\n if (tag != null && typeof tag === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const record = tag as Record<string, any>;\n return record[field];\n }\n return undefined;\n }, []);\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps\n ? getTagNameInProps(tag)\n : (getValue(tag, 'label') ?? getValue(tag, 'name') ?? tag?.toString());\n },\n [getTagNameInProps, getValue]\n );\n const renderTag = (item: T) => {\n return (\n <Tag\n icon={getValue(item, 'icon')}\n color={randomColors ? colors[random(0, colors.length - 1)] : getValue(item, 'color') || 'default'}\n {...(typeof tagProps === 'function' ? tagProps(item, { tags }) : tagProps)}\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 {...ellipsisDropdownProps}\n menu={{\n items: omittedItems.map((tag) => ({\n type: 'item',\n key: getTagKey ? getTagKey(tag) : (getValue(tag, 'value') ?? getValue(tag, 'id') ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n ...ellipsisDropdownProps?.menu,\n }}\n >\n <Tag\n {...(typeof ellipsisTagProps === 'function'\n ? ellipsisTagProps(omittedItems[0], { omittedItems, allTags: tags })\n : ellipsisTagProps)}\n >\n + {omittedItems.length}...\n </Tag>\n </Dropdown>\n )}\n {...restProps}\n />\n );\n};\n\nexport default OverflowTags;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { TagProps } from 'antd';
|
|
2
|
+
import type { DropdownProps, TagProps } from 'antd';
|
|
3
3
|
import type { OverflowProps } from 'rc-overflow';
|
|
4
4
|
export interface OverflowTagsProps<T> extends Omit<OverflowProps<T>, 'renderItem'> {
|
|
5
5
|
/**
|
|
@@ -44,6 +44,12 @@ export interface OverflowTagsProps<T> extends Omit<OverflowProps<T>, 'renderItem
|
|
|
44
44
|
omittedItems: T[];
|
|
45
45
|
allTags: T[];
|
|
46
46
|
}) => TagProps);
|
|
47
|
+
/**
|
|
48
|
+
* **EN**: Custom properties for the dropdown component when tags are overflowed
|
|
49
|
+
*
|
|
50
|
+
* **CN**: 当标签溢出时，下拉菜单的自定义属性
|
|
51
|
+
*/
|
|
52
|
+
ellipsisDropdownProps?: DropdownProps;
|
|
47
53
|
/**
|
|
48
54
|
* **EN**: Whether to use random colors, default is `false`. Note that the tag object can also
|
|
49
55
|
* contain a `color` property to specify the color, and the latter takes precedence.
|
|
@@ -47,6 +47,7 @@ var OverflowTags = (props) => {
|
|
|
47
47
|
getTagKey,
|
|
48
48
|
tagProps,
|
|
49
49
|
ellipsisTagProps,
|
|
50
|
+
ellipsisDropdownProps,
|
|
50
51
|
className,
|
|
51
52
|
prefixCls: prefixClsInProps,
|
|
52
53
|
...restProps
|
|
@@ -94,12 +95,14 @@ var OverflowTags = (props) => {
|
|
|
94
95
|
renderRest: (omittedItems) => /* @__PURE__ */ React.createElement(
|
|
95
96
|
import_antd.Dropdown,
|
|
96
97
|
{
|
|
98
|
+
...ellipsisDropdownProps,
|
|
97
99
|
menu: {
|
|
98
100
|
items: omittedItems.map((tag) => ({
|
|
99
101
|
type: "item",
|
|
100
102
|
key: getTagKey ? getTagKey(tag) : getValue(tag, "value") ?? getValue(tag, "id") ?? getTagName(tag),
|
|
101
103
|
label: getTagName(tag)
|
|
102
|
-
}))
|
|
104
|
+
})),
|
|
105
|
+
...ellipsisDropdownProps == null ? void 0 : ellipsisDropdownProps.menu
|
|
103
106
|
}
|
|
104
107
|
},
|
|
105
108
|
/* @__PURE__ */ React.createElement(
|
|
@@ -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 Omit<OverflowProps<T>, 'renderItem'> {\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.label` or `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.label`或`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.value` or `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.value`或`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n\n /**\n * **EN**: Custom tag rendering function\n *\n * **CN**: 标签渲染函数\n */\n renderTag?: OverflowProps<T>['renderItem'];\n /**\n * **EN**: Custom properties for the tag component\n *\n * **CN**: 自定义标签的组件属性\n */\n tagProps?: TagProps | ((tag: T, options: { tags: T[] }) => 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 | ((tag: T, options: { omittedItems: T[]; allTags: T[] }) => 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/**\n * - **EN:** Overflow tags component, used to display a collection of tags that can overflow and be\n * truncated. It supports displaying tags in a dropdown when the number of tags exceeds the\n * maximum display count. It also supports custom tag rendering and properties.\n * - **CN:** 溢出标签组件，用于显示一组可以溢出和截断的标签集合。当标签数量超过最大显示数量时，支持在下拉菜单中显示标签。还支持自定义标签渲染和属性。\n *\n * @example\n * <OverflowTags\n * tags={[\n * { value: 1, label: 'Tag1', icon: <Icon1 /> },\n * { value: 2, label: 'Tag2', icon: <Icon2 /> },\n * ]}\n * tagProps={{ color: 'blue' }}\n * ellipsisTagProps={{ color: 'grey' }}\n * />;\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T,>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n tagProps,\n ellipsisTagProps,\n className,\n prefixCls: prefixClsInProps,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-overflow-tags', prefixClsInProps);\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 getValue = useCallback((tag: T | undefined, field: string) => {\n if (tag != null && typeof tag === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const record = tag as Record<string, any>;\n return record[field];\n }\n return undefined;\n }, []);\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps\n ? getTagNameInProps(tag)\n : (getValue(tag, 'label') ?? getValue(tag, 'name') ?? tag?.toString());\n },\n [getTagNameInProps, getValue]\n );\n const renderTag = (item: T) => {\n return (\n <Tag\n icon={getValue(item, 'icon')}\n color={randomColors ? colors[random(0, colors.length - 1)] : getValue(item, 'color') || 'default'}\n {...(typeof tagProps === 'function' ? tagProps(item, { tags }) : tagProps)}\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) : (getValue(tag, 'value') ?? getValue(tag, 'id') ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n }}\n >\n <Tag\n {...(typeof ellipsisTagProps === 'function'\n ? ellipsisTagProps(omittedItems[0], { omittedItems, allTags: tags })\n : ellipsisTagProps)}\n >\n + {omittedItems.length}...\n </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;
|
|
4
|
+
"sourcesContent": ["import type { ReactNode } from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport type { DropdownProps, 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 Omit<OverflowProps<T>, 'renderItem'> {\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.label` or `tag.name`\n *\n * **CN**: 获取标签名称的函数，默认取`tag.label`或`tag.name`\n */\n getTagName?: (tag: T) => ReactNode;\n /**\n * **EN**: Function to get the unique identifier of the tag, default is `tag.value` or `tag.id`\n *\n * **CN**: 获取标签唯一标识的函数，默认取`tag.value`或`tag.id`\n */\n getTagKey?: (tag: T) => React.Key;\n\n /**\n * **EN**: Custom tag rendering function\n *\n * **CN**: 标签渲染函数\n */\n renderTag?: OverflowProps<T>['renderItem'];\n /**\n * **EN**: Custom properties for the tag component\n *\n * **CN**: 自定义标签的组件属性\n */\n tagProps?: TagProps | ((tag: T, options: { tags: T[] }) => 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 | ((tag: T, options: { omittedItems: T[]; allTags: T[] }) => TagProps);\n /**\n * **EN**: Custom properties for the dropdown component when tags are overflowed\n *\n * **CN**: 当标签溢出时，下拉菜单的自定义属性\n */\n ellipsisDropdownProps?: DropdownProps;\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/**\n * - **EN:** Overflow tags component, used to display a collection of tags that can overflow and be\n * truncated. It supports displaying tags in a dropdown when the number of tags exceeds the\n * maximum display count. It also supports custom tag rendering and properties.\n * - **CN:** 溢出标签组件，用于显示一组可以溢出和截断的标签集合。当标签数量超过最大显示数量时，支持在下拉菜单中显示标签。还支持自定义标签渲染和属性。\n *\n * @example\n * <OverflowTags\n * tags={[\n * { value: 1, label: 'Tag1', icon: <Icon1 /> },\n * { value: 2, label: 'Tag2', icon: <Icon2 /> },\n * ]}\n * tagProps={{ color: 'blue' }}\n * ellipsisTagProps={{ color: 'grey' }}\n * />;\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst OverflowTags = <T,>(props: OverflowTagsProps<T>) => {\n const {\n tags = [],\n randomColors,\n getTagName: getTagNameInProps,\n getTagKey,\n tagProps,\n ellipsisTagProps,\n ellipsisDropdownProps,\n className,\n prefixCls: prefixClsInProps,\n ...restProps\n } = props;\n const { token } = theme.useToken();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('easy-overflow-tags', prefixClsInProps);\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 getValue = useCallback((tag: T | undefined, field: string) => {\n if (tag != null && typeof tag === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const record = tag as Record<string, any>;\n return record[field];\n }\n return undefined;\n }, []);\n const getTagName = useCallback(\n (tag: T) => {\n return getTagNameInProps\n ? getTagNameInProps(tag)\n : (getValue(tag, 'label') ?? getValue(tag, 'name') ?? tag?.toString());\n },\n [getTagNameInProps, getValue]\n );\n const renderTag = (item: T) => {\n return (\n <Tag\n icon={getValue(item, 'icon')}\n color={randomColors ? colors[random(0, colors.length - 1)] : getValue(item, 'color') || 'default'}\n {...(typeof tagProps === 'function' ? tagProps(item, { tags }) : tagProps)}\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 {...ellipsisDropdownProps}\n menu={{\n items: omittedItems.map((tag) => ({\n type: 'item',\n key: getTagKey ? getTagKey(tag) : (getValue(tag, 'value') ?? getValue(tag, 'id') ?? getTagName(tag)),\n label: getTagName(tag),\n })),\n ...ellipsisDropdownProps?.menu,\n }}\n >\n <Tag\n {...(typeof ellipsisTagProps === 'function'\n ? ellipsisTagProps(omittedItems[0], { omittedItems, allTags: tags })\n : ellipsisTagProps)}\n >\n + {omittedItems.length}...\n </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;AAyErB,IAAM,eAAe,CAAK,UAAgC;AACxD,QAAM;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI,kBAAM,SAAS;AACjC,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,YAAY,aAAa,sBAAsB,gBAAgB;AACrE,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,eAAW,0BAAY,CAAC,KAAoB,UAAkB;AAClE,QAAI,OAAO,QAAQ,OAAO,QAAQ,UAAU;AAE1C,YAAM,SAAS;AACf,aAAO,OAAO,KAAK;AAAA,IACrB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,iBAAa;AAAA,IACjB,CAAC,QAAW;AACV,aAAO,oBACH,kBAAkB,GAAG,IACpB,SAAS,KAAK,OAAO,KAAK,SAAS,KAAK,MAAM,MAAK,2BAAK;AAAA,IAC/D;AAAA,IACA,CAAC,mBAAmB,QAAQ;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,SAAY;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS,MAAM,MAAM;AAAA,QAC3B,OAAO,eAAe,WAAO,oBAAO,GAAG,OAAO,SAAS,CAAC,CAAC,IAAI,SAAS,MAAM,OAAO,KAAK;AAAA,QACvF,GAAI,OAAO,aAAa,aAAa,SAAS,MAAM,EAAE,KAAK,CAAC,IAAI;AAAA;AAAA,MAEhE,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,YACE,GAAG;AAAA,YACJ,MAAM;AAAA,cACJ,OAAO,aAAa,IAAI,CAAC,SAAS;AAAA,gBAChC,MAAM;AAAA,gBACN,KAAK,YAAY,UAAU,GAAG,IAAK,SAAS,KAAK,OAAO,KAAK,SAAS,KAAK,IAAI,KAAK,WAAW,GAAG;AAAA,gBAClG,OAAO,WAAW,GAAG;AAAA,cACvB,EAAE;AAAA,cACF,GAAG,+DAAuB;AAAA,YAC5B;AAAA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACE,GAAI,OAAO,qBAAqB,aAC7B,iBAAiB,aAAa,CAAC,GAAG,EAAE,cAAc,SAAS,KAAK,CAAC,IACjE;AAAA;AAAA,YACL;AAAA,YACI,aAAa;AAAA,YAAO;AAAA,UACzB;AAAA,QACF;AAAA,QAED,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AAEA,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["useStyle", "Overflow", "classNames"]
|
|
7
7
|
}
|