@aloudata/aloudata-design 2.6.2 → 2.7.0

package/dist/Tag/index.js

@@ -1,2 +1,82 @@
-import { Tag } from 'antd';
-export default Tag;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useCallback } from 'react';
+import { CloseLightLine } from "../Icon";
+import classNames from 'classnames';
+export default function Tag(props) {
+  var _classNames;
+  var children = props.children,
+    onClick = props.onClick,
+    closable = props.closable,
+    onClose = props.onClose,
+    color = props.color,
+    icon = props.icon,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    status = props.status,
+    mode = props.mode,
+    disabled = props.disabled,
+    className = props.className;
+  var tagColor = getColor(color, status);
+  var bgColor = mode === 'border' ? '#fff' : convertHexToRGBA(tagColor, mode === 'fill' ? 0.16 : 0.06);
+  var onTagClick = useCallback(function (e) {
+    if (disabled) {
+      return;
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, [disabled, onClick]);
+  var onCloseBtnClick = useCallback(function (e) {
+    if (disabled) {
+      return;
+    }
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [disabled, onClose]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('clickable'), typeof onClick === 'function'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),
+    style: {
+      backgroundColor: bgColor,
+      color: convertHexToRGBA(tagColor, 1),
+      borderColor: mode === 'fill' ? 'transparent' : convertHexToRGBA(tagColor, 0.32)
+    },
+    onClick: onTagClick
+  }, icon && /*#__PURE__*/React.createElement("span", {
+    className: prefixCls('icon')
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: prefixCls('content')
+  }, children), closable ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls('close-btn'),
+    onClick: onCloseBtnClick
+  }, /*#__PURE__*/React.createElement(CloseLightLine, {
+    color: tagColor,
+    size: 16
+  })) : null);
+}
+function getColor(color, status) {
+  if (color) {
+    return color;
+  }
+  var status2ColorMap = {
+    success: '#15803D',
+    info: '#126FDD',
+    warning: '#A16207',
+    error: '#B91C1C',
+    default: '#374151'
+  };
+  if (status) {
+    return status2ColorMap[status];
+  }
+  return status2ColorMap['info'];
+}
+var ALD_PREFIX = 'ald-tag';
+export function prefixCls(className) {
+  return "".concat(ALD_PREFIX, "-").concat(className);
+}
+function convertHexToRGBA(hex, opacity) {
+  var tempHex = hex.replace('#', '');
+  var r = parseInt(tempHex.substring(0, 2), 16);
+  var g = parseInt(tempHex.substring(2, 4), 16);
+  var b = parseInt(tempHex.substring(4, 6), 16);
+  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(opacity, ")");
+}

package/dist/Tag/style/index.less

@@ -1 +1,67 @@
 @import '../../style/index.less';
+
+.ald-tag-container {
+  display: inline-flex;
+  padding: 1px 5px;
+  align-items: center;
+  column-gap: var(--alias-spacing-50, 4px);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--alias-radius-50, 4px);
+  font-size: 14px;
+  line-height: 20px;
+  max-width: 160px;
+  overflow: hidden;
+
+  &.ald-tag-clickable {
+    cursor: pointer;
+  }
+
+  /** 尺寸 **/
+  &.ald-tag-small {
+    font-size: 12px;
+    padding: 1px 3px;
+    line-height: 16px;
+    border-radius: 2px;
+  }
+
+  &.ald-tag-large {
+    font-size: 16px;
+    padding: 1px 7px;
+    line-height: 24px;
+    border-radius: 6px;
+  }
+
+  /** 超长文本截断 **/
+  .ald-tag-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+  }
+
+  /** 可关闭 **/
+  .ald-tag-close-btn {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+
+  /** icon **/
+  .ald-tag-icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /** 禁用 **/
+  &.ald-tag-disabled {
+    cursor: initial;
+    opacity: 0.4;
+
+    .ald-tag-close-btn {
+      cursor: initial;
+    }
+  }
+}