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

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.2 Fri Jul 07 2023 13:52:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.3 Wed Jul 12 2023 17:55:25 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2489,94 +2489,84 @@ var __publicField = (obj, key, value) => {
   ConfigProvider.defaultProps = defaultProps$1p;
   ConfigProvider.displayName = "NutConfigProvider";
   const defaultProps$1o = {
-    fit: "fill",
-    position: "center",
-    alt: "",
-    width: "center",
-    height: "",
-    round: false,
-    showError: true,
-    showLoading: true
+    src: "",
+    error: true,
+    loading: true
   };
   const Image$1 = (props) => {
-    useConfig();
+    const classPrefix2 = "nut-image";
     const {
-      children,
       className,
       style,
       src,
-      fit,
-      position,
-      alt,
       width,
       height,
-      round,
       radius,
-      showError,
-      showLoading,
-      slotError,
-      slotLoding,
-      onClick,
+      error,
+      loading,
       onLoad,
-      onError
+      onError,
+      ...rest
     } = { ...defaultProps$1o, ...props };
-    const [loading, setLoading] = React.useState(true);
+    const [innerLoading, setInnerLoading] = React.useState(true);
     const [isError, setIsError] = React.useState(false);
-    React.useEffect(() => {
+    const handleLoad = (e) => {
+      setIsError(false);
+      setInnerLoading(false);
+      onLoad && onLoad(e);
+    };
+    const handleError = (e) => {
       if (src) {
-        setIsError(false);
-        setLoading(true);
+        setIsError(true);
+        setInnerLoading(false);
+        onError && onError(e);
       }
-    }, [src]);
-    const load = () => {
-      setLoading(false);
-      onLoad && onLoad();
-    };
-    const error = () => {
-      setIsError(true);
-      setLoading(false);
-      onError && onError();
     };
     const pxCheck2 = (value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
     };
-    const stylebox = {
+    const containerStyle = {
       height: height ? pxCheck2(height) : "",
       width: width ? pxCheck2(width) : "",
       overflow: radius !== void 0 && radius !== null ? "hidden" : "",
       borderRadius: radius !== void 0 && radius !== null ? pxCheck2(radius) : ""
     };
-    const styles = {
-      objectFit: fit,
-      objectPosition: position,
+    const imgStyle = {
       ...style
     };
-    const imageClick = (event) => {
-      onClick && onClick(event);
-    };
-    return /* @__PURE__ */ React.createElement(
-      "div",
+    const renderErrorImg = React.useCallback(() => {
+      if (!isError)
+        return null;
+      if (typeof error === "boolean" && error === true && !innerLoading) {
+        return /* @__PURE__ */ React.createElement("div", { className: "nut-img-error" }, /* @__PURE__ */ React.createElement(a$l, null));
+      }
+      if (React.isValidElement(error) && !innerLoading) {
+        return /* @__PURE__ */ React.createElement("div", { className: "nut-img-error" }, error);
+      }
+      return null;
+    }, [error, isError]);
+    const renderLoading = React.useCallback(() => {
+      if (!loading)
+        return null;
+      if (typeof loading === "boolean" && loading === true && innerLoading) {
+        return /* @__PURE__ */ React.createElement("div", { className: "nut-img-loading" }, /* @__PURE__ */ React.createElement(r$k, null));
+      }
+      if (React.isValidElement(loading) && innerLoading) {
+        return /* @__PURE__ */ React.createElement("div", { className: "nut-img-loading" }, loading);
+      }
+      return null;
+    }, [loading, innerLoading]);
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style: containerStyle }, /* @__PURE__ */ React.createElement(
+      components.Image,
       {
-        className: `nut-image ${round ? "nut-image-round" : ""}`,
-        style: stylebox,
-        onClick: (e) => {
-          imageClick(e);
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        "img",
-        {
-          className: "nut-img",
-          style: styles,
-          src,
-          alt,
-          onLoad: load,
-          onError: error
-        }
-      ),
-      showLoading && loading ? /* @__PURE__ */ React.createElement("div", { className: "nut-img-loading" }, slotLoding || children || /* @__PURE__ */ React.createElement(r$k, null)) : null,
-      showError && isError && !loading ? /* @__PURE__ */ React.createElement("div", { className: "nut-img-error" }, slotError || children || /* @__PURE__ */ React.createElement(a$l, null)) : null
-    );
+        ...rest,
+        className: "nut-img",
+        style: imgStyle,
+        src,
+        onLoad: (e) => handleLoad(e),
+        onError: (e) => handleError(e)
+      }
+    ), renderLoading(), renderErrorImg());
   };
   Image$1.defaultProps = defaultProps$1o;
   Image$1.displayName = "NutImage";
@@ -6965,9 +6955,9 @@ var __publicField = (obj, key, value) => {
     });
     return months.slice(preDates - days);
   };
-  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);
       };
@@ -10812,14 +10802,27 @@ var __publicField = (obj, key, value) => {
       ...defaultProps$S,
       ...props
     };
-    const [_showPopup, setShowPopup] = React.useState(show);
-    const [_value, setValue] = React.useState(value);
+    const [showPopup, setShowPopup] = React.useState(show);
+    const [innerValue, setValue] = React.useState(value);
     React.useEffect(() => {
       setShowPopup(show);
     }, [show]);
     React.useEffect(() => {
       getParentOffset();
-    }, [_showPopup]);
+    }, [showPopup]);
+    const windowHeight = React.useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
+    const updateItemOffset = React.useCallback(() => {
+      const p = parent.menuRef.current;
+      p.getBoundingClientRect().then((rect) => {
+        if (rect) {
+          setPosition({
+            height: rect.height,
+            top: rect.top
+          });
+        }
+      });
+    }, [direction, windowHeight]);
+    Taro.usePageScroll(updateItemOffset);
     React.useImperativeHandle(ref, () => ({
       toggle: parent.toggleMenuItem
     }));
