@ucloud-fe/react-components 1.5.17 → 1.5.18

package/lib/components/Badge/Badge.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _rcAlign = _interopRequireDefault(require("../../libs/rc-align"));
+
+var _style = require("./style");
+
+var _placements = _interopRequireDefault(require("./placements"));
+
+var _excluded = ["value", "maxValue", "dot", "placement", "hideWhenZero", "children", "badgeStyle", "offset", "color", "zIndex"];
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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); }; }
+
+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; } }
+
+var defaultProps = {
+  maxValue: 99,
+  placement: 'topRight',
+  color: 'red',
+  zIndex: 9
+};
+var Placement = Object.keys(_placements.default);
+var Color = Object.keys(_style.StyleMap);
+
+var isNumberValue = function isNumberValue(value) {
+  (0, _newArrowCheck2.default)(this, _this);
+  return typeof value === 'number' ? true : typeof value === 'string' ? /^\d+\.?\d*$/.test(value) : false;
+}.bind(void 0);
+
+var Badge = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Badge, _PureComponent);
+
+  var _super = _createSuper(Badge);
+
+  function Badge() {
+    var _this3 = this;
+
+    var _this2;
+
+    (0, _classCallCheck2.default)(this, Badge);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this2 = _super.call.apply(_super, [this].concat(args));
+
+    _this2.renderBadge = function () {
+      (0, _newArrowCheck2.default)(this, _this3);
+      var _this2$props = _this2.props,
+          value = _this2$props.value,
+          maxValue = _this2$props.maxValue,
+          dot = _this2$props.dot,
+          badgeStyle = _this2$props.badgeStyle,
+          color = _this2$props.color;
+      var content;
+
+      if (dot) {
+        content = null;
+      } else if (isNumberValue(value) && +value > maxValue) {
+        content = maxValue + '+';
+      } else {
+        content = value;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_style.SBadge, {
+        dot: dot,
+        color: color,
+        style: badgeStyle
+      }, content);
+    }.bind(this);
+
+    _this2.getTarget = function () {
+      (0, _newArrowCheck2.default)(this, _this3);
+      // eslint-disable-next-line react/no-find-dom-node
+      return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this2));
+    }.bind(this);
+
+    return _this2;
+  }
+
+  (0, _createClass2.default)(Badge, [{
+    key: "render",
+    value: function render() {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      var _this$props = this.props,
+          value = _this$props.value,
+          maxValue = _this$props.maxValue,
+          dot = _this$props.dot,
+          placement = _this$props.placement,
+          hideWhenZero = _this$props.hideWhenZero,
+          children = _this$props.children,
+          badgeStyle = _this$props.badgeStyle,
+          offset = _this$props.offset,
+          color = _this$props.color,
+          zIndex = _this$props.zIndex,
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+
+      var badge = this.renderBadge();
+
+      if (!children) {
+        return /*#__PURE__*/_react.default.createElement(_style.SWrap, rest, badge);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_style.SWrap, rest, children, hideWhenZero && (value === 0 || value === '0') ? null : /*#__PURE__*/_react.default.createElement(_rcAlign.default, {
+        target: this.getTarget,
+        align: _objectSpread(_objectSpread({}, _placements.default[placement]), {}, {
+          offset: offset
+        })
+      }, /*#__PURE__*/_react.default.createElement(_style.SBadgeWrap, {
+        zIndex: zIndex
+      }, badge)));
+    }
+  }]);
+  return Badge;
+}(_react.PureComponent);
+
+Badge.propTypes = {
+  value: _propTypes.default.node,
+  maxValue: _propTypes.default.number,
+  dot: _propTypes.default.bool,
+  placement: _propTypes.default.oneOf(['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom', 'left', 'right']),
+  hideWhenZero: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  color: _propTypes.default.oneOf(['red', 'green', 'yellow', 'primary']),
+  zIndex: _propTypes.default.number
+};
+Badge.defaultProps = defaultProps;
+Badge.Placement = Placement;
+Badge.Color = Color;
+var _default = Badge;
+exports.default = _default;

