@nutui/nutui-react 1.4.5 → 1.4.6

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.4.5 Wed Feb 01 2023 15:10:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.4.6 Wed Feb 08 2023 16:17:39 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -73,7 +73,7 @@
     classname.exports = classname_production_min;
   }
   const cn = classname.exports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
-  const defaultProps$1s = {
+  const defaultProps$1t = {
     name: "",
     size: "",
     classPrefix: "nut-icon",
@@ -85,7 +85,13 @@
     className: ""
   };
   function pxCheck$3(value) {
-    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    if (value === "") {
+      return value;
+    }
+    if (Number.isNaN(Number(value))) {
+      return String(value);
+    }
+    return `${value}px`;
   }
   function Icon$1(props) {
     const {
@@ -101,7 +107,7 @@
       onClick,
       ...rest
     } = {
-      ...defaultProps$1s,
+      ...defaultProps$1t,
       ...props
     };
     const isImage = name ? name.indexOf("/") !== -1 : false;
@@ -117,15 +123,18 @@
         return { src: name };
       return {};
     };
+    const styles = {};
+    const checkedSize = pxCheck$3(size);
+    if (checkedSize) {
+      styles.width = styles.height = styles.fontSize = checkedSize;
+    }
     return React__default["default"].createElement(
       type2,
       {
         className: isImage ? `${b("img")} ${className || ""} ` : `${fontClassName} ${b(null)} ${classPrefix}-${name} ${className || ""}`,
         style: {
           color,
-          fontSize: pxCheck$3(size),
-          width: pxCheck$3(size),
-          height: pxCheck$3(size),
+          ...styles,
           ...style
         },
         ...rest,
@@ -135,13 +144,13 @@
       children
     );
   }
-  Icon$1.defaultProps = defaultProps$1s;
+  Icon$1.defaultProps = defaultProps$1t;
   Icon$1.displayName = "NutIcon";
   const ComponentDefaults = {
     iconClassPrefix: "nut-icon",
     iconFontClassName: "nutui-iconfont"
   };
-  const defaultProps$1r = {
+  const defaultProps$1s = {
     ...ComponentDefaults,
     className: "",
     color: "",
@@ -177,7 +186,7 @@
       iconFontClassName,
       ...rest
     } = {
-      ...defaultProps$1r,
+      ...defaultProps$1s,
       ...props
     };
     const getStyle = React.useCallback(() => {
@@ -255,9 +264,9 @@
       className: icon || loading ? "text" : ""
     }, children)));
   };
-  Button.defaultProps = defaultProps$1r;
+  Button.defaultProps = defaultProps$1s;
   Button.displayName = "NutButton";
-  const defaultProps$1q = {
+  const defaultProps$1r = {
     ...ComponentDefaults,
     title: null,
     subTitle: null,
@@ -299,7 +308,7 @@
       iconFontClassName,
       ...rest
     } = {
-      ...defaultProps$1q,
+      ...defaultProps$1r,
       ...props
     };
     const b = cn("cell");
@@ -349,9 +358,9 @@
       className: b("link")
     }) : linkSlot));
   };
-  Cell.defaultProps = defaultProps$1q;
+  Cell.defaultProps = defaultProps$1r;
   Cell.displayName = "NutCell";
-  const defaultProps$1p = {
+  const defaultProps$1q = {
     title: "",
     desc: "",
     className: "",
@@ -360,7 +369,7 @@
   };
   const CellGroup = (props) => {
     const { children, className, title, desc, titleSlot, descSlot } = {
-      ...defaultProps$1p,
+      ...defaultProps$1q,
       ...props
     };
     const b = cn("cell-group");
@@ -374,7 +383,7 @@
       className: b("wrap")
     }, children));
   };
-  CellGroup.defaultProps = defaultProps$1p;
+  CellGroup.defaultProps = defaultProps$1q;
   CellGroup.displayName = "NutCellGroup";
   var INFINITY = 1 / 0;
   var symbolTag = "[object Symbol]";
