@nutui/nutui-react/dist/esm/Tag.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import React__default, { useState } from "react";
import { Close } from "@nutui/icons-react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { type: "default", background: "", color: "", plain: false, round: false, mark: false, closeable: false, closeIcon: null, onClose: (e) => {
}, onClick: (e) => {
} });
const Tag = (props) => {
  const { className, style, background, plain, type, round, children, mark, closeable, closeIcon, color, onClick, onClose } = Object.assign(Object.assign({}, defaultProps), props);
  const [visible, setVisible] = useState(true);
  const classPrefix = "nut-tag";
  const classes = classNames({
    [classPrefix]: true,
    [`${classPrefix}-${type}`]: type,
    [`${classPrefix}-plain`]: plain,
    [`${classPrefix}-round`]: round,
    [`${classPrefix}-mark`]: mark,
    [`${classPrefix}-close`]: closeable,
    [`${className}`]: className
  });
  const handleClick = (e) => {
    onClick && onClick(e);
  };
  const getStyle = () => {
    const style2 = {};
    if (color) {
      style2.color = color;
    } else if (background && plain) {
      style2.color = background;
    }
    if (plain) {
      style2.borderColor = background;
    } else if (background) {
      style2.background = background;
    }
    return style2;
  };
  return React__default.createElement(React__default.Fragment, null, closeable ? visible && React__default.createElement(
    "div",
    { className: classes, style: Object.assign(Object.assign({}, style), getStyle()), onClick: (e) => handleClick(e) },
    children && React__default.createElement("span", { className: `${classPrefix}-text` }, children),
    React__default.isValidElement(closeIcon) ? React__default.createElement("i", { className: `${classPrefix}-custom-icon`, onClick: (e) => {
      setVisible(false);
      onClose && onClose(e);
    } }, closeIcon) : React__default.createElement(Close, { width: 8, height: 8, onClick: (e) => {
      setVisible(false);
      onClose && onClose(e);
    } })
  ) : React__default.createElement("div", { className: classes, style: Object.assign(Object.assign({}, style), getStyle()), onClick: (e) => handleClick(e) }, children && React__default.createElement("span", { className: `${classPrefix}-text` }, children)));
};
Tag.displayName = "NutTag";
export {
  Tag as default
};