@nutui/nutui-react 2.3.8 → 2.3.9

package/dist/nutui.react.es.js

@@ -5,7 +5,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.9 Fri Feb 02 2024 16:13:40 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2379,7 +2379,8 @@ const zhCN = {
 const classPrefix$p = "nut-configprovider";
 const defaultConfigRef = {
   current: {
-    locale: zhCN
+    locale: zhCN,
+    direction: "ltr"
   }
 };
 const getDefaultConfig = () => {
@@ -2397,7 +2398,7 @@ function convertThemeVarsToCSSVars(themeVars) {
   return cssVars;
 }
 const ConfigProvider = (props) => {
-  const { style, className, children, ...config2 } = props;
+  const { style, className, children, direction, ...config2 } = props;
   const mergedConfig = useMemo(
     () => {
       return {
@@ -2420,8 +2421,10 @@ const ConfigProvider = (props) => {
       className: classNames(classPrefix$p, className),
       style: {
         ...cssVarStyle,
-        ...style
-      }
+        ...style,
+        direction
+      },
+      dir: direction
     },
     children
   ));
@@ -10881,7 +10884,8 @@ const Popup = (props) => {
       {
         nodeRef,
         classNames: transitionName,
-        unmountOnExit: true,
+        mountOnEnter: true,
+        unmountOnExit: destroyOnClose,
         timeout: duration,
         in: innerVisible,
         onEntered: onHandleOpened,
@@ -18387,7 +18391,7 @@ const TextArea = (props) => {
   const textareaRef = useRef(null);
   const compositionRef = 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;
@@ -19826,6 +19830,7 @@ const InfiniteLoading = (props) => {
     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();

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.9 Fri Feb 02 2024 16:13:40 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,
@@ -18405,7 +18409,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 +19848,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();

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%);
+      }
+    }
+  }
+}

package/dist/packages/avatargroup/avatargroup.scss

@@ -7,8 +7,19 @@
   flex: 0 0 auto; // 防止被压缩
   .nut-avatar {
     border: 1px solid #fff;
+
     &:not(:first-of-type) {
       margin-left: -8px;
     }
   }
 }
+
+[dir='rtl'] .nut-avatar-group,
+.nut-rtl .nut-avatar-group {
+  .nut-avatar {
+    &:not(:first-of-type) {
+      margin-left: 0;
+      margin-right: -8px;
+    }
+  }
+}

package/dist/packages/badge/badge.scss

@@ -58,3 +58,11 @@
     padding: 0;
   }
 }
+
+[dir='rtl'] .nut-badge,
+.nut-rtl .nut-badge {
+  &-icon {
+    right: auto;
+    left: -15%;
+  }
+}

package/dist/packages/barrage/barrage.scss

@@ -54,3 +54,20 @@
     }
   }
 }
+
+[dir='rtl'] .nut-barrage,
+.nut-rtl .nut-barrage {
+  left: auto;
+  right: 0;
+
+  .barrage-item {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      to left,
+      var(--nutui-black-3),
+      var(--nutui-black-1)
+    );
+  }
+}

package/dist/packages/button/button.scss

@@ -327,3 +327,21 @@
     border-radius: $button-square-border-radius;
   }
 }
+
+[dir='rtl'] .nut-button,
+.nut-rtl .nut-button {
+  &-text {
+    margin-left: 0;
+    margin-right: $button-text-icon-margin;
+
+    &.right {
+      margin-left: $button-text-icon-margin;
+    }
+  }
+
+  &::before {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}

package/dist/packages/calendar/calendar.scss

@@ -183,6 +183,7 @@
 
     &-disabled {
       color: $calendar-disable-color !important;
+
       .nut-calendar-day-info-curr {
         display: none;
       }
@@ -222,6 +223,29 @@
   }
 }
 
+[dir='rtl'] .nut-calendar,
+.nut-rtl .nut-calendar {
+  &-day {
+    float: right;
+
+    &-active {
+      &.active-start {
+        border-top-left-radius: 0;
+        border-top-right-radius: $calendar-day-active-border-radius;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: $calendar-day-active-border-radius;
+      }
+
+      &.active-end {
+        border-top-right-radius: 0;
+        border-top-left-radius: $calendar-day-active-border-radius;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: $calendar-day-active-border-radius;
+      }
+    }
+  }
+}
+
 .nut-calendar-popup .nut-popup-title-right {
   top: 7px !important;
 }

package/dist/packages/calendarcard/calendarcard.scss

@@ -23,6 +23,7 @@
       .left {
         margin-left: 8px;
       }
+
       .right {
         margin-right: 8px;
       }
@@ -102,3 +103,43 @@
     }
   }
 }
+
+[dir='rtl'] .nut-calendarcard,
+.nut-rtl .nut-calendarcard {
+  &-header {
+    &-left,
+    &-right {
+      .left {
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .right {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+
+      .nut-icon-ArrowLeft,
+      .nut-icon-ArrowRight,
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-day {
+    &.start {
+      border-top-left-radius: 0;
+      border-top-right-radius: $calendar-day-active-border-radius;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $calendar-day-active-border-radius;
+    }
+
+    &.end {
+      border-top-right-radius: 0;
+      border-top-left-radius: $calendar-day-active-border-radius;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: $calendar-day-active-border-radius;
+    }
+  }
+}