@nutui/nutui-react 1.3.13 → 1.3.14-beta.0

package/dist/esm/types/src/utils/render.d.ts

@@ -1,2 +1,9 @@
 import { ReactElement } from 'react';
-export declare function render(node: ReactElement, container: any): void;
+import type { Root } from 'react-dom/client';
+declare const MARK = "__nutui_react_root__";
+declare type ContainerType = (Element | DocumentFragment) & {
+    [MARK]?: Root;
+};
+export declare function render(node: ReactElement, container: ContainerType): void;
+export declare function unmount(container: ContainerType): boolean | Promise<void>;
+export {};

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:30 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:27:02 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:30 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:27:02 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:30 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:27:02 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:30 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:27:02 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:30 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:27:02 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:26:29 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -2712,6 +2712,11 @@ const Divider = (props) => {
 };
 Divider.defaultProps = defaultProps$1g;
 Divider.displayName = "NutDivider";
+const gridContext = {
+  onClick: (item, index) => {
+  }
+};
+var GridContext = React__default.createContext(gridContext);
 const defaultProps$1f = {
   columnNum: 4,
   border: true,
@@ -2738,6 +2743,7 @@ const Grid = (props) => {
     iconSize,
     iconColor,
     className,
+    onClick,
     ...rest
   } = { ...defaultProps$1f, ...props };
   const childrenDom = React__default.Children.toArray(children);
@@ -2763,6 +2769,8 @@ const Grid = (props) => {
     className: rootClass(),
     style: rootStyle(),
     ...rest
+  }, /* @__PURE__ */ React__default.createElement(GridContext.Provider, {
+    value: { onClick }
   }, childrenDom.map((item, idex) => {
     return React__default.cloneElement(item, {
       index: idex,
@@ -2776,7 +2784,7 @@ const Grid = (props) => {
       parentIconSize: iconSize,
       parentIconColor: iconColor
     });
-  }));
+  })));
 };
 Grid.defaultProps = defaultProps$1f;
 Grid.displayName = "NutGrid";
@@ -2823,6 +2831,7 @@ const GridItem = (props) => {
     ...props
   };
   const b2 = cn("grid-item");
+  const context2 = useContext$1(GridContext);
   const pxCheck2 = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
