@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/cjs/packages/trendarrow/trendarrow.js

@@ -14,7 +14,9 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     value: 0,
     digits: 2,
@@ -23,8 +25,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     left: false,
     sync: true,
     color: '#333',
-    riseColor: 'var(--nutui-brand-6)',
-    dropColor: 'var(--nutui-secondary-1)',
+    riseColor: (0, _platformtaro.harmony)() ? '#ff0f23' : 'var(--nutui-brand-6)',
+    dropColor: (0, _platformtaro.harmony)() ? '#14cc33' : 'var(--nutui-secondary-1)',
     riseIcon: null,
     dropIcon: null
 });
@@ -82,12 +84,12 @@ var TrendArrow = function TrendArrow(props) {
     }();
     var renderContent = function renderContent(left) {
         var classNameSuffix = !left ? 'icon-after' : 'icon-before';
-        return /*#__PURE__*/ _react.default.createElement("span", {
+        return /*#__PURE__*/ _react.default.createElement(_components.Text, {
             className: "".concat(classPrefix, "-").concat(classNameSuffix, " ").concat(classPrefix, "-value"),
             style: calcStyle
         }, calcRate);
     };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: "".concat(classPrefix, " ").concat(className),
         style: style
     }, rest), !left && renderContent(!left), Number(value) !== 0 && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, rateTrend.current ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, riseIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.TriangleUp, {

package/dist/cjs/packages/video/video.js

@@ -14,6 +14,7 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _mergeprops = require("../../utils/merge-props");
 var defaultProps = {
     source: {
         type: {},
@@ -30,8 +31,7 @@ var defaultProps = {
 };
 var classPrefix = "nut-video";
 var Video = function Video(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, source = _ref.source, options = _ref.options, className = _ref.className, style = _ref.style, onPlay = _ref.onPlay, onPause = _ref.onPause, onPlayEnd = _ref.onPlayEnd, restProps = (0, _object_without_properties._)(_ref, [
-        "children",
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), source = _mergeProps.source, options = _mergeProps.options, className = _mergeProps.className, style = _mergeProps.style, onPlay = _mergeProps.onPlay, onPause = _mergeProps.onPause, onPlayEnd = _mergeProps.onPlayEnd, restProps = (0, _object_without_properties._)(_mergeProps, [
         "source",
         "options",
         "className",
@@ -45,7 +45,7 @@ var Video = function Video(props) {
         className: classes,
         style: style
     }, /*#__PURE__*/ _react.default.createElement(_components.Video, (0, _object_spread._)({
-        className: "nut-video-player",
+        className: "".concat(classPrefix, "-player"),
         muted: options.muted,
         autoplay: options.autoplay,
         loop: options.loop,

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

@@ -71,31 +71,29 @@ export var Avatar = function(props) {
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, {
         className: cls,
-        // {...rest}
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
         ref: avatarRef
     }, (!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,
-        style: _object_spread({
+        style: {
             objectFit: fit
-        }, styles),
+        },
         onError: errorEvent
-    }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
-        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon"),
-        style: {
-            position: 'absolute'
-        }
-    })) : null, children && /*#__PURE__*/ React.createElement(View, {
+    }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
+        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon")
+    }))) : null, children && /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text nut-avatar-".concat(groupSize || size || 'normal', "-text")
-    }, children), !src && !icon && !children && !harmonyAndRn() && /*#__PURE__*/ React.createElement(User, {
-        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon"),
-        style: {
-            position: 'absolute'
-        }
-    })), showMax && /*#__PURE__*/ React.createElement(View, {
-        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text")
+    }, children), !src && !icon && !children && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ React.createElement(User, {
+        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon")
+    }))), showMax && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text"),
+        style: _object_spread({}, maxStyles)
     }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number(groupMax || 0)))));
 };
 Avatar.displayName = 'NutAvatar';

package/dist/es/packages/avatar/style/avatar.scss

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

package/dist/es/packages/avatar/style/style.css

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +114,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

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

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 60px;
   height: 60px;
 }
@@ -118,53 +114,19 @@
   width: 60px;
   height: 60px;
 }
-.nut-avatar-large-img-image {
-  width: 60px;
-  height: 60px;
-}
 .nut-avatar-large-icon {
   width: 60px;
   height: 60px;
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: 60px;
   height: 60px;
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-}
-.nut-avatar-small-img-image {
   width: 32px;
   height: 32px;
 }
 .nut-avatar-small-text {
   width: 32px;
   height: 32px;
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-}
-.nut-avatar-normal-img-image {
-  width: 40px;
-  height: 40px;
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: 40px;
-  height: 40px;
 }

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

