@nutui/nutui-react 2.0.2 → 2.0.3-beta.0

package/dist/nutui.react.es.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v2.0.2 Fri Jul 07 2023 14:02:05 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.3-beta.0 Wed Jul 12 2023 17:22:11 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -11593,9 +11593,9 @@ const TabPane = (props) => {
   );
   return children ? /* @__PURE__ */ React__default.createElement("div", { className: classes }, !disabled && children) : null;
 };
-const _window = window;
 function requestAniFrame() {
-  if (typeof _window !== "undefined") {
+  if (typeof window !== "undefined") {
+    const _window = window;
     return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
       _window.setTimeout(callback, 1e3 / 60);
     };
@@ -16473,11 +16473,14 @@ const MenuItem = forwardRef((props, ref) => {
     ...defaultProps$Q,
     ...props
   };
-  const [_showPopup, setShowPopup] = useState(show2);
-  const [_value, setValue] = useState(value);
+  const [showPopup, setShowPopup] = useState(show2);
+  const [innerValue, setValue] = useState(value);
   useEffect(() => {
     setShowPopup(show2);
   }, [show2]);
+  useEffect(() => {
+    getParentOffset();
+  }, [showPopup]);
   useImperativeHandle(ref, () => ({
     toggle: parent.toggleMenuItem
   }));
@@ -16499,16 +16502,33 @@ const MenuItem = forwardRef((props, ref) => {
     onChange && onChange(item);
   };
   const isShow = () => {
-    if (_showPopup)
+    if (showPopup)
       return {};
     return { display: "none" };
   };
+  const [position, setPosition] = useState({
+    top: 0,
+    height: 0
+  });
+  const getParentOffset = () => {
+    setTimeout(() => {
+      const p = parent.menuRef.current;
+      const rect = p.getBoundingClientRect();
+      setPosition({
+        height: rect.height,
+        top: rect.top
+      });
+    });
+  };
   const getPosition = () => {
-    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-      position: "absolute",
-      bottom: "100%",
+    return direction === "down" ? {
+      top: `${position.top + position.height}px`,
+      bottom: "0",
+      height: "initial"
+    } : {
+      bottom: `${window.innerHeight - position.top}px`,
       top: "auto",
-      height: `${window.innerHeight}px`
+      height: "initial"
     };
   };
   const micRef = useRef(null);
@@ -16522,15 +16542,14 @@ const MenuItem = forwardRef((props, ref) => {
     targetSet,
     "click",
     false,
-    _showPopup,
+    showPopup,
     closeOnClickAway
   );
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: "nut-menu-item-container",
-      ref: micRef,
-      style: { position: "absolute", left: 0, right: 0 }
+      ref: micRef
     },
     /* @__PURE__ */ React__default.createElement(
       Overlay,
@@ -16538,7 +16557,7 @@ const MenuItem = forwardRef((props, ref) => {
         className: "nut-menu__overlay",
         style: getPosition(),
         lockScroll: parent.lockScroll,
-        visible: _showPopup,
+        visible: showPopup,
         closeOnOverlayClick: parent.closeOnOverlayClick,
         onClick: () => {
           parent.closeOnOverlayClick && parent.toggleMenuItem(index);
@@ -16560,7 +16579,7 @@ const MenuItem = forwardRef((props, ref) => {
       /* @__PURE__ */ React__default.createElement(
         CSSTransition$1,
         {
-          in: _showPopup,
+          in: showPopup,
           timeout: 100,
           classNames: direction === "down" ? "menu-item" : "menu-item-up"
         },
@@ -16569,7 +16588,7 @@ const MenuItem = forwardRef((props, ref) => {
             "div",
             {
               className: `nut-menu-item__option ${classNames({
-                active: item.value === _value
+                active: item.value === innerValue
               })}`,
               key: item.text,
               style: {
@@ -16579,7 +16598,7 @@ const MenuItem = forwardRef((props, ref) => {
                 handleClick2(item);
               }
             },
-            item.value === _value ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
+            item.value === innerValue ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
               x$f,
               {
                 color: activeColor,
@@ -16591,7 +16610,7 @@ const MenuItem = forwardRef((props, ref) => {
               {
                 className: getIconCName(item.value, value),
                 style: {
-                  color: `${item.value === _value ? activeColor : ""}`
+                  color: `${item.value === innerValue ? activeColor : ""}`
                 }
               },
               item.text
@@ -16610,7 +16629,11 @@ const defaultProps$P = {
   closeOnOverlayClick: true,
   scrollFixed: false,
   lockScroll: true,
-  icon: null
+  icon: null,
+  onOpen: () => {
+  },
+  onClose: () => {
+  }
 };
 const Menu = (props) => {
   const {
@@ -16621,6 +16644,8 @@ const Menu = (props) => {
     closeOnOverlayClick,
     children,
     activeColor,
+    onClose,
+    onOpen,
     ...rest
   } = {
     ...defaultProps$P,
@@ -16647,6 +16672,11 @@ const Menu = (props) => {
   const [menuItemTitle, setMenuItemTitle] = useState([]);
   const toggleMenuItem = (index) => {
     showMenuItem[index] = !showMenuItem[index];
+    if (showMenuItem[index]) {
+      onOpen && onOpen();
+    } else {
+      onClose && onClose();
+    }
     const temp = showMenuItem.map(
       (i, idx) => idx === index ? i : false
     );
@@ -16655,6 +16685,7 @@ const Menu = (props) => {
   const hideMenuItem = (index) => {
     showMenuItem[index] = false;
     setShowMenuItem([...showMenuItem]);
+    onClose && onClose();
   };
   const updateTitle = (text, index) => {
     menuItemTitle[index] = text;

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.2 Fri Jul 07 2023 14:02:05 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.3-beta.0 Wed Jul 12 2023 17:22:11 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -11611,9 +11611,9 @@ Please add \`${key}Action\` when creating your handler.`);
     );
     return children ? /* @__PURE__ */ React.createElement("div", { className: classes }, !disabled && children) : null;
   };
-  const _window = window;
   function requestAniFrame() {
-    if (typeof _window !== "undefined") {
+    if (typeof window !== "undefined") {
+      const _window = window;
       return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
         _window.setTimeout(callback, 1e3 / 60);
       };
@@ -16491,11 +16491,14 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$Q,
       ...props
     };
-    const [_showPopup, setShowPopup] = React.useState(show2);
-    const [_value, setValue] = React.useState(value);
+    const [showPopup, setShowPopup] = React.useState(show2);
+    const [innerValue, setValue] = React.useState(value);
     React.useEffect(() => {
       setShowPopup(show2);
     }, [show2]);
+    React.useEffect(() => {
+      getParentOffset();
+    }, [showPopup]);
     React.useImperativeHandle(ref, () => ({
       toggle: parent.toggleMenuItem
     }));
@@ -16517,16 +16520,33 @@ Please add \`${key}Action\` when creating your handler.`);
       onChange && onChange(item);
     };
     const isShow = () => {
-      if (_showPopup)
+      if (showPopup)
         return {};
       return { display: "none" };
     };
+    const [position, setPosition] = React.useState({
+      top: 0,
+      height: 0
+    });
+    const getParentOffset = () => {
+      setTimeout(() => {
+        const p = parent.menuRef.current;
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      });
+    };
     const getPosition = () => {
-      return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-        position: "absolute",
-        bottom: "100%",
+      return direction === "down" ? {
+        top: `${position.top + position.height}px`,
+        bottom: "0",
+        height: "initial"
+      } : {
+        bottom: `${window.innerHeight - position.top}px`,
         top: "auto",
-        height: `${window.innerHeight}px`
+        height: "initial"
       };
     };
     const micRef = React.useRef(null);
@@ -16540,15 +16560,14 @@ Please add \`${key}Action\` when creating your handler.`);
       targetSet,
       "click",
       false,
-      _showPopup,
+      showPopup,
       closeOnClickAway
     );
     return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "nut-menu-item-container",
-        ref: micRef,
-        style: { position: "absolute", left: 0, right: 0 }
+        ref: micRef
       },
       /* @__PURE__ */ React.createElement(
         Overlay,
@@ -16556,7 +16575,7 @@ Please add \`${key}Action\` when creating your handler.`);
           className: "nut-menu__overlay",
           style: getPosition(),
           lockScroll: parent.lockScroll,
-          visible: _showPopup,
+          visible: showPopup,
           closeOnOverlayClick: parent.closeOnOverlayClick,
           onClick: () => {
             parent.closeOnOverlayClick && parent.toggleMenuItem(index);
@@ -16578,7 +16597,7 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           CSSTransition$1,
           {
-            in: _showPopup,
+            in: showPopup,
             timeout: 100,
             classNames: direction === "down" ? "menu-item" : "menu-item-up"
           },
@@ -16587,7 +16606,7 @@ Please add \`${key}Action\` when creating your handler.`);
               "div",
               {
                 className: `nut-menu-item__option ${classNames({
-                  active: item.value === _value
+                  active: item.value === innerValue
                 })}`,
                 key: item.text,
                 style: {
@@ -16597,7 +16616,7 @@ Please add \`${key}Action\` when creating your handler.`);
                   handleClick2(item);
                 }
               },
-              item.value === _value ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
+              item.value === innerValue ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
                 x$f,
                 {
                   color: activeColor,
@@ -16609,7 +16628,7 @@ Please add \`${key}Action\` when creating your handler.`);
                 {
                   className: getIconCName(item.value, value),
                   style: {
-                    color: `${item.value === _value ? activeColor : ""}`
+                    color: `${item.value === innerValue ? activeColor : ""}`
                   }
                 },
                 item.text
@@ -16628,7 +16647,11 @@ Please add \`${key}Action\` when creating your handler.`);
     closeOnOverlayClick: true,
     scrollFixed: false,
     lockScroll: true,
-    icon: null
+    icon: null,
+    onOpen: () => {
+    },
+    onClose: () => {
+    }
   };
   const Menu = (props) => {
     const {
@@ -16639,6 +16662,8 @@ Please add \`${key}Action\` when creating your handler.`);
       closeOnOverlayClick,
       children,
       activeColor,
+      onClose,
+      onOpen,
       ...rest
     } = {
       ...defaultProps$P,
@@ -16665,6 +16690,11 @@ Please add \`${key}Action\` when creating your handler.`);
     const [menuItemTitle, setMenuItemTitle] = React.useState([]);
     const toggleMenuItem = (index) => {
       showMenuItem[index] = !showMenuItem[index];
+      if (showMenuItem[index]) {
+        onOpen && onOpen();
+      } else {
+        onClose && onClose();
+      }
       const temp = showMenuItem.map(
         (i, idx) => idx === index ? i : false
       );
@@ -16673,6 +16703,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const hideMenuItem = (index) => {
       showMenuItem[index] = false;
       setShowMenuItem([...showMenuItem]);
+      onClose && onClose();
     };
     const updateTitle = (text, index) => {
       menuItemTitle[index] = text;

package/dist/packages/menuitem/menuitem.scss

@@ -57,8 +57,8 @@
 }
 
 .placeholder-element {
-  position: absolute;
-  top: -$menu-bar-line-height;
+  position: fixed;
+  top: $menu-placeholder-top;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;