@@ -2849,6 +2858,25 @@ const GridItem = (props) => {
   };
   const handleClick2 = (e2) => {
     onClick && onClick(e2);
+    context2.onClick && context2.onClick(
+      {
+        text,
+        icon,
+        iconSize,
+        iconColor,
+        parentIconSize,
+        parentIconColor,
+        index,
+        columnNum,
+        border,
+        gutter,
+        center,
+        square,
+        reverse,
+        direction
+      },
+      index
+    );
   };
   return /* @__PURE__ */ React__default.createElement("div", {
     className: b2(),
@@ -9517,27 +9545,34 @@ function useTouch() {
     isHorizontal
   };
 }
-let createRoot;
-const { version } = ReactDOM;
-const reactDOMClone = {
+const fullClone = {
   ...ReactDOM
 };
+const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+let createRoot;
 try {
   const mainVersion = Number((version || "").split(".")[0]);
-  if (mainVersion >= 18) {
-    createRoot = reactDOMClone.createRoot;
+  if (mainVersion >= 18 && fullClone.createRoot) {
+    createRoot = fullClone.createRoot;
   }
 } catch (e2) {
-  console.log(e2);
 }
+function toggleWarning(skip) {
+  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+const MARK = "__nutui_react_root__";
 function legacyRender(node, container) {
-  ReactDOM.render(node, container);
+  reactRender(node, container);
 }
 function concurrentRender(node, container) {
-  if (createRoot) {
-    const root = createRoot(container);
-    root.render(node);
-  }
+  toggleWarning(true);
+  const root = container[MARK] || createRoot(container);
+  toggleWarning(false);
+  root.render(node);
+  container[MARK] = root;
 }
 function render(node, container) {
   if (createRoot) {
@@ -9546,6 +9581,22 @@ function render(node, container) {
   }
   legacyRender(node, container);
 }
+function legacyUnmount(container) {
+  return unmountComponentAtNode(container);
+}
+async function concurrentUnmount(container) {
+  return Promise.resolve().then(() => {
+    var _a;
+    (_a = container[MARK]) == null ? void 0 : _a.unmount();
+    delete container[MARK];
+  });
+}
+function unmount(container) {
+  if (createRoot) {
+    return concurrentUnmount(container);
+  }
+  return legacyUnmount(container);
+}
 class Notification$1 extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -9657,7 +9708,7 @@ Notification$1.newInstance = (properties, callback) => {
     callback({
       component: instance,
       destroy() {
-        ReactDOM.unmountComponentAtNode(element);
+        unmount(element);
         element && element.parentNode && element.parentNode.removeChild(element);
       }
     });
@@ -17571,19 +17622,18 @@ const NoticeBar = (props) => {
   };
   const startRollEasy = () => {
     showhorseLamp();
-    const timerCurr = setInterval(
-      showhorseLamp,
-      ~~(height / speed / 4) * 1e3 + Number(standTime)
-    );
+    const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
+    const timerCurr = setInterval(showhorseLamp, time + Number(standTime));
     SetTimer(timerCurr);
   };
   const showhorseLamp = () => {
     SetAnimate(true);
+    const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
     setTimeout(() => {
       scrollList.current.push(scrollList.current[0]);
       scrollList.current.shift();
       SetAnimate(false);
-    }, ~~(height / speed / 4) * 1e3);
+    }, time);
   };
   const startRoll = () => {
     const timerCurr = setInterval(() => {
@@ -17643,10 +17693,11 @@ const NoticeBar = (props) => {
     background,
     height: direction === "vertical" ? `${height}px` : ""
   };
-  const duringTime = ~~(height / speed / 4);
+  const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
+  const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
   const horseLampStyle = {
     transform: complexAm ? `translateY(${distance}px)` : "",
-    transition: animate ? `all ${duringTime === 0 ? ~~(height / speed) : duringTime}s` : "",
+    transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
     marginTop: animate ? `-${height}px` : ""
   };
   const b2 = cn("noticebar");
@@ -17688,7 +17739,7 @@ const NoticeBar = (props) => {
     fontClassName: iconFontClassName,
     name: rightIcon || "close",
     color
-  })) : null) : null, showNoticeBar && scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
+  })) : null) : null, showNoticeBar && direction === "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle,
     onClick: handleClick2
@@ -19199,7 +19250,7 @@ const defaultProps$k = {
   rotate: 180
 };
 function areEqual(prevProps, nextProps) {
-  return JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
+  return prevProps.children === nextProps.children && JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
 }
 const Collapse = memo(
   (props) => {
@@ -19325,10 +19376,6 @@ const CollapseItem = (props) => {
     transform: "translateY(-50%)"
   });
   const colBem = cn("collapse-item");
-  useEffect(() => {
-    setCurrHeight("auto");
-    setUpdate(!update2);
-  }, [children]);
   const measuredRef = useCallback(
     (node) => {
       if (node !== null) {
@@ -19346,6 +19393,14 @@ const CollapseItem = (props) => {
       setIconStyle(newIconStyle);
     }, 10);
   }, [isOpen, domHeight, rotate]);
+  useEffect(() => {
+    if (!isOpen) {
+      setCurrHeight("0px");
+    } else {
+      setCurrHeight("auto");
+    }
+    setUpdate(!update2);
+  }, [children, isOpen]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: colBem(),
     ...rest
@@ -20322,6 +20377,7 @@ const ImagePreview = (props) => {
     onClose
   } = props;
   const nutImagePreview = useRef(null);
+  const [innerNo, setInnerNo] = useState(initNo);
   const [showPop, setShowPop] = useState(false);
   const [active, setActive] = useState(1);
   const [maxNo, setMaxNo] = useState(1);
@@ -20402,14 +20458,14 @@ const ImagePreview = (props) => {
     document.addEventListener("touchcancel", onTouchEnd);
   };
   useEffect(() => {
-    if (show !== void 0) {
-      setShowPop(show);
-      init();
-    }
-  }, [show]);
+    setShowPop(show);
+    setInnerNo(initNo);
+    setActive(initNo);
+    init();
+  }, [show, initNo]);
   useEffect(() => {
-    if (initNo !== void 0) {
-      setActive(initNo);
+    if (innerNo !== void 0) {
+      setActive(innerNo);
     }
     if (show !== void 0) {
       setShowPop(show);
@@ -20465,7 +20521,7 @@ const ImagePreview = (props) => {
     style: { display: showPop ? "block" : "none" },
     direction: "horizontal",
     onChange: slideChangeEnd,
-    initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1),
+    initPage: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
     paginationColor,
     paginationVisible
   }, (videos && videos.length > 0 ? videos.map((item, index) => {

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.13 Wed Nov 30 2022 17:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.14 Fri Dec 09 2022 12:26:29 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -2739,6 +2739,11 @@
   };
   Divider.defaultProps = defaultProps$1g;
   Divider.displayName = "NutDivider";
+  const gridContext = {
+    onClick: (item, index) => {
+    }
+  };
+  var GridContext = React__default["default"].createContext(gridContext);
   const defaultProps$1f = {
     columnNum: 4,
     border: true,
@@ -2765,6 +2770,7 @@
       iconSize,
       iconColor,
       className,
+      onClick,
       ...rest
     } = { ...defaultProps$1f, ...props };
     const childrenDom = React__default["default"].Children.toArray(children);
@@ -2790,6 +2796,8 @@
       className: rootClass(),
       style: rootStyle(),
       ...rest
+    }, /* @__PURE__ */ React__default["default"].createElement(GridContext.Provider, {
+      value: { onClick }
     }, childrenDom.map((item, idex) => {
       return React__default["default"].cloneElement(item, {
         index: idex,
@@ -2803,7 +2811,7 @@
         parentIconSize: iconSize,
         parentIconColor: iconColor
       });
-    }));
+    })));
   };
   Grid.defaultProps = defaultProps$1f;
   Grid.displayName = "NutGrid";