@@ -10855,120 +10858,111 @@ var __publicField = (obj, key, value) => {
       }, 100);
     };
     const isShow = () => {
-      if (_showPopup)
+      if (showPopup)
         return {};
       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: "0",
+        height: "initial"
+      } : {
+        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()
         };
       }
       return {
         height: `${Taro.getSystemInfoSync().windowHeight - position.top}px`,
-        bottom: `auto`,
-        top: "0",
+        top: "auto",
         ...isShow()
       };
     };
-    return /* @__PURE__ */ React.createElement(
-      "div",
+    return /* @__PURE__ */ React.createElement(components.View, { className: "nut-menu-item-container" }, closeOnClickAway ? /* @__PURE__ */ React.createElement(
+      components.View,
       {
-        className: "nut-menu-item-container",
-        style: { position: "absolute", left: 0, right: 0 }
-      },
-      closeOnClickAway ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `placeholder-element ${classNames({
-            up: direction === "up"
-          })}`,
-          style: placeholderStyle(),
-          onClick: () => parent.toggleMenuItem(index)
+        className: `placeholder-element ${classNames({
+          up: direction === "up"
+        })}`,
+        style: placeholderStyle(),
+        onClick: () => parent.toggleMenuItem(index)
+      }
+    ) : null, /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        className: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: showPopup,
+        closeOnOverlayClick: parent.closeOnOverlayClick,
+        onClick: () => {
+          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
         }
-      ) : null,
-      /* @__PURE__ */ React.createElement(
-        Overlay,
-        {
-          className: "nut-menu__overlay",
-          style: getPosition(),
-          lockScroll: parent.lockScroll,
-          visible: _showPopup,
-          closeOnOverlayClick: parent.closeOnOverlayClick,
-          onClick: () => {
-            parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-          }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      components.View,
+      {
+        className: classNames(className, {
+          "nut-menu-item__wrap": direction === "down",
+          "nut-menu-item__wrap-up": direction !== "down"
+        }),
+        style: {
+          ...style,
+          ...isShow()
         }
-      ),
+      },
       /* @__PURE__ */ React.createElement(
-        "div",
+        CSSTransition$1,
         {
-          className: classNames(className, {
-            "nut-menu-item__wrap": direction === "down",
-            "nut-menu-item__wrap-up": direction !== "down"
-          }),
-          style: {
-            ...style,
-            ...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, index2) => {
-            return /* @__PURE__ */ React.createElement(
-              "div",
+        /* @__PURE__ */ React.createElement(components.View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index2) => {
+          return /* @__PURE__ */ React.createElement(
+            components.View,
+            {
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === innerValue
+              })}`,
+              key: item.text,
+              style: {
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick(item);
+              }
+            },
+            item.value === innerValue ? /* @__PURE__ */ React.createElement(React.Fragment, null, icon || /* @__PURE__ */ React.createElement(
+              a$t,
+              {
+                color: activeColor,
+                size: 10,
+                className: getIconCName(item.value, value)
+              }
+            )) : null,
+            /* @__PURE__ */ React.createElement(
+              components.View,
               {
-                className: `nut-menu-item__option ${classNames({
-                  active: item.value === _value
-                })}`,
-                key: item.text,
+                className: getIconCName(item.value, value),
                 style: {
-                  flexBasis: `${100 / columns}%`
-                },
-                onClick: () => {
-                  handleClick(item);
+                  color: `${item.value === innerValue ? activeColor : ""}`
                 }
               },
-              item.value === _value ? /* @__PURE__ */ React.createElement(React.Fragment, null, icon || /* @__PURE__ */ React.createElement(
-                a$t,
-                {
-                  color: activeColor,
-                  size: 10,
-                  className: getIconCName(item.value, value)
-                }
-              )) : 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$S;
   MenuItem.displayName = "NutMenuItem";
@@ -10978,7 +10972,11 @@ var __publicField = (obj, key, value) => {
     closeOnOverlayClick: true,
     scrollFixed: false,
     lockScroll: true,
-    icon: null
+    icon: null,
+    onOpen: () => {
+    },
+    onClose: () => {
+    }
   };
   const Menu = (props) => {
     const {
@@ -10989,6 +10987,8 @@ var __publicField = (obj, key, value) => {
       closeOnOverlayClick,
       children,
       activeColor,
+      onClose,
+      onOpen,
       ...rest
     } = {
       ...defaultProps$R,
@@ -11015,6 +11015,11 @@ var __publicField = (obj, key, value) => {
     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
       );
@@ -11023,6 +11028,7 @@ var __publicField = (obj, key, value) => {
     const hideMenuItem = (index) => {
       showMenuItem[index] = false;
       setShowMenuItem([...showMenuItem]);
+      onClose && onClose();
     };
     const updateTitle = (text, index) => {
       menuItemTitle[index] = text;
@@ -11031,6 +11037,7 @@ var __publicField = (obj, key, value) => {
     const cloneChildren = () => {
       return React.Children.map(children, (child, index) => {
         return React.cloneElement(child, {
+          ...child.props,
           show: showMenuItem[index],
           index,
           activeColor,
@@ -14620,7 +14627,6 @@ var __publicField = (obj, key, value) => {
           className: "avatar-img",
           src,
           style: { objectFit: fit },
-          alt,
           onError: errorEvent
         }
       ), React.isValidElement(icon) ? React.cloneElement(icon, {

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;