@nutui/nutui-react-taro 3.0.18-cpp.beta.1 → 3.0.19-beta.1

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

@@ -27,7 +27,12 @@
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-container-item .nut-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   margin-right: var(--nutui-menu-item-icon-margin, 8px);
   flex-shrink: 0;
@@ -49,14 +54,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -var(--nutui-menu-bar-line-height, 48px);
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
   background-color: transparent;
 }
 .nut-menu-placeholder-element.up {
-  bottom: -var(--nutui-menu-bar-line-height, 48px);
+  bottom: calc(-1 * var(--menu-bar-line-height));
 }
 
 .nut-menu-container-down-enter {

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

@@ -81,7 +81,12 @@
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-container-item .nut-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   margin-right: var(--nutui-menu-item-icon-margin, 8px);
   flex-shrink: 0;
@@ -103,14 +108,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -var(--nutui-menu-bar-line-height, 48px);
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
   background-color: transparent;
 }
 .nut-menu-placeholder-element.up {
-  bottom: -var(--nutui-menu-bar-line-height, 48px);
+  bottom: calc(-1 * var(--menu-bar-line-height));
 }
 
 .nut-menu-container-down-enter {

package/dist/es/packages/menuitem/style-jmapp/menuitem.scss

@@ -27,7 +27,12 @@
     }
 
     .nut-icon {
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
       align-items: center;
       margin-right: $menu-item-icon-margin;
       flex-shrink: 0;
@@ -54,14 +59,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -$menu-bar-line-height;
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 
   &.up {
-    bottom: -$menu-bar-line-height;
+    bottom: calc(-1 * var(--menu-bar-line-height));
   }
 }
 

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

@@ -27,7 +27,12 @@
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary));
 }
 .nut-menu-container-item .nut-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   margin-right: var(--nutui-menu-item-icon-margin, 8px);
   flex-shrink: 0;
@@ -49,14 +54,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -var(--nutui-menu-bar-line-height, 48px);
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
   background-color: transparent;
 }
 .nut-menu-placeholder-element.up {
-  bottom: -var(--nutui-menu-bar-line-height, 48px);
+  bottom: calc(-1 * var(--menu-bar-line-height));
 }
 
 .nut-menu-container-down-enter {

package/dist/es/packages/menuitem/style-jrkf/menuitem.scss

@@ -27,7 +27,12 @@
     }
 
     .nut-icon {
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
       align-items: center;
       margin-right: $menu-item-icon-margin;
       flex-shrink: 0;
@@ -54,14 +59,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -$menu-bar-line-height;
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 
   &.up {
-    bottom: -$menu-bar-line-height;
+    bottom: calc(-1 * var(--menu-bar-line-height));
   }
 }
 

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

@@ -27,7 +27,12 @@
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-menu-container-item .nut-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   margin-right: var(--nutui-menu-item-icon-margin, 8px);
   flex-shrink: 0;