@@ -2850,6 +2858,7 @@
       ...props
     };
     const b2 = cn("grid-item");
+    const context2 = React.useContext(GridContext);
     const pxCheck2 = (value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
     };
@@ -2876,6 +2885,25 @@
     };
     const handleClick2 = (e2) => {
       onClick && onClick(e2);
+      context2.onClick && context2.onClick(
+        {
+          text,
+          icon,
+          iconSize,
+          iconColor,
+          parentIconSize,
+          parentIconColor,
+          index,
+          columnNum,
+          border,
+          gutter,
+          center,
+          square,
+          reverse,
+          direction
+        },
+        index
+      );
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: b2(),
@@ -9544,27 +9572,34 @@
       isHorizontal
     };
   }
-  let createRoot;
-  const { version } = ReactDOM__namespace;
-  const reactDOMClone = {
+  const fullClone = {
     ...ReactDOM__namespace
   };
+  const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+  let createRoot;
   try {
     const mainVersion = Number((version || "").split(".")[0]);
-    if (mainVersion >= 18) {
-      createRoot = reactDOMClone.createRoot;
+    if (mainVersion >= 18 && fullClone.createRoot) {
+      createRoot = fullClone.createRoot;
     }
   } catch (e2) {
-    console.log(e2);
   }
+  function toggleWarning(skip) {
+    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+    if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
+      __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+    }
+  }
+  const MARK = "__nutui_react_root__";
   function legacyRender(node, container) {
-    ReactDOM__namespace.render(node, container);
+    reactRender(node, container);
   }
   function concurrentRender(node, container) {
-    if (createRoot) {
-      const root = createRoot(container);
-      root.render(node);
-    }
+    toggleWarning(true);
+    const root = container[MARK] || createRoot(container);
+    toggleWarning(false);
+    root.render(node);
+    container[MARK] = root;
   }
   function render(node, container) {
     if (createRoot) {
@@ -9573,6 +9608,22 @@
     }
     legacyRender(node, container);
   }
+  function legacyUnmount(container) {
+    return unmountComponentAtNode(container);
+  }
+  async function concurrentUnmount(container) {
+    return Promise.resolve().then(() => {
+      var _a;
+      (_a = container[MARK]) == null ? void 0 : _a.unmount();
+      delete container[MARK];
+    });
+  }
+  function unmount(container) {
+    if (createRoot) {
+      return concurrentUnmount(container);
+    }
+    return legacyUnmount(container);
+  }
   class Notification$1 extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
@@ -9684,7 +9735,7 @@
       callback({
         component: instance,
         destroy() {
-          ReactDOM__namespace.unmountComponentAtNode(element);
+          unmount(element);
           element && element.parentNode && element.parentNode.removeChild(element);
         }
       });
@@ -17598,19 +17649,18 @@
     };
     const startRollEasy = () => {
       showhorseLamp();
-      const timerCurr = setInterval(
-        showhorseLamp,
-        ~~(height / speed / 4) * 1e3 + Number(standTime)
-      );
+      const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
+      const timerCurr = setInterval(showhorseLamp, time + Number(standTime));
       SetTimer(timerCurr);
     };
     const showhorseLamp = () => {
       SetAnimate(true);
+      const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
       setTimeout(() => {
         scrollList.current.push(scrollList.current[0]);
         scrollList.current.shift();
         SetAnimate(false);
-      }, ~~(height / speed / 4) * 1e3);
+      }, time);
     };
     const startRoll = () => {
       const timerCurr = setInterval(() => {
@@ -17670,10 +17720,11 @@
       background,
       height: direction === "vertical" ? `${height}px` : ""
     };
-    const duringTime = ~~(height / speed / 4);
+    const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
+    const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
     const horseLampStyle = {
       transform: complexAm ? `translateY(${distance}px)` : "",
-      transition: animate ? `all ${duringTime === 0 ? ~~(height / speed) : duringTime}s` : "",
+      transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
       marginTop: animate ? `-${height}px` : ""
     };
     const b2 = cn("noticebar");
@@ -17715,7 +17766,7 @@
       fontClassName: iconFontClassName,
       name: rightIcon || "close",
       color
-    })) : null) : null, showNoticeBar && scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    })) : null) : null, showNoticeBar && direction === "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-noticebar-vertical",
       style: barStyle,
       onClick: handleClick2
