tdesign-react
Version:
TDesign Component for React
169 lines (161 loc) • 8.22 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0fe55884.js');
var objectWithoutProperties = require('../_chunks/dep-40583e7c.js');
var React = require('react');
var tdesignIconsReact = require('tdesign-icons-react');
var classNames = require('classnames');
var tinycolor = require('../_chunks/dep-83aba171.js');
var _util_noop = require('../_util/noop.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var tag_defaultProps = require('./defaultProps.js');
require('../_chunks/dep-b325182b.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.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,
tagConfig = _useConfig.tag;
var tagClassPrefix = "".concat(classPrefix, "-tag");
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
CloseIcon: tdesignIconsReact.CloseIcon
}),
CloseIcon = _useGlobalIcon.CloseIcon;
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 TagCloseIcon = function TagCloseIcon() {
var iconNode = tagConfig !== null && tagConfig !== void 0 && tagConfig.closeIcon ? tagConfig.closeIcon : /* @__PURE__ */React__default["default"].createElement(CloseIcon, null);
if (/*#__PURE__*/React__default["default"].isValidElement(iconNode)) {
var _element$props2;
var element = iconNode;
return /*#__PURE__*/React__default["default"].cloneElement(element, {
onClick: function onClick(e) {
var _element$props, _element$props$onClic;
if (disabled) return;
(_element$props = element.props) === null || _element$props === void 0 || (_element$props$onClic = _element$props.onClick) === null || _element$props$onClic === void 0 || _element$props$onClic.call(_element$props, e);
onClose({
e: e
});
},
className: classNames__default["default"]((_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.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 && /* @__PURE__ */React__default["default"].createElement(TagCloseIcon, null)));
return tag;
};
var Tag = /*#__PURE__*/React.forwardRef(TagFunction);
Tag.displayName = "Tag";
exports.Tag = Tag;
exports.TagFunction = TagFunction;
exports["default"] = Tag;
//# sourceMappingURL=Tag.js.map