yzsd
Version:
a niubi UI component
91 lines • 4.15 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import classNames from "classnames";
import omit from "rc-util/es/omit";
import CheckableTag from "./tag-checkable";
import React, { useState } from 'react';
var tuple = function tuple() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return args;
};
var PresetColorTypes = tuple('pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime');
var PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
var PresetColorRegex = new RegExp("^(".concat(PresetColorTypes.join('|'), ")(-inverse)?$"));
var PresetStatusColorRegex = new RegExp("^(".concat(PresetStatusColorTypes.join('|'), ")$"));
var InternalTag = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _classNames;
var _props$prefixCls = props.prefixCls,
customizePrefixCls = _props$prefixCls === void 0 ? 'yzs-tag' : _props$prefixCls,
className = props.className,
style = props.style,
children = props.children,
icon = props.icon,
color = props.color,
onClose = props.onClose,
closeIcon = props.closeIcon,
_props$closable = props.closable,
closable = _props$closable === void 0 ? false : _props$closable,
rest = __rest(props, ["prefixCls", "className", "style", "children", "icon", "color", "onClose", "closeIcon", "closable"]);
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
React.useEffect(function () {
if ('visible' in rest) {
setVisible(rest.visible);
}
}, [rest.visible]);
var isPresetColor = function isPresetColor() {
if (!color) {
return false;
}
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
};
var tagStyle = _extends({
backgroundColor: color && !isPresetColor() ? color : undefined
}, style);
var tagClassName = classNames(customizePrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(customizePrefixCls, "-").concat(color), color), _defineProperty(_classNames, "".concat(customizePrefixCls, "-has-color"), color), _defineProperty(_classNames, "".concat(customizePrefixCls, "-hidden"), !visible), _classNames), className);
var handleCloseClick = function handleCloseClick(e) {
e.stopPropagation();
onClose === null || onClose === void 0 ? void 0 : onClose(e);
if (e.defaultPrevented) {
return;
}
if (!('visible' in rest)) {
setVisible(false);
}
};
var renderCloseIcon = function renderCloseIcon() {
if (closable) {
return closeIcon ? /*#__PURE__*/React.createElement("span", {
className: "".concat(customizePrefixCls, "-close-icon"),
onClick: handleCloseClick
}, closeIcon) : /*#__PURE__*/React.createElement("span", {
className: "".concat(customizePrefixCls, "-close-icon"),
onClick: handleCloseClick
}, 'x');
}
};
var tagProps = omit(rest, ['visible']);
var iconNode = icon || null;
var kids = iconNode ? /*#__PURE__*/React.createElement(React.Fragment, null, iconNode, /*#__PURE__*/React.createElement("span", null, children)) : children;
var tagNode = /*#__PURE__*/React.createElement("span", _extends({}, tagProps, {
ref: ref,
className: tagClassName,
style: tagStyle
}), kids, renderCloseIcon());
return tagNode;
});
InternalTag.CheckableTag = CheckableTag;
export default InternalTag;