@@ -19226,7 +19277,7 @@
     rotate: 180
   };
   function areEqual(prevProps, nextProps) {
-    return JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
+    return prevProps.children === nextProps.children && JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
   }
   const Collapse = React.memo(
     (props) => {
@@ -19352,10 +19403,6 @@
       transform: "translateY(-50%)"
     });
     const colBem = cn("collapse-item");
-    React.useEffect(() => {
-      setCurrHeight("auto");
-      setUpdate(!update2);
-    }, [children]);
     const measuredRef = React.useCallback(
       (node) => {
         if (node !== null) {
@@ -19373,6 +19420,14 @@
         setIconStyle(newIconStyle);
       }, 10);
     }, [isOpen, domHeight, rotate]);
+    React.useEffect(() => {
+      if (!isOpen) {
+        setCurrHeight("0px");
+      } else {
+        setCurrHeight("auto");
+      }
+      setUpdate(!update2);
+    }, [children, isOpen]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: colBem(),
       ...rest
@@ -20349,6 +20404,7 @@
       onClose
     } = props;
     const nutImagePreview = React.useRef(null);
+    const [innerNo, setInnerNo] = React.useState(initNo);
     const [showPop, setShowPop] = React.useState(false);
     const [active, setActive] = React.useState(1);
     const [maxNo, setMaxNo] = React.useState(1);
@@ -20429,14 +20485,14 @@
       document.addEventListener("touchcancel", onTouchEnd);
     };
     React.useEffect(() => {
-      if (show !== void 0) {
-        setShowPop(show);
-        init();
-      }
-    }, [show]);
+      setShowPop(show);
+      setInnerNo(initNo);
+      setActive(initNo);
+      init();
+    }, [show, initNo]);
     React.useEffect(() => {
-      if (initNo !== void 0) {
-        setActive(initNo);
+      if (innerNo !== void 0) {
+        setActive(innerNo);
       }
       if (show !== void 0) {
         setShowPop(show);
@@ -20492,7 +20548,7 @@
       style: { display: showPop ? "block" : "none" },
       direction: "horizontal",
       onChange: slideChangeEnd,
-      initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1),
+      initPage: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
       paginationColor,
       paginationVisible
     }, (videos && videos.length > 0 ? videos.map((item, index) => {

package/dist/packages/noticebar/noticebar.scss

@@ -115,7 +115,6 @@
       padding: 0;
       display: block;
       flex: 1;
-
       .horseLamp_list_item {
         display: flex;
         align-items: center;