amis 1.3.5-beta.3 → 1.4.1

package/lib/components/Badge.d.ts

@@ -13,7 +13,7 @@ export interface BadgeSchema extends BaseSchema {
     /**
      * 文本内容
      */
-    text?: string;
+    text?: string | number;
     /**
      * 大小
      */
@@ -21,11 +21,19 @@ export interface BadgeSchema extends BaseSchema {
     /**
      * 角标类型
      */
-    mode?: 'text' | 'dot';
+    mode?: 'text' | 'dot' | 'ribbon';
+    /**
+     * 角标位置，优先级大于position
+     */
+    offset?: [number | string, number | string];
     /**
      * 角标位置
      */
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * 封顶的数字值
+     */
+    overflowCount?: number;
     /**
      * 动态控制是否显示
      */
@@ -40,6 +48,10 @@ export interface BadgeSchema extends BaseSchema {
     style?: {
         [propName: string]: any;
     };
+    /**
+     * 提示类型
+     */
+    level?: 'info' | 'warning' | 'success' | 'danger';
 }
 export interface BadgeProps {
     badge?: BadgeSchema;
@@ -49,6 +61,7 @@ export interface BadgeProps {
 export declare class Badge extends React.Component<BadgeProps, object> {
     static propsList: Array<string>;
     constructor(props: BadgeProps);
+    renderBadge(text: any, size: number, position: any, offsetStyle: any, sizeStyle: any, animationElement: any): JSX.Element | null;
     render(): React.ReactNode;
 }
 export declare function withBadge<P extends object>(Component: React.ComponentType<P>): {

package/lib/components/Badge.js

@@ -14,6 +14,26 @@ var Badge = /** @class */ (function (_super) {
     function Badge(props) {
         return _super.call(this, props) || this;
     }
+    Badge.prototype.renderBadge = function (text, size, position, offsetStyle, sizeStyle, animationElement) {
+        var _a = this.props, cx = _a.classnames, badge = _a.badge;
+        var _b = badge, _c = _b.mode, mode = _c === void 0 ? 'dot' : _c, _d = _b.level, level = _d === void 0 ? 'danger' : _d, style = _b.style;
+        switch (mode) {
+            case 'dot':
+                return (react_1.default.createElement("span", { className: cx('Badge-dot', "Badge--" + position, "Badge--" + level), style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, offsetStyle), sizeStyle), style) }, animationElement));
+            case 'text':
+                return (react_1.default.createElement("span", { className: cx('Badge-text', "Badge--" + position, "Badge--" + level), style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, offsetStyle), sizeStyle), style) },
+                    text,
+                    animationElement));
+            case 'ribbon':
+                var outSize = size * Math.sqrt(2) + 5;
+                return (react_1.default.createElement("div", { className: cx('Badge-ribbon-out', "Badge-ribbon-out--" + position), style: { width: outSize, height: outSize } },
+                    react_1.default.createElement("span", { className: cx('Badge-ribbon', "Badge-ribbon--" + position, "Badge--" + level), style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sizeStyle), style) },
+                        text,
+                        animationElement)));
+            default:
+                return null;
+        }
+    };
     Badge.prototype.render = function () {
         var badge = this.props.badge;
         if (!badge) {
@@ -24,7 +44,7 @@ var Badge = /** @class */ (function (_super) {
         if (typeof badge === 'string') {
             isDisplay = (0, tpl_1.evalExpression)(badge, data) === true;
         }
-        var _b = badge.mode, mode = _b === void 0 ? 'dot' : _b, text = badge.text, size = badge.size, style = badge.style, _c = badge.position, position = _c === void 0 ? 'top-right' : _c, visibleOn = badge.visibleOn, className = badge.className, animation = badge.animation;
+        var _b = badge.mode, mode = _b === void 0 ? 'dot' : _b, text = badge.text, size = badge.size, style = badge.style, offset = badge.offset, _c = badge.position, position = _c === void 0 ? 'top-right' : _c, _d = badge.overflowCount, overflowCount = _d === void 0 ? 99 : _d, visibleOn = badge.visibleOn, className = badge.className, animation = badge.animation;
         if (visibleOn) {
             isDisplay = (0, tpl_1.evalExpression)(visibleOn, data) === true;
         }
@@ -36,6 +56,9 @@ var Badge = /** @class */ (function (_super) {
             if (mode === 'dot') {
                 size = 6;
             }
+            else if (mode === 'ribbon') {
+                size = 12;
+            }
             else {
                 size = 16;
             }
@@ -47,6 +70,10 @@ var Badge = /** @class */ (function (_super) {
                 height: size,
                 lineHeight: size + 'px'
             };
+            // 当text、overflowCount都为number类型时，进行封顶值处理
+            if (typeof text === 'number' && typeof overflowCount === 'number') {
+                text = (text > overflowCount ? overflowCount + "+" : text);
+            }
             if (!text) {
                 isDisplay = false;
             }
@@ -54,6 +81,23 @@ var Badge = /** @class */ (function (_super) {
         if (mode === 'dot') {
             sizeStyle = { width: size, height: size };
         }
+        if (mode === 'ribbon') {
+            sizeStyle = {
+                height: size,
+                lineHeight: size + 'px',
+                fontSize: size
+            };
+        }
+        var offsetStyle = {};
+        // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+        if (offset && offset.length) {
+            position = 'top-right';
+            var left = "calc(50% + " + parseInt(offset[0], 10) + "px)";
+            var right = "calc(-50% + " + parseInt(offset[1], 10) + "px)";
+            offsetStyle = {
+                transform: "translate(" + left + ", " + right + ")",
+            };
+        }
         var animationBackground = 'var(--danger)';
         if (style && style.background) {
             animationBackground = style.background;
@@ -70,9 +114,8 @@ var Badge = /** @class */ (function (_super) {
             } })) : null;
         return (react_1.default.createElement("div", { className: cx('Badge', className) },
             children,
-            isDisplay ? (mode === 'dot' ? (react_1.default.createElement("span", { className: cx('Badge-dot', "Badge--" + position), style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sizeStyle), style) }, animationElement)) : (react_1.default.createElement("span", { className: cx('Badge-text', "Badge--" + position), style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sizeStyle), style) },
-                text,
-                animationElement))) : null));
+            isDisplay ?
+                this.renderBadge(text, size, position, offsetStyle, sizeStyle, animationElement) : null));
     };
     Badge.propsList = ['body', 'className', 'children'];
     return Badge;

