tdesign-react
Version:
TDesign Component for React
160 lines (152 loc) • 7.34 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-cc768e34.js');
var objectWithoutProperties = require('../_chunks/dep-810b3643.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var tinycolor = require('../_chunks/dep-7bc521fe.js');
var _util_noop = require('../_util/noop.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var tag_defaultProps = require('./defaultProps.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
require('../_chunks/dep-6d4d8660.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-ddacd27a.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var _excluded = ["theme", "size", "shape", "variant", "closable", "maxWidth", "icon", "content", "onClick", "onClose", "className", "style", "disabled", "children", "color", "title"];
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; }
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._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; }
var TagFunction = function TagFunction(originalProps, ref) {
var props = hooks_useDefaultProps["default"](originalProps, tag_defaultProps.tagDefaultProps);
var theme = props.theme,
size = props.size,
shape = props.shape,
variant = props.variant,
closable = props.closable,
maxWidth = props.maxWidth,
icon = props.icon,
content = props.content,
_props$onClick = props.onClick,
_onClick = _props$onClick === void 0 ? _util_noop["default"] : _props$onClick,
_props$onClose = props.onClose,
onClose = _props$onClose === void 0 ? _util_noop["default"] : _props$onClose,
className = props.className,
style = props.style,
disabled = props.disabled,
children = props.children,
color = props.color,
titleAttr = props.title,
otherTagProps = objectWithoutProperties._objectWithoutProperties(props, _excluded);
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
CloseIcon: tdesignIconsReact.CloseIcon
}),
CloseIcon = _useGlobalIcon.CloseIcon;
var tagClassPrefix = "".concat(classPrefix, "-tag");
var sizeMap = {
large: "".concat(classPrefix, "-size-l"),
small: "".concat(classPrefix, "-size-s")
};
var tagClassNames = classNames__default["default"](tagClassPrefix, "".concat(tagClassPrefix, "--").concat(theme), "".concat(tagClassPrefix, "--").concat(variant), defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(tagClassPrefix, "--").concat(shape), shape !== "square"), "".concat(tagClassPrefix, "--ellipsis"), !!maxWidth), "".concat(tagClassPrefix, "--disabled"), disabled), sizeMap[size], className);
var deleteIcon = /* @__PURE__ */React__default["default"].createElement(CloseIcon, {
onClick: function onClick(e) {
if (disabled) return;
onClose({
e: e
});
},
className: "".concat(tagClassPrefix, "__icon-close")
});
var title = React.useMemo(function () {
if (Reflect.has(props, "title")) return titleAttr;
if (children && typeof children === "string") return children;
if (content && typeof content === "string") return content;
}, [children, content, props, titleAttr]);
var titleAttribute = title ? {
title: title
} : void 0;
var getTagStyle = React.useMemo(function () {
if (!color) return style;
var luminance = tinycolor.tinycolor(color).getLuminance();
var calculatedStyle = {};
calculatedStyle.color = luminance > 0.5 ? "black" : "white";
if (variant === "outline" || variant === "light-outline") {
calculatedStyle.borderColor = color;
}
if (variant !== "outline") {
var getLightestShade = function getLightestShade() {
var _tinycolor$toRgb = tinycolor.tinycolor(color).toRgb(),
r = _tinycolor$toRgb.r,
g = _tinycolor$toRgb.g,
b = _tinycolor$toRgb.b;
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.1)");
};
calculatedStyle.backgroundColor = variant === "dark" ? color : getLightestShade();
}
if (variant !== "dark") {
calculatedStyle.color = color;
}
return _objectSpread(_objectSpread({}, calculatedStyle), style);
}, [color, variant, style]);
var getTextStyle = React.useMemo(function () {
if (!maxWidth) return {};
return {
maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : "".concat(maxWidth, "px")
};
}, [maxWidth]);
var tag = /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
ref: ref,
className: tagClassNames,
onClick: function onClick(e) {
if (disabled) return;
_onClick({
e: e
});
},
style: getTagStyle
}, otherTagProps), /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, icon, /* @__PURE__ */React__default["default"].createElement("span", _objectSpread({
className: maxWidth ? "".concat(tagClassPrefix, "--text") : void 0,
style: getTextStyle
}, titleAttribute), children !== null && children !== void 0 ? children : content), closable && !disabled && deleteIcon));
return tag;
};
var Tag = /*#__PURE__*/React.forwardRef(TagFunction);
Tag.displayName = "Tag";
exports.Tag = Tag;
exports.TagFunction = TagFunction;
exports["default"] = Tag;
//# sourceMappingURL=Tag.js.map