@nutui/nutui-react-taro 2.0.2 → 2.0.3

package/dist/nutui.react.es.js

@@ -5,13 +5,13 @@ 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 18:04:02 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
 import React, { useCallback, createContext, useMemo, useContext, useState, useEffect, useRef, isValidElement, useImperativeHandle, forwardRef, Component, Children } from "react";
 import Taro, { getEnv, usePageScroll, getSystemInfoSync, pageScrollTo, nextTick, createSelectorQuery, ENV_TYPE, canvasToTempFilePath, uploadFile, chooseMedia, chooseImage, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
-import { View, ScrollView, PickerView, PickerViewColumn, Input as Input$1, Textarea, Image as Image$2, Swiper as Swiper$1, SwiperItem as SwiperItem$1, Video as Video$1 } from "@tarojs/components";
+import { Image as Image$2, View, ScrollView, PickerView, PickerViewColumn, Input as Input$1, Textarea, Swiper as Swiper$1, SwiperItem as SwiperItem$1, Video as Video$1 } from "@tarojs/components";
 import ReactDOM, { createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var classnamesExports = {};
@@ -2489,94 +2489,84 @@ const ConfigProvider = (props) => {
 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] = useState(true);
+  const [innerLoading, setInnerLoading] = useState(true);
   const [isError, setIsError] = useState(false);
-  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 = 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 = 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(
+    Image$2,
     {
-      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 @@ const getPreMonthDates = (type4, year, month, firstDayOfWeek) => {
   });
   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 @@ const MenuItem = forwardRef((props, ref) => {
     ...defaultProps$S,
     ...props
   };
-  const [_showPopup, setShowPopup] = useState(show);
-  const [_value, setValue] = useState(value);
+  const [showPopup, setShowPopup] = useState(show);
+  const [innerValue, setValue] = useState(value);
   useEffect(() => {
     setShowPopup(show);
   }, [show]);
   useEffect(() => {
     getParentOffset();
-  }, [_showPopup]);
+  }, [showPopup]);
+  const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
+  const updateItemOffset = useCallback(() => {
+    const p = parent.menuRef.current;
+    p.getBoundingClientRect().then((rect) => {
+      if (rect) {
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
+    });
+  }, [direction, windowHeight]);
+  usePageScroll(updateItemOffset);
   useImperativeHandle(ref, () => ({
     toggle: parent.toggleMenuItem
   }));
@@ -10855,120 +10858,111 @@ const MenuItem = forwardRef((props, ref) => {
     }, 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: `${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: `${getSystemInfoSync().windowHeight - position.top}px`,
-      bottom: `auto`,
-      top: "0",
+      top: "auto",
       ...isShow()
     };
   };
-  return /* @__PURE__ */ React.createElement(
-    "div",
+  return /* @__PURE__ */ React.createElement(View, { className: "nut-menu-item-container" }, closeOnClickAway ? /* @__PURE__ */ React.createElement(
+    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(
+    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(View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index2) => {
+        return /* @__PURE__ */ React.createElement(
+          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(
+            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 @@ const defaultProps$R = {
   closeOnOverlayClick: true,
   scrollFixed: false,
   lockScroll: true,
-  icon: null
+  icon: null,
+  onOpen: () => {
+  },
+  onClose: () => {
+  }
 };
 const Menu = (props) => {
   const {
@@ -10989,6 +10987,8 @@ const Menu = (props) => {
     closeOnOverlayClick,
     children,
     activeColor,
+    onClose,
+    onOpen,
     ...rest
   } = {
     ...defaultProps$R,
@@ -11015,6 +11015,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
     );
@@ -11023,6 +11028,7 @@ const Menu = (props) => {
   const hideMenuItem = (index) => {
     showMenuItem[index] = false;
     setShowMenuItem([...showMenuItem]);
+    onClose && onClose();
   };
   const updateTitle = (text, index) => {
     menuItemTitle[index] = text;
@@ -11031,6 +11037,7 @@ const Menu = (props) => {
   const cloneChildren = () => {
     return React.Children.map(children, (child, index) => {
       return React.cloneElement(child, {
+        ...child.props,
         show: showMenuItem[index],
         index,
         activeColor,
@@ -14620,7 +14627,6 @@ const Avatar = (props) => {
         className: "avatar-img",
         src,
         style: { objectFit: fit },
-        alt,
         onError: errorEvent
       }
     ), React.isValidElement(icon) ? React.cloneElement(icon, {