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

package/dist/nutui.react.es.js

@@ -5,13 +5,13 @@ 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.
 */
 import * as React from "react";
 import React__default, { useCallback, createContext, useContext, useState, useRef, useEffect, useMemo as useMemo$1, useImperativeHandle, isValidElement, forwardRef, Component, Children } from "react";
-import Taro, { getEnv, createSelectorQuery, usePageScroll, getSystemInfoSync, pageScrollTo, nextTick, ENV_TYPE, canvasToTempFilePath, uploadFile, chooseMedia, chooseImage, Events, getCurrentInstance, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
+import Taro, { getEnv, createSelectorQuery, usePageScroll, getSystemInfoSync, pageScrollTo, nextTick, ENV_TYPE, useReady, canvasToTempFilePath, uploadFile, chooseMedia, chooseImage, Events, getCurrentInstance, createInnerAudioContext, getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
 import { Image as Image$2, View, ScrollView, PickerView, PickerViewColumn, Input as Input$1, Textarea, Swiper as Swiper$1, SwiperItem as SwiperItem$1, Video as Video$1, Canvas } from "@tarojs/components";
 import ReactDOM, { createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -4487,24 +4487,64 @@ const NavBar = (props) => {
       zIndex
     };
   };
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [contentWidth, setContentWidth] = useState("50%");
+  const getNodeWidth = async (node) => {
+    if (node) {
+      const refe = await getRectByTaro(node);
+      return refe.width;
+    }
+    return 0;
+  };
+  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__default.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React__default.createElement(
-      "div",
+    return back || left2 ? /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React__default.createElement(
+      View,
       {
         className: `${classPrefix2}-left-back`,
         onClick: (e2) => onBackClick(e2)
       },
       back
-    ), left2);
+    ), left2) : 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(View, { className: `${classPrefix2}-title`, style: titleStyle }, children);
   };
   const renderRight = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-right` }, right2);
+    return /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-right`, ref: rightRef }, right2);
   };
   const renderWrapper = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+    return /* @__PURE__ */ React__default.createElement(View, { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
   };
   const classes = classNames({
     [`${classPrefix2}-fixed`]: fixed,
@@ -4512,7 +4552,7 @@ const NavBar = (props) => {
     [`${classPrefix2}-title-align-${titleAlign}`]: true
   });
   const cls = classNames(classPrefix2, classes, className);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
 };
 NavBar.defaultProps = defaultProps$1h;
 NavBar.displayName = "NutNavBar";
@@ -5195,14 +5235,14 @@ const Tabs = (props) => {
   };
   const getRect2 = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
   };
   const getAllRect = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