package/lib/components/Badge/Bubble.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @deprecated
+ * 后续会移除，请使用 Badge 替代
+ */
+export class Bubble extends React.PureComponent<any, any, any> {
+    static propTypes: {
+        /** @ignore */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** 泡泡内容 */
+        bubble: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** 内置样式风格 */
+        styleType: PropTypes.Validator<string>;
+        /** 尺寸 */
+        size: PropTypes.Requireable<string>;
+        /** 自定义样式 */
+        customStyle: PropTypes.Requireable<PropTypes.InferProps<{
+            /** 泡泡字色 */
+            bubbleColor: PropTypes.Requireable<string>;
+            /** 泡泡的背景色 */
+            bubbleBackground: PropTypes.Requireable<string>;
+        }>>;
+        /**
+         * @ignore
+         * 自定义冒泡层定位的目标元素
+         */
+        getBubbleTarget: PropTypes.Requireable<(...args: any[]) => any>;
+        /** 自定义偏移量 */
+        offset: PropTypes.Requireable<any[]>;
+    };
+    static defaultProps: {
+        offset: number[];
+        size: string;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export namespace Bubble {
+    export { StyleType };
+    export { Size };
+}
+export default Bubble;
+import React from "react";
+import PropTypes from "prop-types";
+declare const StyleType: string[];
+declare const Size: string[];

package/lib/components/Badge/Bubble.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Bubble = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _rcAlign = _interopRequireDefault(require("../../libs/rc-align"));
+
+var _style = require("./style");
+
+var _placements = require("./placements");
+
+var _excluded = ["children", "bubble", "styleType", "customStyle", "offset", "getBubbleTarget", "size"];
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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); }; }
+
+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; } }
+
+var StyleType = Object.keys(_style.bubbleStyleMap);
+var Size = ['sm', 'md'];
+/**
+ * @deprecated
+ * 后续会移除，请使用 Badge 替代
+ */
+
+var Bubble = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Bubble, _PureComponent);
+
+  var _super = _createSuper(Bubble);
+
+  function Bubble() {
+    (0, _classCallCheck2.default)(this, Bubble);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Bubble, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var styleType = this.props.styleType;
+
+      if (!styleType) {
+        console.error('Must provide styleType for Tag');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          bubble = _this$props.bubble,
+          _this$props$styleType = _this$props.styleType,
+          styleType = _this$props$styleType === void 0 ? 'yellow' : _this$props$styleType,
+          customStyle = _this$props.customStyle,
+          offset = _this$props.offset,
+          getBubbleTarget = _this$props.getBubbleTarget,
+          size = _this$props.size,
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_style.SWrap, rest, children, bubble && /*#__PURE__*/_react.default.createElement(_rcAlign.default, {
+        target: getBubbleTarget || function () {
+          (0, _newArrowCheck2.default)(this, _this);
+          return _reactDom.default.findDOMNode(this);
+        }.bind(this),
+        align: _objectSpread(_objectSpread({}, _placements.bubblePlacement), {}, {
+          targetOffset: offset
+        })
+      }, /*#__PURE__*/_react.default.createElement(_style.SBubbleWrap, {
+        styleType: styleType,
+        customStyle: customStyle,
+        size: size
+      }, bubble)));
+    }
+  }]);
+  return Bubble;
+}(_react.PureComponent);
+
+exports.Bubble = Bubble;
+Bubble.propTypes = {
+  /** @ignore */
+  children: _propTypes.default.node,
+
+  /** 泡泡内容 */
+  bubble: _propTypes.default.node,
+
+  /** 内置样式风格 */
+  styleType: _propTypes.default.oneOf(StyleType).isRequired,
+
+  /** 尺寸 */
+  size: _propTypes.default.oneOf(Size),
+
+  /** 自定义样式 */
+  customStyle: _propTypes.default.shape({
+    /** 泡泡字色 */
+    bubbleColor: _propTypes.default.string,
+
+    /** 泡泡的背景色 */
+    bubbleBackground: _propTypes.default.string
+  }),
+
+  /**
+   * @ignore
+   * 自定义冒泡层定位的目标元素
+   */
+  getBubbleTarget: _propTypes.default.func,
+
+  /** 自定义偏移量 */
+  offset: _propTypes.default.array
+};
+Bubble.defaultProps = {
+  offset: [12, -4],
+  size: 'md'
+};
+Bubble.StyleType = StyleType;
+Bubble.Size = Size;
+var _default = Bubble;
+exports.default = _default;

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