@@ -2,40 +2,12 @@ import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export type BadgeFill = 'solid' | 'outline';
 export interface BadgeProps extends BasicComponent {
-    /**
-    * 显示的内容，支持数字、字符和自定义内容
-    * @default -
-    */
-    value: ReactNode
-    /**
-    * 是否为小点，当value值为自定义内容时，dot不生效
-    * @default false
-    */
-    dot: boolean
-    /**
-    * value 为数值时，最大值
-    * @default 99
-    */
-    max: number
-    /**
-    * 上下偏移量，支持单位设置，可设置为："0"或0 等
-    * @default "0"
-    */
-    top: string | number
-    /**
-    * 左右偏移量，支持单位设置，可设置为："5"或5 等
-    * @default "5"
-    */
-    right: string | number
-    /**
-    * 徽标背景颜色
-    * @default -
-    */
-    color: string
-    /**
-    * 填充模式
-    * @default solid
-    */
-    fill: BadgeFill
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    color: string;
+    fill: BadgeFill;
 }
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

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

@@ -1,12 +1,18 @@
+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 _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _type_of } from "@swc/helpers/_/_type_of";
-import React from "react";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
+import pxTransform from "../../utils/px-transform";
+import { getRectByTaro } from "../../utils/get-rect-by-taro";
+import { harmony, rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     value: '',
     dot: false,
@@ -37,35 +43,83 @@ export var Badge = function(props) {
     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, color = _$_object_spread.color, fill = _$_object_spread.fill;
     var classPrefix = 'nut-badge';
-    var classes = classNames(classPrefix, className, _define_property({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
-    var contentClasses = classNames(_define_property({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
+    var isHarmony = harmony();
+    var classes = classNames(classPrefix, className);
+    var badgeRef = useRef(null);
+    var _useState = _sliced_to_array(useState({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
+    var _obj;
+    var contentClasses = classNames("".concat(classPrefix, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix, "-dot"), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _obj));
+    useEffect(function() {
+        if (badgeRef.current) {
+            getPositionStyle();
+        }
+    }, []);
+    var getPositionStyle = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var style, reacts, dir;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        style = {};
+                        style.top = pxTransform(-Number(top) || 0);
+                        if (!rn()) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            getRectByTaro(badgeRef.current)
+                        ];
+                    case 1:
+                        reacts = _state.sent();
+                        style.left = (reacts === null || reacts === void 0 ? void 0 : reacts.width) && (reacts === null || reacts === void 0 ? void 0 : reacts.width) > Number(right) ? pxTransform(reacts.width - Number(right)) : 0;
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        dir = rtl ? 'left' : 'right';
+                        style[dir] = isHarmony ? pxTransform(Number(right)) : "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
+                        _state.label = 3;
+                    case 3:
+                        setContentStyle(style);
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function getPositionStyle() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var getStyle = function() {
         var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
-        var dir = rtl ? 'left' : 'right';
-        style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
         if (color) {
             if (fill === 'outline') {
                 style.color = color;
-                style.background = '#fff';
+                isHarmony ? style.backgroundColor = '#fff' : style.background = '#fff';
                 if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.border = "1px solid ".concat(color);
+                    style.borderColor = color;
                 }
             } else {
                 style.color = '#fff';
-                style.background = color;
+                isHarmony ? style.backgroundColor = color : style.background = color;
             }
         }
         return style;
     };
+    var _obj1;
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,
-        style: style
+        style: style,
+        ref: badgeRef
     }, isIcon() && /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-icon")
+        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() && /*#__PURE__*/ React.createElement(View, {
         className: contentClasses,
-        style: getStyle()
+        style: _object_spread({}, contentStyle, getStyle())
     }, content()));
 };
 Badge.displayName = 'NutBadge';

package/dist/es/packages/badge/style/badge.scss

@@ -1,15 +1,19 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
-
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
   &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
@@ -29,7 +33,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    /* #ifdef harmony */
+    background: $color-primary;
+    /* #endif */
+    /* #ifndef harmony */
     background: $badge-background-color;
+    /* #endif */
     color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
@@ -49,7 +58,9 @@
   }
 
   &-content {
+    /* #ifndef rn */
     transform: $badge-content-transform;
+    /* #endif */
   }
 
   &-dot {
@@ -61,25 +72,8 @@
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
+    background: $color-primary-text;
+    border: 1px solid $color-primary;
+    color: $color-primary;
   }
 }