zent/es/tag/Tag.js

一套前端设计语言和基于React的实现

import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { forwardRef } from 'react';
import Icon from '../icon';
var PRESET_COLOR = {
    red: true,
    green: true,
    yellow: true,
    blue: true,
    grey: true,
};
export var Tag = forwardRef(function (_a, ref) {
    var _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.theme, theme = _c === void 0 ? 'grey' : _c, outline = _a.outline, _d = _a.rounded, rounded = _d === void 0 ? true : _d, closable = _a.closable, children = _a.children, className = _a.className, onClose = _a.onClose, closeButtonStyle = _a.closeButtonStyle, _e = _a.visible, visible = _e === void 0 ? true : _e, rest = __rest(_a, ["size", "theme", "outline", "rounded", "closable", "children", "className", "onClose", "closeButtonStyle", "visible"]);
    if (!visible) {
        return null;
    }
    var colorPart = PRESET_COLOR[theme] ? "-" + theme : '';
    var outlinePart = outline ? '-outline' : '';
    return (_jsxs("div", __assign({ ref: ref, className: cx('zent-tag', "zent-tag-style" + colorPart + outlinePart, "zent-tag-size-" + size, className, {
            'zent-tag-rounded': rounded,
            'zent-tag-closable': closable,
        }) }, rest, { "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ className: "zent-tag-content", "data-zv": '10.0.17' }, { children: children }), void 0), closable ? (_jsx(Icon, { type: "close", className: "zent-tag-close-btn", onClick: onClose, style: closeButtonStyle }, void 0)) : null] }), void 0));
});
Tag.displayName = 'ZentTag';
export default Tag;