@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
86 lines (85 loc) • 4.08 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState } from "react";
import { Close } from "@nutui/icons-react";
import classNames from "classnames";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
type: 'default',
background: '',
color: '',
plain: false,
round: false,
mark: false,
closeable: false,
closeIcon: null,
onClose: function(e) {},
onClick: function(e) {}
});
export var Tag = function(props) {
var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, background = _$_object_spread.background, plain = _$_object_spread.plain, type = _$_object_spread.type, round = _$_object_spread.round, children = _$_object_spread.children, mark = _$_object_spread.mark, closeable = _$_object_spread.closeable, closeIcon = _$_object_spread.closeIcon, color = _$_object_spread.color, onClick = _$_object_spread.onClick, onClose = _$_object_spread.onClose;
var _useState = _sliced_to_array(useState(true), 2), visible = _useState[0], setVisible = _useState[1];
var classPrefix = 'nut-tag';
var _obj;
var classes = classNames((_obj = {}, _define_property(_obj, classPrefix, true), _define_property(_obj, "".concat(classPrefix, "-").concat(type), type), _define_property(_obj, "".concat(classPrefix, "-plain"), plain), _define_property(_obj, "".concat(classPrefix, "-round"), round), _define_property(_obj, "".concat(classPrefix, "-mark"), mark), _define_property(_obj, "".concat(classPrefix, "-close"), closeable), _define_property(_obj, "".concat(className), className), _obj));
var handleClick = function(e) {
onClick && onClick(e);
};
// 综合考虑 color、background、plain 组合使用时的效果
var getStyle = function() {
var style = {};
// 标签背景与边框颜色
if (plain) {
style.borderColor = background;
} else if (background) {
style.backgroundColor = background;
}
return style;
};
var getTextStyle = function() {
var style = {};
// 标签内字体颜色
if (color) {
style.color = color;
} else if (background && plain) {
style.color = background;
}
return style;
};
var textClasses = classNames("".concat(classPrefix, "-text"), _define_property({}, "".concat(classPrefix, "-text-plain"), plain));
return /*#__PURE__*/ React.createElement(React.Fragment, null, closeable ? visible && /*#__PURE__*/ React.createElement("div", {
className: classes,
style: _object_spread({}, style, getStyle()),
onClick: function(e) {
return handleClick(e);
}
}, children && /*#__PURE__*/ React.createElement("span", {
className: textClasses,
style: getTextStyle()
}, children), /*#__PURE__*/ React.isValidElement(closeIcon) ? /*#__PURE__*/ React.createElement("i", {
className: "".concat(classPrefix, "-custom-icon"),
onClick: function(e) {
setVisible(false);
onClose && onClose(e);
}
}, closeIcon) : /*#__PURE__*/ React.createElement(Close, {
width: 8,
height: 8,
onClick: function(e) {
setVisible(false);
onClose && onClose(e);
}
})) : /*#__PURE__*/ React.createElement("div", {
className: classes,
style: _object_spread({}, style, getStyle()),
onClick: function(e) {
return handleClick(e);
}
}, children && /*#__PURE__*/ React.createElement("span", {
className: textClasses,
style: getTextStyle()
}, children)));
};
Tag.displayName = 'NutTag';