@nutui/nutui-react 2.3.8-beta.0 → 2.3.8

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 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.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 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.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:20:59 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:13:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -10663,8 +10663,38 @@ const NavBar = (props) => {
       zIndex
     };
   };
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [contentWidth, setContentWidth] = useState("50%");
+  const getNodeWidth = (node) => {
+    if (node) {
+      const ele = getRect(node);
+      return ele.width;
+    }
+    return 0;
+  };
+  useEffect(() => {
+    if (titleAlign === "left") {
+      return;
+    }
+    if (!(back || left || right)) {
+      setContentWidth("100%");
+      return;
+    }
+    const leftRectWidth = getNodeWidth(leftRef == null ? void 0 : leftRef.current);
+    const rightRectWidth = getNodeWidth(rightRef == null ? void 0 : rightRef.current);
+    const wrapperWidth = getNodeWidth(wrapperRef == null ? void 0 : wrapperRef.current);
+    let centerWidth = wrapperWidth / 2;
+    if (leftRectWidth && rightRectWidth) {
+      centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
+    } else {
+      centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
+    }
+    setContentWidth(centerWidth.toFixed(2));
+  }, [left, right, back]);
   const renderLeft = () => {
-    return back || left ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React__default.createElement(
+    return back || left ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: `${classPrefix2}-left-back`,
@@ -10674,13 +10704,21 @@ const NavBar = (props) => {
     ), left) : null;
   };
   const renderContent = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-title` }, children);
+    let titleStyle = {};
+    if (titleAlign === "center") {
+      const contentRealWidth = `${contentWidth}${/%$/i.test(contentWidth) ? "" : "px"}`;
+      titleStyle = {
+        minWidth: contentRealWidth,
+        width: contentRealWidth
+      };
+    }
+    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-title`, style: titleStyle }, children);
   };
   const renderRight = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-right` }, right);
+    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-right`, ref: rightRef }, right);
   };
   const renderWrapper = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+    return /* @__PURE__ */ React__default.createElement("div", { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
   };
   const classes = classNames({
     [`${classPrefix2}-fixed`]: fixed,
@@ -17198,6 +17236,7 @@ const RadioGroup = React__default.forwardRef(
       value,
       defaultValue,
       onChange,
+      shape,
       labelPosition,
       direction,
       options: options2,
@@ -17233,6 +17272,7 @@ const RadioGroup = React__default.forwardRef(
         value: {
           labelPosition: labelPosition || "right",
           disabled,
+          shape,
           value: val2State,
           check: (value2) => {
             setVal2State(value2);
@@ -17360,11 +17400,11 @@ const Radio = (props) => {
       className: classNames(color())
     }) : /* @__PURE__ */ React__default.createElement(o$7, { className: classNames(color()) });
   };
+  const renderByShape = (shape2) => {
+    return shape2 === "button" ? renderButton() : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+  };
   const renderRadioItem = () => {
-    if (shape === "button") {
-      return renderButton();
-    }
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+    return renderByShape(context && context.shape ? context.shape : shape);
   };
   const handleClick2 = (e2) => {
     if (disabled || checkedStatement)
@@ -17706,7 +17746,8 @@ const defaultProps$N = {
   uncheckedIcon: null,
   disabled: false,
   readOnly: false,
-  allowHalf: false
+  allowHalf: false,
+  touchable: false
 };
 const Rate = (props) => {
   const {
@@ -17721,13 +17762,17 @@ const Rate = (props) => {
     disabled,
     readOnly,
     allowHalf,
-    onChange
+    touchable,
+    onChange,
+    onTouchEnd
   } = {
     ...defaultProps$N,
     ...props
   };
   const classPrefix2 = "nut-rate";
   const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+  const [refs, setRefs] = useRefs();
+  const rateRects = useRef([]);
   const [score, setScore] = usePropsValue({
     value,
     defaultValue: Math.max(defaultValue || 0, min),
@@ -17764,6 +17809,81 @@ const Rate = (props) => {
     const value2 = Math.max(min, n - 0.5);
     setScore(value2);
   };
+  const getScoreByPosition = (x) => {
+    var _a2;
+    if ((_a2 = rateRects.current) == null ? void 0 : _a2.length) {
+      for (let index = rateRects.current.length - 1; index >= 0; index--) {
+        const item = rateRects.current[index];
+        if (item && x > item.left) {
+          return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
+        }
+      }
+      return 0;
+    }
+  };
+  const updateRects = () => {
+    for (let index = 0; index < refs.length; index++) {
+      const item = refs[index];
+      if (item) {
+        rateRects.current[index] = getRect(item);
+      }
+    }
+  };
+  const handleTouchStart = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    updateRects();
+  };
+  const handleTouchMove = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    const val = getScoreByPosition(e2.touches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+    }
+  };
+  const handleTouchEnd = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    const val = getScoreByPosition(e2.changedTouches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+      onTouchEnd && onTouchEnd(e2, Math.max(min, val));
+    }
+  };
+  const rateRef = useRef(null);
+  useEffect(() => {
+    const element = rateRef.current;
+    if (element) {
+      element.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      element.addEventListener("touchmove", handleTouchMove, { passive: false });
+      element.addEventListener("touchend", handleTouchEnd, { passive: false });
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener("touchstart", handleTouchStart);
+        element.removeEventListener("touchmove", handleTouchMove);
+        element.removeEventListener("touchend", handleTouchEnd);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -17775,14 +17895,16 @@ const Rate = (props) => {
         },
         className
       ),
+      ref: rateRef,
       style
     },
-    countArray.map((n) => {
+    countArray.map((n, index) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: `${classPrefix2}-item`,
           key: n,
+          ref: setRefs(index),
           onClick: (event) => onClick(event, n)
         },
         /* @__PURE__ */ React__default.createElement(
@@ -23502,7 +23624,7 @@ const Step = (props) => {
     }
     return `${classPrefix2}-icon`;
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React__default.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-inner" }, value))), /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-description" }, description)));
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React__default.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-description" }, description)));
 };
 Step.defaultProps = defaultProps$c;
 Step.displayName = "NutStep";
@@ -23535,14 +23657,7 @@ const Steps = (props) => {
     },
     className
   );
-  return /* @__PURE__ */ React__default.createElement(DataContext.Provider, { value: parentSteps }, React__default.createElement(
-    "div",
-    {
-      className: classes,
-      ...restProps
-    },
-    children
-  ));
+  return /* @__PURE__ */ React__default.createElement(DataContext.Provider, { value: parentSteps }, /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, children));
 };
 Steps.defaultProps = defaultProps$b;
 Steps.displayName = "NutSteps";

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:20:59 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:13:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -10681,8 +10681,38 @@ Please add \`${key}Action\` when creating your handler.`);
         zIndex
       };
     };
