tdesign-react/lib/tag/Tag.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _objectWithoutProperties } from '../_chunks/dep-6b660ef0.js';
import React, { useMemo, forwardRef } from 'react';
import classNames from 'classnames';
import { CloseIcon } from 'tdesign-icons-react';
import { t as tinycolor } from '../_chunks/dep-3c3d29db.js';
import noop from '../_util/noop.js';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import { tagDefaultProps } from './defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-eca3a3de.js';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import 'dayjs';

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(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 = useDefaultProps(originalProps, 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 ? noop : _props$onClick,
    _props$onClose = props.onClose,
    onClose = _props$onClose === void 0 ? noop : _props$onClose,
    className = props.className,
    style = props.style,
    disabled = props.disabled,
    children = props.children,
    color = props.color,
    titleAttr = props.title,
    otherTagProps = _objectWithoutProperties(props, _excluded);
  var _useConfig = useConfig(),
    classPrefix = _useConfig.classPrefix;
  var _useGlobalIcon = useGlobalIcon({
      CloseIcon: CloseIcon
    }),
    CloseIcon$1 = _useGlobalIcon.CloseIcon;
  var tagClassPrefix = "".concat(classPrefix, "-tag");
  var sizeMap = {
    large: "".concat(classPrefix, "-size-l"),
    small: "".concat(classPrefix, "-size-s")
  };
  var tagClassNames = classNames(tagClassPrefix, "".concat(tagClassPrefix, "--").concat(theme), "".concat(tagClassPrefix, "--").concat(variant), _defineProperty(_defineProperty(_defineProperty({}, "".concat(tagClassPrefix, "--").concat(shape), shape !== "square"), "".concat(tagClassPrefix, "--ellipsis"), !!maxWidth), "".concat(tagClassPrefix, "--disabled"), disabled), sizeMap[size], className);
  var deleteIcon = /* @__PURE__ */React.createElement(CloseIcon$1, {
    onClick: function onClick(e) {
      if (disabled) return;
      onClose({
        e: e
      });
    },
    className: "".concat(tagClassPrefix, "__icon-close")
  });
  var title = 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 = useMemo(function () {
    if (!color) return style;
    var luminance = 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(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 = useMemo(function () {
    if (!maxWidth) return {};
    return {
      maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : "".concat(maxWidth, "px")
    };
  }, [maxWidth]);
  var tag = /* @__PURE__ */React.createElement("div", _objectSpread({
    ref: ref,
    className: tagClassNames,
    onClick: function onClick(e) {
      if (disabled) return;
      _onClick({
        e: e
      });
    },
    style: getTagStyle
  }, otherTagProps), /* @__PURE__ */React.createElement(React.Fragment, null, icon, /* @__PURE__ */React.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__*/forwardRef(TagFunction);
Tag.displayName = "Tag";

export { Tag, TagFunction, Tag as default };
//# sourceMappingURL=Tag.js.map