@nutui/nutui-react 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 v2.3.9 Fri Feb 02 2024 16:13:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.10 Tue Feb 06 2024 16:12:46 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -15804,6 +15804,7 @@ Please add \`${key}Action\` when creating your handler.`);
     constructor() {
       // 初始化数据
       __publicField(this, "initialValues", {});
+      __publicField(this, "updateList", []);
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
       __publicField(this, "store", {});
       // 所有的组件实例
@@ -15873,6 +15874,15 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           });
         });
+        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 = {
@@ -15938,6 +15948,16 @@ Please add \`${key}Action\` when creating your handler.`);
           entity.onStoreChange("reset");
         });
       });
+      // 监听事件
+      __publicField(this, "registerUpdate", (field, shouldUpdate) => {
+        this.updateList.push({
+          entity: field,
+          condition: shouldUpdate
+        });
+        return () => {
+          this.updateList = this.updateList.filter((i) => i.entity !== field);
+        };
+      });
       __publicField(this, "dispatch", ({ name }) => {
         this.validateFields([name]);
       });
@@ -15949,7 +15969,8 @@ Please add \`${key}Action\` when creating your handler.`);
             setInitialValues: this.setInitialValues,
             dispatch: this.dispatch,
             store: this.store,
-            fieldEntities: this.fieldEntities
+            fieldEntities: this.fieldEntities,
+            registerUpdate: this.registerUpdate
           };
         }
       });
@@ -16080,13 +16101,16 @@ Please add \`${key}Action\` when creating your handler.`);
     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 _a2;
@@ -16201,22 +16225,31 @@ Please add \`${key}Action\` when creating your handler.`);
       };
     }
     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$W);
@@ -18127,13 +18160,13 @@ Please add \`${key}Action\` when creating your handler.`);
     // 1~6
     autoFocus: false
   };
-  const ShortPassword = (props) => {
+  const InternalShortPassword = (props, ref) => {
     const { locale } = useConfig();
     const {
       title,
       description,
       tips,
-      visible,
+      visible: deleteVisible,
       value,
       error,
       hideFooter,
@@ -18164,6 +18197,24 @@ Please add \`${key}Action\` when creating your handler.`);
     const format2 = (val) => {
       return val.slice(0, comLen);
     };
+    const [visible, setVisible] = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      finalValue: false
+    });
+    const handleClose = () => {
+      onClose == null ? void 0 : onClose();
+      setVisible(false);
+    };
+    const actions = {
+      open: () => {
+        setVisible(true);
+      },
+      close: () => {
+        setVisible(false);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const [inputValue, setInputValue] = usePropsValue({ value, onChange });
     React.useEffect(() => {
       if (visible && autoFocus) {
@@ -18190,8 +18241,8 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         visible,
         closeable: true,
-        onOverlayClick: onClose,
-        onCloseIconClick: onClose,
+        onOverlayClick: handleClose,
+        onCloseIconClick: handleClose,
         ...rest
       },
       /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, title || locale.shortpassword.title), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-description` }, description || locale.shortpassword.description), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input`, onClick: onFocus }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-site` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
@@ -18199,8 +18250,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }))), /* @__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(s, { width: 11, height: 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$L;
-  ShortPassword.displayName = "NutShortPassword";
+  const ShortPassword = React.forwardRef(InternalShortPassword);
   const defaultProps$K = {
     ...ComponentDefaults,
     type: "png",
@@ -24505,6 +24555,8 @@ Please add \`${key}Action\` when creating your handler.`);
     const barrageCWidth = React.useRef(0);
     const timer = React.useRef(0);
     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) => {
@@ -24535,9 +24587,15 @@ Please add \`${key}Action\` when creating your handler.`);
     }, [list]);
     const run = () => {
       clearInterval(timer.current);
+      let intervalCache = interval;
+      const _index = (loop2 ? index.current % list.length : index.current) % rows;
+      const result = times.current[_index] - rows * interval;
+      if (result > 0) {
+        intervalCache += result;
+      }
       timer.current = window.setTimeout(() => {
         play();
-      }, interval);
+      }, intervalCache);
     };
     const play = () => {
       if (!loop2 && index.current >= list.length) {
@@ -24545,14 +24603,23 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       const _index = loop2 ? index.current % list.length : index.current;
       const el = document.createElement(`div`);
+      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);
       const width = el.offsetWidth;
       const height = el.offsetHeight;
       el.classList.add("move");
-      el.style.animationDuration = `${duration}ms`;
-      el.style.top = `${_index % rows * (height + gapY) + 20}px`;
+      const elScrollDuration = Math.ceil(
+        width / barrageCWidth.current * duration
+      );
+      times.current[currentIndex] = elScrollDuration;
+      el.style.animationDuration = `${duration + elScrollDuration}ms`;
+      el.style.top = `${currentIndex * (height + gapY) + 20}px`;
       el.style.width = `${width}px`;
       el.addEventListener("animationend", () => {
         barrageContainer.current.removeChild(el);

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 {