@@ -786,7 +795,7 @@
       errorCanvasTips: "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas"
     }
   };
-  const defaultProps$1o = {
+  const defaultProps$1p = {
     locale: zhCN
   };
   const defaultConfigRef = {
@@ -810,7 +819,7 @@
     return cssVars;
   }
   const ConfigProvider = (props) => {
-    const { children, ...config2 } = { ...defaultProps$1o, ...props };
+    const { children, ...config2 } = { ...defaultProps$1p, ...props };
     const parentConfig = useConfig();
     const theme = config2.theme || {};
     const style = React.useMemo(
@@ -826,9 +835,9 @@
       style
     }, children));
   };
-  ConfigProvider.defaultProps = defaultProps$1o;
+  ConfigProvider.defaultProps = defaultProps$1p;
   ConfigProvider.displayName = "NutConfigProvider";
-  const defaultProps$1n = {
+  const defaultProps$1o = {
     fit: "fill",
     position: "center",
     alt: "",
@@ -836,7 +845,8 @@
     height: "",
     round: false,
     showError: true,
-    showLoading: true
+    showLoading: true,
+    isLazy: false
   };
   const Image$1 = (props) => {
     useConfig();
@@ -856,14 +866,19 @@
       showLoading,
       slotError,
       slotLoding,
+      isLazy,
+      loadingImg,
+      errorImg,
       onClick,
       onLoad,
       onError
-    } = { ...defaultProps$1n, ...props };
+    } = { ...defaultProps$1o, ...props };
     const [loading, setLoading] = React.useState(true);
     const [isError, setIsError] = React.useState(false);
+    const [_src, setSrc] = React.useState("");
     React.useEffect(() => {
       if (src) {
+        setSrc(src);
         setIsError(false);
         setLoading(true);
       }
@@ -891,6 +906,46 @@
       objectPosition: position,
       ...style
     };
+    const observer = React.useRef(null);
+    const initObserver = () => {
+      const imgs = document.querySelectorAll(".nut-img.lazyload");
+      const options2 = {
+        threshold: [0],
+        rootMargin: "0px"
+      };
+      observer.current = new IntersectionObserver((entires, self2) => {
+        entires.forEach((item) => {
+          if (item.isIntersecting) {
+            setTimeout(() => {
+              const img = item.target;
+              if (img.dataset.src) {
+                img.src = img.dataset.src;
+                img.removeAttribute("data-src");
+              }
+              observer.current.unobserve(item.target);
+            }, 300);
+          }
+        });
+      }, options2);
+      imgs.forEach((item) => {
+        observer.current.observe(item);
+      });
+    };
+    const resetObserver = () => {
+      observer.current.disconnect && observer.current.disconnect();
+    };
+    React.useEffect(() => {
+      isLazy && initObserver();
+      return () => {
+        isLazy && resetObserver();
+      };
+    }, [isLazy]);
+    const loadingBg = {
+      backgroundImage: loadingImg ? `url('${loadingImg}')` : ""
+    };
+    const errorBg = {
+      backgroundImage: errorImg ? `url('${errorImg}')` : ""
+    };
     const imageClick = (event) => {
       onClick && onClick(event);
     };
@@ -900,24 +955,34 @@
       onClick: (e2) => {
         imageClick(e2);
       }
-    }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    }, isLazy ? /* @__PURE__ */ React__default["default"].createElement("img", {
+      className: "nut-img lazyload",
+      style: styles,
+      "data-src": _src,
+      alt,
+      loading: "lazy",
+      onLoad: load,
+      onError: error
+    }) : /* @__PURE__ */ React__default["default"].createElement("img", {
       className: "nut-img",
       style: styles,
-      src,
+      src: _src,
       alt,
       onLoad: load,
       onError: error
-    }), showLoading && loading ? /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "nut-img-loading"
-    }, slotLoding || children || /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+    }), loading && showLoading ? /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-img-loading",
+      style: loadingBg
+    }, !loadingImg && (slotLoding || children || /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       name: "image"
-    })) : null, showError && isError && !loading ? /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "nut-img-error"
-    }, slotError || children || /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+    }))) : null, isError && showError && !loading ? /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-img-error",
+      style: errorBg
+    }, !errorImg && (slotError || children || /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       name: "image-error"
-    })) : null);
+    }))) : null);
   };
