1 | "use client";
|
2 |
|
3 | var __rest = this && this.__rest || function (s, e) {
|
4 | var t = {};
|
5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
6 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
8 | }
|
9 | return t;
|
10 | };
|
11 | import * as React from 'react';
|
12 | import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
|
13 | import classNames from 'classnames';
|
14 | import { isPresetColor, isPresetStatusColor } from '../_util/colors';
|
15 | import useClosable from '../_util/hooks/useClosable';
|
16 | import { devUseWarning } from '../_util/warning';
|
17 | import Wave from '../_util/wave';
|
18 | import { ConfigContext } from '../config-provider';
|
19 | import CheckableTag from './CheckableTag';
|
20 | import useStyle from './style';
|
21 | import PresetCmp from './style/presetCmp';
|
22 | import StatusCmp from './style/statusCmp';
|
23 | const InternalTag = (tagProps, ref) => {
|
24 | const {
|
25 | prefixCls: customizePrefixCls,
|
26 | className,
|
27 | rootClassName,
|
28 | style,
|
29 | children,
|
30 | icon,
|
31 | color,
|
32 | onClose,
|
33 | closeIcon,
|
34 | closable,
|
35 | bordered = true
|
36 | } = tagProps,
|
37 | props = __rest(tagProps, ["prefixCls", "className", "rootClassName", "style", "children", "icon", "color", "onClose", "closeIcon", "closable", "bordered"]);
|
38 | const {
|
39 | getPrefixCls,
|
40 | direction,
|
41 | tag
|
42 | } = React.useContext(ConfigContext);
|
43 | const [visible, setVisible] = React.useState(true);
|
44 |
|
45 | if (process.env.NODE_ENV !== 'production') {
|
46 | const warning = devUseWarning('Tag');
|
47 | warning.deprecated(!('visible' in props), 'visible', 'visible && <Tag />');
|
48 | }
|
49 | React.useEffect(() => {
|
50 | if ('visible' in props) {
|
51 | setVisible(props.visible);
|
52 | }
|
53 | }, [props.visible]);
|
54 | const isPreset = isPresetColor(color);
|
55 | const isStatus = isPresetStatusColor(color);
|
56 | const isInternalColor = isPreset || isStatus;
|
57 | const tagStyle = Object.assign(Object.assign({
|
58 | backgroundColor: color && !isInternalColor ? color : undefined
|
59 | }, tag === null || tag === void 0 ? void 0 : tag.style), style);
|
60 | const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
61 | const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
62 |
|
63 | const tagClassName = classNames(prefixCls, tag === null || tag === void 0 ? void 0 : tag.className, {
|
64 | [`${prefixCls}-${color}`]: isInternalColor,
|
65 | [`${prefixCls}-has-color`]: color && !isInternalColor,
|
66 | [`${prefixCls}-hidden`]: !visible,
|
67 | [`${prefixCls}-rtl`]: direction === 'rtl',
|
68 | [`${prefixCls}-borderless`]: !bordered
|
69 | }, className, rootClassName, hashId, cssVarCls);
|
70 | const handleCloseClick = e => {
|
71 | e.stopPropagation();
|
72 | onClose === null || onClose === void 0 ? void 0 : onClose(e);
|
73 | if (e.defaultPrevented) {
|
74 | return;
|
75 | }
|
76 | setVisible(false);
|
77 | };
|
78 | const [, mergedCloseIcon] = useClosable({
|
79 | closable,
|
80 | closeIcon: closeIcon !== null && closeIcon !== void 0 ? closeIcon : tag === null || tag === void 0 ? void 0 : tag.closeIcon,
|
81 | customCloseIconRender: iconNode => iconNode === null ? ( React.createElement(CloseOutlined, {
|
82 | className: `${prefixCls}-close-icon`,
|
83 | onClick: handleCloseClick
|
84 | })) : ( React.createElement("span", {
|
85 | className: `${prefixCls}-close-icon`,
|
86 | onClick: handleCloseClick
|
87 | }, iconNode)),
|
88 | defaultCloseIcon: null,
|
89 | defaultClosable: false
|
90 | });
|
91 | const isNeedWave = typeof props.onClick === 'function' || children && children.type === 'a';
|
92 | const iconNode = icon || null;
|
93 | const kids = iconNode ? ( React.createElement(React.Fragment, null, iconNode, children && React.createElement("span", null, children))) : children;
|
94 | const tagNode = React.createElement("span", Object.assign({}, props, {
|
95 | ref: ref,
|
96 | className: tagClassName,
|
97 | style: tagStyle
|
98 | }), kids, mergedCloseIcon, isPreset && React.createElement(PresetCmp, {
|
99 | key: "preset",
|
100 | prefixCls: prefixCls
|
101 | }), isStatus && React.createElement(StatusCmp, {
|
102 | key: "status",
|
103 | prefixCls: prefixCls
|
104 | }));
|
105 | return wrapCSSVar(isNeedWave ? React.createElement(Wave, {
|
106 | component: "Tag"
|
107 | }, tagNode) : tagNode);
|
108 | };
|
109 | const Tag = React.forwardRef(InternalTag);
|
110 | if (process.env.NODE_ENV !== 'production') {
|
111 | Tag.displayName = 'Tag';
|
112 | }
|
113 | Tag.CheckableTag = CheckableTag;
|
114 | export default Tag; |
\ | No newline at end of file |