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

package/dist/es/packages/lottie/index.js

@@ -0,0 +1,12 @@
+import { Lottie as LottieWeb } from "./web";
+import { Lottie as LottieMp } from "./mp";
+var implementation;
+if (process.env.TARO_ENV === 'h5') {
+    implementation = LottieWeb;
+} else if (process.env.TARO_ENV === 'weapp') {
+    implementation = LottieMp;
+} else {
+    throw new Error("不支持的 TARO_ENV: ".concat(process.env.TARO_ENV));
+}
+var Lottie = implementation;
+export default Lottie;

package/dist/es/packages/lottie/mp.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LottieProps } from './types';
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<LottieProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/lottie/mp.js

@@ -0,0 +1,74 @@
+import React, { useImperativeHandle, useRef } from "react";
+import { createSelectorQuery, getEnv, getSystemInfoSync, useReady, useUnload } from "@tarojs/taro";
+import lottie from "lottie-miniprogram";
+import useUuid from "../../utils/use-uuid";
+export var Lottie = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var uuid = useUuid();
+    var id = "nutLottie-".concat(uuid);
+    var animation = useRef();
+    var inited = useRef(false);
+    var source = props.source, _props_loop = props.loop, loop = _props_loop === void 0 ? true : _props_loop, _props_autoPlay = props.autoPlay, autoPlay = _props_autoPlay === void 0 ? true : _props_autoPlay, onComplete = props.onComplete, style = props.style, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed;
+    var setSpeed = function() {
+        if (animation.current) {
+            animation.current.setSpeed(Math.abs(speed));
+            animation.current.setDirection(speed > 0 ? 1 : -1);
+        }
+    };
+    useImperativeHandle(ref, function() {
+        return animation.current || {};
+    });
+    var dpr = useRef(getSystemInfoSync().pixelRatio);
+    useReady(function() {
+        createSelectorQuery().select("#".concat(id)).fields({
+            node: true,
+            size: true
+        }, function(res) {
+            try {
+                var canvas = res.node;
+                var context = canvas.getContext('2d');
+                // scale canvas to adapt dpr
+                if (style && style.width !== undefined && style.height !== undefined) {
+                    canvas.width = parseFloat(style.width.toString()) * dpr.current;
+                    canvas.height = parseFloat(style.height.toString()) * dpr.current;
+                    context.scale(dpr.current, dpr.current);
+                }
+                lottie.setup(canvas);
+                animation.current = lottie.loadAnimation({
+                    animationData: source,
+                    loop: loop,
+                    autoplay: autoPlay,
+                    rendererSettings: {
+                        context: context
+                    }
+                });
+                onComplete && animation.current.addEventListener('complete', onComplete);
+                setSpeed();
+                inited.current = true;
+            } catch (error) {
+                console.error(error);
+            }
+        }).exec();
+    });
+    useUnload(function() {
+        onComplete && animation.current && animation.current.removeEventListener('complete', onComplete);
+        animation.current && animation.current.destroy();
+    });
+    return getEnv() === 'WEAPP' || getEnv() === 'JD' ? /*#__PURE__*/ React.createElement("canvas", {
+        id: id,
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
+        canvasId: id,
+        // eslint-disable-next-line react/no-unknown-property
+        disalbeScroll: true,
+        type: "2d",
+        style: style
+    }) : /*#__PURE__*/ React.createElement("canvas", {
+        id: id,
+        // eslint-disable-next-line react/no-unknown-property
+        "canvas-id": id,
+        // eslint-disable-next-line react/no-unknown-property
+        "disalbe-scroll": true,
+        style: style
+    });
+});
+Lottie.displayName = 'NutLottie';

package/dist/es/packages/lottie/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/lottie/style/index.js

@@ -0,0 +1 @@
+import './lottie.scss';

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

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

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

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/es/packages/lottie/types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LottieOptions } from 'lottie-react';
+import { BasicComponent } from "../../utils/typings";
+export interface LottieProps extends Omit<LottieOptions, 'animationData'>, BasicComponent {
+    style: React.CSSProperties;
+    source: NonNullable<unknown>;
+    loop: boolean | number;
+    autoPlay: boolean;
+    initialSegment: [number, number];
+    speed: number;
+}

package/dist/es/packages/lottie/types.js

@@ -0,0 +1 @@
+import React from "react";

package/dist/es/packages/lottie/web.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LottieProps } from './types';
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<Partial<LottieProps>, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/lottie/web.js

@@ -0,0 +1,22 @@
+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 LottieReact from "lottie-react";
+import React, { useImperativeHandle, useRef } from "react";
+export var Lottie = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var loadingLottieRef = useRef(null);
+    var style = props.style, source = props.source, autoPlay = props.autoPlay, rest = _object_without_properties(props, [
+        "style",
+        "source",
+        "autoPlay"
+    ]);
+    useImperativeHandle(ref, function() {
+        return loadingLottieRef.current;
+    });
+    return /*#__PURE__*/ React.createElement(LottieReact, _object_spread_props(_object_spread({}, rest), {
+        lottieRef: loadingLottieRef,
+        animationData: source,
+        style: style
+    }));
+});
+Lottie.displayName = 'NutLottie';

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,16 +15,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -58,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -74,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;
@@ -181,7 +185,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-color-background-overlay, #ffffff);
+  background-color: var(--nutui-gray-1);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -192,7 +196,7 @@
   flex: 1;
   text-align: center;
   font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-menu-title-color, var(--nutui-gray-7));
   min-width: 0;
   display: flex;
   align-items: center;
