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

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,22 +15,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, 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;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -61,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-gray-1, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -77,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-font-size-3, 14px);
+  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, 500));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;

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,18 +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/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
-    titleAlign: 'center',
     back: '',
     fixed: false,
     safeAreaInsetTop: false,
@@ -20,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
     ];
@@ -30,138 +28,41 @@ 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 = 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 = 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, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
-    var cls = classNames(classPrefix, classes, className);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, fixed && placeholder ? /*#__PURE__*/ React.createElement(View, {
+    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, {
         className: "".concat(classPrefix, "-placeholder")
     }, renderWrapper()) : renderWrapper());
 };

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

@@ -2,20 +2,21 @@
   width: $navbar-width;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
-  background: $navbar-background;
-  box-shadow: $navbar-box-shadow;
   font-size: $navbar-font-size;
   color: $navbar-color;
-  margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
+  padding: 0 16px;
 
   &-fixed {
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
   }
 
@@ -29,27 +30,24 @@
     padding-top: env(safe-area-inset-top);
   }
 
+  &-title-wrapper {
+    justify-content: space-between;
+  }
+
   &-title {
-    min-width: 53%;
-    margin: 0 auto;
+    height: 100%;
     text-align: center;
     display: flex;
+    flex: 1;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
 
-    .nut-tabs-titles {
-      background: transparent;
-
-      &-item-text {
-        color: $color-title;
-      }
-    }
-
-    .nut-tabpane {
-      display: none;
+    &-center {
+      max-width: 129px;
+      justify-content: center;
     }
   }
 
@@ -59,130 +57,64 @@
 
   &-left,
   &-right {
-    position: absolute;
-    top: 0;
-    bottom: 0;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    max-width: 124px;
+    height: 100%;
     cursor: pointer;
-    padding: 0 14px;
-
+    /* #ifndef rn harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;
       height: 20px;
       font-size: 20px;
     }
+
+    /* #endif */
+    &-maxwidth {
+      box-sizing: border-box;
+      width: calc(124px - 16px);
+    }
   }
 
   &-left {
-    left: 0;
+    padding-right: 16px;
+    gap: 16px;
+
+    &-rtl {
+      padding-right: 0;
+      padding-left: 16px;
+    }
 
     &-back {
       display: flex;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
-      margin-right: 10px;
+      gap: 16px;
     }
-  }
-
-  &-right {
-    right: 0;
 
-    .nut-icon {
-      margin-left: 12px;
-
-      &:first-child {
-        margin-left: 0;
-      }
+    &-hidden {
+      padding-left: 0;
+      padding-right: 0;
     }
   }
 
-  &-title-align-left {
-    padding-left: 14px;
-
-    .nut-navbar-left {
-      position: static;
-      padding: 0;
-
-      .nut-icon {
-        margin-left: 12px;
+  &-right {
+    padding-left: 16px;
+    justify-content: flex-end;
+    gap: 16px;
 
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-    }
-    .nut-navbar-right {
-      position: static;
-      display: inline-flex;
-      white-space: nowrap;
+    &-rtl {
+      padding-right: 16px;
       padding-left: 0;
     }
-    .nut-navbar-left-back {
-      margin-right: 0;
-    }
-
-    .nut-navbar-title {
-      min-width: 0;
-      margin: 0;
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 8px;
-      text-align: left;
-    }
-  }
-}
-
-[dir='rtl'] .nut-navbar,
-.nut-rtl .nut-navbar {
-  &-fixed {
-    left: auto;
-    right: 0;
   }
 
-  &-left {
-    left: auto;
-    right: 0;
+  &-rtl {
     .nut-icon-ArrowLeft {
       transform: rotateY(180deg);
     }
-    &-back {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-
-  &-right {
-    right: auto;
-    left: 0;
-    .nut-icon {
-      margin-left: 0;
-      margin-right: 12px;
-
-      &:first-child {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    .nut-navbar-left {
-      .nut-icon-ArrowLeft {
-        margin-left: 0;
-        margin-right: 12px;
-
-        &:first-child {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .nut-navbar-left-back {
-      margin-right: 0;
-      margin-left: 0;
-    }
   }
 }

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

@@ -1,21 +1,26 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-navbar {
   width: var(--nutui-navbar-width, 100%);
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   height: var(--nutui-navbar-height, 44px);
   box-sizing: border-box;
-  background: var(--nutui-navbar-background, var(--nutui-gray-3, #f5f6fa));
-  box-shadow: var(--nutui-navbar-box-shadow, 0px);
-  font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-navbar-color, var(--nutui-gray-7, #1a1a1a));
-  margin-bottom: var(--nutui-navbar-margin-bottom, 20px);
+  font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-navbar-color, var(--nutui-gray-7));
   overflow: hidden;
+  padding: 0 16px;
 }
 .nut-navbar-fixed {
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
   width: 100%;
 }
 .nut-navbar-placeholder {
@@ -26,37 +31,36 @@
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 }
+.nut-navbar-title-wrapper {
+  justify-content: space-between;
+}
 .nut-navbar-title {
-  min-width: 53%;
-  margin: 0 auto;
+  height: 100%;
   text-align: center;
   display: flex;
+  flex: 1;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-6, 20px));
-  font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 500));
-  color: var(--nutui-navbar-title-font-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600));
+  color: var(--nutui-navbar-title-font-color, var(--nutui-gray-7));
 }
-.nut-navbar-title .nut-tabs-titles {
-  background: transparent;
-}
-.nut-navbar-title .nut-tabs-titles-item-text {
-  color: var(--nutui-gray-7, #1a1a1a);
-}
-.nut-navbar-title .nut-tabpane {
-  display: none;
+.nut-navbar-title-center {
+  max-width: 129px;
+  justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
   display: none;
 }
 .nut-navbar-left, .nut-navbar-right {
-  position: absolute;
-  top: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
+  flex-direction: row;
+  max-width: 124px;
+  height: 100%;
   cursor: pointer;
-  padding: 0 14px;
+  /* #ifndef rn harmony jd h5 weapp*/
+  /* #endif */
 }
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
@@ -65,101 +69,38 @@
   height: 20px;
   font-size: 20px;
 }
+.nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
+  box-sizing: border-box;
+  width: 108px;
+}
 .nut-navbar-left {
-  left: 0;
+  padding-right: 16px;
+  gap: 16px;
+}
+.nut-navbar-left-rtl {
+  padding-right: 0;
+  padding-left: 16px;
 }
 .nut-navbar-left-back {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-right: 10px;
-}
-.nut-navbar-right {
-  right: 0;
+  gap: 16px;
 }
-.nut-navbar-right .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-}
-.nut-navbar-title-align-left {
-  padding-left: 14px;
-}
-.nut-navbar-title-align-left .nut-navbar-left {
-  position: static;
-  padding: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child {
-  margin-left: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-right {
-  position: static;
-  display: inline-flex;
-  white-space: nowrap;
+.nut-navbar-left-hidden {
   padding-left: 0;
+  padding-right: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-title {
-  min-width: 0;
-  margin: 0;
-  flex: 1;
-  justify-content: flex-start;
-  padding: 0 8px;
-  text-align: left;
-}
-
-[dir=rtl] .nut-navbar-fixed,
-.nut-rtl .nut-navbar-fixed {
-  left: auto;
-  right: 0;
+.nut-navbar-right {
+  padding-left: 16px;
+  justify-content: flex-end;
+  gap: 16px;
 }
-[dir=rtl] .nut-navbar-left,
-.nut-rtl .nut-navbar-left {
-  left: auto;
-  right: 0;
+.nut-navbar-right-rtl {
+  padding-right: 16px;
+  padding-left: 0;
 }
-[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft {
+.nut-navbar-rtl .nut-icon-ArrowLeft {
   transform: rotateY(180deg);
-}
-[dir=rtl] .nut-navbar-left-back,
-.nut-rtl .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 10px;
-}
-[dir=rtl] .nut-navbar-right,
-.nut-rtl .nut-navbar-right {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .nut-navbar-right .nut-icon,
-.nut-rtl .nut-navbar-right .nut-icon {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-right .nut-icon:first-child,
-.nut-rtl .nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 0;
 }