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

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

@@ -1,7 +1,4 @@
 .nut-animate {
-  .nut-ani-container {
-    display: inline-block;
-  }
   /* Animation css */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;

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

@@ -1,9 +1,10 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-animate {
   /* Animation css */
 }
-.nut-animate .nut-ani-container {
-  display: inline-block;
-}
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;

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

@@ -4,7 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import { createSelectorQuery } from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { mergeProps } from "../../utils/merge-props";
@@ -27,7 +27,7 @@ export var CountUp = function(props) {
     ]);
     var classPrefix = 'nut-countup';
     var countupRef = useRef(null);
-    var timerRef = useRef(0);
+    var timerRef = useRef();
     var numbers = Array.from({
         length: 10
     }, function(v, i) {
@@ -43,74 +43,77 @@ export var CountUp = function(props) {
         thousands,
         value
     ]);
-    var _useState = _sliced_to_array(useState([]), 2), numerArr = _useState[0], setNumerArr = _useState[1];
+    var _useState = _sliced_to_array(useState([]), 2), numberArr = _useState[0], setNumberArr = _useState[1];
     var _useState1 = _sliced_to_array(useState([]), 2), transformArr = _useState1[0], setTransformArr = _useState1[1];
     var isLoaded = useRef(false);
     var setNumberTransform = useCallback(function() {
-        if (countupRef.current && numerArr.length) {
+        if (countupRef.current && numberArr.length) {
             createSelectorQuery().selectAll('.nut-countup-listitem').node(function(numberItems) {
                 var transformArrCache = [];
                 Object.keys(numberItems).forEach(function(key) {
                     var elem = numberItems[Number(key)];
-                    var idx = Number(numerArr[Number(key)]);
-                    if (elem) {
+                    var idx = Number(numberArr[Number(key)]);
+                    var enabled = elem && typeof idx === 'number' && !Number.isNaN(idx);
+                    if (enabled) {
                         // 计算规则：父元素和实际列表高度的百分比，分割成20等份
                         var transform = idx || idx === 0 ? "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)") : '';
-                        transformArrCache.push(transform);
+                        transformArrCache.push({
+                            transitionDuration: "".concat(duration, "s"),
+                            transform: transform
+                        });
                     }
                 });
                 setTransformArr(_to_consumable_array(transformArrCache));
             }).exec();
         }
     }, [
-        numerArr
+        numberArr
     ]);
-    var numberEaseStyle = function(idx) {
-        return {
-            transition: "transform ".concat(duration, "s ease-in-out"),
-            transform: transformArr[idx] ? transformArr[idx] : null
-        };
-    };
     useEffect(function() {
-        setNumberTransform();
+        if (numberArr.length) {
+            if (!isLoaded.current) {
+                isLoaded.current = true;
+                // @ts-ignore
+                timerRef.current = setTimeout(function() {
+                    setNumberTransform();
+                }, delay);
+            } else {
+                setNumberTransform();
+            }
+        }
+        return function() {
+            clearTimeout(timerRef.current);
+            isLoaded.current = false;
+        };
     }, [
-        numerArr,
+        numberArr,
+        delay,
         setNumberTransform
     ]);
     useEffect(function() {
-        if (!isLoaded.current) {
-            isLoaded.current = true;
-            timerRef.current = window.setTimeout(function() {
-                setNumerArr(getShowNumber());
-            }, delay);
-        } else {
-            setNumerArr(getShowNumber());
-        }
-        return function() {
-            window.clearTimeout(timerRef.current);
-        };
+        setNumberArr(getShowNumber());
     }, [
         value,
-        delay,
         getShowNumber
     ]);
-    return /*#__PURE__*/ React.createElement(View, {
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: "".concat(classPrefix, " ").concat(className),
         ref: countupRef
-    }, /*#__PURE__*/ React.createElement("ul", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-list")
-    }, numerArr.map(function(item, idx) {
-        return /*#__PURE__*/ React.createElement("li", {
+    }, numberArr.map(function(item, idx) {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix, "-listitem-number") : ''),
             key: idx
-        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ React.createElement("span", {
+        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-number"),
-            style: numberEaseStyle(idx)
+            style: transformArr === null || transformArr === void 0 ? void 0 : transformArr[idx]
         }, _to_consumable_array(numbers).concat(_to_consumable_array(numbers)).map(function(number, subidx) {
-            return /*#__PURE__*/ React.createElement("span", {
+            return /*#__PURE__*/ React.createElement(Text, {
+                className: "".concat(classPrefix, "-number-text"),
                 key: subidx
             }, number);
-        })) : /*#__PURE__*/ React.createElement("span", {
+        })) : /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-separator")
         }, item));
     })));

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-countup-list {
   display: inline-flex;
   height: var(--nutui-countup-height, 32px);
@@ -7,29 +11,35 @@
 .nut-countup-listitem {
   height: var(--nutui-countup-height, 32px);
   overflow: hidden;
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-countup-base-size, 18px);
-  font-weight: var(--nutui-font-weight-bold, 600);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
   border-radius: var(--nutui-countup-border-radius, 4px);
-  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-countup-color, var(--nutui-gray-7));
   background-color: var(--nutui-countup-bg-color, inherit);
 }
 .nut-countup-separator {
   display: flex;
   height: 80%;
   align-items: flex-end;
-  color: var(--nutui-countup-bg-color, inherit);
+  color: var(--nutui-countup-separator-color, var(--nutui-gray-7));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-countup-number {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: var(--nutui-countup-width, auto);
+  transition: transform 1s ease-in-out;
+  transform: translate(0, 0);
 }
-.nut-countup-number span {
+.nut-countup-number-text {
   height: var(--nutui-countup-height, 32px);
   line-height: var(--nutui-countup-height, 32px);
+  color: var(--nutui-countup-color, var(--nutui-gray-7));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }

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

@@ -2,21 +2,9 @@ import React, { CSSProperties, FunctionComponent } from 'react';
 import { InnerAudioContext } from '@tarojs/taro';
 import { BasicComponent } from "../../utils/typings";
 export interface AudioProps extends BasicComponent {
-    /**
-    * 类名
-    * @default -
-    */
-    className?: string
-    /**
-    * css样式
-    * @default {}
-    */
-    style?: CSSProperties
-    /**
-    * 语音资源链接
-    * @default -
-    */
-    url: string
+    className?: string;
+    style?: CSSProperties;
+    url: string;
     autoplay?: boolean;
     /**
     * 是否循环播放
@@ -25,33 +13,25 @@ export interface AudioProps extends BasicComponent {
     loop?: boolean
     /**
     * 展示形式，可选值：controls 控制面板 progress 进度条 icon 图标 none 自定义
-    * @default 'progress'
+    * @default progress
     */
     type: string
+    onFastBack?: (ctx: InnerAudioContext) => void;
     /**
-    * 语音快退回调,type=progress时生效
-    * @default 
-    */
-    onFastBack?: (ctx: InnerAudioContext) => void
-    /**
-    * 语音快进回调,type=progress时生效
-    * @default 
+    * 语音快进回调，type = progress 时生效
+    * @default -
     */
     onForward?: (ctx: InnerAudioContext) => void
     /**
     * 暂停回调
-    * @default 
+    * @default -
     */
     onPause?: any
     onPlay?: any;
-    /**
-    * 语音播放完成，loop=false时生效
-    * @default 
-    */
-    onPlayEnd?: (ctx: InnerAudioContext) => void
+    onPlayEnd?: (ctx: InnerAudioContext) => void;
     /**
     * 可以播放媒体时触发
-    * @default 
+    * @default -
     */
     onCanPlay?: (ctx: InnerAudioContext) => void
 }