@@ -49,14 +54,14 @@
 
 .nut-menu-placeholder-element {
   position: fixed;
-  top: -var(--nutui-menu-bar-line-height, 48px);
+  top: calc(-1 * var(--menu-bar-line-height));
   left: 0;
   right: 0;
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
   background-color: transparent;
 }
 .nut-menu-placeholder-element.up {
-  bottom: -var(--nutui-menu-bar-line-height, 48px);
+  bottom: calc(-1 * var(--menu-bar-line-height));
 }
 
 .nut-menu-container-down-enter {

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

@@ -28,8 +28,10 @@
   }
 
   &-safe-area-inset-top {
+    /* #ifndef dynamic*/
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
+    /* #endif */
   }
 
   &-title-wrapper {

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

@@ -30,8 +30,10 @@
   width: 100%;
 }
 .nut-navbar-safe-area-inset-top {
+  /* #ifndef dynamic*/
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
+  /* #endif */
 }
 .nut-navbar-title-wrapper {
   justify-content: space-between;

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

@@ -30,8 +30,10 @@
   width: 100%;
 }
 .nut-navbar-safe-area-inset-top {
+  /* #ifndef dynamic*/
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
+  /* #endif */
 }
 .nut-navbar-title-wrapper {
   justify-content: space-between;

package/dist/es/packages/navbar/style-jmapp/navbar.scss

@@ -28,8 +28,10 @@
   }
 
   &-safe-area-inset-top {
+    /* #ifndef dynamic*/
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
+    /* #endif */
   }
 
   &-title-wrapper {

package/dist/es/packages/navbar/style-jmapp/style.css

@@ -30,8 +30,10 @@
   width: 100%;
 }
 .nut-navbar-safe-area-inset-top {
+  /* #ifndef dynamic*/
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
+  /* #endif */
 }
 .nut-navbar-title-wrapper {
   justify-content: space-between;

package/dist/es/packages/navbar/style-jrkf/navbar.scss

@@ -28,8 +28,10 @@
   }
 
   &-safe-area-inset-top {
+    /* #ifndef dynamic*/
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
+    /* #endif */
   }
 
   &-title-wrapper {

package/dist/es/packages/navbar/style-jrkf/style.css

@@ -30,8 +30,10 @@
   width: 100%;
 }
 .nut-navbar-safe-area-inset-top {
+  /* #ifndef dynamic*/
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
+  /* #endif */
 }
 .nut-navbar-title-wrapper {
   justify-content: space-between;

package/dist/es/packages/noticebar/noticebar.js

@@ -6,9 +6,11 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
+import { nextTick } from "@tarojs/taro";
 import { View } from "@tarojs/components";
 import { Close, Notice } from "@nutui/icons-react-taro";
 import classNames from "classnames";
+import { useUuid } from "../../hooks/use-uuid";
 import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
@@ -36,7 +38,10 @@ export var NoticeBar = function(props) {
     var classPrefix = 'nut-noticebar';
     var wrapRef = useRef(null);
     var contentRef = useRef(null);
-    var _useState = _sliced_to_array(useState(true), 2), showNoticeBar = _useState[0], SetShowNoticeBar = _useState[1];
+    var uid = useUuid();
+    var wrapRefId = "wrap-ref-".concat(uid);
+    var contentRefId = "content-ref-".concat(uid);
+    var _useState = _sliced_to_array(useState(true), 2), showNoticeBar = _useState[0], setShowNoticeBar = _useState[1];
     var scrollList = useRef([]);
     var _useState1 = _sliced_to_array(useState(0), 2), wrapWidth = _useState1[0], SetWrapWidth = _useState1[1];
     var _useState2 = _sliced_to_array(useState(true), 2), firstRound = _useState2[0], SetFirstRound = _useState2[1];
@@ -96,7 +101,7 @@ export var NoticeBar = function(props) {
                 startRollEasy();
             }
         } else {
-            initScrollWrap(content);
+            initScrollWrap();
         }
         return function() {
             // 销毁事件
@@ -106,7 +111,7 @@ export var NoticeBar = function(props) {
         childs
     ]);
     useEffect(function() {
-        initScrollWrap(content);
+        initScrollWrap();
     }, [
         content
     ]);
@@ -117,61 +122,60 @@ export var NoticeBar = function(props) {
     }, [
         list
     ]);
-    var initScrollWrap = function(value) {
+    var initScrollWrap = function() {
         if (showNoticeBar === false) {
             return;
         }
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var warpRes, contentRes, wrapW, offsetW, canScroll;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!wrapRef.current || !contentRef.current) {
+        nextTick(function() {
+            return _async_to_generator(function() {
+                var warpRes, contentRes, wrapW, offsetW, canScroll;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!wrapRef.current || !contentRef.current) {
+                                return [
+                                    2
+                                ];
+                            }
                             return [
+                                4,
+                                getRectInMultiPlatform(wrapRef.current, wrapRefId)
+                            ];
+                        case 1:
+                            warpRes = _state.sent();
+                            return [
+                                4,
+                                getRectInMultiPlatform(contentRef.current, contentRefId)
+                            ];
+                        case 2:
+                            contentRes = _state.sent();
+                            if (!warpRes || !contentRes) return [
                                 2
                             ];
-                        }
-                        return [
-                            4,
-                            getRectInMultiPlatform(wrapRef.current)
-                        ];
-                    case 1:
-                        warpRes = _state.sent();
-                        return [
-                            4,
-                            getRectInMultiPlatform(contentRef.current)
-                        ];
-                    case 2:
-                        contentRes = _state.sent();
-                        wrapW = warpRes.width;
-                        offsetW = contentRes.width;
-                        canScroll = align === 'left' && scrollable == null ? offsetW > wrapW : scrollable;
-                        SetIsCanScroll(canScroll);
-                        if (canScroll) {
-                            SetWrapWidth(wrapW);
-                            SetOffsetW(offsetW);
-                            SetAnimationDuration(offsetW / speed);
-                            SetAnimationClass('play');
-                        } else {
-                            SetAnimationClass('');
-                        }
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 0);
+                            wrapW = warpRes.width;
+                            offsetW = contentRes.width;
+                            canScroll = align === 'left' && scrollable == null ? offsetW > wrapW : scrollable;
+                            SetIsCanScroll(canScroll);
+                            if (canScroll) {
+                                SetWrapWidth(wrapW);
+                                SetOffsetW(offsetW);
+                                SetAnimationDuration(offsetW / speed);
+                                SetAnimationClass('play');
+                            } else {
+                                SetAnimationClass('');
+                            }
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        });
     };
     var handleClick = function(event) {
         click && click(event);
         onClick && onClick(event);
     };