@@ -11116,6 +11156,7 @@ const RadioGroup = React__default.forwardRef(
       value,
       defaultValue,
       onChange,
+      shape,
       labelPosition,
       direction,
       options,
@@ -11151,6 +11192,7 @@ const RadioGroup = React__default.forwardRef(
         value: {
           labelPosition: labelPosition || "right",
           disabled,
+          shape,
           value: val2State,
           check: (value2) => {
             setVal2State(value2);
@@ -11278,11 +11320,11 @@ const Radio = (props) => {
       className: classNames(color())
     }) : /* @__PURE__ */ React__default.createElement(I$1, { 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 handleClick = (e2) => {
     if (disabled || checkedStatement)
@@ -11624,7 +11666,8 @@ const defaultProps$P = {
   uncheckedIcon: null,
   disabled: false,
   readOnly: false,
-  allowHalf: false
+  allowHalf: false,
+  touchable: false
 };
 const Rate = (props) => {
   const {
@@ -11639,13 +11682,17 @@ const Rate = (props) => {
     disabled,
     readOnly,
     allowHalf,
-    onChange
+    touchable,
+    onChange,
+    onTouchEnd
   } = {
     ...defaultProps$P,
     ...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),
@@ -11682,8 +11729,70 @@ const Rate = (props) => {
     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;
+        });
+      }
+    }
+  };
+  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__default.createElement(
-    "div",
+    View,
     {
       className: classNames(
         classPrefix2,
@@ -11693,14 +11802,20 @@ const Rate = (props) => {
         },
         className
       ),
-      style
+      catchMove: true,
+      style,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd
     },
-    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(
@@ -14277,7 +14392,7 @@ const Popover = (props) => {
   };
   const getRectTaro = async (targetId2) => {
     return new Promise((resolve) => {
-      const query = Taro.createSelectorQuery();
+      const query = createSelectorQuery();
       query.select(`#${targetId2}`) && query.select(`#${targetId2}`).boundingClientRect();
       query.exec((res) => {
         resolve(res[0]);
@@ -15713,7 +15828,7 @@ const CollapseItem = (props) => {
   );
   const getRect2 = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
@@ -16157,10 +16272,10 @@ const Ellipsis = (props) => {
   const [contentCopy, setContentCopy] = useState(content);
   const lineH = useRef(0);
   const originHeight = useRef(0);
-  const refRandomId = Math.random().toString(36).slice(-8);
+  const refRandomId = useRef(Math.random().toString(36).slice(-8));
   const widthRef = useRef("auto");
-  let widthBase = [14, 10, 7, 8.4, 10];
-  let symbolTextWidth = widthBase[0] * 0.7921;
+  const widthBase = useRef([14, 10, 7, 8.4, 10]);
+  const symbolTextWidth = useRef(widthBase.current[0] * 0.7921);
   const chineseReg = /^[\u4e00-\u9fa5]+$/;
   const digitReg = /^[0-9]+$/;
   const letterUpperReg = /^[A-Z]+$/;
@@ -16170,23 +16285,16 @@ const Ellipsis = (props) => {
     width ? `${classPrefix$6}-width` : "",
     className
   );
-  const init = () => {
-    setExceeded(false);
-    setExpanded(false);
+  useEffect(() => {
     setContentCopy(content);
     nextTick(() => {
       getSymbolInfo();
       getReference();
     });
-  };
-  useReady(() => init());
-  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") {
@@ -16195,9 +16303,8 @@ const Ellipsis = (props) => {
     return `${symbol}${expandText}${symbol}`;
   };
   const getReference = async () => {
-    const element = root2.current;
     const query = createSelectorQuery();
-    query.select(`#${element.id}`) && query.select(`#${element.id}`).fields(
+    query.select(`#root${refRandomId.current}`) && query.select(`#root${refRandomId.current}`).fields(
       {
         computedStyle: [
           "width",
@@ -16220,7 +16327,7 @@ const Ellipsis = (props) => {
         originHeight.current = pxToNumber(res.height);
         widthRef.current = res.width;
         const bsize = pxToNumber(res.fontSize);
-        widthBase = [
+        widthBase.current = [
           bsize,
           bsize * 0.72,
           bsize * 0.53,
@@ -16291,7 +16398,7 @@ const Ellipsis = (props) => {
     setContentCopy(newContent);
   };
   const tailorContent = (left2, right2, type4 = "") => {
-    const threeDotWidth = symbolTextWidth;
+    const threeDotWidth = symbolTextWidth.current;
     const direc = direction === "middle" && type4 ? type4 : direction;
     setExceeded(true);
     let widthPart = -1;
@@ -16311,15 +16418,15 @@ const Ellipsis = (props) => {
     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--;
@@ -16353,20 +16460,22 @@ const Ellipsis = (props) => {
       className: classes,
       onClick: handleClick,
       ref: root2,
-      id: `root${refRandomId}`,
+      id: `root${refRandomId.current}`,
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement("div", null, !exceeded ? /* @__PURE__ */ React__default.createElement(
-      "div",
+    /* @__PURE__ */ React__default.createElement(View, null, !exceeded ? /* @__PURE__ */ React__default.createElement(
+      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__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      "div",
+    ) : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement(
+      View,
       {
         className: "nut-ellipsis-wordbreak",
         style: {
@@ -16388,8 +16497,8 @@ const Ellipsis = (props) => {
       ) : null,
       ((_c = ellipsis.current) == null ? void 0 : _c.tailing) && symbol,
       (_d = ellipsis.current) == null ? void 0 : _d.tailing
-    )) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      "div",
+    ) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      View,
       {
         style: {
           width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
@@ -16408,20 +16517,20 @@ const Ellipsis = (props) => {
       collapseText
     ) : null) : null)
   ), /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: "nut-ellipsis-copy",
       ref: rootContain,
-      id: `rootContain${refRandomId}`,
+      id: `rootContain${refRandomId.current}`,
       style: { width: `${widthRef}` }
     },
-    /* @__PURE__ */ React__default.createElement("div", null, contentCopy)
+    /* @__PURE__ */ React__default.createElement(View, null, contentCopy)
   ), /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: "nut-ellipsis-copy",
       ref: symbolContain,
-      id: `symbolContain${refRandomId}`,
+      id: `symbolContain${refRandomId.current}`,
       style: { display: "inline" }
     },
     symbolText()
@@ -17120,7 +17229,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(View, { className: "nut-step-head" }, /* @__PURE__ */ React__default.createElement(View, { className: "nut-step-line" }), /* @__PURE__ */ React__default.createElement(View, { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React__default.createElement(View, { 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$d;
 Step.displayName = "NutStep";
@@ -17153,14 +17262,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$c;
 Steps.displayName = "NutSteps";
@@ -17501,7 +17603,7 @@ const getTaroRectById = (id) => {
       }
       reject();
     } else {
-      const query = Taro.createSelectorQuery();
+      const query = createSelectorQuery();
       query.select(`#${id}`).boundingClientRect().exec(function(rect) {
         if (rect[0]) {
           resolve(rect[0]);
@@ -17691,7 +17793,6 @@ const Tour = (props) => {
 Tour.defaultProps = defaultProps$9;
 Tour.displayName = "NutTour";
 const defaultProps$8 = {
-  ...ComponentDefaults,
   source: {
     type: {},
     src: ""
@@ -17713,6 +17814,7 @@ const Video = (props) => {
     source,
     options,
     className,
+    style,
     onPlay,
     onPause,
     onPlayEnd,
@@ -17722,7 +17824,7 @@ const Video = (props) => {
     ...props
   };
   const classes = classNames(classPrefix$2, className);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { className: classes, style }, /* @__PURE__ */ React__default.createElement(
     Video$1,
     {
       className: "nut-video-player",
@@ -17734,7 +17836,8 @@ const Video = (props) => {
       src: source.src,
       onPlay,
       onPause,
-      onEnded: onPlayEnd
+      onEnded: onPlayEnd,
+      ...restProps
     }
   ));
 };
@@ -18587,7 +18690,7 @@ const AvatarCropper = (props) => {
   useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll;
-      Taro.createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
+      createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
         canvas.width = state.displayWidth;
         canvas.height = state.displayHeight;
         setCanvasAll({ ...canvasAll, cropperCanvas: canvas });