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

package/dist/es/packages/loading/loading.js

@@ -1,10 +1,13 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import React from "react";
+import React, { useRef } from "react";
 import classNames from "classnames";
 import { Loading as IconLoading, Loading1 as IconLoading1 } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
+import Lottie from "../lottie/index";
 import { ComponentDefaults } from "../../utils/typings";
+import { mergeProps } from "../../utils/merge-props";
 // 方便以后扩展设置为键值对形式
 var loadingMap = {
     circular: IconLoading1,
@@ -13,27 +16,53 @@ var loadingMap = {
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标
     type: 'circular',
-    direction: 'horizontal'
+    direction: 'horizontal',
+    lottieProps: {}
 });
-export var Loading = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, rest = _object_without_properties(_ref, [
+var defaultLottieProps = {
+    loop: true,
+    autoplay: true
+};
+export var Loading = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, lottieProps = _ref.lottieProps, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "children",
         "direction",
-        "icon"
+        "icon",
+        "lottieProps"
     ]);
+    // @ts-ignore
+    var loadingLottieRef = useRef();
+    var mergedLottieProps = mergeProps(defaultLottieProps, lottieProps);
+    React.useImperativeHandle(ref, function() {
+        return loadingLottieRef;
+    });
     var classPrefix = 'nut-loading';
-    var CurLoadingIcon = loadingMap[rest.type] || IconLoading1;
-    return /*#__PURE__*/ React.createElement("div", {
+    var getLoadingIcon = function() {
+        if (rest.type === 'lottie' && rest.jsonData) {
+            return /*#__PURE__*/ React.createElement(Lottie, _object_spread_props(_object_spread({}, mergedLottieProps), {
+                // @ts-ignore
+                ref: loadingLottieRef,
+                source: rest.jsonData
+            }));
+        }
+        var LoadingIcon = loadingMap[rest.type] || IconLoading1;
+        return /*#__PURE__*/ React.createElement(LoadingIcon, {
+            className: "".concat(classPrefix, "-icon")
+        });
+    };
+    var iconboxClassName = function() {
+        if (rest.type === 'lottie') return "".concat(classPrefix, "-lottie-box");
+        return "".concat(classPrefix, "-icon-box");
+    };
+    return /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, direction === 'vertical' ? "".concat(classPrefix, "-vertical") : '', className),
         style: style
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-icon-box")
-    }, icon || /*#__PURE__*/ React.createElement(CurLoadingIcon, {
-        className: "".concat(classPrefix, "-icon")
-    })), children ? /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
+        className: iconboxClassName()
+    }, icon || getLoadingIcon()), children ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-text")
-    }, children) : '');
-};
+    }, children) : null);
+});
 Loading.displayName = 'NutLoading';

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

@@ -21,9 +21,15 @@
       font-size: $loading-icon-size;
     }
   }
