@nutui/nutui-react 3.0.11-patch.0 → 3.0.12

package/dist/es/packages/progress/style/style.css

@@ -9,7 +9,7 @@
   width: 100%;
 }
 .nut-progress-outer {
-  flex: auto;
+  flex: 1;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
   background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
@@ -36,25 +36,11 @@
 .nut-progress-text {
   display: flex;
   align-items: center;
-  position: absolute;
-  top: var(--nutui-progress-text-position-top, -4px);
-  bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
-  transform: translate(-50%);
-}
-.nut-progress-text-inner {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: var(--nutui-progress-text-color, #ffffff);
-  padding: var(--nutui-progress-text-padding, 0 5px);
-  border-radius: var(--nutui-progress-text-border-radius, 5px);
-  font-size: var(--nutui-progress-text-font-size, 9px);
-  line-height: 1;
-  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  margin-left: 12px;
+  color: var(--nutui-color-text-help, #888b94);
+  font-family: PingFang SC;
+  font-size: var(--nutui-progress-text-font-size, 13px);
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/progress/style-jmapp/progress.scss

@@ -5,11 +5,10 @@
   width: 100%;
 
   &-outer {
-    flex: auto;
+    flex: 1;
     border-radius: $progress-border-radius;
     height: $progress-height;
     background: $progress-background;
-
     .nut-progress-active:before {
       content: '';
       position: absolute;
@@ -35,26 +34,11 @@
   &-text {
     display: flex;
     align-items: center;
-    position: absolute;
-    top: $progress-text-position-top;
-    bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    transform: translate(-50%);
-
-    &-inner {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-      color: $progress-text-color;
-      padding: $progress-text-padding;
-      border-radius: $progress-text-border-radius;
-      font-size: $progress-text-font-size;
-      line-height: 1;
-      background: $progress-text-background;
-    }
+    margin-left: 12px;
+    color: $color-text-help;
+    font-family: PingFang SC;
+    font-size: $progress-text-font-size;
   }
 
   @keyframes progressActive {

package/dist/es/packages/progress/style-jmapp/style.css

@@ -9,7 +9,7 @@
   width: 100%;
 }
 .nut-progress-outer {
-  flex: auto;
+  flex: 1;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
   background: var(--nutui-progress-background, var(--nutui-color-surface-1));
@@ -36,25 +36,11 @@
 .nut-progress-text {
   display: flex;
   align-items: center;
-  position: absolute;
-  top: var(--nutui-progress-text-position-top, -4px);
-  bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
-  transform: translate(-50%);
-}
-.nut-progress-text-inner {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-text-dark));
-  padding: var(--nutui-progress-text-padding, 0 5px);
-  border-radius: var(--nutui-progress-text-border-radius, 5px);
+  margin-left: 12px;
+  color: var(--nutui-color-text-help);
+  font-family: PingFang SC;
   font-size: var(--nutui-progress-text-font-size, 9px);
-  line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/progress/style-jrkf/progress.scss

@@ -5,11 +5,10 @@
   width: 100%;
 
   &-outer {
-    flex: auto;
+    flex: 1;
     border-radius: $progress-border-radius;
     height: $progress-height;
     background: $progress-background;
-
     .nut-progress-active:before {
       content: '';
       position: absolute;
@@ -35,26 +34,11 @@
   &-text {
     display: flex;
     align-items: center;
-    position: absolute;
-    top: $progress-text-position-top;
-    bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    transform: translate(-50%);
-
-    &-inner {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-      color: $progress-text-color;
-      padding: $progress-text-padding;
-      border-radius: $progress-text-border-radius;
-      font-size: $progress-text-font-size;
-      line-height: 1;
-      background: $progress-text-background;
-    }
+    margin-left: 12px;
+    color: $color-text-help;
+    font-family: PingFang SC;
+    font-size: $progress-text-font-size;
   }
 
   @keyframes progressActive {

package/dist/es/packages/progress/style-jrkf/style.css

@@ -9,7 +9,7 @@
   width: 100%;
 }
 .nut-progress-outer {
-  flex: auto;
+  flex: 1;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
   background: var(--nutui-progress-background, var(--nutui-color-surface-1));
@@ -36,25 +36,11 @@
 .nut-progress-text {
   display: flex;
   align-items: center;
-  position: absolute;
-  top: var(--nutui-progress-text-position-top, -4px);
-  bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
-  transform: translate(-50%);
-}
-.nut-progress-text-inner {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-text-dark));
-  padding: var(--nutui-progress-text-padding, 0 5px);
-  border-radius: var(--nutui-progress-text-border-radius, 5px);
+  margin-left: 12px;
+  color: var(--nutui-color-text-help);
+  font-family: PingFang SC;
   font-size: var(--nutui-progress-text-font-size, 9px);
-  line-height: 1;
-  background: var(--nutui-progress-text-background, var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff9999) 0%, var(--nutui-color-primary-stop-2, #ff6666) 100%)));
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/range/range.js

@@ -221,10 +221,8 @@ export var Range = function(props) {
         onEnd,
         setCurrent
     ]);
-    var click = useCallback(function(event) {
-        if (disabled || !root.current) {
-            return;
-        }
+    var handleClick = useCallback(function(event) {
+        if (disabled || !root.current) return;
         setDragStatus('');
         var rect = getRect(root.current);
         var delta = event.clientX - rect.left;
@@ -262,9 +260,7 @@ export var Range = function(props) {
         vertical
     ]);
     var onTouchStart = useCallback(function(event) {
-        if (disabled) {
-            return;
-        }
+        if (disabled) return;
         touch.start(event);
         setExactValue(current);
         if (isRange(current)) {
@@ -477,11 +473,9 @@ export var Range = function(props) {
     }, minDescription || min), /*#__PURE__*/ React.createElement("div", {
         ref: root,
         className: classes,
-        onClick: function(e) {
-            return click(e);
-        }
+        onClick: handleClick
     }, renderMarks(), /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-bar"),
+        className: "".concat(classPrefix, "-bar ").concat(classPrefix, "-bar-animate"),
         style: barStyle()
     }, renderButtonWrapper())), maxDescription !== null && /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-max")

package/dist/es/packages/range/style/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/es/packages/range/style/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;

package/dist/es/packages/range/style-jmapp/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/es/packages/range/style-jmapp/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;

package/dist/es/packages/range/style-jrkf/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/es/packages/range/style-jrkf/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff6666));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;

package/dist/es/packages/range/utils.d.ts

@@ -0,0 +1,3 @@
+import { RangeValue } from "../../types";
+export declare const isSameValue: (newValue: RangeValue, oldValue: RangeValue) => boolean;
+export declare const handleOverlap: (value: number[]) => number[];

package/dist/es/packages/range/utils.js

@@ -0,0 +1,6 @@
+export var isSameValue = function(newValue, oldValue) {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+};
+export var handleOverlap = function(value) {
+    return value[0] > value[1] ? value.slice(0).reverse() : value;
+};