@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/esm/{infiniteloading.taro-73c9b8ca.js → infiniteloading.taro-cce53c60.js}

@@ -1,9 +1,9 @@
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { ScrollView } from '@tarojs/components';
 import { createSelectorQuery } from '@tarojs/taro';
 import { c as cn } from './bem-350c1702.js';
-import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { u as useConfig } from './configprovider.taro-43a3c646.js';
 import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
@@ -125,15 +125,15 @@ const Infiniteloading = (props) => {
             onRefresh && onRefresh(refreshDone);
         }
     };
-    return (React__default.createElement(ScrollView, { className: classes, scrollY: true, id: "scroller", type: "list", style: { height: '100%' }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
-        React__default.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
-            React__default.createElement("div", { className: "top-box" },
-                pullIcon && React__default.createElement(React__default.Fragment, null, pullIcon),
-                React__default.createElement("span", { className: "top-text" }, pullText || locale.infiniteloading.pullRefreshText))),
-        React__default.createElement("div", { className: "nut-infinite-container" }, children),
-        React__default.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? (React__default.createElement("div", { className: "bottom-box" },
-            loadIcon && React__default.createElement(React__default.Fragment, null, loadIcon),
-            React__default.createElement("div", { className: "bottom-text" }, loadingText || locale.infiniteloading.loadText))) : (!hasMore && (React__default.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))))));
+    return (React.createElement(ScrollView, { className: classes, scrollY: true, id: "scroller", type: "list", style: { height: '100%' }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+        React.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
+            React.createElement("div", { className: "top-box" },
+                pullIcon && React.createElement(React.Fragment, null, pullIcon),
+                React.createElement("span", { className: "top-text" }, pullText || locale.infiniteloading.pullRefreshText))),
+        React.createElement("div", { className: "nut-infinite-container" }, children),
+        React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? (React.createElement("div", { className: "bottom-box" },
+            loadIcon && React.createElement(React.Fragment, null, loadIcon),
+            React.createElement("div", { className: "bottom-text" }, loadingText || locale.infiniteloading.loadText))) : (!hasMore && (React.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))))));
 };
 Infiniteloading.defaultProps = defaultProps;
 Infiniteloading.displayName = 'NutInfiniteloading';

package/dist/esm/{input.taro-10ed5500.js → input.taro-f4e067f7.js}

@@ -1,6 +1,6 @@
-import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
+import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
 import { MaskClose } from '@nutui/icons-react-taro';