+    const leftRef = React.useRef(null);
+    const rightRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const [contentWidth, setContentWidth] = React.useState("50%");
+    const getNodeWidth = (node) => {
+      if (node) {
+        const ele = getRect(node);
+        return ele.width;
+      }
+      return 0;
+    };
+    React.useEffect(() => {
+      if (titleAlign === "left") {
+        return;
+      }
+      if (!(back || left || right)) {
+        setContentWidth("100%");
+        return;
+      }
+      const leftRectWidth = getNodeWidth(leftRef == null ? void 0 : leftRef.current);
+      const rightRectWidth = getNodeWidth(rightRef == null ? void 0 : rightRef.current);
+      const wrapperWidth = getNodeWidth(wrapperRef == null ? void 0 : wrapperRef.current);
+      let centerWidth = wrapperWidth / 2;
+      if (leftRectWidth && rightRectWidth) {
+        centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
+      } else {
+        centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
+      }
+      setContentWidth(centerWidth.toFixed(2));
+    }, [left, right, back]);
     const renderLeft = () => {
-      return back || left ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React.createElement(
+      return back || left ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React.createElement(
         "div",
         {
           className: `${classPrefix2}-left-back`,
@@ -10692,13 +10722,21 @@ Please add \`${key}Action\` when creating your handler.`);
       ), left) : null;
     };
     const renderContent = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, children);
