@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/es/packages/progress/progress.js

@@ -16,7 +16,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var Progress = function(props) {
     var rtl = useRtl();
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeMode = _ref.activeMode, duration = _ref.duration, ariaLabel = _ref.ariaLabel, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "percent",
@@ -27,24 +27,48 @@ export var Progress = function(props) {
         "animated",
         "children",
         "lazy",
-        "delay"
+        "delay",
+        "borderRadius",
+        "fontSize",
+        "activeMode",
+        "duration",
+        "ariaLabel",
+        "onActiveEnd"
     ]);
     var classPrefix = 'nut-progress';
     var _obj;
     var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-inner"), true), _define_property(_obj, "".concat(classPrefix, "-active"), animated), _obj));
     var stylesOuter = {
         height: "".concat(strokeWidth, "px"),
+        borderRadius: borderRadius && parseInt(borderRadius.toString()),
         background: background
     };
     var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        background: color || '#FF0F23'
+        background: color || '#FF0F23',
+        borderRadius: borderRadius && parseInt(borderRadius.toString()),
+        transition: "width ".concat(duration || 300, "ms ease-in-out")
     };
     useEffect(function() {
-        setDispalyPercent(percent);
+        var timer = null;
+        if (activeMode === 'backwards') {
+            setDispalyPercent(0);
+            timer = setTimeout(function() {
+                setDispalyPercent(percent);
+            }, duration || 300);
+        } else {
+            setDispalyPercent(percent);
+        }
+        return function() {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
     }, [
-        percent
+        percent,
+        activeMode,
+        duration
     ]);
     var _useState1 = _sliced_to_array(useState(false), 2), intersecting = _useState1[0], setIntersecting = _useState1[1];
     var progressRef = useRef(null);
@@ -96,25 +120,22 @@ export var Progress = function(props) {
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         ref: progressRef,
         className: classNames(classPrefix, className),
-        style: style
+        style: style,
+        "aria-label": ariaLabel
     }, rest), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter
     }, /*#__PURE__*/ React.createElement("div", {
         className: classesInner,
-        style: stylesInner
-    }, showText && /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-text"),
-        style: rtl ? {
-            right: "".concat(displayPercent, "%")
-        } : {
-            left: "".concat(displayPercent, "%")
+        style: stylesInner,
+        onTransitionEnd: function() {
+            onActiveEnd === null || onActiveEnd === void 0 ? void 0 : onActiveEnd();
         }
-    }, children || /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-text-inner"),
+    })), showText && /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-text"),
         style: {
-            background: color
+            fontSize: fontSize && parseInt(fontSize.toString())
         }
-    }, percent, "%")))));
+    }, children || "".concat(percent, "%")));
 };
 Progress.displayName = 'NutProgress';

package/dist/es/packages/progress/style/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/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;
+};