@nutui/nutui-react-taro 2.3.8 → 2.3.10

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.8 Fri Jan 26 2024 15:12:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.10 Tue Feb 06 2024 16:10:56 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1456,7 +1456,8 @@ var __publicField = (obj, key, value) => {
   const classPrefix$p = "nut-configprovider";
   const defaultConfigRef$1 = {
     current: {
-      locale: zhCN
+      locale: zhCN,
+      direction: "ltr"
     }
   };
   const getDefaultConfig$1 = () => {
@@ -1474,7 +1475,7 @@ var __publicField = (obj, key, value) => {
     return cssVars;
   }
   const ConfigProvider = (props) => {
-    const { style, className, children, ...config2 } = props;
+    const { style, className, children, direction, ...config2 } = props;
     const mergedConfig = useMemo(
       () => {
         return {
@@ -1494,10 +1495,11 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React.createElement(ConfigContext$1.Provider, { value: mergedConfig }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$p, className),
+        className: classNames(classPrefix$p, className, `nut-${direction}`),
         style: {
           ...cssVarStyle,
-          ...style
+          ...style,
+          direction
         }
       },
       children
@@ -4048,7 +4050,7 @@ var __publicField = (obj, key, value) => {
       }
     }, []);
     Taro.usePageScroll((res) => {
-      if (Taro.getEnv() === "WEAPP") {
+      if (Taro.getEnv() !== "WEB") {
         handleScroll(res.scrollTop);
       }
     });
@@ -4721,7 +4723,8 @@ var __publicField = (obj, key, value) => {
         CSSTransition$1,
         {
           classNames: transitionName,
-          unmountOnExit: true,
+          mountOnEnter: true,
+          unmountOnExit: destroyOnClose,
           timeout: duration,
           in: innerVisible,
           onEntered: onHandleOpened,
@@ -5355,7 +5358,7 @@ var __publicField = (obj, key, value) => {
             onClick: (e2) => {
               tabChange(item);
             },
-            className: classNames(`${classPrefix$k}-titles-item taro`, {
+            className: classNames(`${classPrefix$k}-titles-item`, {
               [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
               [`nut-tabs-titles-item-disabled`]: item.disabled,
               [`nut-tabs-titles-item-${align}`]: align
@@ -9765,6 +9768,7 @@ var __publicField = (obj, key, value) => {
     constructor() {
       // 初始化数据
       __publicField(this, "initialValues", {});
+      __publicField(this, "updateList", []);
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
       __publicField(this, "store", {});
       // 所有的组件实例
@@ -9834,6 +9838,15 @@ var __publicField = (obj, key, value) => {
             }
           });
         });
+        this.updateList.forEach((item) => {
+          let shouldUpdate = item.condition;
+          if (typeof item.condition === "function") {
+            shouldUpdate = item.condition();
+          }
+          if (shouldUpdate) {
+            item.entity.onStoreChange("update");
+          }
+        });
       });
       __publicField(this, "setCallback", (callback) => {
         this.callbacks = {
@@ -9902,6 +9915,16 @@ var __publicField = (obj, key, value) => {
           entity.onStoreChange("reset");
         });
       });
+      // 监听事件
+      __publicField(this, "registerUpdate", (field, shouldUpdate) => {
+        this.updateList.push({
+          entity: field,
+          condition: shouldUpdate
+        });
+        return () => {
+          this.updateList = this.updateList.filter((i2) => i2.entity !== field);
+        };
+      });
       __publicField(this, "dispatch", ({ name }) => {
         this.validateFields([name]);
       });
@@ -9913,7 +9936,8 @@ var __publicField = (obj, key, value) => {
             setInitialValues: this.setInitialValues,
             dispatch: this.dispatch,
             store: this.store,
-            fieldEntities: this.fieldEntities
+            fieldEntities: this.fieldEntities,
+            registerUpdate: this.registerUpdate
           };
         }
       });
@@ -10044,13 +10068,16 @@ var __publicField = (obj, key, value) => {
     label: "",
     rules: [{ required: false, message: "" }],
     errorMessageAlign: "left",
-    validateTrigger: "onChange"
+    validateTrigger: "onChange",
+    shouldUpdate: false,
+    noStyle: false
   };
   class FormItem extends React.Component {
     constructor(props) {
       super(props);
       __publicField(this, "cancelRegister");
       __publicField(this, "componentRef");
+      __publicField(this, "eventOff");
       // children添加value属性和onChange事件
       __publicField(this, "getControlled", (children) => {
         var _a;
@@ -10124,7 +10151,6 @@ var __publicField = (obj, key, value) => {
         }
       });
       __publicField(this, "renderLayout", (childNode) => {
-        var _a;
         const {
           label,
           name,
@@ -10150,16 +10176,13 @@ var __publicField = (obj, key, value) => {
             onClick: (e2) => this.props.onClick && this.props.onClick(e2, this.componentRef)
           },
           label ? /* @__PURE__ */ React.createElement("div", { className: "nut-cell-title nut-form-item-label" }, renderLabel) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "nut-cell-value nut-form-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-body-slots" }, childNode), /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement("div", { className: "nut-cell-value nut-form-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-body-slots" }, childNode), item && item.length > 0 && /* @__PURE__ */ React.createElement(
             "div",
             {
               className: "nut-form-item-body-tips",
-              style: {
-                textAlign: errorMessageAlign,
-                display: (item == null ? void 0 : item.length) ? "initial" : "none"
-              }
+              style: { textAlign: errorMessageAlign }
             },
-            (_a = item == null ? void 0 : item[0]) == null ? void 0 : _a.message
+            item[0].message
           ))
         );
       });
@@ -10169,22 +10192,31 @@ var __publicField = (obj, key, value) => {
       };
     }
     componentDidMount() {
-      const { registerField } = this.context.getInternal(SECRET);
+      const { registerField, registerUpdate } = this.context.getInternal(SECRET);
       this.cancelRegister = registerField(this);
+      this.eventOff = registerUpdate(this, this.props.shouldUpdate);
     }
     componentWillUnmount() {
       if (this.cancelRegister) {
         this.cancelRegister();
       }
+      if (this.eventOff) {
+        this.eventOff();
+      }
     }
     render() {
       const { children } = this.props;
       const child = Array.isArray(children) ? children[0] : children;
-      const returnChildNode = React.cloneElement(
-        child,
-        this.getControlled(child)
-      );
-      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
+      let returnChildNode;
+      if (!this.props.shouldUpdate) {
+        returnChildNode = React.cloneElement(
+          child,
+          this.getControlled(child)
+        );
+      } else {
+        returnChildNode = child(this.context);
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode));
     }
   }
   __publicField(FormItem, "defaultProps", defaultProps$Y);
@@ -10316,19 +10348,28 @@ var __publicField = (obj, key, value) => {
         forceUpdate();
       };
       const handleFocus = (event) => {
-        const val = event.target.value;
-        onFocus && onFocus(val);
+        if (Taro.getEnv() === "WEB") {
+          const val = event.target.value;
+          onFocus && onFocus(val);
+        } else {
+          onFocus == null ? void 0 : onFocus(value);
+        }
         setActive(true);
       };
       const handleInput = (value2) => {
         updateValue(value2, "onChange");
       };
       const handleBlur = (event) => {
-        const val = event.target.value;
-        updateValue(val, "onBlur");
-        setTimeout(() => {
+        if (Taro.getEnv() === "WEB") {
+          const val = event.target.value;
+          updateValue(val, "onBlur");
+          setTimeout(() => {
+            setActive(false);
+          }, 50);
+        } else {
+          updateValue(value, "onBlur");
           setActive(false);
-        }, 50);
+        }
       };
       const inputType = (type22) => {
         if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
@@ -10368,12 +10409,8 @@ var __publicField = (obj, key, value) => {
             value,
             focus: autoFocus,
             confirmType,
-            onBlur: (e2) => {
-              handleBlur(e2);
-            },
-            onFocus: (e2) => {
-              handleFocus(e2);
-            },
+            onBlur: handleBlur,
+            onFocus: handleFocus,
             onInput: (e2) => {
               handleInput(e2.currentTarget.value);
             }
@@ -10389,10 +10426,8 @@ var __publicField = (obj, key, value) => {
             onClick: (e2) => {
               e2.stopPropagation();
               if (!disabled) {
-                setTimeout(() => {
-                  setValue("");
-                  onClear && onClear("");
-                }, 50);
+                setValue("");
+                onClear == null ? void 0 : onClear("");
               }
             }
           },
@@ -12033,13 +12068,13 @@ var __publicField = (obj, key, value) => {
     // 1~6
     autoFocus: false
   };
-  const ShortPassword = (props) => {
+  const InternalShortPassword = (props, ref) => {
     const { locale } = useConfig$1();
     const {
       title,
       description,
       tips,
-      visible,
+      visible: deleteVisible,
       value,
       error,
       hideFooter,
@@ -12070,6 +12105,20 @@ var __publicField = (obj, key, value) => {
     const format2 = (val) => {
       return val.slice(0, comLen);
     };
+    const [visible, setVisible] = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      finalValue: false
+    });
+    const actions = {
+      open: () => {
+        setVisible(true);
+      },
+      close: () => {
+        setVisible(false);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const [inputValue, setInputValue] = usePropsValue({ value, onChange });
     React.useEffect(() => {
       if (visible && autoFocus) {
@@ -12105,8 +12154,7 @@ var __publicField = (obj, key, value) => {
       }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(z, { size: 11, style: { marginRight: "3px" } }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
     );
   };
-  ShortPassword.defaultProps = defaultProps$N;
-  ShortPassword.displayName = "NutShortPassword";
+  const ShortPassword = React.forwardRef(InternalShortPassword);
   const defaultProps$M = {
     ...ComponentDefaults,
     canvasId: "spcanvas",
@@ -12358,7 +12406,7 @@ var __publicField = (obj, key, value) => {
     const classPrefix2 = "nut-textarea";
     const compositionRef = React.useRef(false);
     const format2 = (value2) => {
-      if (maxLength !== void 0 && value2.length > maxLength) {
+      if (maxLength !== -1 && value2.length > maxLength) {
         return value2.substring(0, maxLength);
       }
       return value2;
@@ -13754,6 +13802,7 @@ var __publicField = (obj, key, value) => {
       if (distance.current < refreshMaxH.current) {
         distance.current = 0;
         setTopDisScoll(0);
+        isTouching.current = false;
       } else {
         await (onRefresh == null ? void 0 : onRefresh());
         refreshDone();
@@ -17632,7 +17681,8 @@ var __publicField = (obj, key, value) => {
   };
   const defaultConfigRef = {
     current: {
-      locale: zhCN
+      locale: zhCN,
+      direction: "ltr"
     }
   };
   const getDefaultConfig = () => {
@@ -18088,79 +18138,98 @@ var __publicField = (obj, key, value) => {
       ...defaultProps$6,
       ...props
     };
-    const [styleList, setStyleList] = React.useState([]);
-    const [baItemList, setBaItemList] = React.useState(list);
-    const barrageListSet = React.useRef(list);
     const barrageBody = React.useRef(null);
     const barrageContainer = React.useRef(null);
-    const timeId = React.useRef((/* @__PURE__ */ new Date()).getTime());
+    const barrageCWidth = React.useRef(0);
     const timer = React.useRef(0);
-    const classes = classNames(
-      classPrefix$1,
-      {
-        [`${classPrefix$1}-body${timeId.current}`]: true
-      },
-      className
-    );
+    const index = React.useRef(0);
+    const times = React.useRef([]);
+    const historyIndex = React.useRef(-1);
+    const classes = classNames(classPrefix$1, className);
     React.useImperativeHandle(ref, () => ({
       add: (word) => {
-        barrageListSet.current = [...barrageListSet.current, word];
-        run();
+        const _index = index.current % list.length;
+        if (!loop && index.current === list.length) {
+          list.splice(list.length, 0, word);
+        } else {
+          list.splice(_index, 0, word);
+        }
       }
     }));
+    const getNodeWidth = async (node, type2 = "width") => {
+      if (node) {
+        const refe = await getRectByTaro(node);
+        return Math.ceil(type2 === "height" ? refe.height : refe.width);
+      }
+      return 0;
+    };
     React.useEffect(() => {
-      barrageListSet.current = [...list];
-      run();
+      const init = async () => {
+        if (barrageBody.current) {
+          barrageCWidth.current = await getNodeWidth(barrageBody.current);
+        }
+      };
+      init();
+      setTimeout(() => {
+        var _a;
+        (_a = barrageBody.current) == null ? void 0 : _a.style.setProperty(
+          "--move-distance",
+          `-${barrageCWidth.current}px`
+        );
+        index.current = 0;
+        run();
+      }, 300);
       return () => {
         clearInterval(timer.current);
       };
     }, [list]);
     const run = () => {
-      setBaItemList(barrageListSet.current);
-      barrageListSet.current.forEach((item, index) => {
-        getNode(index);
-      });
-    };
-    const getNode = (index) => {
-      const query = Taro.createSelectorQuery();
-      setTimeout(() => {
-        let width = 100;
-        query.select(`.${classPrefix$1}-body${timeId.current}`).boundingClientRect((rec) => {
-          width = rec.width || 300;
-        });
-        query.select(`.${classPrefix$1}-item${index}`).boundingClientRect((recs) => {
-          const height = recs.height;
-          const nodeTop = `${index % rows * (height + gapY) + 20}px`;
-          styleInfo(index, nodeTop, width);
-        }).exec();
-      }, 500);
+      clearInterval(timer.current);
+      let intervalCache = interval;
+      const _index = (loop ? index.current % list.length : index.current) % rows;
+      const result = times.current[_index] - rows * interval;
+      if (result > 0) {
+        intervalCache += result;
+      }
+      timer.current = window.setTimeout(() => {
+        play();
+      }, intervalCache);
     };
-    const styleInfo = (index, nodeTop, width) => {
-      const timeIndex = index - rows > 0 ? index - rows : 0;
-      const list2 = styleList;
-      const time = list2[timeIndex] ? Number(list2[timeIndex]["--time"]) : 0;
-      const obj = {
-        top: nodeTop,
-        "--time": `${interval * index + time}`,
-        animationDuration: `${duration}ms`,
-        animationIterationCount: `${loop ? "infinite" : 1}`,
-        animationDelay: `${interval * index + time}ms`,
-        "--move-distance": `-${width}px`
-      };
-      list2.push(obj);
-      setStyleList([...list2]);
+    const play = async () => {
+      if (!loop && index.current >= list.length) {
+        return;
+      }
+      const _index = loop ? index.current % list.length : index.current;
+      const el = document.createElement(`View`);
+      let currentIndex = _index % rows;
+      if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
+        currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
+      }
+      historyIndex.current = currentIndex;
+      el.innerHTML = list[_index];
+      el.classList.add("barrage-item");
+      barrageContainer.current.appendChild(el);
+      try {
+        const width = await getNodeWidth(el);
+        const height = await getNodeWidth(el, "height");
+        el.classList.add("move");
+        const elScrollDuration = width / barrageCWidth.current * duration;
+        times.current[currentIndex] = Math.ceil(elScrollDuration);
+        el.style.animationDuration = `${(duration + elScrollDuration).toFixed(
+          2
+        )}ms`;
+        el.style.top = `${currentIndex * (height + gapY) + 20}px`;
+        el.style.width = `${width}px`;
+      } catch (error) {
+        console.log("异常自动流转到下一个");
+      }
+      el.addEventListener("animationend", () => {
+        barrageContainer.current.removeChild(el);
+      });
+      index.current++;
+      run();
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ref: barrageBody, ...restProps }, /* @__PURE__ */ React.createElement("div", { ref: barrageContainer, className: "bContainer" }, baItemList.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `barrage-item ${classPrefix$1}-item${index} move`,
-          style: styleList[index],
-          key: index
-        },
-        item.length > 8 ? `${item.substr(0, 8)}...` : item
-      );
-    })));
+    return /* @__PURE__ */ React.createElement(components.View, { className: classes, ref: barrageBody, ...restProps }, /* @__PURE__ */ React.createElement(components.View, { ref: barrageContainer, className: "bContainer" }));
   };
   const Barrage = React.forwardRef(
     InternalBarrage

package/dist/packages/address/address.scss

@@ -49,3 +49,15 @@
     }
   }
 }
+
+[dir='rtl'] .nut-address,
+.nut-rtl .nut-address {
+  &-exist {
+    &-item {
+      &-info {
+        margin-left: 0;
+        margin-right: 9px;
+      }
+    }
+  }
+}

package/dist/packages/animate/animate.scss

@@ -13,6 +13,7 @@
   .nut-animate-slide-right {
     animation-name: slide-right;
   }
+
   @keyframes slide-right {
     0% {
       opacity: 0;
@@ -29,6 +30,7 @@
   .nut-animate-slide-left {
     animation-name: slide-left;
   }
+
   @keyframes slide-left {
     0% {
       opacity: 0;
@@ -45,6 +47,7 @@
   .nut-animate-slide-top {
     animation-name: slide-top;
   }
+
   @keyframes slide-top {
     0% {
       opacity: 0;
@@ -61,6 +64,7 @@
   .nut-animate-slide-bottom {
     animation-name: slide-bottom;
   }
+
   @keyframes slide-bottom {
     0% {
       opacity: 0;
@@ -77,6 +81,7 @@
   .nut-animate-shake {
     animation-name: shake;
   }
+
   @keyframes shake {
     0%,
     100% {
@@ -124,10 +129,12 @@
   .nut-animate-ripple {
     animation-name: ripple;
   }
+
   @keyframes ripple {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
@@ -140,13 +147,16 @@
     animation-timing-function: ease-in-out;
     animation-direction: alternate;
   }
+
   @keyframes breath {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
@@ -155,6 +165,7 @@
   // 水波
   .nut-animate-twinkle {
     position: relative;
+
     &::after,
     &::before {
       width: 60 * 1px;
@@ -176,13 +187,16 @@
       animation-delay: 0.4s;
     }
   }
+
   @keyframes twinkle {
     0% {
       transform: scale(0);
     }
+
     20% {
       opacity: 1;
     }
+
     50%,
     100% {
       transform: scale(1.4);
@@ -212,10 +226,12 @@
       filter: blur(3 * 1px);
     }
   }
+
   @keyframes flicker {
     0% {
       transform: translateX(-100 * 1px) skewX(-20deg);
     }
+
     40%,
     100% {
       transform: translateX(150 * 1px) skewX(-20deg);
@@ -227,23 +243,28 @@
     transform-origin: center center;
     animation: jump 0.7s linear;
   }
+
   @keyframes jump {
     0% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(0);
     }
+
     25% {
       animation-timing-function: ease-out;
       transform: rotate(10deg) translateY(20 * 1px);
     }
+
     50% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(-10 * 1px);
     }
+
     75% {
       animation-timing-function: ease-out;
       transform: rotate(-10deg) translateY(20 * 1px);
     }
+
     100% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(0);
@@ -255,6 +276,7 @@
     position: relative;
     animation-name: float-pop;
   }
+
   @keyframes float-pop {
     0% {
       top: 0px;
@@ -282,3 +304,30 @@
     animation-iteration-count: infinite;
   }
 }
+
+[dir='rtl'] .nut-animate,
+.nut-rtl .nut-animate {
+  .nut-animate-twinkle {
+    &::after,
+    &::before {
+      border-radius: calc(60 / 2) * 1px;
+      right: auto;
+      left: 50%;
+      margin-right: 0;
+      margin-left: calc(-60 / 2) * 1px;
+    }
+  }
+
+  .nut-animate-flicker {
+    &::after {
+      left: auto;
+      right: 0;
+      background-image: linear-gradient(
+        -106deg,
+        rgba(232, 224, 255, 0) 24%,
+        #e8e0ff 91%
+      );
+      transform: skewX(20deg);
+    }
+  }
+}