@nutui/nutui-react 1.4.5 → 1.4.6-beta.0

package/dist/nutui.react.es.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-beta.0 Wed Feb 08 2023 16:08:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -46,7 +46,7 @@ classname_production_min.cn = e, classname_production_min.withNaming = r;
   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",
@@ -58,7 +58,13 @@ const defaultProps$1s = {
   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 {
@@ -74,7 +80,7 @@ function Icon$1(props) {
     onClick,
     ...rest
   } = {
-    ...defaultProps$1s,
+    ...defaultProps$1t,
     ...props
   };
   const isImage = name ? name.indexOf("/") !== -1 : false;
@@ -90,15 +96,18 @@ function Icon$1(props) {
       return { src: name };
     return {};
   };
+  const styles = {};
+  const checkedSize = pxCheck$3(size);
+  if (checkedSize) {
+    styles.width = styles.height = styles.fontSize = checkedSize;
+  }
   return React__default.createElement(
     type4,
     {
       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,
@@ -108,13 +117,13 @@ function Icon$1(props) {
     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: "",
@@ -150,7 +159,7 @@ const Button = (props) => {
     iconFontClassName,
     ...rest
   } = {
-    ...defaultProps$1r,
+    ...defaultProps$1s,
     ...props
   };
   const getStyle = useCallback(() => {
@@ -228,9 +237,9 @@ const Button = (props) => {
     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,
@@ -272,7 +281,7 @@ const Cell = (props) => {
     iconFontClassName,
     ...rest
   } = {
-    ...defaultProps$1q,
+    ...defaultProps$1r,
     ...props
   };
   const b = cn("cell");
@@ -322,9 +331,9 @@ const Cell = (props) => {
     className: b("link")
   }) : linkSlot));
 };
-Cell.defaultProps = defaultProps$1q;
+Cell.defaultProps = defaultProps$1r;
 Cell.displayName = "NutCell";
-const defaultProps$1p = {
+const defaultProps$1q = {
   title: "",
   desc: "",
   className: "",
@@ -333,7 +342,7 @@ const defaultProps$1p = {
 };
 const CellGroup = (props) => {
   const { children, className, title, desc, titleSlot, descSlot } = {
-    ...defaultProps$1p,
+    ...defaultProps$1q,
     ...props
   };
   const b = cn("cell-group");
@@ -347,7 +356,7 @@ const CellGroup = (props) => {
     className: b("wrap")
   }, children));
 };
-CellGroup.defaultProps = defaultProps$1p;
+CellGroup.defaultProps = defaultProps$1q;
 CellGroup.displayName = "NutCellGroup";
 var INFINITY = 1 / 0;
 var symbolTag = "[object Symbol]";
@@ -759,7 +768,7 @@ const zhCN = {
     errorCanvasTips: "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas"
   }
 };
-const defaultProps$1o = {
+const defaultProps$1p = {
   locale: zhCN
 };
 const defaultConfigRef = {
@@ -783,7 +792,7 @@ function convertThemeVarsToCSSVars(themeVars) {
   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 = useMemo(
@@ -799,9 +808,9 @@ const ConfigProvider = (props) => {
     style
   }, children));
 };
-ConfigProvider.defaultProps = defaultProps$1o;
+ConfigProvider.defaultProps = defaultProps$1p;
 ConfigProvider.displayName = "NutConfigProvider";
-const defaultProps$1n = {
+const defaultProps$1o = {
   fit: "fill",
   position: "center",
   alt: "",
@@ -809,7 +818,8 @@ const defaultProps$1n = {
   height: "",
   round: false,
   showError: true,
-  showLoading: true
+  showLoading: true,
+  isLazy: false
 };
 const Image$1 = (props) => {
   useConfig();
@@ -829,14 +839,19 @@ const Image$1 = (props) => {
     showLoading,
     slotError,
     slotLoding,
+    isLazy,
+    loadingImg,
+    errorImg,
     onClick,
     onLoad,
     onError
-  } = { ...defaultProps$1n, ...props };
+  } = { ...defaultProps$1o, ...props };
   const [loading, setLoading] = useState(true);
   const [isError, setIsError] = useState(false);
+  const [_src, setSrc] = useState("");
   useEffect(() => {
     if (src) {
+      setSrc(src);
       setIsError(false);
       setLoading(true);
     }
@@ -864,6 +879,46 @@ const Image$1 = (props) => {
     objectPosition: position,
     ...style
   };
+  const observer = 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();
+  };
+  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);
   };
@@ -873,24 +928,34 @@ const Image$1 = (props) => {
     onClick: (e2) => {
       imageClick(e2);
     }
-  }, /* @__PURE__ */ React__default.createElement("img", {
+  }, isLazy ? /* @__PURE__ */ React__default.createElement("img", {
+    className: "nut-img lazyload",
+    style: styles,
+    "data-src": _src,
+    alt,
+    loading: "lazy",
+    onLoad: load,
+    onError: error
+  }) : /* @__PURE__ */ React__default.createElement("img", {
     className: "nut-img",
     style: styles,
-    src,
+    src: _src,
     alt,
     onLoad: load,
     onError: error
-  }), showLoading && loading ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-img-loading"
-  }, slotLoding || children || /* @__PURE__ */ React__default.createElement(Icon$1, {
+  }), loading && showLoading ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-img-loading",
+    style: loadingBg
+  }, !loadingImg && (slotLoding || children || /* @__PURE__ */ React__default.createElement(Icon$1, {
     name: "image"
-  })) : null, showError && isError && !loading ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-img-error"
-  }, slotError || children || /* @__PURE__ */ React__default.createElement(Icon$1, {
+  }))) : null, isError && showError && !loading ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-img-error",
+    style: errorBg
+  }, !errorImg && (slotError || children || /* @__PURE__ */ React__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: {} };
 /*!
@@ -1483,7 +1548,7 @@ CSSTransition.defaultProps = {
 };
 CSSTransition.propTypes = {};
 var CSSTransition$1 = CSSTransition;
-const defaultProps$1m = {
+const defaultProps$1n = {
   ...ComponentDefaults,
   position: "center",
   transition: "",
@@ -1565,15 +1630,15 @@ const Popup = (props) => {
   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) {
@@ -1665,14 +1730,14 @@ const Popup = (props) => {
     !visible && close();
   }, [visible]);
   useEffect(() => {
-    setTransitionName(transition || `popup-slide-${position}`);
+    setTransitionName(transition || `nut-popup-slide-${position}`);
   }, [position]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderToContainer(teleport, renderNode()));
 };
-Popup.defaultProps = defaultProps$1m;
+Popup.defaultProps = defaultProps$1n;
 Popup.displayName = "NutPopup";
 const DataContext$2 = createContext({});
-const defaultProps$1l = {
+const defaultProps$1m = {
   span: "24",
   offset: "0",
   gutter: "0"
@@ -1685,7 +1750,7 @@ const Col = (props) => {
     offset,
     children,
     onClick
-  } = { ...defaultProps$1l, ...props };
+  } = { ...defaultProps$1m, ...props };
   const [colName, setColName] = useState("");
   const [colStyle, setColStyle] = useState({});
   const { gutter } = useContext(DataContext$2);
@@ -1711,9 +1776,9 @@ const Col = (props) => {
     }
   }, children);
 };
-Col.defaultProps = defaultProps$1l;
+Col.defaultProps = defaultProps$1m;
 Col.displayName = "NutCol";
-const defaultProps$1k = {
+const defaultProps$1l = {
   contentPosition: "center",
   dashed: false,
   hairline: true,
@@ -1730,7 +1795,7 @@ const Divider = (props) => {
     direction,
     ...rest
   } = {
-    ...defaultProps$1k,
+    ...defaultProps$1l,
     ...props
   };
   const dividerBem = cn("divider");
@@ -1751,14 +1816,14 @@ const Divider = (props) => {
     ...rest
   }, children);
 };
-Divider.defaultProps = defaultProps$1k;
+Divider.defaultProps = defaultProps$1l;
 Divider.displayName = "NutDivider";
 const gridContext = {
   onClick: (item, index) => {
   }
 };
 var GridContext = React__default.createContext(gridContext);
-const defaultProps$1j = {
+const defaultProps$1k = {
   columnNum: 4,
   border: true,
   gutter: 0,
@@ -1786,7 +1851,7 @@ const Grid = (props) => {
     className,
     onClick,
     ...rest
-  } = { ...defaultProps$1j, ...props };
+  } = { ...defaultProps$1k, ...props };
   const childrenDom = React__default.Children.toArray(children);
   const pxCheck2 = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
@@ -1827,9 +1892,9 @@ const Grid = (props) => {
     });
   })));
 };
-Grid.defaultProps = defaultProps$1j;
+Grid.defaultProps = defaultProps$1k;
 Grid.displayName = "NutGrid";
-const defaultProps$1i = {
+const defaultProps$1j = {
   ...ComponentDefaults,
   text: "",
   fontSize: "",
@@ -1872,7 +1937,7 @@ const GridItem = (props) => {
     onClick,
     ...rest
   } = {
-    ...defaultProps$1i,
+    ...defaultProps$1j,
     ...props
   };
   const b = cn("grid-item");
@@ -1943,18 +2008,18 @@ const GridItem = (props) => {
     style: { fontSize, color }
   }, text), children && /* @__PURE__ */ React__default.createElement(React__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.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",
@@ -1973,7 +2038,7 @@ const Row = (props) => {
     gutter,
     onClick
   } = {
-    ...defaultProps$1g,
+    ...defaultProps$1h,
     ...props
   };
   const prefixCls = "nut-row";
@@ -2008,7 +2073,7 @@ const Row = (props) => {
     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;
@@ -2083,6 +2148,12 @@ function useWatch(dep, callback, config2 = { immediate: false }) {
     stop2.current = true;
   };
 }
+const defaultProps$1g = {
+  position: "top",
+  top: 0,
+  bottom: 0,
+  zIndex: 2e3
+};
 const Sticky = (props) => {
   const {
     position = "top",
@@ -2221,6 +2292,7 @@ const Sticky = (props) => {
     style: stickyStyle
   }, children));
 };