-import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { u as useConfig } from './configprovider.taro-43a3c646.js';
 import { C as ComponentDefaults } from './typings-d8491423.js';
 
 function trimExtraChar(value, char, regExp) {
@@ -179,30 +179,30 @@ const Input = forwardRef((props, ref) => {
         updateValue('');
         onClear && onClear('', event);
     };
-    return (React__default.createElement("div", { className: `${classes}  ${className || ''}`, style: style, onClick: (e) => {
+    return (React.createElement("div", { className: `${classes}  ${className || ''}`, style: style, onClick: (e) => {
             onClick && onClick(e);
-        } }, slotInput ? (React__default.createElement(React__default.Fragment, null,
-        label ? (React__default.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
-            React__default.createElement("div", { className: "label-string" },
+        } }, slotInput ? (React.createElement(React.Fragment, null,
+        label ? (React.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
+            React.createElement("div", { className: "label-string" },
                 label,
                 colon ? ':' : ''))) : null,
-        React__default.createElement("div", { className: "nut-input-value" },
-            React__default.createElement("div", { className: "nut-input-inner", onClick: (e) => {
+        React.createElement("div", { className: "nut-input-value" },
+            React.createElement("div", { className: "nut-input-inner", onClick: (e) => {
                     handleClickInput(e);
-                } }, slotInput)))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.isValidElement(leftIcon) ? (React__default.createElement("div", { className: "nut-input-left-icon", onClick: (e) => {
+                } }, slotInput)))) : (React.createElement(React.Fragment, null,
+        React.isValidElement(leftIcon) ? (React.createElement("div", { className: "nut-input-left-icon", onClick: (e) => {
                 handleClickLeftIcon(e);
             } }, leftIcon)) : null,
-        label ? (React__default.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
-            React__default.createElement("div", { className: "label-string" },
+        label ? (React.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
+            React.createElement("div", { className: "label-string" },
                 label,
                 colon ? ':' : ''))) : null,
-        React__default.createElement("div", { className: "nut-input-value" },
-            React__default.createElement("div", { className: "nut-input-main-con" },
-                React__default.createElement("div", { className: "nut-input-inner", onClick: (e) => {
+        React.createElement("div", { className: "nut-input-value" },
+            React.createElement("div", { className: "nut-input-main-con" },
+                React.createElement("div", { className: "nut-input-inner", onClick: (e) => {
                         handleClickInput(e);
                     } },
-                    type === 'textarea' ? (React__default.createElement("textarea", { name: name, className: "input-text", ref: inputRef, style: {
+                    type === 'textarea' ? (React.createElement("textarea", { name: name, className: "input-text", ref: inputRef, style: {
                             textAlign: inputAlign,
                             height: `${Number(rows) * 24}px`,
                         }, maxLength: maxlength, placeholder: inputPlaceholder, disabled: disabled, readOnly: readonly, value: inputValue, autoFocus: autofocus, onBlur: (e) => {
@@ -211,25 +211,25 @@ const Input = forwardRef((props, ref) => {
                             handleFocus(e);
                         }, onInput: (e) => {
                             handleInput(e);
-                        } })) : (React__default.createElement("input", { ...rest, name: name, className: "input-text", ref: inputRef, style: { textAlign: inputAlign }, type: inputType(type), maxLength: maxlength, placeholder: inputPlaceholder, disabled: disabled, readOnly: readonly, value: inputValue, autoFocus: autofocus, onBlur: (e) => {
+                        } })) : (React.createElement("input", { ...rest, name: name, className: "input-text", ref: inputRef, style: { textAlign: inputAlign }, type: inputType(type), maxLength: maxlength, placeholder: inputPlaceholder, disabled: disabled, readOnly: readonly, value: inputValue, autoFocus: autofocus, onBlur: (e) => {
                             handleBlur(e);
                         }, onFocus: (e) => {
                             handleFocus(e);
                         }, onInput: (e) => {
                             handleInput(e);
                         } })),
-                    clearable && !readonly && active && inputValue.length > 0 ? (React__default.createElement("span", { className: "nut-input-clear-wrap", onClick: (e) => handleClear(e) }, clearIcon || React__default.createElement(MaskClose, { className: "nut-input-clear" }))) : null),
-                React__default.isValidElement(rightIcon) ? (React__default.createElement("div", { className: "nut-input-right-icon", onClick: (e) => {
+                    clearable && !readonly && active && inputValue.length > 0 ? (React.createElement("span", { className: "nut-input-clear-wrap", onClick: (e) => handleClear(e) }, clearIcon || React.createElement(MaskClose, { className: "nut-input-clear" }))) : null),
+                React.isValidElement(rightIcon) ? (React.createElement("div", { className: "nut-input-right-icon", onClick: (e) => {
                         handleClickRightIcon(e);
                     } }, rightIcon)) : null,
-                slotButton ? (React__default.createElement("div", { className: "nut-input-button" }, slotButton)) : null,
-                showWordLimit && maxlength ? (React__default.createElement("div", { className: "nut-input-word-limit" },
-                    React__default.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0),
+                slotButton ? (React.createElement("div", { className: "nut-input-button" }, slotButton)) : null,
+                showWordLimit && maxlength ? (React.createElement("div", { className: "nut-input-word-limit" },
+                    React.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0),
                     "/",
                     maxlength)) : null),
-            errorMessage ? (React__default.createElement("div", { className: "nut-input-error-message", style: {
+            errorMessage ? (React.createElement("div", { className: "nut-input-error-message", style: {
                     textAlign: errorMessageAlign,
-                } }, errorMessage)) : (React__default.createElement("div", null)))))));
+                } }, errorMessage)) : (React.createElement("div", null)))))));
 });
 Input.defaultProps = defaultProps;
 Input.displayName = 'NutInput';

package/dist/esm/{inputnumber.taro-108c4784.js → inputnumber.taro-1f893d42.js}

@@ -1,4 +1,4 @@
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Minus, Plus } from '@nutui/icons-react-taro';
 import classNames from 'classnames';
 import { u as usePropsValue } from './use-props-value-ae7ee726.js';
@@ -186,12 +186,12 @@ const InputNumber = (props) => {
         emitChange(value, e);
         onBlur && onBlur(e);
     };
-    return (React__default.createElement("div", { className: classes, style: styles, ...restProps },
-        React__default.createElement("div", { className: "nut-input-minus" },
-            React__default.createElement(Minus, { className: iconMinusClasses, onClick: reduceNumber })),
-        React__default.createElement(React__default.Fragment, null, formatter ? (React__default.createElement("input", { type: "text", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue })) : (React__default.createElement("input", { type: "digit", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue }))),
-        React__default.createElement("div", { className: "nut-input-add" },
-            React__default.createElement(Plus, { className: iconAddClasses, onClick: addNumber }))));
+    return (React.createElement("div", { className: classes, style: styles, ...restProps },
+        React.createElement("div", { className: "nut-input-minus" },
+            React.createElement(Minus, { className: iconMinusClasses, onClick: reduceNumber })),
+        React.createElement(React.Fragment, null, formatter ? (React.createElement("input", { type: "text", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue })) : (React.createElement("input", { type: "digit", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue }))),
+        React.createElement("div", { className: "nut-input-add" },
+            React.createElement(Plus, { className: iconAddClasses, onClick: addNumber }))));
 };
 InputNumber.defaultProps = defaultProps;
 InputNumber.displayName = 'NutInputNumber';

package/dist/esm/{layout.taro-9046d093.js → layout.taro-e4bf83cb.js}

@@ -1,9 +1,9 @@
-import React__default from 'react';
+import React from 'react';
 
 const defaultProps = {};
 const Layout = (props) => {
     ({ ...defaultProps, ...props });
-    return React__default.createElement("div", { className: "nut-layout" }, "Layout");
+    return React.createElement("div", { className: "nut-layout" }, "Layout");
 };
 Layout.defaultProps = defaultProps;
 Layout.displayName = 'NutLayout';

package/dist/esm/menu.taro-e5c68cb8.js

@@ -0,0 +1,111 @@
+import React, { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { ArrowUp2, ArrowDown2 } from '@nutui/icons-react-taro';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    activeColor: '',
+    closeOnClickOverlay: true,
+    scrollFixed: false,
+    lockScroll: true,
+    icon: null,
+};
+const Menu = (props) => {
+    const { className, icon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const menuRef = useRef(null);
+    const [isScrollFixed, setIsScrollFixed] = useState(false);
+    const getScrollTop = (el) => {
+        return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+    };
+    const onScroll = () => {
+        const { scrollFixed } = props;
+        const scrollTop = getScrollTop(window);
+        const isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
+        setIsScrollFixed(isFixed);
+    };
+    useEffect(() => {
+        if (scrollFixed) {
+            window.addEventListener('scroll', onScroll);
+        }
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+    const [showMenuItem, setShowMenuItem] = useState([]);
+    const [menuItemTitle, setMenuItemTitle] = useState([]);
+    const toggleMenuItem = (index) => {
+        showMenuItem[index] = !showMenuItem[index];
+        const temp = showMenuItem.map((i, idx) => idx === index ? i : false);
+        setShowMenuItem([...temp]);
+    };
+    const hideMenuItem = (index) => {
+        showMenuItem[index] = false;
+        setShowMenuItem([...showMenuItem]);
+    };
+    const updateTitle = (text, index) => {
+        menuItemTitle[index] = text;
+        setMenuItemTitle([...menuItemTitle]);
+    };
+    const cloneChildren = () => {
+        return React.Children.map(children, (child, index) => {
+            return React.cloneElement(child, {
+                show: showMenuItem[index],
+                index,
+                activeColor,
+                parent: {
+                    closeOnClickOverlay,
+                    lockScroll,
+                    toggleMenuItem,
+                    updateTitle,
+                    hideMenuItem,
+                    menuRef,
+                },
+            });
+        });
+    };
+    const menuTitle = () => {
+        return React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+                const { title, options, value, disabled, direction } = child.props;
+                const selected = options?.filter((option) => option.value === value);
+                const finallyTitle = () => {
+                    if (title)
+                        return title;
+                    if (menuItemTitle && menuItemTitle[index])
+                        return menuItemTitle[index];
+                    if (selected && selected.length && selected[0].text)
+                        return selected[0].text;
+                    return '';
+                };
+                return (React.createElement("div", { className: classNames('nut-menu__item ', className, {
+                        active: showMenuItem[index],
+                        disabled,
+                    }), style: { color: showMenuItem[index] ? activeColor : '' }, key: index, onClick: () => {
+                        !disabled && toggleMenuItem(index);
+                    } },
+                    React.createElement("div", { className: classNames('nut-menu__title ', {
+                            active: showMenuItem[index],
+                            disabled,
+                        }) },
+                        React.createElement("div", { className: "nut-menu__title-text" }, finallyTitle()),
+                        icon ||
+                            (direction === 'up' ? (React.createElement(ArrowUp2, { className: "nut-menu__title-icon", size: 10 })) : (React.createElement(ArrowDown2, { className: "nut-menu__title-icon", size: 10 }))))));
+            }
+            return null;
+        });
+    };
+    return (React.createElement("div", { ...rest, className: classNames(`nut-menu`, className, {
+            'scroll-fixed': isScrollFixed,
+        }), ref: menuRef },
+        React.createElement("div", { className: "nut-menu-relative" },
+            React.createElement("div", { className: classNames('nut-menu__bar', {
+                    opened: showMenuItem.includes(true),
+                }) }, menuTitle()),
+            cloneChildren())));
+};
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'NutMenu';
+
+export { Menu as M };

package/dist/esm/{menuitem.taro-86a6bb6c.js → menuitem.taro-37c18382.js}

@@ -1,40 +1,37 @@
-import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
+import { getSystemInfoSync } from '@tarojs/taro';
 import { CSSTransition } from 'react-transition-group';
 import { Check } from '@nutui/icons-react-taro';
-import { u as useConfig } from './configprovider.taro-c8c54556.js';
-import { O as Overlay } from './overlay.taro-ad0d4775.js';
+import { O as Overlay } from './overlay.taro-067b7202.js';
+import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
 import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
     ...ComponentDefaults,
-    className: '',
-    style: {},
     columns: 1,
     direction: 'down',
-    optionsIcon: null,
+    icon: null,
+    closeOnClickAway: false,
     activeTitleClass: '',
     inactiveTitleClass: '',
     onChange: (value) => undefined,
 };
 const MenuItem = forwardRef((props, ref) => {
-    useConfig();
-    const mergedProps = { ...defaultProps, ...props };
-    const { style, options, value, columns, title, optionsIcon, direction, onChange, activeTitleClass, inactiveTitleClass, children, } = {
+    const { className, style, options, value, columns, title, icon, direction, onChange, activeTitleClass, inactiveTitleClass, closeOnClickAway, children, activeColor, show, parent, index, } = {
         ...defaultProps,
         ...props,
     };
-    const { activeColor, showPopup, parent, orderKey } = mergedProps;
-    const [_showPopup, setShowPopup] = useState(showPopup);
+    const [_showPopup, setShowPopup] = useState(show);
     const [_value, setValue] = useState(value);
     useEffect(() => {
-        setShowPopup(showPopup);
-    }, [showPopup]);
+        setShowPopup(show);
+    }, [show]);
     useEffect(() => {
         getParentOffset();
     }, [_showPopup]);
     useImperativeHandle(ref, () => ({
-        toggle: parent.toggleItemShow,
+        toggle: parent.toggleMenuItem,
     }));
     const getIconCName = (optionVal, value) => {
         return classNames({
@@ -44,11 +41,11 @@ const MenuItem = forwardRef((props, ref) => {
     };
     const setTitle = (text) => {
         if (!title) {
-            parent.updateTitle(text, orderKey);
+            parent.updateTitle(text, index);
         }
     };
     const handleClick = (item) => {
-        parent.toggleItemShow(orderKey);
+        parent.toggleMenuItem(index);
         setTitle(item.text);
         setValue(item.value);
         onChange && onChange(item);
@@ -59,13 +56,13 @@ const MenuItem = forwardRef((props, ref) => {
     });
     const getParentOffset = () => {
         setTimeout(async () => {
-            const p = parent.parent().current;
-            const rect = await p.getBoundingClientRect();
+            const p = parent.menuRef.current;
+            const rect = await getRectByTaro(p);
             setPosition({
                 height: rect.height,
                 top: rect.top,
             });
-        });
+        }, 100);
     };
     const isShow = () => {
         if (_showPopup)
@@ -75,48 +72,52 @@ const MenuItem = forwardRef((props, ref) => {
     const getPosition = () => {
         return direction === 'down'
             ? { top: `${position.top + position.height}px` }
-            : { bottom: `${window.innerHeight - position.top}px`, top: 'auto' };
+            : {
+                bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
+                top: 'auto',
+            };
     };
     const placeholderStyle = () => {
         if (direction === 'down') {
             return {
                 height: `${position.top + position.height}px`,
+                top: 0,
                 ...isShow(),
-                ...style,
             };
         }
         return {
-            height: `${window.innerHeight - position.top}px`,
+            height: `${getSystemInfoSync().windowHeight - position.top}px`,
+            bottom: `0px`,
             top: 'auto',
             ...isShow(),
-            ...style,
         };
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: `placeholder-element ${classNames({
+    return (React.createElement(React.Fragment, null,
+        closeOnClickAway ? (React.createElement("div", { className: `placeholder-element ${classNames({
                 up: direction === 'up',
-            })}`, style: placeholderStyle(), onClick: () => parent.toggleItemShow(orderKey) }),
-        React__default.createElement(Overlay, { className: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnOverlayClick: parent.closeOnClickOverlay, onClick: () => {
-                parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+            })}`, style: placeholderStyle(), onClick: () => parent.toggleMenuItem(index) })) : null,
+        React.createElement(Overlay, { className: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnOverlayClick: parent.closeOnOverlayClick, onClick: () => {
+                parent.closeOnOverlayClick && parent.toggleMenuItem(index);
             } }),
-        React__default.createElement("div", { className: direction === 'down'
-                ? 'nut-menu-item__wrap'
-                : 'nut-menu-item__wrap-up', style: {
-                // ...getPosition(),
+        React.createElement("div", { className: classNames(className, {
+                'nut-menu-item__wrap': direction === 'down',
+                'nut-menu-item__wrap-up': direction !== 'down',
+            }), style: {
+                ...style,
                 ...isShow(),
             } },
-            React__default.createElement(CSSTransition, { in: _showPopup, timeout: 100, classNames: direction === 'down' ? 'menu-item' : 'menu-item-up' },
-                React__default.createElement("div", { className: "nut-menu-item__content" },
+            React.createElement(CSSTransition, { in: _showPopup, timeout: 100, classNames: direction === 'down' ? 'menu-item' : 'menu-item-up' },
+                React.createElement("div", { className: "nut-menu-item__content" },
                     options?.map((item, index) => {
-                        return (React__default.createElement("div", { className: `nut-menu-item__option ${classNames({
+                        return (React.createElement("div", { className: `nut-menu-item__option ${classNames({
                                 active: item.value === _value,
                             })}`, key: item.text, style: {
                                 flexBasis: `${100 / columns}%`,
                             }, onClick: () => {
                                 handleClick(item);
                             } },
-                            item.value === _value ? (React__default.createElement(React__default.Fragment, null, optionsIcon || (React__default.createElement(Check, { color: activeColor, className: getIconCName(item.value, value) })))) : null,
-                            React__default.createElement("div", { className: getIconCName(item.value, value), style: {
+                            item.value === _value ? (React.createElement(React.Fragment, null, icon || (React.createElement(Check, { color: activeColor, size: 10, className: getIconCName(item.value, value) })))) : null,
+                            React.createElement("div", { className: getIconCName(item.value, value), style: {
                                     color: `${item.value === _value ? activeColor : ''}`,
                                 } }, item.text)));
                     }),

package/dist/esm/navbar.taro-92bab9c4.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import classNames from 'classnames';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    left: '',
+    right: '',
+    back: '',
+    fixed: false,
+    safeAreaInsetTop: false,
+    placeholder: false,
+    zIndex: 10,
+};
+const NavBar = (props) => {
+    const { right, left, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onClickBack, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classPrefix = 'nut-navbar';
+    const children = Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+    const styles = () => {
+        return {
+            ...style,
+            zIndex,
+        };
+    };
+    const renderLeft = () => {
+        return (React.createElement("div", { className: `${classPrefix}__left` },
+            back && (React.createElement("div", { className: `${classPrefix}__left__back`, onClick: (e) => onClickBack(e) }, back)),
+            left));
+    };
+    const renderContent = () => {
+        return React.createElement("div", { className: `${classPrefix}__title` }, children);
+    };
+    const renderRight = () => {
+        return React.createElement("div", { className: `${classPrefix}__right` }, right);
+    };
+    const renderWrapper = () => {
+        return (React.createElement("div", { className: cls, style: styles() },
+            renderLeft(),
+            renderContent(),
+            renderRight()));
+    };
+    const classes = classNames({
+        [`${classPrefix}--fixed`]: fixed,
+        [`${classPrefix}--safe-area-inset-top`]: safeAreaInsetTop,
+    });
+    const cls = classNames(classPrefix, classes, className);
+    return (React.createElement(React.Fragment, null, fixed && placeholder ? (React.createElement("div", { className: `${classPrefix}--placeholder` }, renderWrapper())) : (renderWrapper())));
+};
+NavBar.defaultProps = defaultProps;
+NavBar.displayName = 'NutNavBar';
+
+export { NavBar as N };

package/dist/esm/{noticebar.taro-49e7441f.js → noticebar.taro-cbe93c9e.js}

@@ -1,4 +1,4 @@
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import { c as cn } from './bem-350c1702.js';
 import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
@@ -60,8 +60,8 @@ const NoticeBar = (props) => {
     const [offset, setOffset] = useState(0);
     const { childs, childCount } = useMemo(() => {
         let childCount = 0;
-        const childs = React__default.Children.map(children, (child) => {
-            if (!React__default.isValidElement(child))
+        const childs = React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
                 return null;
             childCount++;
             return child;
@@ -394,32 +394,32 @@ const NoticeBar = (props) => {
             stopAutoPlay();
         };
     }, []);
-    return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: style },
-        showNoticeBar && direction === 'across' ? (React__default.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
-            React__default.createElement("div", { className: "left-icon" }, leftIcon || React__default.createElement(Notice, { size: 16, color: color })),
-            React__default.createElement("div", { ref: wrap, className: "wrap" },
-                React__default.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
+    return (React.createElement("div", { className: `${b()} ${className || ''}`, style: style },
+        showNoticeBar && direction === 'across' ? (React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
+            React.createElement("div", { className: "left-icon" }, leftIcon || React.createElement(Notice, { size: 16, color: color })),
+            React.createElement("div", { ref: wrap, className: "wrap" },
+                React.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
                     children,
                     text)),
-            closeMode || rightIcon ? (React__default.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { size: 12, color: color }))) : null)) : null,
-        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React__default.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-            leftIcon ? React__default.createElement("div", { className: "left-icon" }, leftIcon) : null,
-            children ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
-                    return (React__default.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
+            closeMode || rightIcon ? (React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React.createElement(Close, { size: 12, color: color }))) : null)) : null,
+        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
+            leftIcon ? React.createElement("div", { className: "left-icon" }, leftIcon) : null,
+            children ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+                    return (React.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
                             handleItemClick(e, item);
                         } }, item));
-                })))) : (React__default.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+                })))) : (React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
                 return (
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-                React__default.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
+                React.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
                         handleItemClick(e, item);
                     } }, item));
             }))),
-            React__default.createElement("div", { className: "go", onClick: (e) => {
+            React.createElement("div", { className: "go", onClick: (e) => {
                     handleClickIcon(e);
                 } }, rightIcon ||
-                (closeMode ? React__default.createElement(Close, { size: 12, color: color }) : null)))) : null));
+                (closeMode ? React.createElement(Close, { size: 12, color: color }) : null)))) : null));
 };
 NoticeBar.defaultProps = defaultProps;
 NoticeBar.displayName = 'NutNoticeBar';

package/dist/esm/{notify.taro-e17c6f82.js → notify.taro-f1079218.js}

@@ -1,4 +1,4 @@
-import React__default, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { c as cn } from './bem-350c1702.js';
@@ -62,9 +62,9 @@ const Notify = (props) => {
         'nut-notify': true,
         [`nut-notify--${type}`]: true,
     });
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CSSTransition, { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position: position, id: id },
-            React__default.createElement("div", { className: `${classes} ${className}`, style: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CSSTransition, { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position: position, id: id },
+            React.createElement("div", { className: `${classes} ${className}`, style: {
                     color: `${color || ''}`,
                     background: `${background || ''}`,
                 }, onClick: clickHandle }, children || msg))));