@nutui/nutui-react 2.6.21 → 2.6.22

package/dist/esm/Range.js

@@ -1,4 +1,4 @@
-import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import React__default, { useState, useRef, useEffect, useMemo } from "react";
 import classNames from "classnames";
 import { u as useTouch } from "./use-touch.js";
 import { g as getRect } from "./use-client-rect.js";
@@ -8,7 +8,7 @@ import { a as useRtl } from "./configprovider2.js";
 const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { range: false, min: 0, max: 100, step: 1, vertical: false, marks: {} });
 const Range = (props) => {
   const rtl = useRtl();
-  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = Object.assign(Object.assign({}, defaultProps), props);
+  const { className, range, disabled, button, vertical, marks, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue, onChange, onStart, onEnd } = Object.assign(Object.assign({}, defaultProps), props);
   const classPrefix = "nut-range";
   const [buttonIndex, setButtonIndex] = useState(0);
   const [dragStatus, setDragStatus] = useState("start");
@@ -25,7 +25,7 @@ const Range = (props) => {
     finalValue: 0,
     onChange: handleChange
   });
-  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  const [exactValue, setExactValue] = useState(() => value || defaultValue || 0);
   const marksRef = useRef({});
   useEffect(() => {
     if (marks) {
@@ -41,10 +41,7 @@ const Range = (props) => {
         setMarksList(list);
       }
     }
-  }, [marks]);
-  const scope = () => {
-    return max - min;
-  };
+  }, [marks, max, min]);
   const classes = classNames(classPrefix, {
     [`${classPrefix}-disabled`]: disabled,
     [`${classPrefix}-vertical`]: vertical
@@ -52,7 +49,7 @@ const Range = (props) => {
   const containerClasses = classNames(`${classPrefix}-container`, {
     [`${classPrefix}-container-vertical`]: vertical
   }, className);
-  const markClassName = useCallback((mark) => {
+  const markClassName = (mark) => {
     const classPrefix2 = "nut-range-mark";
     let lowerBound = min;
     let upperBound = max;
@@ -67,23 +64,23 @@ const Range = (props) => {
       `${classPrefix2}-text`,
       `${isActive ? `${classPrefix2}-text-active` : ""}`
     ].join(" ");
-  }, [range, current, min, max]);
+  };
   const isRange = (val) => {
     return !!range && Array.isArray(val);
   };
+  const scope = useMemo(() => {
+    if (max < min || max === min) {
+      console.log("max 的值需要大于 min的值");
+    }
+    return max - min;
+  }, [max, min]);
   const calcMainAxis = () => {
     const modelVal = current;
-    if (isRange(modelVal)) {
-      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
-    }
-    return `${(modelVal - min) * 100 / scope()}%`;
+    return isRange(modelVal) ? `${(modelVal[1] - modelVal[0]) * 100 / scope}%` : `${(modelVal - min) * 100 / scope}%`;
   };
   const calcOffset = () => {
     const modelVal = current;
-    if (isRange(modelVal)) {
-      return `${(modelVal[0] - min) * 100 / scope()}%`;
-    }
-    return `0%`;
+    return isRange(modelVal) ? `${(modelVal[0] - min) * 100 / scope}%` : `0%`;
   };
   const barStyle = () => {
     if (vertical) {
@@ -103,11 +100,11 @@ const Range = (props) => {
   const marksStyle = (mark) => {
     const dir = rtl ? "right" : "left";
     let style = {
-      [dir]: `${(mark - min) / scope() * 100}%`
+      [dir]: `${(mark - min) / scope * 100}%`
     };
     if (vertical) {
       style = {
-        top: `${(mark - min) / scope() * 100}%`
+        top: `${(mark - min) / scope * 100}%`
       };
     }
     return style;
@@ -154,8 +151,8 @@ const Range = (props) => {
       delta = event.clientY - rect.top;
       total = rect.height;
     }
-    const value2 = min + delta / total * scope();
-    setEaxctValue(current);
+    const value2 = min + delta / total * scope;
+    setExactValue(current);
     if (isRange(current)) {
       const [left, right] = current;
       const middle = (left + right) / 2;
@@ -173,7 +170,7 @@ const Range = (props) => {
       return;
     }
     touch.start(event);
-    setEaxctValue(current);
+    setExactValue(current);
     if (isRange(current)) {
       setStartValue(current.map(format));
     } else {
@@ -194,12 +191,12 @@ const Range = (props) => {
     const rect = getRect(root.current);
     let delta = touch.deltaX.current;
     let total = rect.width;
-    let diff = delta / total * scope();
+    let diff = delta / total * scope;
     diff = rtl ? -diff : diff;
     if (vertical) {
       delta = touch.deltaY.current;
       total = rect.height;
-      diff = delta / total * scope();
+      diff = delta / total * scope;
     }
     let newValue;
     if (isRange(startValue)) {
@@ -208,7 +205,7 @@ const Range = (props) => {
     } else {
       newValue = startValue + diff;
     }
-    setEaxctValue(newValue);
+    setExactValue(newValue);
     updateValue(newValue);
   };
   const onTouchEnd = () => {
@@ -228,6 +225,31 @@ const Range = (props) => {
   const renderButton = (index) => {
     return React__default.createElement(React__default.Fragment, null, button || React__default.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React__default.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
   };
+  const renderRangeButton = () => {
+    return [0, 1].map((item, index) => {
+      const cls = `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`;
+      return React__default.createElement("div", { key: index, className: cls, onTouchStart: (e) => {
+        setButtonIndex(index);
+        onTouchStart(e);
+      }, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton(index));
+    });
+  };
+  const renderSingleButton = () => {
+    return React__default.createElement("div", { className: "nut-range-button-wrapper", onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton());
+  };
+  const renderMark = () => {
+    return React__default.createElement(React__default.Fragment, null, marksList.length > 0 && React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
+      return React__default.createElement(
+        "span",
+        { key: mark, className: markClassName(mark), style: marksStyle(mark) },
+        Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
+        React__default.createElement("span", { className: classNames("nut-range-tick", {
+          active: tickClass(mark)
+        }) })
+      );
+    })));
+  };
   return React__default.createElement(
     "div",
     { className: containerClasses },
@@ -235,25 +257,8 @@ const Range = (props) => {
     React__default.createElement(
       "div",
       { ref: root, className: classes, onClick: (e) => click(e) },
-      marksList.length > 0 && React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
-        return React__default.createElement(
-          "span",
-          { key: mark, className: markClassName(mark), style: marksStyle(mark) },
-          Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
-          React__default.createElement("span", { className: classNames("nut-range-tick", {
-            active: tickClass(mark)
-          }) })
-        );
-      })),
-      React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
-        return React__default.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
-                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
-          if (typeof index === "number") {
-            setButtonIndex(index);
-          }
-          onTouchStart(e);
-        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton(index));
-      }) : React__default.createElement("div", { className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton()))
+      renderMark(),
+      React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? renderRangeButton() : renderSingleButton())
     ),
     maxDescription !== null && React__default.createElement("div", { className: "max" }, maxDescription || max)
   );

package/dist/esm/button2.js

@@ -10,7 +10,7 @@ const Button = React__default.forwardRef((props, ref) => {
   const _a = Object.assign(Object.assign({}, defaultProps), props), { color, shape, fill, loading, disabled, type, size, block, icon, rightIcon, children, className, style, nativeType, onClick } = _a, rest = __rest(_a, ["color", "shape", "fill", "loading", "disabled", "type", "size", "block", "icon", "rightIcon", "children", "className", "style", "nativeType", "onClick"]);
   const getStyle = useCallback(() => {
     const style2 = {};
-    if (props.color) {
+    if (color) {
       if (props.fill === "outline" || props.fill === "dashed") {
         style2.color = color;
         if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
@@ -23,7 +23,7 @@ const Button = React__default.forwardRef((props, ref) => {
       }
     }
     return style2;
-  }, [color]);
+  }, [color, props.fill]);
   const handleClick = (e) => {
     if (!loading && !disabled && onClick) {
       onClick(e);

package/dist/esm/menuitem2.js

@@ -1,4 +1,4 @@
-import React__default, { forwardRef, useState, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import React__default, { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { Check } from "@nutui/icons-react";
@@ -23,9 +23,21 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     setShowPopup(show);
   }, [show]);
+  const getParentOffset = useCallback(() => {
+    setTimeout(() => {
+      const p = parent.menuRef.current;
+      if (p) {
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
+    });
+  }, [parent.menuRef]);
   useEffect(() => {
     getParentOffset();
-  }, [showPopup]);
+  }, [showPopup, getParentOffset]);
   useImperativeHandle(ref, () => ({
     toggle: (s) => {
       const from = "REF";
@@ -60,18 +72,6 @@ const MenuItem = forwardRef((props, ref) => {
   const scrollParent = useMemo(() => {
     return getScrollParent(parent.menuRef, window);
   }, [parent.menuRef]);
-  const getParentOffset = () => {
-    setTimeout(() => {
-      const p = parent.menuRef.current;
-      if (p) {
-        const rect = p.getBoundingClientRect();
-        setPosition({
-          height: rect.height,
-          top: rect.top
-        });
-      }
-    });
-  };
   useEffect(() => {
     if (!parent.lockScroll) {
       scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
@@ -79,7 +79,7 @@ const MenuItem = forwardRef((props, ref) => {
         scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
       };
     }
-  }, []);
+  }, [parent.lockScroll, scrollParent, getParentOffset]);
   const getPosition = () => {
     return direction === "down" ? {
       top: `${position.top + position.height}px`,

package/dist/esm/overlay2.js

@@ -87,7 +87,8 @@ const Overlay = (props) => {
       setInnerVisible(false);
     }
   }, [visible]);
-  useLockScroll(nodeRef, !!lockScroll && innerVisible);
+  const shouldLockScroll = !innerVisible ? false : lockScroll;
+  useLockScroll(nodeRef, shouldLockScroll);
   const classes = classNames(classPrefix, className);
   const styles = Object.assign({}, style);
   const handleClick = (e) => {

package/dist/esm/popup2.js

@@ -18,7 +18,8 @@ const Popup = (props) => {
   const [innerVisible, setInnerVisible] = useState(visible);
   const [showChildren, setShowChildren] = useState(true);
   const [transitionName, setTransitionName] = useState("");
-  useLockScroll(nodeRef, innerVisible && lockScroll);
+  const shouldLockScroll = !innerVisible ? false : lockScroll;
+  useLockScroll(nodeRef, shouldLockScroll);
   const classPrefix = "nut-popup";
   const baseStyle = {
     zIndex: index

package/dist/esm/radio2.js

@@ -38,17 +38,6 @@ const Radio = (props) => {
       }
     };
   }
-  const renderLabel = () => {
-    return React__default.createElement("div", { className: classNames(`${classPrefix}-label`, {
-      [`${classPrefix}-label-disabled`]: disabled
-    }) }, children);
-  };
-  const renderButton = () => {
-    return React__default.createElement("div", { className: classNames(`${classPrefix}-button`, {
-      [`${classPrefix}-button-active`]: checkedStatement,
-      [`${classPrefix}-button-disabled`]: disabled
-    }) }, children);
-  };
   const color = () => {
     return {
       [`${classPrefix}-icon-disabled`]: disabled,
@@ -66,14 +55,27 @@ const Radio = (props) => {
     }
     return React__default.isValidElement(icon2) ? React__default.cloneElement(icon2, Object.assign(Object.assign({}, icon2.props), { className: classNames(color()) })) : React__default.createElement(CheckNormal, { className: classNames(color()) });
   };
-  const renderByShape = (shape2) => {
-    return shape2 === "button" ? renderButton() : React__default.createElement(
+  const renderLabel = () => {
+    const labelcls = classNames(`${classPrefix}-label`, {
+      [`${classPrefix}-label-disabled`]: disabled
+    });
+    return React__default.createElement(
       React__default.Fragment,
       null,
       renderIcon(),
-      renderLabel()
+      React__default.createElement("div", { className: labelcls }, children)
     );
   };
+  const renderButton = () => {
+    const buttoncls = classNames(`${classPrefix}-button`, {
+      [`${classPrefix}-button-active`]: checkedStatement,
+      [`${classPrefix}-button-disabled`]: disabled
+    });
+    return React__default.createElement("div", { className: buttoncls }, children);
+  };
+  const renderByShape = (shape2) => {
+    return shape2 === "button" ? renderButton() : renderLabel();
+  };
   const renderRadioItem = () => {
     return renderByShape(context && context.shape ? context.shape : shape);
   };
@@ -82,9 +84,10 @@ const Radio = (props) => {
       return;
     setCheckedStatement(!checkedStatement);
   };
-  return React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
+  const cls = classNames(classPrefix, {
     [`${classPrefix}-reverse`]: labelPosition === "left"
-  }, className), style, onClick: handleClick }, rest), renderRadioItem());
+  }, className);
+  return React__default.createElement("div", Object.assign({ className: cls, style, onClick: handleClick }, rest), renderRadioItem());
 };
 Radio.displayName = "NutRadio";
 Radio.Group = RadioGroup__default;

package/dist/esm/raf.js

@@ -1,6 +1,6 @@
 const inBrowser = typeof window !== "undefined";
 function requestAniFrame() {
-  if (typeof window !== "undefined") {
+  if (inBrowser) {
     const _window = window;
     return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
       _window.setTimeout(callback, 1e3 / 60);
@@ -10,8 +10,17 @@ function requestAniFrame() {
     setTimeout(callback, 1e3 / 60);
   };
 }
+function cancelRaf(id) {
+  if (inBrowser) {
+    const _window = window;
+    (_window.cancelAnimationFrame || _window.webkitCancelAnimationFrame)(id);
+  } else {
+    clearTimeout(id);
+  }
+}
 const requestAniFrame$1 = requestAniFrame();
 export {
+  cancelRaf as c,
   inBrowser as i,
   requestAniFrame$1 as r
 };

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:10:08 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.22 Sat Oct 12 2024 14:59:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */