@nutui/nutui-react-taro 3.0.19 → 3.0.20-cpp

package/dist/es/packages/actionsheet/style/style.harmony.css

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -157,6 +162,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -166,6 +173,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -266,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -290,6 +305,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -314,6 +332,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -339,27 +360,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {

package/dist/es/packages/address/address.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AddressRef, TaroAddressProps } from "../../types";
-export declare const Address: React.ForwardRefExoticComponent<Partial<TaroAddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "onClick" | "title" | "onLoad"> & React.RefAttributes<AddressRef>>;
+export declare const Address: React.ForwardRefExoticComponent<Partial<TaroAddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "title" | "onClick" | "onLoad"> & React.RefAttributes<AddressRef>>;

package/dist/es/packages/address/style/style.harmony.css

@@ -221,7 +221,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -234,7 +234,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -246,13 +245,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -263,20 +262,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -287,6 +288,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -298,6 +301,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -307,6 +312,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -316,6 +323,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -392,6 +401,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -416,6 +428,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -440,6 +455,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -464,6 +482,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -489,27 +510,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {

package/dist/es/packages/animatingnumbers/countup.js

@@ -48,7 +48,9 @@ export var CountUp = function(props) {
     var isLoaded = useRef(false);
     var setNumberTransform = useCallback(function() {
         if (countupRef.current && numberArr.length) {
-            createSelectorQuery().selectAll('.nut-countup-listitem').node(function(numberItems) {
+            var _countupRef_current;
+            createSelectorQuery()// @ts-ignore
+            .in(((_countupRef_current = countupRef.current) === null || _countupRef_current === void 0 ? void 0 : _countupRef_current._scope) || countupRef.current).selectAll('.nut-countup-listitem').node(function(numberItems) {
                 var transformArrCache = [];
                 Object.keys(numberItems).forEach(function(key) {
                     var elem = numberItems[Number(key)];

package/dist/es/packages/audio/style/style.harmony.css

@@ -60,9 +60,6 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
-  /* #ifndef dynamic*/
-  pointer-events: auto;
-  /* #endif */
 }
 .nut-button::after {
   border: none;

package/dist/es/packages/avatar/avatar.js

@@ -1,6 +1,7 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Image, View } from "@tarojs/components";
@@ -25,7 +26,23 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-avatar";
 export var Avatar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, mode = _$_object_spread.mode, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, mode = _ref.mode, fit = _ref.fit, avatarIndex = _ref.avatarIndex, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
+        "children",
+        "size",
+        "shape",
+        "background",
+        "color",
+        "src",
+        "alt",
+        "icon",
+        "mode",
+        "fit",
+        "avatarIndex",
+        "className",
+        "style",
+        "onClick",
+        "onError"
+    ]);
     var _useState // 是否显示的最大头像个数
      = _sliced_to_array(useState(false), 2), showMax = _useState[0], setShowMax = _useState[1];
     var avatarRef = useRef(null);
@@ -62,7 +79,8 @@ export var Avatar = function(props) {
         }
     }, [
         avatarIndex,
-        groupCount
+        groupCount,
+        groupMax
     ]);
     var errorEvent = function() {
         onError && onError();
@@ -70,19 +88,26 @@ export var Avatar = function(props) {
     var clickAvatar = function(e) {
         onClick && onClick(e);
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, _object_spread({
         className: cls,
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
-        ref: avatarRef
-    }, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(Image, {
+        ref: avatarRef,
+        // @ts-ignore
+        ariaRole: onClick ? 'button' : undefined
+    }, rest), (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(Image, {
         className: "nut-avatar-img nut-avatar-".concat(groupSize || size || 'normal', "-img"),
         src: src,
+        nativeProps: {
+            alt: alt
+        },
         style: {
             objectFit: fit
         },
         mode: mode,
-        onError: errorEvent
+        onError: errorEvent,
+        // @ts-ignore
+        ariaHidden: true
     }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
@@ -96,6 +121,7 @@ export var Avatar = function(props) {
     }, children), !src && !icon && !children && /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ React.createElement(User, {
+        ariaHidden: true,
         style: {
             color: color
         },

package/dist/es/packages/avatarcropper/avatarcropper.js

@@ -4,8 +4,8 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from "react";
-import Taro, { createSelectorQuery } from "@tarojs/taro";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
 import classNames from "classnames";
 import { Canvas, View } from "@tarojs/components";
 import { getWindowInfo } from "../../utils/taro/get-system-info";
@@ -117,7 +117,7 @@ export var AvatarCropper = function(props) {
         cropperCanvas: null,
         cropperCanvasContext: null
     }), 2), canvasAll = _useState5[0], setCanvasAll = _useState5[1];
-    useLayoutEffect(function() {
+    useReady(function() {
         if (showAlipayCanvas2D) {
             var canvasId = canvasAll.canvasId;
             createSelectorQuery().select("#".concat(canvasId)).node(function(param) {
@@ -129,11 +129,7 @@ export var AvatarCropper = function(props) {
                 }));
             }).exec();
         }
-    }, [
-        showAlipayCanvas2D,
-        state.displayHeight,
-        state.displayWidth
-    ]);
+    });
     useEffect(function() {
         setCanvasAll(_object_spread_props(_object_spread({}, canvasAll), {
             cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId)
@@ -311,8 +307,8 @@ export var AvatarCropper = function(props) {
         draw
     ]);
     // 设置绘制图片
-    var setDrawImgInfo = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(image) {
+    var setDrawImgInfo = function(image) {
+        return _async_to_generator(function() {
             var displayWidth, cropperWidth, copyDrawImg, imgWidth, imgHeight, isPortrait, rate, scale;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -362,11 +358,8 @@ export var AvatarCropper = function(props) {
                         ];
                 }
             });
-        });
-        return function setDrawImgInfo(image) {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var chooseImage = function() {
         Taro.chooseImage({
             count: 1,
@@ -380,8 +373,8 @@ export var AvatarCropper = function(props) {
             }
         });
     };
-    var imageChange = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(file) {
+    var imageChange = function(file) {
+        return _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 Taro.getImageInfo({
                     src: file.path
@@ -393,11 +386,8 @@ export var AvatarCropper = function(props) {
                     2
                 ];
             });
-        });
-        return function imageChange(file) {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var resetScale = function(scale) {
         setState(_object_spread_props(_object_spread({}, state), {
             moveX: 0,
@@ -553,8 +543,8 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth,
             destHeight: cropperWidth,
-            success: /*#__PURE__*/ function() {
-                var _ref = _async_to_generator(function(res) {
+            success: function(res) {
+                return _async_to_generator(function() {
                     var filePath;
                     return _ts_generator(this, function(_state) {
                         filePath = res.tempFilePath;
@@ -564,11 +554,8 @@ export var AvatarCropper = function(props) {
                             2
                         ];
                     });
-                });
-                return function(res) {
-                    return _ref.apply(this, arguments);
-                };
-            }()
+                })();
+            }
         });
     };
     // 裁剪图片
@@ -592,8 +579,8 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth * systemInfo.pixelRatio,
             destHeight: cropperWidth * systemInfo.pixelRatio,
-            success: /*#__PURE__*/ function() {
-                var _ref = _async_to_generator(function(res) {
+            success: function(res) {
+                return _async_to_generator(function() {
                     var filePath;
                     return _ts_generator(this, function(_state) {
                         filePath = res.tempFilePath;
@@ -603,11 +590,8 @@ export var AvatarCropper = function(props) {
                             2
                         ];
                     });
-                });
-                return function(res) {
-                    return _ref.apply(this, arguments);
-                };
-            }()
+                })();
+            }
         });
     };
     var ToolBar = function() {

package/dist/es/packages/badge/badge.js

@@ -2,6 +2,7 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
@@ -41,7 +42,19 @@ export var Badge = function(props) {
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
+    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, value = _ref.value, max = _ref.max, children = _ref.children, dot = _ref.dot, top = _ref.top, right = _ref.right, fill = _ref.fill, size = _ref.size, disabled = _ref.disabled, rest = _object_without_properties(_ref, [
+        "className",
+        "style",
+        "value",
+        "max",
+        "children",
+        "dot",
+        "top",
+        "right",
+        "fill",
+        "size",
+        "disabled"
+    ]);
     var classPrefix = 'nut-badge';
     var isHarmony = harmony();
     var classes = classNames(classPrefix, className);
@@ -54,8 +67,8 @@ export var Badge = function(props) {
             getPositionStyle();
         }
     }, []);
-    var getPositionStyle = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function() {
+    var getPositionStyle = function() {
+        return _async_to_generator(function() {
             var style;
             return _ts_generator(this, function(_state) {
                 style = _define_property({
@@ -66,17 +79,14 @@ export var Badge = function(props) {
                     2
                 ];
             });
-        });
-        return function getPositionStyle() {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var _obj1;
-    return /*#__PURE__*/ React.createElement(View, {
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: classes,
         style: style,
         ref: badgeRef
-    }, isIcon() && /*#__PURE__*/ React.createElement(View, {
+    }, rest), isIcon() && /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-content"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-icon"), true), _define_property(_obj1, "".concat(classPrefix, "-icon-rtl"), rtl), _obj1)),
         style: contentStyle
     }, value), children, !isIcon() && (getContent() || dot) && /*#__PURE__*/ React.createElement(View, {