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

package/dist/es/packages/menuitem/menuitem.js

@@ -4,7 +4,7 @@ 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, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, useRef } from "react";
 import classNames from "classnames";
 import { getSystemInfoSync, usePageScroll } from "@tarojs/taro";
 import { View } from "@tarojs/components";
@@ -15,6 +15,7 @@ import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    titleIcon: null,
     columns: 1,
     direction: 'down',
     icon: null,
@@ -39,15 +40,43 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(option);
         }
     }), 2), innerValue = _usePropsValue[0], setValue = _usePropsValue[1];
+    var cssRef = useRef(null);
     useEffect(function() {
         setShowPopup(show);
     }, [
         show
     ]);
+    var getParentOffset = useCallback(function() {
+        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
+            var p, rect;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        p = parent.menuRef.current;
+                        return [
+                            4,
+                            getRectByTaro(p)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        setPosition({
+                            height: rect.height,
+                            top: rect.top
+                        });
+                        return [
+                            2
+                        ];
+                }
+            });
+        }), 100);
+    }, [
+        parent.menuRef
+    ]);
     useEffect(function() {
         getParentOffset();
     }, [
-        showPopup
+        showPopup,
+        getParentOffset
     ]);
     var windowHeight = useMemo(function() {
         return getSystemInfoSync().windowHeight;
@@ -65,7 +94,9 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
         });
     }, [
         direction,
-        windowHeight
+        windowHeight,
+        parent.lockScroll,
+        parent.menuRef
     ]);
     usePageScroll(updateItemOffset);
     useImperativeHandle(ref, function() {
@@ -94,30 +125,6 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
         top: 0,
         height: 0
     }), 2), position = _useState1[0], setPosition = _useState1[1];
