@nutui/nutui-react-taro 2.3.9 → 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.9 Fri Feb 02 2024 16:15:32 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.
 */
@@ -4050,7 +4050,7 @@ var __publicField = (obj, key, value) => {
       }
     }, []);
     Taro.usePageScroll((res) => {
-      if (Taro.getEnv() === "WEAPP") {
+      if (Taro.getEnv() !== "WEB") {
         handleScroll(res.scrollTop);
       }
     });
@@ -5358,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
@@ -9768,6 +9768,7 @@ var __publicField = (obj, key, value) => {
     constructor() {
       // 初始化数据
       __publicField(this, "initialValues", {});
+      __publicField(this, "updateList", []);
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
       __publicField(this, "store", {});
       // 所有的组件实例
@@ -9837,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 = {
@@ -9905,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]);
       });
@@ -9916,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
           };
         }
       });
@@ -10047,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;
@@ -10127,7 +10151,6 @@ var __publicField = (obj, key, value) => {
         }
       });
       __publicField(this, "renderLayout", (childNode) => {
-        var _a;
         const {
           label,
           name,
@@ -10153,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
           ))
         );
       });
@@ -10172,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);
@@ -12039,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,
@@ -12076,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) {
@@ -12111,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",
@@ -18096,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/barrage/barrage.scss

@@ -50,7 +50,7 @@
     }
 
     to {
-      transform: translateX(var(--move-distance));
+      -webkit-transform: translateX(var(--move-distance));
     }
   }
 }

package/dist/packages/popup/popup.scss

@@ -300,6 +300,7 @@
       animation-duration: $popup-animation-duration;
     }
 
+    &-default-exit-done,
     &-center-exit-done,
     &-left-exit-done,
     &-right-exit-done,

package/dist/packages/tabs/tabs.scss

@@ -28,10 +28,16 @@
 
   &-left {
     justify-content: flex-start;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-right {
     justify-content: flex-end;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-scrollable {
@@ -45,19 +51,15 @@
     align-items: center;
     justify-content: center;
     flex: 1 0 auto;
-    padding: 0 10px;
     margin: 0 $tabs-titles-gap;
+    height: $tabs-titles-height;
+    line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
     font-size: $tabs-titles-font-size;
     color: $tabs-titles-item-color;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    &.taro {
-      height: 44px;
-      line-height: 44px;
-    }
-
     &-left,
     &-right {
       flex: none;
@@ -120,6 +122,10 @@
     &:first-child {
       margin-left: 0;
     }
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   &-simple {
@@ -147,10 +153,7 @@
   &-button {
     .nut-tabs-titles-item {
       &-active {
-        &.taro {
-          height: 28px;
-        }
-
+        height: 28px;
         margin: 8px 9px;
         background: $color-default-light;
         color: $color-text;
@@ -261,6 +264,7 @@
 
   .nut-tabs-titles-item {
     height: $tabs-vertical-titles-item-height;
+    margin: 0;
     flex: none;
 
     &-smile {
@@ -300,10 +304,6 @@
         transform: rotate(320deg);
       }
     }
-
-    &:first-child {
-      margin: 0 $tabs-titles-gap;
-    }
   }
 
   .nut-tabs-horizontal {