tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
197 lines (195 loc) • 7.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.LabelColors = exports.Label = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _colorAlpha = _interopRequireDefault(require("color-alpha"));
var _configProvider = require("../config-provider");
var _tag = _interopRequireDefault(require("antd/lib/tag"));
var _ellipsis = _interopRequireDefault(require("../ellipsis"));
require("./label.less");
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var LabelColors;
(function (LabelColors) {
LabelColors["cyan"] = "cyan";
LabelColors["green"] = "green";
LabelColors["iris"] = "iris";
LabelColors["blue"] = "blue";
LabelColors["lavender"] = "lavender";
LabelColors["orange"] = "orange";
LabelColors["golden"] = "golden";
LabelColors["red"] = "red";
LabelColors["grey"] = "grey";
})(LabelColors || (exports.LabelColors = LabelColors = {}));
var colors = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, LabelColors.cyan, '#1e9493'), LabelColors.green, '#07c790'), LabelColors.iris, '#5e47d3'), LabelColors.blue, '#126bfb'), LabelColors.lavender, '#945fb9'), LabelColors.orange, '#ed7b20'), LabelColors.golden, '#de8a02'), LabelColors.red, '#d96156'), LabelColors.grey, '#5e6e90');
/**
* 计算标签样式
*
* @param type
* @param preset
* @param textColorSame
*/
var computeTagStyle = function computeTagStyle(type, color, textColorSame) {
if (!color) {
return;
}
switch (type) {
case 'dot':
if (textColorSame) {
return {
color: color
};
}
return;
case 'filled':
return {
color: '#fff',
backgroundColor: color
};
case 'rounded':
return {
color: color,
backgroundColor: (0, _colorAlpha["default"])(color, 0.1)
};
case 'outline':
return {
color: color,
borderColor: (0, _colorAlpha["default"])(color, 0.4),
backgroundColor: (0, _colorAlpha["default"])(color, 0.1)
};
}
};
var Label = exports.Label = function Label(_a) {
var className = _a.className,
children = _a.children,
type = _a.type,
color = _a.color,
icon = _a.icon,
style = _a.style,
_a$textColorSame = _a.textColorSame,
textColorSame = _a$textColorSame === void 0 ? icon != null : _a$textColorSame,
_a$iconPosition = _a.iconPosition,
iconPosition = _a$iconPosition === void 0 ? 'prefix' : _a$iconPosition,
ellipsisOptions = _a.ellipsisOptions,
props = __rest(_a, ["className", "children", "type", "color", "icon", "style", "textColorSame", "iconPosition", "ellipsisOptions"]);
var normalizeType = (0, _react.useMemo)(function () {
if (icon) {
return 'dot';
}
return type;
}, [icon, type]);
var computedColor = (0, _react.useMemo)(function () {
return colors[color] || color;
}, [color]);
var tagStyle = (0, _react.useMemo)(function () {
return computeTagStyle(normalizeType, computedColor, textColorSame);
}, [normalizeType, computedColor, textColorSame]);
var hasIcon = (0, _react.useMemo)(function () {
return icon != null;
}, [icon]);
return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref) {
var getPrefixCls = _ref.getPrefixCls;
var prefixCls = getPrefixCls('label');
var displayEllipsisOptions = function () {
var options = Object.assign({}, ellipsisOptions);
var iconElement = _react["default"].createElement("span", {
className: "".concat(prefixCls, "-icon"),
style: {
color: computedColor
}
}, icon);
if (iconPosition === 'prefix') {
options.prefix = iconElement;
}
if (iconPosition === 'suffix') {
options.suffix = iconElement;
}
if (options.Popover === true) {
options.content = children;
} else {
options.title = children;
}
return options;
}();
return _react["default"].createElement(_tag["default"], Object.assign({}, props, {
className: (0, _classnames["default"])(className, prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-dot"), normalizeType === 'dot'), "".concat(prefixCls, "-outline"), normalizeType === 'outline'), "".concat(prefixCls, "-filled"), normalizeType === 'filled'), "".concat(prefixCls, "-rounded"), normalizeType === 'rounded')),
style: Object.assign(Object.assign({}, style), tagStyle)
}), normalizeType === 'dot' && icon == null && _react["default"].createElement("span", {
className: "".concat(prefixCls, "-dot-symbol"),
style: {
backgroundColor: computedColor
}
}), hasIcon ? _react["default"].createElement(_ellipsis["default"], Object.assign({}, displayEllipsisOptions), children) : children);
});
};
Label.CheckableLabel = _tag["default"].CheckableTag;
var _default = exports["default"] = Label;