-    var getParentOffset = function() {
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var p, rect;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        p = parent.menuRef.current;
-                        return [
-                            4,
-                            getRectByTaro(p)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        setPosition({
-                            height: rect.height,
-                            top: rect.top
-                        });
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 100);
-    };
     var isShow = function() {
         if (showPopup) return {};
         return {
@@ -172,6 +179,7 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
         }, className),
         style: _object_spread({}, style, isShow())
     }, /*#__PURE__*/ React.createElement(CSSTransition, {
+        nodeRef: cssRef,
         in: showPopup,
         timeout: 100,
         classNames: direction === 'down' ? 'nut-menu-container-down' : 'nut-menu-container-up'
@@ -189,12 +197,14 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
             onClick: function() {
                 handleClick(item);
             }
-        }, item.value === innerValue ? /*#__PURE__*/ React.createElement(React.Fragment, null, icon || /*#__PURE__*/ React.createElement(Check, {
+        }, item.value === innerValue ? /*#__PURE__*/ React.createElement(React.Fragment, null, icon ? /*#__PURE__*/ React.cloneElement(icon, {
+            className: "nut-menu-container-item-icon ".concat(icon.props.className || '')
+        }) : /*#__PURE__*/ React.createElement(Check, {
             color: activeColor,
             size: 16,
-            className: getIconCName(item.value, value)
+            className: "nut-menu-container-item-icon ".concat(getIconCName(item.value, value))
         })) : null, /*#__PURE__*/ React.createElement(View, {
-            className: getIconCName(item.value, value),
+            className: "nut-menu-container-item-title ".concat(getIconCName(item.value, value)),
             style: {
                 color: "".concat(item.value === innerValue ? activeColor : '')
             }

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

@@ -11,7 +11,7 @@
   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-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -24,9 +24,6 @@
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -67,7 +64,7 @@
   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-color-background-overlay, #ffffff));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -77,12 +74,12 @@
 .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-color-title, #1a1a1a);
+  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));
+  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));
 }
 .nut-menu-container-item .nut-icon {

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

@@ -9,6 +9,7 @@ import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
+import { SafeArea } from "../safearea/safearea";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
@@ -34,7 +35,7 @@ export var NavBar = function(props) {
     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 getNodeWidth = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(node) {
             var refe;
             return _ts_generator(this, function(_state) {
@@ -73,7 +74,7 @@ export var NavBar = function(props) {
         if (!(back || left || right)) {
             setContentWidth('100%');
         }
-        var init = function() {
+        var init = /*#__PURE__*/ function() {
             var _ref = _async_to_generator(function() {
                 var leftRectWidth, rightRectWidth, wrapperWidth, centerWidth;
                 return _ts_generator(this, function(_state) {
@@ -159,9 +160,11 @@ export var NavBar = function(props) {
         }, 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 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);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, fixed && placeholder ? /*#__PURE__*/ React.createElement(View, {
+    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

@@ -24,11 +24,6 @@
     width: 100%;
   }
 
-  &-safe-area-inset-top {
-    padding-top: constant(safe-area-inset-top);
-    padding-top: env(safe-area-inset-top);
-  }
-
   &-title {
     min-width: 53%;
     margin: 0 auto;

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

@@ -5,10 +5,10 @@
   align-items: center;
   height: var(--nutui-navbar-height, 44px);
   box-sizing: border-box;
-  background: var(--nutui-navbar-background, var(--nutui-gray-3, #f5f6fa));
+  background: var(--nutui-navbar-background, var(--nutui-color-background, #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));
+  font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a));
   margin-bottom: var(--nutui-navbar-margin-bottom, 20px);
   overflow: hidden;
 }
@@ -22,10 +22,6 @@
   display: inline-block;
   width: 100%;
 }
-.nut-navbar-safe-area-inset-top {
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
-}
 .nut-navbar-title {
   min-width: 53%;
   margin: 0 auto;
@@ -33,15 +29,15 @@
   display: flex;
   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-color-title, #1a1a1a));
 }
 .nut-navbar-title .nut-tabs-titles {
   background: transparent;
 }
 .nut-navbar-title .nut-tabs-titles-item-text {
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-navbar-title .nut-tabpane {
   display: none;

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

@@ -7,7 +7,7 @@
   align-items: center;
   height: var(--nutui-noticebar-height, 36px);
   padding: var(--nutui-noticebar-box-padding, 0 16px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
   border-radius: var(--nutui-noticebar-border-radius, 0);
@@ -84,7 +84,7 @@
   display: flex;
   justify-content: space-between;
   height: var(--nutui-noticebar-height, 36px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
   overflow: hidden;
   padding: var(--nutui-noticebar-box-padding, 0 16px);
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));

package/dist/es/packages/notify/notify.js

@@ -2,13 +2,14 @@ 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, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { customEvents, useCustomEvent, useCustomEventsPath } from "../../utils/use-custom-event";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: '',
     duration: 3000,
@@ -20,12 +21,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = 'nut-notify';
 export var Notify = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), id = _$_object_spread.id, children = _$_object_spread.children, style = _$_object_spread.style, type = _$_object_spread.type, className = _$_object_spread.className, position = _$_object_spread.position, visible = _$_object_spread.visible, duration = _$_object_spread.duration, onClose = _$_object_spread.onClose, onClick = _$_object_spread.onClick;
+    var _mergeProps = mergeProps(defaultProps, props), id = _mergeProps.id, children = _mergeProps.children, style = _mergeProps.style, type = _mergeProps.type, className = _mergeProps.className, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
     useCustomEvent(id, function(status) {
         status ? show() : hide();
     });
     var timer;
     var _useState = _sliced_to_array(useState(false), 2), showNotify = _useState[0], setShowNotify = _useState[1];
+    var cssRef = useRef(null);
     useEffect(function() {
         if (visible) {
             show();
@@ -60,6 +62,7 @@ export var Notify = function(props) {
     var _obj;
     var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), _define_property(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
     return /*#__PURE__*/ React.createElement(React.Fragment, null, Taro.getEnv() !== Taro.ENV_TYPE.RN ? /*#__PURE__*/ React.createElement(CSSTransition, {
+        nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
         classNames: "fade",
@@ -89,7 +92,6 @@ export function close(selector) {
     var path = useCustomEventsPath(selector);
     customEvents.trigger(path, false);
 }
-Notify.defaultProps = defaultProps;
 Notify.displayName = 'NutNotify';
 Notify.open = open;
 Notify.close = close;

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

@@ -49,7 +49,7 @@
   box-sizing: border-box;
   padding: var(--nutui-notify-padding, 0px 10px);
   color: var(--nutui-notify-text-color, #ffffff);
-  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-3, 14px));
+  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
   white-space: pre-wrap;
   word-wrap: break-word;
   height: var(--nutui-notify-height, 40px);
@@ -72,14 +72,14 @@
   background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-primary {
-  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #1988fa));
+  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #2aa32a));
+  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #00d900));
 }
 .nut-notify-danger {
   background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #c47600));
+  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }

package/dist/es/packages/numberkeyboard/numberkeyboard.js

@@ -20,7 +20,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var NumberKeyboard = function(props) {
     var locale = useConfig().locale;
-    var title = props.title, rightActions = props.rightActions, confirmText = props.confirmText, visible = props.visible, type = props.type, custom = props.custom, random = props.random, style = props.style, className = props.className, onChange = props.onChange, onDelete = props.onDelete, onClose = props.onClose, onConfirm = props.onConfirm, rest = _object_without_properties(props, [
+    var _ref = _object_spread({}, defaultProps, props), title = _ref.title, rightActions = _ref.rightActions, confirmText = _ref.confirmText, visible = _ref.visible, type = _ref.type, custom = _ref.custom, random = _ref.random, style = _ref.style, className = _ref.className, onChange = _ref.onChange, onDelete = _ref.onDelete, onClose = _ref.onClose, onConfirm = _ref.onConfirm, rest = _object_without_properties(_ref, [
         "title",
         "rightActions",
         "confirmText",
@@ -103,23 +103,45 @@ export var NumberKeyboard = function(props) {
         };
         var onTouchEnd = function(item) {
             setActive(false);
-            if (item.type === 'num' || item.type === 'custom') {
-                onChange && onChange(item.id);
+            switch(item.type){
+                case 'num':
+                case 'custom':
+                    onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+                    break;
+                case 'close':
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                    break;
+                case 'delete':
+                    onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+                    break;
+                case 'confirm':
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                    break;
+                default:
+                    break;
             }
-            if (item.type === 'close') {
-                onClose && onClose();
-            }
-            if (item.type === 'delete') {
-                onDelete && onDelete();
-            }
-            if (item.type === 'confirm') {
-                onConfirm && onConfirm();
+        };
+        var renderContent = function(item) {
+            switch(item.type){
+                case 'num':
+                case 'custom':
+                    return /*#__PURE__*/ React.createElement(View, null, item.id);
+                case 'delete':
+                    return /*#__PURE__*/ React.createElement(DeleteIcon, null);
+                case 'close':
+                    return /*#__PURE__*/ React.createElement(ArrowDown, {
+                        size: 18
+                    });
+                case 'confirm':
+                    return /*#__PURE__*/ React.createElement(React.Fragment, null, confirmText || locale.done);
+                default:
+                    return null;
             }
         };
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             key: item.id,
             className: "".concat(classPrefix, "-body-wrapper")
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: classNames({
                 key: true,
                 active: active,
@@ -136,11 +158,9 @@ export var NumberKeyboard = function(props) {
             onTouchCancel: function() {
                 return onTouchEnd(item);
             }
-        }, (item.type === 'num' || item.type === 'custom') && /*#__PURE__*/ React.createElement("div", null, item.id), item.type === 'delete' && /*#__PURE__*/ React.createElement(DeleteIcon, null), item.type === 'close' && /*#__PURE__*/ React.createElement(ArrowDown, {
-            size: 18
-        }), item.type === 'confirm' && /*#__PURE__*/ React.createElement(React.Fragment, null, confirmText || locale.done)));
+        }, renderContent(item)));
     };
-    return /*#__PURE__*/ React.createElement(Popup, _object_spread({
+    return /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, rest), {
         visible: visible,
         position: "bottom",
         onOverlayClick: onClose,
@@ -149,26 +169,26 @@ export var NumberKeyboard = function(props) {
         overlayStyle: {
             backgroundColor: 'rgba(0, 0, 0, 0)'
         }
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, className),
         style: style
-    }, title && /*#__PURE__*/ React.createElement("div", {
+    }, title && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-header")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-header-title")
     }, title), type === 'default' && /*#__PURE__*/ React.createElement("span", {
         className: "".concat(classPrefix, "-header-close"),
         onClick: onConfirm
-    }, rightActions || locale.done)), /*#__PURE__*/ React.createElement("div", {
+    }, rightActions || locale.done)), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-body")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-body-keys")
     }, keysList === null || keysList === void 0 ? void 0 : keysList.map(function(item) {
         return /*#__PURE__*/ React.createElement(NumberKeyboardKey, {
             key: item.id,
             item: item
         });
-    })), type === 'rightColumn' && /*#__PURE__*/ React.createElement("div", {
+    })), type === 'rightColumn' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-sidebar")
     }, /*#__PURE__*/ React.createElement(NumberKeyboardKey, {
         key: "delete",