@@ -0,0 +1,7 @@
+import Badge, { BadgeProps } from './Badge';
+import Bubble from './Bubble';
+declare const ExportBadge: typeof Badge & {
+    Bubble: typeof Bubble;
+};
+export default ExportBadge;
+export type { BadgeProps };

package/lib/components/Badge/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _type = require("../../type");
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+var _Bubble = _interopRequireDefault(require("./Bubble"));
+
+var ExportBadge = (0, _type.ExportComponent)(_Badge.default, {
+  Bubble: _Bubble.default
+});
+var _default = ExportBadge;
+exports.default = _default;

package/lib/components/Badge/placements.d.ts

@@ -0,0 +1,35 @@
+declare const placements: {
+    topRight: {
+        points: string[];
+    };
+    topLeft: {
+        points: string[];
+    };
+    bottomRight: {
+        points: string[];
+    };
+    bottomLeft: {
+        points: string[];
+    };
+    top: {
+        points: string[];
+    };
+    bottom: {
+        points: string[];
+    };
+    left: {
+        points: string[];
+    };
+    right: {
+        points: string[];
+    };
+};
+export default placements;
+export declare const bubblePlacement: {
+    points: string[];
+    overflow: {
+        adjustX: number;
+        adjustY: number;
+    };
+    offset: number[];
+};

package/lib/components/Badge/placements.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bubblePlacement = exports.default = void 0;
+var placements = {
+  topRight: {
+    points: ['cc', 'tr']
+  },
+  topLeft: {
+    points: ['cc', 'tl']
+  },
+  bottomRight: {
+    points: ['cc', 'br']
+  },
+  bottomLeft: {
+    points: ['cc', 'bl']
+  },
+  top: {
+    points: ['cc', 'tc']
+  },
+  bottom: {
+    points: ['cc', 'bc']
+  },
+  left: {
+    points: ['cc', 'cl']
+  },
+  right: {
+    points: ['cc', 'cr']
+  }
+};
+var _default = placements;
+exports.default = _default;
+var bubblePlacement = {
+  points: ['bl', 'tr'],
+  overflow: {
+    adjustX: 1,
+    adjustY: 1
+  },
+  offset: [0, -5]
+};
+exports.bubblePlacement = bubblePlacement;

package/lib/components/Badge/style/index.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { DesignToken } from '../../../style';
+export declare const prefixCls: string;
+export declare const wrapCls: string;
+export declare const badgeCls: string;
+export declare const dotCls: string;
+export declare const SWrap: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+declare type SBadgeWrapProps = {
+    zIndex?: number;
+};
+export declare const SBadgeWrap: import("react").ForwardRefExoticComponent<SBadgeWrapProps & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+interface StyleInfo {
+    bg: DesignToken;
+    color?: DesignToken;
+}
+export declare const StyleMap: {
+    red: StyleInfo;
+    green: StyleInfo;
+    yellow: StyleInfo;
+    primary: StyleInfo;
+};
+declare type SBadgeProps = {
+    dot?: boolean;
+    color?: keyof typeof StyleMap;
+};
+export declare const SBadge: import("react").ForwardRefExoticComponent<SBadgeProps & import("react").HTMLAttributes<HTMLSpanElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+interface BubbleStyleInfo {
+    bg: DesignToken;
+    color?: DesignToken;
+}
+export declare const bubbleStyleMap: {
+    yellow: BubbleStyleInfo;
+    orange: BubbleStyleInfo;
+    gray: BubbleStyleInfo;
+    purple: BubbleStyleInfo;
+};
+declare type SBubbleProps = {
+    styleType: keyof typeof bubbleStyleMap;
+    size: 'sm' | 'md';
+    customStyle?: {
+        bubbleColor?: string;
+        bubbleBackground?: string;
+    };
+};
+export declare const SBubbleWrap: import("react").ForwardRefExoticComponent<SBubbleProps & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};