@nutui/nutui-react 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 v2.3.8 Fri Jan 26 2024 15:13:59 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.
 */
@@ -2397,7 +2397,8 @@ Check the top-level render call using <` + t2 + ">.");
   const classPrefix$p = "nut-configprovider";
   const defaultConfigRef = {
     current: {
-      locale: zhCN
+      locale: zhCN,
+      direction: "ltr"
     }
   };
   const getDefaultConfig = () => {
@@ -2415,7 +2416,7 @@ Check the top-level render call using <` + t2 + ">.");
     return cssVars;
   }
   const ConfigProvider = (props) => {
-    const { style, className, children, ...config2 } = props;
+    const { style, className, children, direction, ...config2 } = props;
     const mergedConfig = useMemo(
       () => {
         return {
@@ -2438,8 +2439,10 @@ Check the top-level render call using <` + t2 + ">.");
         className: classNames(classPrefix$p, className),
         style: {
           ...cssVarStyle,
-          ...style
-        }
+          ...style,
+          direction
+        },
+        dir: direction
       },
       children
     ));
@@ -10899,7 +10902,8 @@ Please add \`${key}Action\` when creating your handler.`);
         {
           nodeRef,
           classNames: transitionName,
-          unmountOnExit: true,
+          mountOnEnter: true,
+          unmountOnExit: destroyOnClose,
           timeout: duration,
           in: innerVisible,
           onEntered: onHandleOpened,
@@ -15800,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", {});
       // 所有的组件实例
@@ -15869,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 = {
@@ -15934,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]);
       });
@@ -15945,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
           };
         }
       });
@@ -16076,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;
@@ -16197,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);
@@ -18123,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,
@@ -18160,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) {
@@ -18186,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) => {
@@ -18195,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",
@@ -18405,7 +18459,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const textareaRef = React.useRef(null);
     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;
@@ -19844,6 +19898,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (distance.current < refreshMaxH.current) {
         distance.current = 0;
         getRefreshTop().style.height = `${distance.current}px`;
+        isTouching.current = false;
       } else {
         await (onRefresh == null ? void 0 : onRefresh());
         refreshDone();
@@ -24500,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) => {
@@ -24530,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) {
@@ -24540,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/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);
+    }
+  }
+}

package/dist/packages/audio/audio.scss

@@ -86,3 +86,17 @@
     }
   }
 }
+
+[dir='rtl'] .nut-audio,
+.nut-rtl .nut-audio {
+  &-icon {
+    .nut-audio-icon-stop {
+      &::after {
+        left: auto;
+        right: 50%;
+        transform: rotate(-45deg);
+        transform-origin: 20px -18px;
+      }
+    }
+  }
+}

package/dist/packages/avatar/avatar.scss

@@ -1,3 +1,4 @@
+
 .nut-avatar {
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -6,6 +7,7 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
+
   .avatar-img {
     position: absolute;
     width: 100%;
@@ -15,6 +17,7 @@
     transform: translate(-50%, -50%);
     flex-shrink: 0;
   }
+
   .icon {
     background-size: 100% 100%;
     position: absolute;
@@ -22,10 +25,12 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
   .nut-icon-img {
     width: 100%;
     height: 100%;
   }
+
   .text {
     display: inline-block;
     width: 100%;
@@ -34,25 +39,45 @@
     overflow: hidden;
   }
 }
+
+[dir='rtl'] .nut-avatar,
+.nut-rtl .nut-avatar {
+  .avatar-img {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  .icon {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
+
 .nut-avatar-large {
   width: $avatar-large-width;
   height: $avatar-large-height;
   line-height: $avatar-large-height;
 }
+
 .nut-avatar-small {
   width: $avatar-small-width;
   height: $avatar-small-height;
   line-height: $avatar-small-height;
 }
+
 .nut-avatar-normal {
   width: $avatar-normal-width;
   height: $avatar-normal-height;
   line-height: $avatar-normal-height;
 }
+
 .nut-avatar-round {
   border-radius: 50%;
   overflow: hidden;
 }
+
 .nut-avatar-square {
   border-radius: $avatar-square;
 }

package/dist/packages/avatarcropper/avatarcropper.scss

@@ -1,6 +1,7 @@
 .nut-avatar-cropper {
   position: relative;
   display: flex;
+
   &-edit-text {
     position: absolute;
     top: 0;
@@ -14,6 +15,7 @@
     justify-content: center;
     align-items: center;
   }
+
   &-input {
     position: absolute;
     top: 0;
@@ -24,6 +26,7 @@
     cursor: pointer;
     z-index: 2;
   }
+
   &-popup {
     position: fixed;
     top: 0;
@@ -32,6 +35,7 @@
     height: 100%;
     background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
     z-index: 1000;
+
     &-canvas,
     &-cut-canvas {
       position: absolute;
@@ -41,24 +45,29 @@
       height: 100%;
       z-index: 1;
     }
+
     &-cut-canvas {
       z-index: 0;
     }
+
     &-toolbar {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       z-index: 2;
+
       &.top {
         top: 0;
         bottom: inherit;
       }
+
       &-flex {
         width: 100%;
         display: flex;
         justify-content: space-between;
       }
+
       &-item {
         color: #fff;
         padding: 15px;
@@ -71,6 +80,7 @@
         }
       }
     }
+
     &-highlight {
       position: absolute;
       left: 0;
@@ -79,6 +89,7 @@
       height: 100%;
       z-index: 1;
       background-color: transparent;
+
       .highlight {
         position: absolute;
         left: 50%;
@@ -89,9 +100,50 @@
       }
     }
   }
+
   &.round {
     .nut-avatar-cropper-edit-text {
       border-radius: 50%;
     }
   }
 }
+
+[dir='rtl'] .nut-avatar-cropper,
+.nut-rtl .nut-avatar-cropper {
+  &-edit-text {
+    left: auto;
+    right: 0;
+  }
+
+  &-input {
+    left: auto;
+    right: 0;
+  }
+
+  &-popup {
+    left: auto;
+    right: 0;
+
+    &-canvas,
+    &-cut-canvas {
+      left: auto;
+      right: 0;
+    }
+
+    &-toolbar {
+      left: auto;
+      right: 0;
+    }
+
+    &-highlight {
+      left: auto;
+      right: 0;
+
+      .highlight {
+        left: auto;
+        right: 50%;
+        transform: translate(50%, -50%);
+      }
+    }
+  }
+}