@ucloud-fe/react-components 1.13.0 → 1.15.0

package/lib/components/Tag/Group.d.ts

@@ -1,16 +1,22 @@
-export default Group;
-declare class Group extends React.Component<any, any, any> {
-    static propTypes: {
-        /** @ignore */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * 紧凑型布局
-         */
-        compact: PropTypes.Requireable<boolean>;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    render(): JSX.Element;
+import React from 'react';
+export declare type Key = number | string;
+export interface TagGroupProps {
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * 紧凑型布局
+     */
+    compact?: boolean;
+    /**
+     * 暴露的Tag数量
+     */
+    exposeCount?: number;
+    /**
+     * 是否自动按照宽度调整展示数量
+     *  */
+    autoAdjustment?: boolean;
+    /** 弹出层的 popover props */
+    popoverProps?: any;
 }
-import React from "react";
-import PropTypes from "prop-types";
+declare const _default: React.MemoExoticComponent<(props: TagGroupProps & React.HTMLAttributes<HTMLDivElement>) => JSX.Element | null>;
+export default _default;

package/lib/components/Tag/Group.js

@@ -9,60 +9,204 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));
+
+var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
+
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _Menu = _interopRequireDefault(require("../../components/Menu"));
+
+var _Tag = _interopRequireDefault(require("../../components/Tag"));
 
 var _style = require("./style");
 
+var _excluded = ["children", "exposeCount", "lens", "popoverProps"],
+    _excluded2 = ["children", "exposeCount", "lens"],
+    _excluded3 = ["autoAdjustment", "compact", "children"];
+
+var _this = void 0;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var _uid = 0;
+var ID_KEY = 'data-urc-tag_list-id';
+
+var TagMenu = function TagMenu(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var list = _ref.list,
+      popoverProps = _ref.popoverProps;
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  if (!list.length) return null;
+
+  var renderList = function renderList(list) {
+    var _this3 = this;
+
+    (0, _newArrowCheck2.default)(this, _this2);
+    return list.map(function (info, i) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return /*#__PURE__*/_react.default.createElement(_style.TagPopoverWrap, {
+        key: i
+      }, info);
+    }.bind(this));
+  }.bind(this);
+
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
+    trigger: ['hover'],
+    popup: /*#__PURE__*/_react.default.createElement(_style.TagMenuWapper, null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      selectable: false,
+      customStyle: {
+        maxHeight: '380px'
+      }
+    }, renderList(list)))
+  }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_style.TagMoreWapper, null, /*#__PURE__*/_react.default.createElement(_Tag.default, null, "+", list.length)));
+}.bind(void 0);
+
+var PureTagList = function PureTagList(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var children = props.children,
+      exposeCount = props.exposeCount,
+      lens = props.lens,
+      popoverProps = props.popoverProps,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var childArray = _react.default.Children.toArray(children);
+
+  var _exposeCount = exposeCount || 0;
+
+  var tagList, menuList;
+
+  if (lens > _exposeCount + 1) {
+    tagList = childArray.slice(0, exposeCount);
+    menuList = childArray.slice(exposeCount);
+  } else {
+    tagList = childArray;
+    menuList = [];
+  }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  return exposeCount === void 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tagList) : /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
+    exposeCount: exposeCount,
+    sharedProps: {
+      size: 'sm'
+    }
+  }), tagList, menuList.length ? /*#__PURE__*/_react.default.createElement(TagMenu, {
+    list: menuList,
+    popoverProps: popoverProps
+  }) : null);
+}.bind(void 0);
 
-var Group = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Group, _Component);
+PureTagList.propTypes = {
+  children: _propTypes.default.node,
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
+};
+
+var AutoAdjustmentTagList = function AutoAdjustmentTagList(props) {
+  var _this4 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var children = props.children,
+      _props$exposeCount = props.exposeCount,
+      _exposeCount = _props$exposeCount === void 0 ? 3 : _props$exposeCount,
+      lens = props.lens,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+
+  var _useState = (0, _react.useState)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    return _uid++;
+  }.bind(this)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      uid = _useState2[0];
+
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
+  }.bind(this), [uid]);
+  var maxCount = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    var maxCount = Math.min(lens, Math.max(_exposeCount, 0));
+    return maxCount;
+  }.bind(this), [_exposeCount, lens]);
+
+  var _useOverflow = (0, _useOverflow3.default)({
+    containerRef: containerRef,
+    defaultCount: maxCount,
+    maxCount: maxCount
+  }),
+      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 1),
+      exposeCount = _useOverflow2[0];
+
+  return /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({}, rest, {
+    lens: lens,
+    children: children,
+    exposeCount: exposeCount
+  }, (0, _defineProperty2.default)({}, ID_KEY, uid)));
+}.bind(void 0);
+
+AutoAdjustmentTagList.propTypes = {
+  children: _propTypes.default.node,
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
+};
 