+      let titleStyle = {};
+      if (titleAlign === "center") {
+        const contentRealWidth = `${contentWidth}${/%$/i.test(contentWidth) ? "" : "px"}`;
+        titleStyle = {
+          minWidth: contentRealWidth,
+          width: contentRealWidth
+        };
+      }
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title`, style: titleStyle }, children);
     };
     const renderRight = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-right` }, right);
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-right`, ref: rightRef }, right);
     };
     const renderWrapper = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+      return /* @__PURE__ */ React.createElement("div", { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
     };
     const classes = classNames({
       [`${classPrefix2}-fixed`]: fixed,
@@ -17216,6 +17254,7 @@ Please add \`${key}Action\` when creating your handler.`);
         value,
         defaultValue,
         onChange,
+        shape,
         labelPosition,
         direction,
         options: options2,
@@ -17251,6 +17290,7 @@ Please add \`${key}Action\` when creating your handler.`);
           value: {
             labelPosition: labelPosition || "right",
             disabled,
+            shape,
             value: val2State,
             check: (value2) => {
               setVal2State(value2);
@@ -17378,11 +17418,11 @@ Please add \`${key}Action\` when creating your handler.`);
         className: classNames(color())
       }) : /* @__PURE__ */ React.createElement(o$7, { className: classNames(color()) });
     };
+    const renderByShape = (shape2) => {
+      return shape2 === "button" ? renderButton() : /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+    };
     const renderRadioItem = () => {
-      if (shape === "button") {
-        return renderButton();
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+      return renderByShape(context && context.shape ? context.shape : shape);
     };
     const handleClick2 = (e2) => {
       if (disabled || checkedStatement)
@@ -17724,7 +17764,8 @@ Please add \`${key}Action\` when creating your handler.`);
     uncheckedIcon: null,
     disabled: false,
     readOnly: false,
-    allowHalf: false
+    allowHalf: false,
+    touchable: false
   };
   const Rate = (props) => {
     const {
@@ -17739,13 +17780,17 @@ Please add \`${key}Action\` when creating your handler.`);
       disabled,
       readOnly,
       allowHalf,
-      onChange
+      touchable,
+      onChange,
+      onTouchEnd
     } = {
       ...defaultProps$N,
       ...props
     };
     const classPrefix2 = "nut-rate";
     const [countArray, setCountArray] = React.useState([1, 2, 3, 4, 5]);
+    const [refs, setRefs] = useRefs();
+    const rateRects = React.useRef([]);
     const [score, setScore] = usePropsValue({
       value,
       defaultValue: Math.max(defaultValue || 0, min),
@@ -17782,6 +17827,81 @@ Please add \`${key}Action\` when creating your handler.`);
       const value2 = Math.max(min, n - 0.5);
       setScore(value2);
     };