-  Image$1.defaultProps = defaultProps$1n;
+  Image$1.defaultProps = defaultProps$1o;
   Image$1.displayName = "NutImage";
   var classnames = { exports: {} };
   /*!
@@ -1510,7 +1575,7 @@
   };
   CSSTransition.propTypes = {};
   var CSSTransition$1 = CSSTransition;
-  const defaultProps$1m = {
+  const defaultProps$1n = {
     ...ComponentDefaults,
     position: "center",
     transition: "",
@@ -1592,15 +1657,15 @@
     const classes = classNames(
       {
         round,
-        [`popup-${position}`]: true,
+        [`nut-popup-${position}`]: true,
         [`${popClass}`]: true,
         [`${className}`]: true
       },
       b("")
     );
     const closeClasses = classNames({
-      "nutui-popup__close-icon": true,
-      [`nutui-popup__close-icon--${closeIconPosition}`]: true
+      "nut-popup__close-icon": true,
+      [`nut-popup__close-icon--${closeIconPosition}`]: true
     });
     const open = () => {
       if (!innerVisible) {
@@ -1692,14 +1757,14 @@
       !visible && close();
     }, [visible]);
     React.useEffect(() => {
-      setTransitionName(transition || `popup-slide-${position}`);
+      setTransitionName(transition || `nut-popup-slide-${position}`);
     }, [position]);
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, renderToContainer(teleport, renderNode()));
   };
-  Popup.defaultProps = defaultProps$1m;
+  Popup.defaultProps = defaultProps$1n;
   Popup.displayName = "NutPopup";
   const DataContext$2 = React.createContext({});
-  const defaultProps$1l = {
+  const defaultProps$1m = {
     span: "24",
     offset: "0",
     gutter: "0"
@@ -1712,7 +1777,7 @@
       offset,
       children,
       onClick
-    } = { ...defaultProps$1l, ...props };
+    } = { ...defaultProps$1m, ...props };
     const [colName, setColName] = React.useState("");
     const [colStyle, setColStyle] = React.useState({});
     const { gutter } = React.useContext(DataContext$2);
@@ -1738,9 +1803,9 @@
       }
     }, children);
   };
-  Col.defaultProps = defaultProps$1l;
+  Col.defaultProps = defaultProps$1m;
   Col.displayName = "NutCol";
-  const defaultProps$1k = {
+  const defaultProps$1l = {
     contentPosition: "center",
     dashed: false,
     hairline: true,
@@ -1757,7 +1822,7 @@
       direction,
       ...rest
     } = {
-      ...defaultProps$1k,
+      ...defaultProps$1l,
       ...props
     };
     const dividerBem = cn("divider");
@@ -1778,14 +1843,14 @@
       ...rest
     }, children);
   };
-  Divider.defaultProps = defaultProps$1k;
+  Divider.defaultProps = defaultProps$1l;
   Divider.displayName = "NutDivider";
   const gridContext = {
     onClick: (item, index) => {
     }
   };
   var GridContext = React__default["default"].createContext(gridContext);
-  const defaultProps$1j = {
+  const defaultProps$1k = {
     columnNum: 4,
     border: true,
     gutter: 0,
@@ -1813,7 +1878,7 @@
       className,
       onClick,
       ...rest
-    } = { ...defaultProps$1j, ...props };
+    } = { ...defaultProps$1k, ...props };
     const childrenDom = React__default["default"].Children.toArray(children);
     const pxCheck2 = (value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
@@ -1854,9 +1919,9 @@
       });
     })));
   };
-  Grid.defaultProps = defaultProps$1j;
+  Grid.defaultProps = defaultProps$1k;
   Grid.displayName = "NutGrid";
-  const defaultProps$1i = {
+  const defaultProps$1j = {
     ...ComponentDefaults,
     text: "",
     fontSize: "",
@@ -1899,7 +1964,7 @@
       onClick,
       ...rest
     } = {
-      ...defaultProps$1i,
+      ...defaultProps$1j,
       ...props
     };
     const b = cn("grid-item");
@@ -1970,18 +2035,18 @@
       style: { fontSize, color }
     }, text), children && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children)));
   };
-  GridItem.defaultProps = defaultProps$1i;
+  GridItem.defaultProps = defaultProps$1j;
   GridItem.displayName = "NutGridItem";
-  const defaultProps$1h = {};
+  const defaultProps$1i = {};
   const Layout = (props) => {
-    ({ ...defaultProps$1h, ...props });
+    ({ ...defaultProps$1i, ...props });
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-layout"
     }, "Layout");
   };
-  Layout.defaultProps = defaultProps$1h;
+  Layout.defaultProps = defaultProps$1i;
   Layout.displayName = "NutLayout";
-  const defaultProps$1g = {
+  const defaultProps$1h = {
     type: "",
     justify: "start",
     align: "flex-start",
@@ -2000,7 +2065,7 @@
       gutter,
       onClick
     } = {
-      ...defaultProps$1g,
+      ...defaultProps$1h,
       ...props
     };
     const prefixCls = "nut-row";
@@ -2035,7 +2100,7 @@
       children
     ));
   };
-  Row.defaultProps = defaultProps$1g;
+  Row.defaultProps = defaultProps$1h;
   Row.displayName = "NutRow";
   const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
   const defaultRoot = canUseDom ? window : void 0;
@@ -2110,6 +2175,12 @@
       stop2.current = true;
     };
   }
+  const defaultProps$1g = {
+    position: "top",
+    top: 0,
+    bottom: 0,
+    zIndex: 2e3
+  };
   const Sticky = (props) => {
     const {
       position = "top",
@@ -2248,6 +2319,7 @@
       style: stickyStyle
     }, children));
   };
+  Sticky.defaultProps = defaultProps$1g;
   Sticky.displayName = "NutSticky";
   function clamp$1(v, min, max) {
     return Math.max(min, Math.min(v, max));
@@ -10494,7 +10566,6 @@
       }
     }, [defaultValueData]);
     React.useEffect(() => {
-      console.log("\u4FEE\u6539");
       onChange && onChange(columnIndex, chooseValueData, selectedOptions());
       if (isConfirmEvent.current) {
         isConfirmEvent.current = false;
@@ -12149,6 +12220,10 @@
         return {
           value: getFieldValue(name),
           onChange: (event) => {
+            const originOnChange = children.props.onChange;
+            if (originOnChange) {
+              originOnChange(event);
+            }
             let newValue = event;
             switch (type2) {
               case "checkbox":
@@ -14016,7 +14091,7 @@
       return /* @__PURE__ */ React__default["default"].createElement("input", {
         className: `${searchbarBem("input")}  ${searchbarBem(alignClass)} ${shape === "round" ? searchbarBem("round") : ""} ${clearable ? searchbarBem("input-clear") : ""}`,
         ref: searchRef,
-        style: { ...props.style, background: props.inputBackground },
+        style: { ...props.style },
         value: value || "",
         placeholder: placeholder || locale.placeholder,
         disabled,
@@ -14130,7 +14205,8 @@
       className: `${searchbarBem()} ${disabled ? searchbarBem("disabled") : ""}  ${className || ""}`,
       style: { ...props.style, background: props.background }
     }, renderLeftoutIcon(), renderLabel(), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${searchbarBem("content")}`
+      className: `${searchbarBem("content")}`,
+      style: { background: props.inputBackground }
     }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
   };
   SearchBar.defaultProps = defaultProps$O;
@@ -14444,7 +14520,13 @@
     className: ""
   };
   function pxCheck(value) {
-    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    if (value === "") {
+      return value;
+    }
+    if (Number.isNaN(Number(value))) {
+      return String(value);
+    }
+    return `${value}px`;
   }
   function Icon(props) {
     const {
@@ -14476,15 +14558,18 @@
         return { src: name };
       return {};
     };
+    const styles = {};
+    const checkedSize = pxCheck(size);
+    if (checkedSize) {
+      styles.width = styles.height = styles.fontSize = checkedSize;
+    }
     return React__default["default"].createElement(
       type2,
       {
         className: isImage ? `${b("img")} ${className || ""} ` : `${fontClassName} ${b(null)} ${classPrefix}-${name} ${className || ""}`,
         style: {
           color,
-          fontSize: pxCheck(size),
-          width: pxCheck(size),
-          height: pxCheck(size),
+          ...styles,
           ...style
         },
         ...rest,
@@ -15951,8 +16036,8 @@
       this.state;
       cn("notify");
       const classes = classNames({
-        "popup-top": position === "top",
-        "popup-bottom": position === "bottom",
+        "nut-notify--popup-top": position === "top",
+        "nut-notify--popup-bottom": position === "bottom",
         "nut-notify": true,
         [`nut-notify--${type2}`]: true
       });
@@ -18747,8 +18832,6 @@
       }
       return () => {
         clearInterval(timer);
-        startRoll();
-        startRollEasy();
       };
     }, []);
     React.useEffect(() => {
@@ -20287,7 +20370,7 @@
     defaultIcon: "location2",
     selectedIcon: "Check",
     isShowCustomAddress: true,
-    customAndExistTitle: "\u9009\u62E9\u5176\u4ED6\u5730\u5740"
+    customAndExistTitle: ""
   };
   const ExistRender = (props) => {
     const { locale } = useConfig();
@@ -20362,7 +20445,7 @@
       onClick: switchModule
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: b("choose-other-btn")
-    }, locale.address.chooseAnotherAddress || customAndExistTitle)));
+    }, customAndExistTitle || locale.address.chooseAnotherAddress)));
   };
   const defaultProps$7 = {
     modelValue: [],
@@ -20645,15 +20728,15 @@
     modelValue: false,
     modelSelect: [],
     type: "custom",
-    customAddressTitle: "\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A",
+    customAddressTitle: "",
     province: [],
     city: [],
     country: [],
     town: [],
     isShowCustomAddress: true,
     existAddress: [],
-    existAddressTitle: "\u914D\u9001\u81F3",
-    customAndExistTitle: "\u9009\u62E9\u5176\u4ED6\u5730\u5740",
+    existAddressTitle: "",
+    customAndExistTitle: "",
     height: "200px",
     defaultIcon: "location2",
     selectedIcon: "Check",
@@ -20794,7 +20877,7 @@
         color: "#cccccc"
       })), /* @__PURE__ */ React__default["default"].createElement("div", {
         className: b("header__title")
-      }, privateType === "custom" ? locale.address.selectRegion || customAddressTitle : locale.address.deliveryTo || existAddressTitle), /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, privateType === "custom" ? customAddressTitle || locale.address.selectRegion : existAddressTitle || locale.address.deliveryTo), /* @__PURE__ */ React__default["default"].createElement("div", {
         onClick: () => handClose()
       }, closeBtnIcon && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
         classPrefix: iconClassPrefix,
@@ -20844,7 +20927,7 @@
       selectedIcon,
       defaultIcon,
       isShowCustomAddress,
-      customAndExistTitle: locale.address.chooseAnotherAddress || customAndExistTitle,
+      customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress,
       onSelected: selectedExist,
       onSwitchModule
     }))));