@nutui/nutui-react-taro 1.5.11 → 1.5.12-beta.0

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.5.11 Wed Jul 05 2023 11:10:24 GMT+0800 (中国标准时间)
+* @nutui/nutui-react-taro v1.5.12-beta.0 Wed Jul 12 2023 16:47:44 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3273,6 +3273,7 @@ var __publicField = (obj, key, value) => {
       iconFontClassName,
       className,
       onClick,
+      style,
       ...rest
     } = {
       ...defaultProps$1l,
@@ -3285,18 +3286,18 @@ var __publicField = (obj, key, value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
     };
     const rootStyle = () => {
-      const style = {
+      const rootStyle2 = {
         flexBasis: `${100 / +columnNum}%`
       };
       if (square) {
-        style.paddingTop = `${100 / +columnNum}%`;
+        rootStyle2.paddingTop = `${100 / +columnNum}%`;
       } else if (gutter) {
-        style.paddingRight = pxCheck2(gutter);
+        rootStyle2.paddingRight = pxCheck2(gutter);
         if (index >= columnNum) {
-          style.marginTop = pxCheck2(gutter);
+          rootStyle2.marginTop = pxCheck2(gutter);
         }
       }
-      return style;
+      return { ...rootStyle2, ...style };
     };
     const contentClass = () => {
       return classNames(b2("content"), {
@@ -4119,6 +4120,19 @@ var __publicField = (obj, key, value) => {
     React.useEffect(() => {
       getParentOffset();
     }, [_showPopup]);
+    const windowHeight = React.useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
+    const updateItemOffset = React.useCallback(() => {
+      const p = parent.parent().current;
+      p.getBoundingClientRect().then((rect) => {
+        if (rect) {
+          setPosition({
+            height: rect.height,
+            top: rect.top
+          });
+        }
+      });
+    }, [direction, windowHeight]);
+    Taro.usePageScroll(updateItemOffset);
     React.useImperativeHandle(ref, () => ({
       toggle: parent.toggleItemShow
     }));
@@ -4159,114 +4173,103 @@ var __publicField = (obj, key, value) => {
       return { display: "none" };
     };
     const getPosition = () => {
-      return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-        position: "absolute",
-        bottom: "100%",
-        top: "auto",
-        height: `${window.innerHeight}px`
+      return direction === "down" ? { top: `${position.top + position.height}px` } : {
+        bottom: `${Taro.getSystemInfoSync().windowHeight - position.top}px`,
+        top: "0",
+        height: "initial"
       };
     };
     const placeholderStyle = () => {
       if (direction === "down") {
         return {
           height: `${position.top + position.height}px`,
-          top: "auto",
-          bottom: "-100%",
-          ...isShow()
+          ...isShow(),
+          ...style
         };
       }
       return {
         height: `${Taro.getSystemInfoSync().windowHeight - position.top}px`,
-        bottom: `auto`,
-        top: "0",
-        ...isShow()
+        top: "auto",
+        ...isShow(),
+        ...style
       };
     };
-    return /* @__PURE__ */ React.createElement(
-      "div",
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      components.View,
       {
-        className: "nut-menu-item-container",
-        style: { position: "absolute", left: 0, right: 0 }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `placeholder-element ${classNames({
-            up: direction === "up"
-          })}`,
-          style: placeholderStyle(),
-          onClick: () => parent.toggleItemShow(orderKey)
+        className: `placeholder-element ${classNames({
+          up: direction === "up"
+        })}`,
+        style: placeholderStyle(),
+        onClick: () => parent.toggleItemShow(orderKey)
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        overlayClass: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnClickOverlay: parent.closeOnClickOverlay,
+        onClick: () => {
+          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
         }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Overlay,
-        {
-          overlayClass: "nut-menu__overlay",
-          style: getPosition(),
-          lockScroll: parent.lockScroll,
-          visible: _showPopup,
-          closeOnClickOverlay: parent.closeOnClickOverlay,
-          onClick: () => {
-            parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
-          }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      components.View,
+      {
+        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+        style: {
+          // ...getPosition(),
+          ...isShow()
         }
-      ),
+      },
       /* @__PURE__ */ React.createElement(
-        "div",
+        CSSTransition$1,
         {
-          className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-          style: {
-            // ...getPosition(),
-            ...isShow()
-          }
+          in: _showPopup,
+          timeout: 100,
+          classNames: direction === "down" ? "menu-item" : "menu-item-up"
         },
-        /* @__PURE__ */ React.createElement(
-          CSSTransition$1,
-          {
-            in: _showPopup,
-            timeout: 100,
-            classNames: direction === "down" ? "menu-item" : "menu-item-up"
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
-            return /* @__PURE__ */ React.createElement(
-              "div",
+        /* @__PURE__ */ React.createElement(components.View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
+          return /* @__PURE__ */ React.createElement(
+            components.View,
+            {
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`,
+              key: item.text,
+              style: {
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick(item);
+              }
+            },
+            item.value === _value ? /* @__PURE__ */ React.createElement(
+              Icon$1,
               {
-                className: `nut-menu-item__option ${classNames({
-                  active: item.value === _value
-                })}`,
-                key: item.text,
+                classPrefix: iconClassPrefix,
+                fontClassName: iconFontClassName,
+                className: getIconCName(item.value, value),
+                name: optionsIcon,
+                color: activeColor
+              }
+            ) : null,
+            /* @__PURE__ */ React.createElement(
+              components.View,
+              {
+                className: getIconCName(item.value, value),
                 style: {
-                  flexBasis: `${100 / columns}%`
-                },
-                onClick: () => {
-                  handleClick(item);
+                  color: `${item.value === _value ? activeColor : ""}`
                 }
               },
-              item.value === _value ? /* @__PURE__ */ React.createElement(
-                Icon$1,
-                {
-                  classPrefix: iconClassPrefix,
-                  fontClassName: iconFontClassName,
-                  className: getIconCName(item.value, value),
-                  name: optionsIcon,
-                  color: activeColor
-                }
-              ) : null,
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: getIconCName(item.value, value),
-                  style: {
-                    color: `${item.value === _value ? activeColor : ""}`
-                  }
-                },
-                item.text
-              )
-            );
-          }), children)
-        )
+              item.text
+            )
+          );
+        }), children)
       )
-    );
+    ));
   });
   MenuItem.defaultProps = defaultProps$1d;
   MenuItem.displayName = "NutMenuItem";

package/dist/packages/menuitem/menuitem.scss

@@ -65,15 +65,15 @@
 }
 
 .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;
   background-color: transparent;
 
   &.up {
-    bottom: -$menu-bar-line-height;
+    bottom: $menu-placeholder-top;
   }
 }