+  .nut-loading-lottie-box {
+    width: 56px;
+    height: 56px;
+    border-radius: $radius-base;
+    background: $loading-lottie-background;
+  }
 
   .nut-loading-text {
-    padding: 8px;
+    padding-top: $spacing-base;
     color: $loading-color;
     font-size: $loading-font-size;
   }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-loading {
   display: inline-flex;
   flex-direction: row;
@@ -14,15 +18,21 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: var(--nutui-loading-icon-color, var(--nutui-gray-5, #888b94));
-  width: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
-  height: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
-  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
+  color: var(--nutui-loading-icon-color, var(--nutui-gray-5));
+  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+}
+.nut-loading .nut-loading-lottie-box {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--nutui-radius-base, 8px);
+  background: var(--nutui-loading-lottie-background, rgba(0, 0, 0, 0.06));
 }
 .nut-loading .nut-loading-text {
-  padding: 8px;
-  color: var(--nutui-loading-color, var(--nutui-gray-5, #888b94));
-  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-2, 12px));
+  padding-top: var(--nutui-spacing-base, 8px);
+  color: var(--nutui-loading-color, var(--nutui-gray-5));
+  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
 }
 
 @keyframes nut-loading-rotation {

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { LottieProps } from '../lottie/types';
+import { BasicComponent } from "../../utils/typings";
+export type LoadingRef = any;
+export type LoadingType = 'spinner' | 'circular' | 'lottie';
+export type LoadingDirection = 'horizontal' | 'vertical';
+export interface LoadingProps extends BasicComponent {
+    type: LoadingType;
+    jsonData: any;
+    lottieProps: Partial<LottieProps>;
+    direction: LoadingDirection;
+    icon?: ReactNode;
+}

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,4 @@
+import { ComponentType } from 'react';
+import { LottieProps } from './types';
+declare const Lottie: ComponentType<Partial<LottieProps>>;
+export default Lottie;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/es/packages/menu/menu.js

@@ -3,9 +3,10 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { ArrowDown, ArrowUp } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
 import { MenuItem } from "../menuitem/menuitem";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -32,16 +33,22 @@ export var Menu = function(props) {
         "onOpen"
     ]);
     var menuRef = useRef(null);
-    var _useState = _sliced_to_array(useState(false), 2), isScrollFixed = _useState[0], setIsScrollFixed = _useState[1];
+    var _useState = _sliced_to_array(useState([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
+    var cls = classNames("nut-menu", className, {
+        'scroll-fixed': isScrollFixed
+    });
     var getScrollTop = function(el) {
-        return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+        return Math.max(0, el === window ? window.scrollY : el.scrollTop);
     };
-    var onScroll = function() {
-        var scrollFixed = props.scrollFixed;
+    var onScroll = useCallback(function() {
         var scrollTop = getScrollTop(window);
         var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
         setIsScrollFixed(isFixed);
-    };
+    }, [
+        scrollFixed
+    ]);
     useEffect(function() {
         if (scrollFixed) {
             window.addEventListener('scroll', onScroll);
@@ -49,9 +56,10 @@ export var Menu = function(props) {
         return function() {
             return window.removeEventListener('scroll', onScroll);
         };
-    }, []);
-    var _useState1 = _sliced_to_array(useState([]), 2), showMenuItem = _useState1[0], setShowMenuItem = _useState1[1];
-    var _useState2 = _sliced_to_array(useState([]), 2), menuItemTitle = _useState2[0], setMenuItemTitle = _useState2[1];
+    }, [
+        scrollFixed,
+        onScroll
+    ]);
     var toggleMenuItem = function(index) {
         var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
         showMenuItem[index] = !showMenuItem[index];
@@ -96,7 +104,7 @@ export var Menu = function(props) {
     var menuTitle = function() {
         return React.Children.map(children, function(child, index) {
             if (/*#__PURE__*/ React.isValidElement(child)) {
-                var _child_props = child.props, title = _child_props.title, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
+                var _child_props = child.props, title = _child_props.title, titleIcon = _child_props.titleIcon, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
                 var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
                     return option.value === (value !== undefined ? value : defaultValue);
                 });
@@ -106,8 +114,21 @@ export var Menu = function(props) {
                     if (selected && selected.length && selected[0].text) return selected[0].text;
                     return '';
                 };
-                return /*#__PURE__*/ React.createElement("div", {
-                    className: classNames('nut-menu-title ', {
+                var finallyIcon = function() {
+                    if (titleIcon) return titleIcon;
+                    if (icon) return icon;
+                    return direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    }) : /*#__PURE__*/ React.createElement(ArrowDown, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    });
+                };
+                return /*#__PURE__*/ React.createElement(View, {
+                    className: classNames('nut-menu-title ', "nut-menu-title-".concat(index), {
                         active: showMenuItem[index],
                         disabled: disabled
                     }, className),
@@ -119,25 +140,17 @@ export var Menu = function(props) {
                         if ((!options || !options.length) && !child.props.children) return;
                         !disabled && toggleMenuItem(index);
                     }
-                }, /*#__PURE__*/ React.createElement("div", {
+                }, /*#__PURE__*/ React.createElement(View, {
                     className: "nut-menu-title-text"
-                }, finallyTitle()), icon || (direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                }) : /*#__PURE__*/ React.createElement(ArrowDown, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                })));
+                }, finallyTitle()), finallyIcon());
             }
             return null;
         });
     };
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, rest), {
-        className: classNames("nut-menu", className, {
-            'scroll-fixed': isScrollFixed
-        }),
+    return /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({}, rest), {
+        className: cls,
         ref: menuRef
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: classNames('nut-menu-bar', {
             opened: showMenuItem.includes(true)
         })

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,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;
@@ -184,7 +185,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-gray-1, #ffffff);
+  background-color: var(--nutui-gray-1);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -194,8 +195,8 @@
 .nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-menu-title-color, var(--nutui-gray-7));
   min-width: 0;
   display: flex;
   align-items: center;
@@ -214,10 +215,10 @@
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

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

@@ -11,6 +11,11 @@ export interface MenuItemProps extends BasicComponent {
     */
     title: React.ReactNode
     /**
+    * 菜单项 icon
+    * @default ArrowUp/ArrowDown
+    */
+    titleIcon: React.ReactNode
+    /**
     * 选项数组
     * @default -
     */

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 : '')
             }