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

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;
@@ -21,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -34,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -73,6 +77,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 +105,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 +118,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/avatarcropper/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-cropper {
   position: relative;
   display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-group {
   display: flex;
   flex-direction: row;

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

@@ -1,9 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import type { MouseEvent } from 'react';
 import { PageScrollObject } from '@tarojs/taro';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     threshold: number;
     zIndex: number;
     duration: number;
@@ -11,6 +10,6 @@ export interface BackTopProps extends BasicComponent {
      * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
      */
     scrollRes?: PageScrollObject;
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/es/packages/backtop/backtop.js

@@ -2,41 +2,31 @@ 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 React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
+import React, { useCallback, useState, useEffect, useRef } from "react";
 import { usePageScroll, pageScrollTo, getSystemInfo } from "@tarojs/taro";
 import { View } from "@tarojs/components";
-import { Top } from "@nutui/icons-react-taro";
 import classNames from "classnames";
+import { Top } from "@nutui/icons-react-taro";
 import { ComponentDefaults } from "../../utils/typings";
-import { useRtl } from "../configprovider/index";
-import { harmonyAndRn, rn } from "../../utils/platform-taro";
-import pxTransform from "../../utils/px-transform";
+import HoverButton from "../hoverbutton/index";
+import { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
-var isNative = harmonyAndRn();
 export var BackTop = function(props) {
-    var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
     var _obj;
-    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-show-active"), isNative && isTouchStart), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
+    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
     var systemInfo = useRef({});
     useEffect(function() {
         getSystemInfo().then(function(res) {
             systemInfo.current = res;
         });
     }, []);
-    var handleActiveStart = useCallback(function() {
-        isNative && setTouchStart(true);
-    }, []);
-    var handleActiveEnd = useCallback(function() {
-        isNative && setTouchStart(false);
-    }, []);
     var onScroll = useCallback(function(res) {
         var scrollTop = res.scrollTop;
         setBackTop(scrollTop >= threshold);
@@ -63,28 +53,20 @@ export var BackTop = function(props) {
         duration,
         onClick
     ]);
-    var styles = useMemo(function() {
-        var _obj;
-        return Object.keys(style || {}).length !== 0 ? _object_spread({
-            zIndex: zIndex
-        }, style) : (_obj = {}, _define_property(_obj, rtl ? 'left' : 'right', pxTransform(10)), _define_property(_obj, "bottom", pxTransform(20)), _define_property(_obj, "zIndex", zIndex), _obj);
-    }, [
-        rtl,
-        style,
-        zIndex
-    ]);
-    return /*#__PURE__*/ React.createElement(View, {
+    return /*#__PURE__*/ React.createElement(HoverButton, {
         className: cls,
-        style: styles,
+        style: _object_spread({
+            zIndex: zIndex
+        }, style),
+        icon: !children && (icon || /*#__PURE__*/ React.createElement(Top, null)),
+        onClick: function(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-hoverbutton-item-container",
         onClick: function(e) {
             goTop(e);
-        },
-        onTouchStart: handleActiveStart,
-        onTouchEnd: handleActiveEnd,
-        onTouchCancel: handleActiveEnd
-    }, children || /*#__PURE__*/ React.createElement(Top, {
-        size: 19,
-        className: "nut-backtop-main"
-    }));
+        }
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

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

@@ -1,31 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
   &-rn {
     position: absolute;
   }
 
   &-show {
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 21px;
-    z-index: 100;
-
-    &:active,
-    &-active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

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

@@ -1,26 +1,24 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-backtop {
   display: none;
-  position: fixed;
 }
 .nut-backtop-rn {
   position: absolute;
 }
 .nut-backtop-show {
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background-overlay, #ffffff);
-  color: var(--nutui-color-title, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-radius: 21px;
-  z-index: 100;
-}
-.nut-backtop-show:active, .nut-backtop-show-active {
-  background: var(--nutui-color-background, #f5f6fa);
-}
-.nut-backtop-main {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
   transition: all 0.2s ease-in-out;
-  color: var(--nutui-color-title, #1a1a1a);
+}
+.nut-backtop-show .nut-hoverbutton-item-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,41 +1,3 @@
-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
-}
+import { FunctionComponent } from 'react';
+import { BadgeProps } from './types';
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

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

@@ -1,20 +1,25 @@
+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 { harmony } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     value: '',
     dot: false,
     max: 99,
-    top: '4',
-    right: '8',
-    color: '',
-    fill: 'solid'
+    top: 0,
+    right: 0,
+    fill: 'solid',
+    size: 'large'
 });
 export var Badge = function(props) {
     var content = function content() {
@@ -35,37 +40,48 @@ 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, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    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;
     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 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';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.border = "1px solid ".concat(color);
-                }
-            } else {
-                style.color = '#fff';
-                style.background = color;
-            }
+    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((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-number"), isNumber()), _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, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _define_property(_obj, "".concat(classPrefix, "-content"), children), _obj));
+    useEffect(function() {
+        if (badgeRef.current) {
+            getPositionStyle();
         }
-        return style;
-    };
+    }, []);
+    var getPositionStyle = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var style, dir;
+            return _ts_generator(this, function(_state) {
+                style = {};
+                style.top = pxTransform(Number(top) || 0);
+                dir = rtl ? 'left' : 'right';
+                style[dir] = isHarmony ? pxTransform(Number(right)) : "".concat(Number(right) || 0, "px");
+                setContentStyle(style);
+                return [
+                    2
+                ];
+            });
+        });
+        return function getPositionStyle() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    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: contentStyle
     }, content()));
 };
 Badge.displayName = 'NutBadge';

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

@@ -1,3 +1,3 @@
 import { Badge } from "./badge";
-export type { BadgeFill, BadgeProps } from "./badge";
+export type { BadgeFill, BadgeDotSize, BadgeProps } from './types';
 export default Badge;

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

@@ -1,19 +1,15 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 
   &-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;
-    border-radius: $badge-border-radius;
     z-index: $badge-z-index;
 
     .nut-icon {
@@ -23,63 +19,88 @@
     }
   }
 
+  &-sup,
+  &-icon {
+    border-radius: $badge-border-radius;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      bottom: -50%;
+      left: -50%;
+      right: -50%;
+      transform: scale(0.5);
+      border: $badge-border;
+      border-radius: $badge-border-radius;
+    }
+  }
+
   &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    background: $badge-background-color;
-    color: $badge-color;
+    height: $badge-height;
+    min-width: $badge-min-width;
     padding: $badge-padding;
+    box-sizing: border-box;
+    color: $badge-color;
     font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
+    line-height: 12px;
     white-space: nowrap;
+    font-weight: normal;
+    vertical-align: middle;
+    background: $badge-background-color;
     z-index: 1;
   }
 
+  &-number {
+    font-family: 'JD';
+    /* #ifdef harmony */
+    line-height: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    line-height: 13px;
+    /* #endif */
+  }
+
   &-one {
     height: $badge-height;
     width: $badge-height;
-    padding: 0;
   }
 
   &-content {
+    position: absolute;
     transform: $badge-content-transform;
   }
 
   &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
     padding: 0;
+    border-radius: 50%;
+    &::after {
+      border: $badge-dot-border;
+      border-radius: 50%;
+    }
+    &-normal {
+      min-width: $badge-dot-width;
+      width: $badge-dot-width;
+      height: $badge-dot-width;
+    }
+    &-small {
+      min-width: $badge-dot-small-width;
+      width: $badge-dot-small-width;
+      height: $badge-dot-small-width;
+    }
+    &-large {
+      min-width: $badge-dot-large-width;
+      width: $badge-dot-large-width;
+      height: $badge-dot-large-width;
+    }
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
+    background: $color-primary-text;
+    color: $badge-outline-color;
+    &::after {
+      border: $badge-outline-border;
     }
   }
 }
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
-  }
-}