package/lib/components/Badge.js.map

@@ -6,8 +6,8 @@
         "/src/components/Badge.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "/**\n * @file 角标组件\n */\n\nimport React from 'react';\nimport hoistNonReactStatic from 'hoist-non-react-statics';\nimport {BaseSchema, SchemaExpression} from '../Schema';\nimport {evalExpression} from '../utils/tpl';\nimport {resolveVariable} from '../utils/tpl-builtin';\nimport {ClassNamesFn} from '../theme';\n\n/**\n * Badge 角标。\n * 文档：https://baidu.gitee.io/amis/docs/components/badge\n */\nexport interface BadgeSchema extends BaseSchema {\n  /**\n   * 文本内容\n   */\n  text?: string;\n\n  /**\n   * 大小\n   */\n  size?: number;\n\n  /**\n   * 角标类型\n   */\n  mode?: 'text' | 'dot';\n\n  /**\n   * 角标位置\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n  /**\n   * 动态控制是否显示\n   */\n  visibleOn?: SchemaExpression;\n\n  /**\n   * 是否显示动画\n   */\n  animation?: boolean;\n\n  /**\n   * 角标的自定义样式\n   */\n  style?: {\n    [propName: string]: any;\n  };\n}\n\nexport interface BadgeProps {\n  badge?: BadgeSchema;\n  classnames: ClassNamesFn;\n  data: any;\n}\n\nexport class Badge extends React.Component<BadgeProps, object> {\n  static propsList: Array<string> = ['body', 'className', 'children'];\n\n  constructor(props: BadgeProps) {\n    super(props);\n  }\n\n  render() {\n    const badge = this.props.badge;\n    if (!badge) {\n      return this.props.children;\n    }\n    const {children, classnames: cx, data} = this.props;\n    let isDisplay = true;\n    if (typeof badge === 'string') {\n      isDisplay = evalExpression(badge, data) === true;\n    }\n\n    let {\n      mode = 'dot',\n      text,\n      size,\n      style,\n      position = 'top-right',\n      visibleOn,\n      className,\n      animation\n    } = badge;\n\n    if (visibleOn) {\n      isDisplay = evalExpression(visibleOn, data) === true;\n    }\n\n    if (typeof text === 'string' && text[0] === '$') {\n      text = resolveVariable(text, data);\n    }\n\n    // 设置默认值\n    if (typeof size === 'undefined') {\n      if (mode === 'dot') {\n        size = 6;\n      } else {\n        size = 16;\n      }\n    }\n\n    let sizeStyle = {};\n    if (mode === 'text') {\n      sizeStyle = {\n        borderRadius: size / 2,\n        height: size,\n        lineHeight: size + 'px'\n      };\n\n      if (!text) {\n        isDisplay = false;\n      }\n    }\n\n    if (mode === 'dot') {\n      sizeStyle = {width: size, height: size};\n    }\n\n    let animationBackground = 'var(--danger)';\n\n    if (style && style.background) {\n      animationBackground = style.background;\n    }\n\n    const animationElement = animation ? (\n      <div\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          border: `1px solid ${animationBackground}`,\n          borderRadius: '50%',\n          animation: 'badgeDotAnimation 1.2s infinite ease-in-out'\n        }}\n      ></div>\n    ) : null;\n\n    return (\n      <div className={cx('Badge', className)}>\n        {children}\n        {isDisplay ? (\n          mode === 'dot' ? (\n            <span\n              className={cx('Badge-dot', `Badge--${position}`)}\n              style={{...sizeStyle, ...style}}\n            >\n              {animationElement}\n            </span>\n          ) : (\n            <span\n              className={cx('Badge-text', `Badge--${position}`)}\n              style={{...sizeStyle, ...style}}\n            >\n              {text}\n              {animationElement}\n            </span>\n          )\n        ) : null}\n      </div>\n    );\n  }\n}\n\nexport function withBadge<P extends object>(Component: React.ComponentType<P>) {\n  return hoistNonReactStatic(\n    class WithBadge extends React.Component<P & BadgeProps> {\n      static displayName = `WithBadge(${\n        Component.displayName || Component.name\n      })`;\n\n      render() {\n        const badge = this.props.badge;\n\n        if (!badge) {\n          return <Component {...(this.props as P)} />;\n        }\n\n        return (\n          <Badge {...(this.props as BadgeProps)}>\n            <Component {...(this.props as P)} />\n          </Badge>\n        );\n      }\n    },\n    Component\n  );\n}\n"
+        "/**\n * @file 角标组件\n */\n\nimport React from 'react';\nimport hoistNonReactStatic from 'hoist-non-react-statics';\nimport {BaseSchema, SchemaExpression} from '../Schema';\nimport {evalExpression} from '../utils/tpl';\nimport {resolveVariable} from '../utils/tpl-builtin';\nimport {ClassNamesFn} from '../theme';\n\n/**\n * Badge 角标。\n * 文档：https://baidu.gitee.io/amis/docs/components/badge\n */\nexport interface BadgeSchema extends BaseSchema {\n  /**\n   * 文本内容\n   */\n  text?: string | number;\n\n  /**\n   * 大小\n   */\n  size?: number;\n\n  /**\n   * 角标类型\n   */\n  mode?: 'text' | 'dot' | 'ribbon';\n\n  /**\n   * 角标位置，优先级大于position\n   */\n  offset?: [number | string, number | string];\n\n  /**\n   * 角标位置\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n  /**\n   * 封顶的数字值\n   */\n  overflowCount?: number;\n\n  /**\n   * 动态控制是否显示\n   */\n  visibleOn?: SchemaExpression;\n\n  /**\n   * 是否显示动画\n   */\n  animation?: boolean;\n\n  /**\n   * 角标的自定义样式\n   */\n  style?: {\n    [propName: string]: any;\n  };\n\n  /**\n   * 提示类型\n   */\n  level?: 'info' | 'warning' | 'success' | 'danger';\n}\n\nexport interface BadgeProps {\n  badge?: BadgeSchema;\n  classnames: ClassNamesFn;\n  data: any;\n}\n\nexport class Badge extends React.Component<BadgeProps, object> {\n  static propsList: Array<string> = ['body', 'className', 'children'];\n\n  constructor(props: BadgeProps) {\n    super(props);\n  }\n\n  renderBadge(\n    text: any,\n    size: number,\n    position: any,\n    offsetStyle: any,\n    sizeStyle: any,\n    animationElement: any\n  ) {\n    const {classnames: cx, badge} = this.props;\n    const {\n      mode = 'dot',\n      level = 'danger',\n      style\n    } = badge as BadgeSchema;\n    switch(mode) {\n      case 'dot':\n        return (\n          <span\n            className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}\n            style={{...offsetStyle, ...sizeStyle, ...style}}\n          >\n            {animationElement}\n          </span>\n        );\n      case 'text':\n        return (\n          <span\n            className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}\n            style={{...offsetStyle, ...sizeStyle, ...style}}\n          >\n            {text}\n            {animationElement}\n          </span>\n        );\n      case 'ribbon':\n        const outSize = size * Math.sqrt(2) + 5;\n        return (\n          <div\n            className={cx('Badge-ribbon-out', `Badge-ribbon-out--${position}`)}\n            style={{width: outSize, height: outSize}}\n          >\n            <span\n              className={cx('Badge-ribbon', `Badge-ribbon--${position}`, `Badge--${level}`)}\n              style={{...sizeStyle, ...style}}\n            >\n              {text}\n              {animationElement}\n            </span>\n          </div>\n\n        );\n      default:\n        return null;\n    }\n  }\n\n  render() {\n    const badge = this.props.badge;\n    if (!badge) {\n      return this.props.children;\n    }\n    const {children, classnames: cx, data} = this.props;\n    let isDisplay = true;\n    if (typeof badge === 'string') {\n      isDisplay = evalExpression(badge, data) === true;\n    }\n\n    let {\n      mode = 'dot',\n      text,\n      size,\n      style,\n      offset,\n      position = 'top-right',\n      overflowCount = 99,\n      visibleOn,\n      className,\n      animation\n    } = badge;\n\n    if (visibleOn) {\n      isDisplay = evalExpression(visibleOn, data) === true;\n    }\n\n    if (typeof text === 'string' && text[0] === '$') {\n      text = resolveVariable(text, data);\n    }\n\n    // 设置默认值\n    if (typeof size === 'undefined') {\n      if (mode === 'dot') {\n        size = 6;\n      } else if (mode === 'ribbon'){\n        size = 12;\n      } else {\n        size = 16;\n      }\n    }\n\n    let sizeStyle = {};\n    if (mode === 'text') {\n      sizeStyle = {\n        borderRadius: size / 2,\n        height: size,\n        lineHeight: size + 'px'\n      };\n      // 当text、overflowCount都为number类型时，进行封顶值处理\n      if (typeof text === 'number' && typeof overflowCount === 'number') {\n        text = (\n          (text as number) > (overflowCount as number) ? `${overflowCount}+` : text\n        ) as string | number;\n      }\n\n      if (!text) {\n        isDisplay = false;\n      }\n    }\n\n    if (mode === 'dot') {\n      sizeStyle = {width: size, height: size};\n    }\n\n    if (mode === 'ribbon') {\n      sizeStyle = {\n        height: size,\n        lineHeight: size + 'px',\n        fontSize: size\n      };\n    }\n\n    let offsetStyle = {};\n    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位\n    if (offset && offset.length) {\n      position = 'top-right';\n      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;\n      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;\n      offsetStyle = {\n        transform: `translate(${left}, ${right})`,\n      };\n    }\n\n    let animationBackground = 'var(--danger)';\n\n    if (style && style.background) {\n      animationBackground = style.background;\n    }\n\n    const animationElement = animation ? (\n      <div\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          border: `1px solid ${animationBackground}`,\n          borderRadius: '50%',\n          animation: 'badgeDotAnimation 1.2s infinite ease-in-out'\n        }}\n      ></div>\n    ) : null;\n\n    return (\n      <div className={cx('Badge', className)}>\n        {children}\n        {isDisplay ?\n          this.renderBadge(\n            text,\n            size,\n            position,\n            offsetStyle,\n            sizeStyle,\n            animationElement\n          ) : null}\n      </div>\n    );\n  }\n}\n\nexport function withBadge<P extends object>(Component: React.ComponentType<P>) {\n  return hoistNonReactStatic(\n    class WithBadge extends React.Component<P & BadgeProps> {\n      static displayName = `WithBadge(${\n        Component.displayName || Component.name\n      })`;\n\n      render() {\n        const badge = this.props.badge;\n\n        if (!badge) {\n          return <Component {...(this.props as P)} />;\n        }\n\n        return (\n          <Badge {...(this.props as BadgeProps)}>\n            <Component {...(this.props as P)} />\n          </Badge>\n        );\n      }\n    },\n    Component\n  );\n}\n"
     ]
 }