@@ -211,10 +215,10 @@
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-menu {
   position: relative;
 }
@@ -23,7 +27,7 @@
   flex: 1;
   text-align: center;
   font-size: 14px;
-  color: #1A1A1A;
+  color: #1a1a1a;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -38,13 +42,14 @@
   padding: 0 8px;
 }
 .nut-menu-title-icon {
+  flex-shrink: 0;
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: #FF0F23;
+  color: #ff0f23;
 }
 .nut-menu-title.disabled {
-  color: #C2C4CC;
+  color: #c2c4cc;
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,16 +15,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -58,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -74,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-menu-container-content {
   padding: 12px 24px;
   max-height: 214px;
@@ -14,18 +18,19 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: #1A1A1A;
+  color: #1a1a1a;
   font-size: 14px;
   padding: 12px 0;
 }
 .nut-menu-container-item.active {
-  font-weight: 500;
-  color: #FF0F23;
+  font-weight: 600;
+  color: #ff0f23;
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;
   align-items: center;
   margin-right: 8px;
+  flex-shrink: 0;
 }
 .nut-menu-container-wrap {
   position: absolute;

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

@@ -5,7 +5,7 @@ export interface NavBarProps extends BasicComponent {
     left: React.ReactNode;
     back: React.ReactNode;
     right: React.ReactNode;
-    titleAlign: 'center' | 'left';
+    title: React.ReactNode;
     fixed: boolean;
     safeAreaInsetTop: boolean;
     placeholder: boolean;

package/dist/es/packages/navbar/navbar.js

@@ -1,19 +1,15 @@
-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 _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
+import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
-import { getRectByTaro } from "../../utils/get-rect-by-taro";
-import { SafeArea } from "../safearea/safearea";
+import SafeArea from "../safearea/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
-    titleAlign: 'center',
     back: '',
     fixed: false,
     safeAreaInsetTop: false,
@@ -21,8 +17,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     zIndex: 10
 });
 export var NavBar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, title = _$_object_spread.title, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -31,137 +28,38 @@ export var NavBar = function(props) {
             zIndex: zIndex
         });
     };
-    var leftRef = useRef(null);
-    var rightRef = useRef(null);
-    var wrapperRef = useRef(null);
-    var _useState = _sliced_to_array(useState('50%'), 2), contentWidth = _useState[0], setContentWidth = _useState[1];
-    var getNodeWidth = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(node) {
-            var refe;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!node) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            getRectByTaro(node)
-                        ];
-                    case 1:
-                        refe = _state.sent();
-                        return [
-                            2,
-                            refe.width
-                        ];
-                    case 2:
-                        return [
-                            2,
-                            0
-                        ];
-                }
-            });
-        });
-        return function getNodeWidth(node) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    useEffect(function() {
-        if (titleAlign === 'left') {
-            return;
-        }
-        if (!(back || left || right)) {
-            setContentWidth('100%');
-        }
-        var init = /*#__PURE__*/ function() {
-            var _ref = _async_to_generator(function() {
-                var leftRectWidth, rightRectWidth, wrapperWidth, centerWidth;
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            return [
-                                4,
-                                getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current)
-                            ];
-                        case 1:
-                            leftRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current)
-                            ];
-                        case 2:
-                            rightRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)
-                            ];
-                        case 3:
-                            wrapperWidth = _state.sent();
-                            centerWidth = wrapperWidth / 2;
-                            if (leftRectWidth && rightRectWidth) {
-                                centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
-                            } else {
-                                centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
-                            }
-                            setContentWidth(centerWidth.toFixed(2));
-                            return [
-                                2
-                            ];
-                    }
-                });
-            });
-            return function init() {
-                return _ref.apply(this, arguments);
-            };
-        }();
-        init();
-    }, [
-        left,
-        right,
-        back
-    ]);
     var renderLeft = function() {
-        return back || left ? /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left"),
-            ref: leftRef
-        }, back && /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left-back"),
+        var _obj, _obj1;
+        return /*#__PURE__*/ React.createElement(View, {
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-maxwidth"), title), _define_property(_obj, "".concat(classPrefix, "-left-hidden"), !left && !back), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj))
+        }, back ? /*#__PURE__*/ React.createElement(View, {
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
-        }, back), left) : null;
+        }, back) : null, left);
     };
     var renderContent = function() {
-        var titleStyle = {};
-        if (titleAlign === 'center') {
-            var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? '' : 'px');
-            titleStyle = {
-                minWidth: contentRealWidth,
-                width: contentRealWidth
-            };
-        }
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-title"),
-            style: titleStyle
-        }, children);
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-center"), title), _obj))
+        }, title || children);
     };
     var renderRight = function() {
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-right"),
-            ref: rightRef
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-maxwidth"), title), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj))
         }, right);
     };
     var renderWrapper = function() {
         return /*#__PURE__*/ React.createElement(View, {
             className: cls,
-            style: styles(),
-            ref: wrapperRef
+            style: styles()
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
-    var cls = classNames(classPrefix, classes, className);
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
+    var cls = classNames(classPrefix, classes, className, _define_property({}, "".concat(classPrefix, "-title-wrapper"), title));
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"
     }), fixed && placeholder ? /*#__PURE__*/ React.createElement(View, {