-    var onClickIcon = function(event) {
-        event.stopPropagation();
-        SetShowNoticeBar(!closeable);
-        close && close(event);
-        onClose && onClose(event);
-    };
     var onAnimationEnd = function() {
         SetFirstRound(false);
         setTimeout(function() {
@@ -194,13 +198,16 @@ export var NoticeBar = function(props) {
             SetAnimate(false);
         }, time);
     };
-    // 点击滚动单元
-    var handleClickIcon = function(event) {
+    var handleClickIcon = useCallback(function(event) {
         event.stopPropagation();
-        SetShowNoticeBar(!closeable);
+        setShowNoticeBar(!closeable);
         close && close(event);
         onClose && onClose(event);
-    };
+    }, [
+        close,
+        onClose,
+        closeable
+    ]);
     var isEllipsis = function() {
         if (isCanScroll == null && align === 'left') {
             return wrap;
@@ -225,36 +232,38 @@ export var NoticeBar = function(props) {
     var init = function() {
         var activeIndex = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
         if (!(container === null || container === void 0 ? void 0 : container.current)) return;
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var rects, _active, _height, targetOffset;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            getRectInMultiPlatform(container === null || container === void 0 ? void 0 : container.current)
-                        ];
-                    case 1:
-                        rects = _state.sent();
-                        _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
-                        _height = rects === null || rects === void 0 ? void 0 : rects.height;
-                        trackSize = childCount * Number(_height);
-                        targetOffset = getOffset(_active);
-                        activeRef.current = _active;
-                        setRect(rects);
-                        setOffset(targetOffset);
-                        setChildOffset(new Array(childCount).fill(0));
-                        // 关闭动画并立即设置样式
-                        swiperRef.current.moving = true;
-                        setStyle(targetOffset, rects);
-                        swiperRef.current.moving = false;
-                        setReady(true);
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 0);
+        setTimeout(function() {
+            return _async_to_generator(function() {
+                var rects, _active, _height, targetOffset;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                getRectInMultiPlatform(container === null || container === void 0 ? void 0 : container.current)
+                            ];
+                        case 1:
+                            rects = _state.sent();
+                            _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
+                            _height = rects === null || rects === void 0 ? void 0 : rects.height;
+                            trackSize = childCount * Number(_height);
+                            targetOffset = getOffset(_active);
+                            activeRef.current = _active;
+                            setRect(rects);
+                            setOffset(targetOffset);
+                            setChildOffset(new Array(childCount).fill(0));
+                            // 关闭动画并立即设置样式
+                            swiperRef.current.moving = true;
+                            setStyle(targetOffset, rects);
+                            swiperRef.current.moving = false;
+                            setReady(true);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        }, 0);
     };
     useEffect(function() {
         if (ready) {
@@ -346,10 +355,12 @@ export var NoticeBar = function(props) {
     };
     // 无缝滚动第一个元素位移控制
     var itemStyle = function(index) {
-        var style = {};
+        var style = {
+            width: '100%'
+        };
         if (height) {
             style.height = "".concat(height, "px");
-            style.lineHeight = "".concat(height, "px");
+        // style.lineHeight = `${height}px`
         }
         var offset = childOffset[index];
         if (offset) {
@@ -418,74 +429,79 @@ export var NoticeBar = function(props) {
         container.current = ref;
         setIsContainerReady(true);
     }, []);
-    return (
-        /*#__PURE__*/ React.createElement(View, {
-            className: cls,
-            style: style
-        }, showNoticeBar && direction === 'horizontal' ? /*#__PURE__*/ React.createElement(View, {
-            className: noticebarClass,
-            style: barStyle,
-            onClick: handleClick
-        }, leftIcon ? /*#__PURE__*/ React.createElement(View, {
+    var renderLeftIcon = useCallback(function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, leftIcon ? /*#__PURE__*/ React.createElement(View, {
             className: "nut-noticebar-box-left-icon"
-        }, leftIcon) : null, /*#__PURE__*/ React.createElement(View, {
-            ref: wrapRef,
-            className: "nut-noticebar-box-wrap"
-        }, /*#__PURE__*/ React.createElement(View, {
-            ref: contentRef,
-            className: "nut-noticebar-box-wrap-content ".concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
-            style: contentStyle,
-            onAnimationEnd: onAnimationEnd
-        }, children, content)), right ? /*#__PURE__*/ React.createElement(View, {
+        }, leftIcon) : null);
+    }, [
+        leftIcon
+    ]);
+    var renderRight = useCallback(function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, right ? /*#__PURE__*/ React.createElement(View, {
             className: "nut-noticebar-box-right"
-        }, right) : null, closeable || rightIcon ? /*#__PURE__*/ React.createElement(View, {
+        }, right) : null);
+    }, [
+        right
+    ]);
+    var renderRightIcon = useCallback(function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, rightIcon || closeable ? /*#__PURE__*/ React.createElement(View, {
             className: "nut-noticebar-box-right-icon",
-            onClick: onClickIcon
+            onClick: handleClickIcon
         }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
             size: 12
-        })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement(View, {
-            className: "nut-noticebar-vertical",
-            style: barStyle,
-            ref: containerRefCallback,
-            onClick: handleClick
-        }, leftIcon ? /*#__PURE__*/ React.createElement(View, {
-            className: "nut-noticebar-box-left-icon"
-        }, leftIcon) : null, children ? /*#__PURE__*/ React.createElement(View, {
-            className: "nut-noticebar-box-wrap",
-            ref: innerRef
-        }, scrollList.current.map(function(item, index) {
-            return /*#__PURE__*/ React.createElement(View, {
-                style: itemStyle(index),
-                key: index,
-                onClick: function(e) {
-                    handleItemClick(e, item);
-                }
-            }, item);
-        })) : /*#__PURE__*/ React.createElement(View, {
-            className: "nut-noticebar-box-horseLamp-list",
-            style: horseLampStyle
-        }, scrollList.current.map(function(item, index) {
-            return (
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-                /*#__PURE__*/ (React.createElement(View, {
-                    className: "nut-noticebar-box-horseLamp-list-item",
-                    style: {
-                        height: height
-                    },
-                    key: index,
-                    onClick: function(e) {
-                        handleItemClick(e, item);
-                    }
-                }, item))
-            );
-        })), /*#__PURE__*/ React.createElement(View, {
-            className: "nut-noticebar-box-right-icon",
+        })) : null);
+    }, [
+        rightIcon,
+        closeable,
+        handleClickIcon
+    ]);
+    return /*#__PURE__*/ React.createElement(View, {
+        className: cls,
+        style: style
+    }, showNoticeBar && direction === 'horizontal' ? /*#__PURE__*/ React.createElement(View, {
+        className: noticebarClass,
+        style: barStyle,
+        onClick: handleClick
+    }, renderLeftIcon(), /*#__PURE__*/ React.createElement(View, {
+        ref: wrapRef,
+        className: "nut-noticebar-box-wrap",
+        id: wrapRefId
+    }, /*#__PURE__*/ React.createElement(View, {
+        ref: contentRef,
+        id: contentRefId,
+        className: "nut-noticebar-box-wrap-content ".concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
+        style: contentStyle,
+        onAnimationEnd: onAnimationEnd
+    }, children, content)), renderRight(), renderRightIcon()) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement(View, {
+        className: "nut-noticebar-vertical",
+        style: barStyle,
+        ref: containerRefCallback,
+        onClick: handleClick
+    }, renderLeftIcon(), children ? /*#__PURE__*/ React.createElement(View, {
+        className: "nut-noticebar-box-wrap",
+        ref: innerRef
+    }, scrollList.current.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(View, {
+            style: itemStyle(index),
+            key: index,
             onClick: function(e) {
-                handleClickIcon(e);
+                handleItemClick(e, item);
             }
-        }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
-            size: 12
-        }) : null))) : null)
-    );
+        }, item);
+    })) : /*#__PURE__*/ React.createElement(View, {
+        className: "nut-noticebar-box-horseLamp-list",
+        style: horseLampStyle
+    }, scrollList.current.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "nut-noticebar-box-horseLamp-list-item",
+            style: {
+                height: height
+            },
+            key: index,
+            onClick: function(e) {
+                handleItemClick(e, item);
+            }
+        }, item);
+    })), renderRight(), renderRightIcon()) : null);
 };
 NoticeBar.displayName = 'NutNoticeBar';