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

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.7 Fri Jan 19 2024 16:35:51 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.8-beta.0 Fri Jan 26 2024 15:05:58 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4503,24 +4503,64 @@ var __publicField = (obj, key, value) => {
         zIndex
       };
     };
+    const leftRef = React.useRef(null);
+    const rightRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const [contentWidth, setContentWidth] = React.useState("50%");
+    const getNodeWidth = async (node) => {
+      if (node) {
+        const refe = await getRectByTaro(node);
+        return refe.width;
+      }
+      return 0;
+    };
+    React.useEffect(() => {
+      if (titleAlign === "left") {
+        return;
+      }
+      if (!(back || left2 || right2)) {
+        setContentWidth("100%");
+      }
+      const init = async () => {
+        const leftRectWidth = await getNodeWidth(leftRef == null ? void 0 : leftRef.current);
+        const rightRectWidth = await getNodeWidth(rightRef == null ? void 0 : rightRef.current);
+        const wrapperWidth = await 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));
+      };
+      init();
+    }, [left2, right2, back]);
     const renderLeft = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React.createElement(
-        "div",
+      return back || left2 ? /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React.createElement(
+        components.View,
         {
           className: `${classPrefix2}-left-back`,
           onClick: (e2) => onBackClick(e2)
         },
         back
-      ), left2);
+      ), left2) : 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(components.View, { className: `${classPrefix2}-title`, style: titleStyle }, children);
     };
     const renderRight = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-right` }, right2);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-right`, ref: rightRef }, right2);
     };
     const renderWrapper = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+      return /* @__PURE__ */ React.createElement(components.View, { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
     };
     const classes = classNames({
       [`${classPrefix2}-fixed`]: fixed,
@@ -4528,7 +4568,7 @@ var __publicField = (obj, key, value) => {
       [`${classPrefix2}-title-align-${titleAlign}`]: true
     });
     const cls = classNames(classPrefix2, classes, className);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
   };
   NavBar.defaultProps = defaultProps$1h;
   NavBar.displayName = "NutNavBar";
@@ -11132,6 +11172,7 @@ var __publicField = (obj, key, value) => {
         value,
         defaultValue,
         onChange,
+        shape,
         labelPosition,
         direction,
         options,
@@ -11167,6 +11208,7 @@ var __publicField = (obj, key, value) => {
           value: {
             labelPosition: labelPosition || "right",
             disabled,
+            shape,
             value: val2State,
             check: (value2) => {
               setVal2State(value2);
@@ -11294,11 +11336,11 @@ var __publicField = (obj, key, value) => {
         className: classNames(color())
       }) : /* @__PURE__ */ React.createElement(I$1, { 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 handleClick = (e2) => {
       if (disabled || checkedStatement)
@@ -11640,7 +11682,8 @@ var __publicField = (obj, key, value) => {
     uncheckedIcon: null,
     disabled: false,
     readOnly: false,
-    allowHalf: false
+    allowHalf: false,
+    touchable: false
   };
   const Rate = (props) => {
     const {
@@ -11655,13 +11698,17 @@ var __publicField = (obj, key, value) => {
       disabled,
       readOnly,
       allowHalf,
-      onChange
+      touchable,
+      onChange,
+      onTouchEnd
     } = {
       ...defaultProps$P,
       ...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),
@@ -11698,8 +11745,70 @@ var __publicField = (obj, key, value) => {
       const value2 = Math.max(min, n - 0.5);
       setScore(value2);
     };
+    const getScoreByPosition = (x) => {
+      var _a;
+      if ((_a = rateRects.current) == null ? void 0 : _a.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) {
+          getRectByTaro(item).then((res) => {
+            rateRects.current[index] = res;
+          });
+        }
+      }
+    };
+    Taro.useReady(() => {
+      updateRects();
+    });
+    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));
+      }
+    };
     return /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: classNames(
           classPrefix2,
@@ -11709,14 +11818,20 @@ var __publicField = (obj, key, value) => {
           },
           className
         ),
-        style
+        catchMove: true,
+        style,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd
       },
-      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(
@@ -16173,10 +16288,10 @@ var __publicField = (obj, key, value) => {
     const [contentCopy, setContentCopy] = React.useState(content);
     const lineH = React.useRef(0);
     const originHeight = React.useRef(0);
-    const refRandomId = Math.random().toString(36).slice(-8);
+    const refRandomId = React.useRef(Math.random().toString(36).slice(-8));
     const widthRef = React.useRef("auto");
-    let widthBase = [14, 10, 7, 8.4, 10];
-    let symbolTextWidth = widthBase[0] * 0.7921;
+    const widthBase = React.useRef([14, 10, 7, 8.4, 10]);
+    const symbolTextWidth = React.useRef(widthBase.current[0] * 0.7921);
     const chineseReg = /^[\u4e00-\u9fa5]+$/;
     const digitReg = /^[0-9]+$/;
     const letterUpperReg = /^[A-Z]+$/;
@@ -16186,23 +16301,16 @@ var __publicField = (obj, key, value) => {
       width ? `${classPrefix$6}-width` : "",
       className
     );
-    const init = () => {
-      setExceeded(false);
-      setExpanded(false);
+    React.useEffect(() => {
       setContentCopy(content);
       Taro.nextTick(() => {
         getSymbolInfo();
         getReference();
       });
-    };
-    Taro.useReady(() => init());
-    React.useEffect(
-      () => init(),
-      [content, lineH.current, maxHeight.current, originHeight.current]
-    );
+    }, [content]);
     const getSymbolInfo = async () => {
       const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
-      symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
+      symbolTextWidth.current = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase.current[0] * 0.7921);
     };
     const symbolText = () => {
       if (direction === "end" || direction === "middle") {
@@ -16211,9 +16319,8 @@ var __publicField = (obj, key, value) => {
       return `${symbol}${expandText}${symbol}`;
     };
     const getReference = async () => {
-      const element = root2.current;
       const query = Taro.createSelectorQuery();
-      query.select(`#${element.id}`) && query.select(`#${element.id}`).fields(
+      query.select(`#root${refRandomId.current}`) && query.select(`#root${refRandomId.current}`).fields(
         {
           computedStyle: [
             "width",
@@ -16236,7 +16343,7 @@ var __publicField = (obj, key, value) => {
           originHeight.current = pxToNumber(res.height);
           widthRef.current = res.width;
           const bsize = pxToNumber(res.fontSize);
-          widthBase = [
+          widthBase.current = [
             bsize,
             bsize * 0.72,
             bsize * 0.53,
@@ -16307,7 +16414,7 @@ var __publicField = (obj, key, value) => {
       setContentCopy(newContent);
     };
     const tailorContent = (left2, right2, type2 = "") => {
-      const threeDotWidth = symbolTextWidth;
+      const threeDotWidth = symbolTextWidth.current;
       const direc = direction === "middle" && type2 ? type2 : direction;
       setExceeded(true);
       let widthPart = -1;
@@ -16327,15 +16434,15 @@ var __publicField = (obj, key, value) => {
       while (widthPart < contentPartWidth) {
         const zi = content[marking];
         if (chineseReg.test(zi)) {
-          widthPart = Number(widthPart + widthBase[0]);
+          widthPart = Number(widthPart + widthBase.current[0]);
         } else if (letterUpperReg.test(zi)) {
-          widthPart = Number(widthPart + widthBase[1]);
+          widthPart = Number(widthPart + widthBase.current[1]);
         } else if (letterLowerReg.test(zi)) {
-          widthPart = Number(widthPart + widthBase[2]);
+          widthPart = Number(widthPart + widthBase.current[2]);
         } else if (digitReg.test(zi)) {
-          widthPart = Number(widthPart + widthBase[3]);
+          widthPart = Number(widthPart + widthBase.current[3]);
         } else {
-          widthPart = Number(widthPart + widthBase[4]);
+          widthPart = Number(widthPart + widthBase.current[4]);
         }
         cutoff = marking;
         direc === "end" ? marking++ : marking--;
@@ -16369,20 +16476,22 @@ var __publicField = (obj, key, value) => {
         className: classes,
         onClick: handleClick,
         ref: root2,
-        id: `root${refRandomId}`,
+        id: `root${refRandomId.current}`,
         ...rest
       },
-      /* @__PURE__ */ React.createElement("div", null, !exceeded ? /* @__PURE__ */ React.createElement(
-        "div",
+      /* @__PURE__ */ React.createElement(components.View, null, !exceeded ? /* @__PURE__ */ React.createElement(
+        components.View,
         {
           className: "nut-ellipsis-wordbreak",
           style: {
-            width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
+            width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`,
+            height: "20px",
+            overflow: "hidden"
           }
         },
         content
-      ) : null, exceeded && !expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "div",
+      ) : null, exceeded && !expanded ? /* @__PURE__ */ React.createElement(
+        components.View,
         {
           className: "nut-ellipsis-wordbreak",
           style: {
@@ -16404,8 +16513,8 @@ var __publicField = (obj, key, value) => {
         ) : null,
         ((_c = ellipsis.current) == null ? void 0 : _c.tailing) && symbol,
         (_d = ellipsis.current) == null ? void 0 : _d.tailing
-      )) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "div",
+      ) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        components.View,
         {
           style: {
             width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
@@ -16424,20 +16533,20 @@ var __publicField = (obj, key, value) => {
         collapseText
       ) : null) : null)
     ), /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: "nut-ellipsis-copy",
         ref: rootContain,
-        id: `rootContain${refRandomId}`,
+        id: `rootContain${refRandomId.current}`,
         style: { width: `${widthRef}` }
       },
-      /* @__PURE__ */ React.createElement("div", null, contentCopy)
+      /* @__PURE__ */ React.createElement(components.View, null, contentCopy)
     ), /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: "nut-ellipsis-copy",
         ref: symbolContain,
-        id: `symbolContain${refRandomId}`,
+        id: `symbolContain${refRandomId.current}`,
         style: { display: "inline" }
       },
       symbolText()
@@ -17136,7 +17245,7 @@ var __publicField = (obj, key, value) => {
       }
       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(components.View, { className: "nut-step-head" }, /* @__PURE__ */ React.createElement(components.View, { className: "nut-step-line" }), /* @__PURE__ */ React.createElement(components.View, { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React.createElement(components.View, { 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$d;
   Step.displayName = "NutStep";
@@ -17169,14 +17278,7 @@ var __publicField = (obj, key, value) => {
       },
       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$c;
   Steps.displayName = "NutSteps";
@@ -17707,7 +17809,6 @@ var __publicField = (obj, key, value) => {
   Tour.defaultProps = defaultProps$9;
   Tour.displayName = "NutTour";
   const defaultProps$8 = {
-    ...ComponentDefaults,
     source: {
       type: {},
       src: ""
@@ -17729,6 +17830,7 @@ var __publicField = (obj, key, value) => {
       source,
       options,
       className,
+      style,
       onPlay,
       onPause,
       onPlayEnd,
@@ -17738,7 +17840,7 @@ var __publicField = (obj, key, value) => {
       ...props
     };
     const classes = classNames(classPrefix$2, className);
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(components.View, { className: classes, style }, /* @__PURE__ */ React.createElement(
       components.Video,
       {
         className: "nut-video-player",
@@ -17750,7 +17852,8 @@ var __publicField = (obj, key, value) => {
         src: source.src,
         onPlay,
         onPause,
-        onEnded: onPlayEnd
+        onEnded: onPlayEnd,
+        ...restProps
       }
     ));
   };

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 {
@@ -30,9 +31,14 @@
       left: 0;
       top: 0;
       overflow: hidden;
+
+      .nut-icon {
+        flex-shrink: 0;
+      }
     }
 
     &-icon {
+      display: flex;
       color: $rate-icon-color;
       cursor: pointer;
 

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 {

package/dist/packages/tabs/tabs.scss

@@ -192,6 +192,7 @@
 
 .nut-tabs-horizontal {
   flex-direction: column;
+  position: relative;
 }
 
 .nut-tabs-vertical {