+    const getScoreByPosition = (x) => {
+      var _a2;
+      if ((_a2 = rateRects.current) == null ? void 0 : _a2.length) {
+        for (let index = rateRects.current.length - 1; index >= 0; index--) {
+          const item = rateRects.current[index];
+          if (item && x > item.left) {
+            return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
+          }
+        }
+        return 0;
+      }
+    };
+    const updateRects = () => {
+      for (let index = 0; index < refs.length; index++) {
+        const item = refs[index];
+        if (item) {
+          rateRects.current[index] = getRect(item);
+        }
+      }
+    };
+    const handleTouchStart = (e2) => {
+      if (!touchable || readOnly || disabled) {
+        return;
+      }
+      if (e2.cancelable) {
+        e2.preventDefault();
+      }
+      e2.stopPropagation();
+      updateRects();
+    };
+    const handleTouchMove = (e2) => {
+      if (!touchable || readOnly || disabled) {
+        return;
+      }
+      if (e2.cancelable) {
+        e2.preventDefault();
+      }
+      e2.stopPropagation();
+      const val = getScoreByPosition(e2.touches[0].clientX);
+      if (val !== void 0) {
+        setScore(Math.max(min, val));
+      }
+    };
+    const handleTouchEnd = (e2) => {
+      if (!touchable || readOnly || disabled) {
+        return;
+      }
+      if (e2.cancelable) {
+        e2.preventDefault();
+      }
+      e2.stopPropagation();
+      const val = getScoreByPosition(e2.changedTouches[0].clientX);
+      if (val !== void 0) {
+        setScore(Math.max(min, val));
+        onTouchEnd && onTouchEnd(e2, Math.max(min, val));
+      }
+    };
+    const rateRef = React.useRef(null);
+    React.useEffect(() => {
+      const element = rateRef.current;
+      if (element) {
+        element.addEventListener("touchstart", handleTouchStart, {
+          passive: false
+        });
+        element.addEventListener("touchmove", handleTouchMove, { passive: false });
+        element.addEventListener("touchend", handleTouchEnd, { passive: false });
+      }
+      return () => {
+        if (element) {
+          element.removeEventListener("touchstart", handleTouchStart);
+          element.removeEventListener("touchmove", handleTouchMove);
+          element.removeEventListener("touchend", handleTouchEnd);
+        }
+      };
+    }, []);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -17793,14 +17913,16 @@ Please add \`${key}Action\` when creating your handler.`);
           },
           className
         ),
+        ref: rateRef,
         style
       },
-      countArray.map((n) => {
+      countArray.map((n, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
             className: `${classPrefix2}-item`,
             key: n,
+            ref: setRefs(index),
             onClick: (event) => onClick(event, n)
           },
           /* @__PURE__ */ React.createElement(
@@ -23520,7 +23642,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return `${classPrefix2}-icon`;
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React.createElement("span", { className: "nut-step-inner" }, value))), /* @__PURE__ */ React.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React.createElement("span", { className: "nut-step-description" }, description)));
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React.createElement("span", { className: "nut-step-description" }, description)));
   };
   Step.defaultProps = defaultProps$c;
   Step.displayName = "NutStep";
@@ -23553,14 +23675,7 @@ Please add \`${key}Action\` when creating your handler.`);
       },
       className
     );
-    return /* @__PURE__ */ React.createElement(DataContext.Provider, { value: parentSteps }, React.createElement(
-      "div",
-      {
-        className: classes,
-        ...restProps
-      },
-      children
-    ));
+    return /* @__PURE__ */ React.createElement(DataContext.Provider, { value: parentSteps }, /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, children));
   };
   Steps.defaultProps = defaultProps$b;
   Steps.displayName = "NutSteps";

package/dist/packages/navbar/navbar.scss

@@ -108,10 +108,17 @@
         }
       }
     }
+    .nut-navbar-right {
+      position: static;
+      display: inline-flex;
+      white-space: nowrap;
+      padding-left: 0;
+    }
     .nut-navbar-left-back {
       margin-right: 0;
     }
     .nut-navbar-title {
+      min-width: 0;
       margin: 0;
       flex: 1;
       justify-content: flex-start;

package/dist/packages/rate/rate.scss

@@ -1,5 +1,6 @@
 .nut-rate {
   display: flex;
+  touch-action: pan-x;
 
   &.disabled {
     .nut-rate-item-icon {

package/dist/packages/step/step.scss

@@ -56,10 +56,11 @@
   }
 
   &-main {
-    display: inline-block;
-    padding-left: 10%;
-    padding-right: 10%;
-    text-align: center;
+    padding: 0 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 
   &-title {