+Sticky.defaultProps = defaultProps$1g;
 Sticky.displayName = "NutSticky";
 function clamp$1(v, min, max) {
   return Math.max(min, Math.min(v, max));
@@ -10467,7 +10539,6 @@ const InternalPicker = (props, ref) => {
     }
   }, [defaultValueData]);
   useEffect(() => {
-    console.log("\u4FEE\u6539");
     onChange && onChange(columnIndex, chooseValueData, selectedOptions());
     if (isConfirmEvent.current) {
       isConfirmEvent.current = false;
@@ -12122,6 +12193,10 @@ class FormItem extends React__default.Component {
       return {
         value: getFieldValue(name),
         onChange: (event) => {
+          const originOnChange = children.props.onChange;
+          if (originOnChange) {
+            originOnChange(event);
+          }
           let newValue = event;
           switch (type4) {
             case "checkbox":
@@ -13989,7 +14064,7 @@ const SearchBar = (props) => {
     return /* @__PURE__ */ React__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,
@@ -14103,7 +14178,8 @@ const SearchBar = (props) => {
     className: `${searchbarBem()} ${disabled ? searchbarBem("disabled") : ""}  ${className || ""}`,
     style: { ...props.style, background: props.background }
   }, renderLeftoutIcon(), renderLabel(), /* @__PURE__ */ React__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;
@@ -14417,7 +14493,13 @@ const defaultProps$L = {
   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 {
@@ -14449,15 +14531,18 @@ function Icon(props) {
       return { src: name };
     return {};
   };
+  const styles = {};
+  const checkedSize = pxCheck(size);
+  if (checkedSize) {
+    styles.width = styles.height = styles.fontSize = checkedSize;
+  }
   return React__default.createElement(
     type4,
     {
       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,
@@ -15924,8 +16009,8 @@ class Notification extends React.PureComponent {
     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--${type4}`]: true
     });
@@ -18720,8 +18805,6 @@ const NoticeBar = (props) => {
     }
     return () => {
       clearInterval(timer);
-      startRoll();
-      startRollEasy();
     };
   }, []);
   useEffect(() => {
@@ -20260,7 +20343,7 @@ const defaultProps$8 = {
   defaultIcon: "location2",
   selectedIcon: "Check",
   isShowCustomAddress: true,
-  customAndExistTitle: "\u9009\u62E9\u5176\u4ED6\u5730\u5740"
+  customAndExistTitle: ""
 };
 const ExistRender = (props) => {
   const { locale } = useConfig();
@@ -20335,7 +20418,7 @@ const ExistRender = (props) => {
     onClick: switchModule
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: b("choose-other-btn")
-  }, locale.address.chooseAnotherAddress || customAndExistTitle)));
+  }, customAndExistTitle || locale.address.chooseAnotherAddress)));
 };
 const defaultProps$7 = {
   modelValue: [],
@@ -20618,15 +20701,15 @@ const defaultProps$6 = {
   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",
@@ -20767,7 +20850,7 @@ const Address = (props) => {
       color: "#cccccc"
     })), /* @__PURE__ */ React__default.createElement("div", {
       className: b("header__title")
-    }, privateType === "custom" ? locale.address.selectRegion || customAddressTitle : locale.address.deliveryTo || existAddressTitle), /* @__PURE__ */ React__default.createElement("div", {
+    }, privateType === "custom" ? customAddressTitle || locale.address.selectRegion : existAddressTitle || locale.address.deliveryTo), /* @__PURE__ */ React__default.createElement("div", {
       onClick: () => handClose()
     }, closeBtnIcon && /* @__PURE__ */ React__default.createElement(Icon$1, {
       classPrefix: iconClassPrefix,
@@ -20817,7 +20900,7 @@ const Address = (props) => {
     selectedIcon,
     defaultIcon,
     isShowCustomAddress,
-    customAndExistTitle: locale.address.chooseAnotherAddress || customAndExistTitle,
+    customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress,
     onSelected: selectedExist,
     onSwitchModule
   }))));