-  var _super = _createSuper(Group);
+var Group = function Group(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var autoAdjustment = props.autoAdjustment,
+      compact = props.compact,
+      children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
-  function Group() {
-    (0, _classCallCheck2.default)(this, Group);
-    return _super.apply(this, arguments);
+  if (!children) {
+    return null;
   }
 
-  (0, _createClass2.default)(Group, [{
-    key: "render",
-    value: function render() {
-      var rest = (0, _extends2.default)({}, this.props);
-      return /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, rest);
-    }
-  }]);
-  return Group;
-}(_react.Component);
+  var lens = Array.isArray(children) ? children.length : 1;
+  return !compact ? /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
+    compact: false
+  }, rest), autoAdjustment ? /*#__PURE__*/_react.default.createElement(AutoAdjustmentTagList, (0, _extends2.default)({
+    lens: lens,
+    children: children
+  }, rest)) : /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({
+    lens: lens,
+    children: children
+  }, rest))) : /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
+    compact: compact,
+    children: children
+  }, rest));
+}.bind(void 0);
 
 Group.propTypes = {
-  /** @ignore */
   children: _propTypes.default.node,
-
-  /**
-   * 紧凑型布局
-   */
-  compact: _propTypes.default.bool
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
 };
-var _default = Group;
+
+var _default = /*#__PURE__*/_react.default.memo(Group);
+
 exports.default = _default;

package/lib/components/Tag/Icon.d.ts

@@ -13,6 +13,18 @@ declare class Icon extends React.PureComponent<any, any, any> {
          * 样式风格
          */
         styleType: PropTypes.Requireable<string>;
+        /**
+         * icon 大小
+         */
+        iconSize: PropTypes.Requireable<string>;
+        /**
+         * 是否开启border样式
+         */
+        border: PropTypes.Requireable<boolean>;
+        /**
+         * border 类型
+         */
+        borderType: PropTypes.Requireable<string>;
         /**
          * 自定义样式
          */
@@ -25,6 +37,11 @@ declare class Icon extends React.PureComponent<any, any, any> {
             background: PropTypes.Requireable<string>;
         }>>;
     };
+    static defaultProps: {
+        borderType: string;
+        iconSize: string;
+        border: boolean;
+    };
     constructor(props: any);
     constructor(props: any, context: any);
     render(): JSX.Element;

package/lib/components/Tag/Icon.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -29,7 +31,7 @@ var _style = require("./style");
 
 var _Tag = require("./Tag");
 
-var _excluded = ["children", "icon", "prefix"];
+var _excluded = ["children", "icon", "prefix", "borderType", "iconSize", "border"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -57,8 +59,15 @@ var Icon = /*#__PURE__*/function (_PureComponent) {
           children = _this$props.children,
           icon = _this$props.icon,
           prefix = _this$props.prefix,
+          borderType = _this$props.borderType,
+          iconSize = _this$props.iconSize,
+          border = _this$props.border,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_style.IconTagWrapper, rest, typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.IconTag, {
+      return /*#__PURE__*/_react.default.createElement(_style.IconTagWrapper, (0, _extends2.default)({
+        borderType: borderType,
+        iconSize: iconSize,
+        border: border
+      }, rest), typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.IconTag, {
         type: icon,
         prefix: prefix
       }) : icon);
@@ -84,6 +93,21 @@ Icon.propTypes = {
    */
   styleType: _propTypes.default.oneOf(_Tag.StyleType),
 
+  /**
+   * icon 大小
+   */
+  iconSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
+
+  /**
+   * 是否开启border样式
+   */
+  border: _propTypes.default.bool,
+
+  /**
+   * border 类型
+   */
+  borderType: _propTypes.default.oneOf(['default', 'circle']),
+
   /**
    * 自定义样式
    */
@@ -98,5 +122,10 @@ Icon.propTypes = {
     background: _propTypes.default.string
   })
 };
+Icon.defaultProps = {
+  borderType: 'default',
+  iconSize: 'sm',
+  border: true
+};
 var _default = Icon;
 exports.default = _default;

package/lib/components/Tag/Tag.d.ts

@@ -19,6 +19,22 @@ declare class Tag extends React.PureComponent<any, any, any> {
          * 自定义前置 icon
          */
         icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /**
+         * icon 大小
+         */
+        iconSize: PropTypes.Requireable<string>;
+        /**
+         * 是否开启border样式
+         */
+        border: PropTypes.Requireable<boolean>;
+        /**
+         * border 类型
+         */
+        borderType: PropTypes.Requireable<string>;
+        /**
+         * 后缀
+         */
+        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * 是否禁用
          */
@@ -39,6 +55,9 @@ declare class Tag extends React.PureComponent<any, any, any> {
     };
     static defaultProps: {
         styleType: string;
+        borderType: string;
+        iconSize: string;
+        border: boolean;
     };
     constructor(props: any);
     constructor(props: any, context: any);

package/lib/components/Tag/Tag.js

@@ -27,9 +27,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
 var _style = require("./style");
 
-var _excluded = ["children", "styleType", "closable", "icon", "disabled", "onClose"];
+var _excluded = ["children", "styleType", "closable", "icon", "disabled", "onClose", "iconSize", "border", "borderType", "suffix"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -62,13 +64,26 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           icon = _this$props.icon,
           disabled = _this$props.disabled,
           onClose = _this$props.onClose,
+          iconSize = _this$props.iconSize,
+          border = _this$props.border,
+          borderType = _this$props.borderType,
+          suffix = _this$props.suffix,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_style.TagWrapper, (0, _extends2.default)({
         styleType: styleType,
-        disabled: disabled
-      }, rest), icon && /*#__PURE__*/_react.default.createElement(_style.PrefixIconWrapper, null, typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.PrefixIcon, {
-        type: icon
-      }) : icon), /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, children), closable && /*#__PURE__*/_react.default.createElement(_style.CloseIconWrapper, {
+        disabled: disabled,
+        border: border,
+        borderType: borderType,
+        closable: closable
+      }, rest), icon && /*#__PURE__*/_react.default.createElement(_style.PrefixIconWrapper, null, typeof icon === 'string' ? icon === 'loading' ? /*#__PURE__*/_react.default.createElement(_style.SvgIconWrapper, {
+        size: iconSize
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        type: "loading-line",
+        spin: true
+      })) : /*#__PURE__*/_react.default.createElement(_style.PrefixIcon, {
+        type: icon,
+        size: iconSize
+      }) : icon), /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, children), suffix && /*#__PURE__*/_react.default.createElement(_style.SuffixIconWrapper, null, suffix), closable && /*#__PURE__*/_react.default.createElement(_style.CloseIconWrapper, {
         onClick: disabled ? undefined : onClose
       }, /*#__PURE__*/_react.default.createElement(_style.CloseIcon, {
         type: "cross"
@@ -102,6 +117,26 @@ Tag.propTypes = {
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
+  /**
+   * icon 大小
+   */
+  iconSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
+
+  /**
+   * 是否开启border样式
+   */
+  border: _propTypes.default.bool,
+
+  /**
+   * border 类型
+   */
+  borderType: _propTypes.default.oneOf(['default', 'circle', 'corner']),
+
+  /**
+   * 后缀
+   */
+  suffix: _propTypes.default.node,
+
   /**
    * 是否禁用
    */
@@ -125,7 +160,10 @@ Tag.propTypes = {
   })
 };
 Tag.defaultProps = {
-  styleType: 'default'
+  styleType: 'default',
+  borderType: 'default',
+  iconSize: 'sm',
+  border: true
 };
 var _default = Tag;
 exports.default = _default;

package/lib/components/Tag/index.d.ts

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import Tag from './Tag';
-import Group from './Group';
 import IconTag from './Icon';
 declare const ExportTag: typeof Tag & {
-    Group: typeof Group;
+    Group: import("react").MemoExoticComponent<(props: import("./Group").TagGroupProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element | null>;
     Icon: typeof IconTag;
 };
 export default ExportTag;