@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/cjs/packages/elevator/style-jrkf/style.css

@@ -2,105 +2,120 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-address-title {
-  font-size: 14px;
-  font-weight: 500;
-  padding: 16px 16px 12px 16px;
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
 }
-.nut-address-hotlist {
-  padding: 0 16px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.nut-elevator-list {
+  display: block;
+  position: relative;
+  top: 0;
+  overflow: hidden;
+  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-text-small));
+  color: var(--nutui-elevator-list-color, var(--nutui-color-title));
 }
-.nut-address-hotlist-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 63px;
-  height: 28px;
-  font-size: 12px;
-  border-radius: 4px;
-  margin-bottom: 7px;
-  /* #ifdef harmony*/
-  margin-right: 6px;
-  /* #endif */
-  /* #ifndef harmony*/
-  margin-right: 7px;
-  /* #endif */
-  background-color: var(--nutui-gray-2, #f0f0f0);
-  color: var(--nutui-color-title);
+.nut-elevator-list-inner {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: var(--nutui-elevator-list-bg-color, #ffffff);
+  overflow: auto;
 }
-.nut-address-hotlist-item:nth-child(5n) {
-  margin-right: 0;
+.nut-elevator-list-item {
+  display: block;
 }
-.nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
-  width: auto;
-  padding: 0 16px;
-  margin-right: 7px;
+.nut-elevator-list-item-code {
+  display: flex;
+  position: relative;
+  height: var(--nutui-elevator-list-item-code-height, 20px);
+  line-height: var(--nutui-elevator-list-item-code-line-height, 20px);
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
+  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title));
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold));
+  box-sizing: border-box;
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, none);
+  background-color: var(--nutui-elevator-list-item-code-background-color, var(--nutui-color-default-light));
 }
-.nut-address-selected {
-  width: 100%;
-  height: 60px;
-  padding: 0 16px;
+.nut-elevator-list-item-name {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--nutui-color-border);
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  height: var(--nutui-elevator-list-item-name-height, 52px);
+  line-height: var(--nutui-elevator-list-item-name-line-height, 52px);
 }
-.nut-address-selected-item {
-  font-size: 12px;
-  display: inline-block;
-  height: 28px;
-  line-height: 28px;
-  padding: 0 12px;
-  border-radius: 4px;
-  background-color: var(--nutui-gray-2, #f0f0f0);
-}
-.nut-address-selected-item.active {
-  border: 1px solid var(--nutui-color-primary, #ff6666);
-  background-color: var(--nutui-color-primary-light-pressed, #ffcccc);
+.nut-elevator-list-item-name-highcolor {
   color: var(--nutui-color-primary, #ff6666);
 }
-.nut-address-selected-border {
-  margin: 0 2px;
-  color: var(--nutui-color-text-disabled);
+.nut-elevator-list-fixed {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  height: var(--nutui-elevator-list-item-code-height, 20px);
+  background-color: var(--nutui-elevator-list-fixed-bg-color, var(--nutui-color-default-light));
+  box-sizing: border-box;
+  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
 }
-.nut-address-elevator {
-  margin-top: 0;
+.nut-elevator-list-fixed-title {
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
+  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff6666));
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold));
 }
-.nut-address-elevator .nut-elevator-list-item {
-  position: relative;
-  padding-left: 20px;
+.nut-elevator-code-current {
+  position: absolute;
+  right: var(--nutui-elevator-list-item-code-current-right, 40px);
+  top: var(--nutui-elevator-list-item-code-current-top, 50%);
+  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  width: var(--nutui-elevator-list-item-code-current-width, 48px);
+  height: var(--nutui-elevator-list-item-code-current-height, 48px);
+  line-height: var(--nutui-elevator-list-item-code-current-line-height, 48px);
+  border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50% 0 50% 50%);
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-default-light));
+  box-shadow: 0px 2px 6px 0px rgba(4, 1, 135, 0.08);
+  text-align: var(--nutui-elevator-list-item-code-current-text-align, center);
 }
-.nut-address-elevator .nut-elevator-list-item-code {
-  display: inline;
+.nut-elevator-bars {
   position: absolute;
-  left: 0;
-  top: 0;
-  height: 30px;
-  line-height: 30px;
-  border-bottom: 0;
+  right: var(--nutui-elevator-bars-right, 10px);
+  top: var(--nutui-elevator-bars-top, 50%);
   color: var(--nutui-color-text-help);
-  font-weight: 500;
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-text-xs));
+  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  padding: var(--nutui-elevator-bars-padding, 15px 0);
+  background-color: var(--nutui-elevator-bars-background-color, transparent);
+  border-radius: var(--nutui-elevator-bars-border-radius, 6px);
+  text-align: center;
+  z-index: var(--nutui-elevator-bars-z-index, 2);
 }
-.nut-address-elevator .nut-elevator-bars {
-  top: 40%;
-  padding: 0;
-  background: none;
+.nut-elevator-bars-inner-item {
+  display: block;
+  padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
+  cursor: pointer;
 }
-.nut-address-elevator .nut-elevator-bars-inner-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  border-radius: 16px;
-  margin-bottom: 2px;
-  color: var(--nutui-color-text-help);
+.nut-elevator-bars-inner-item-active {
+  font-weight: var(--nutui-font-weight-bold);
+  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary, #ff6666));
+}
+
+[dir=rtl] .nut-elevator-list-fixed,
+.nut-rtl .nut-elevator-list-fixed {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-elevator-code-current,
+.nut-rtl .nut-elevator-code-current {
+  right: auto;
+  left: var(--nutui-elevator-list-item-code-current-right, 40px);
 }
-.nut-address-elevator .nut-elevator-bars-inner-item-active {
-  background-color: var(--nutui-color-primary, #ff6666);
-  color: var(--nutui-color-surface-2);
-  font-weight: 400;
+[dir=rtl] .nut-elevator-bars,
+.nut-rtl .nut-elevator-bars {
+  right: auto;
+  left: var(--nutui-elevator-bars-right, 10px);
 }

package/dist/cjs/packages/progress/progress.js

@@ -28,7 +28,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var Progress = function Progress(props) {
     var rtl = (0, _configprovider.useRtl)();
-    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
         "className",
         "style",
         "percent",
@@ -39,24 +39,48 @@ var Progress = function Progress(props) {
         "animated",
         "children",
         "lazy",
-        "delay"
+        "delay",
+        "borderRadius",
+        "fontSize",
+        "activeMode",
+        "duration",
+        "ariaLabel",
+        "onActiveEnd"
     ]);
     var classPrefix = 'nut-progress';
     var _obj;
     var classesInner = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-inner"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-active"), animated), _obj));
     var stylesOuter = {
         height: "".concat(strokeWidth, "px"),
+        borderRadius: borderRadius && parseInt(borderRadius.toString()),
         background: background
     };
     var _useState = (0, _sliced_to_array._)((0, _react.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")
     };
     (0, _react.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 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), intersecting = _useState1[0], setIntersecting = _useState1[1];
     var progressRef = (0, _react.useRef)(null);
@@ -108,25 +132,22 @@ var Progress = function Progress(props) {
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         ref: progressRef,
         className: (0, _classnames.default)(classPrefix, className),
-        style: style
+        style: style,
+        "aria-label": ariaLabel
     }, rest), /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter
     }, /*#__PURE__*/ _react.default.createElement("div", {
         className: classesInner,
-        style: stylesInner
-    }, showText && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-text"),
-        style: rtl ? {
-            right: "".concat(displayPercent, "%")
-        } : {
-            left: "".concat(displayPercent, "%")
+        style: stylesInner,
+        onTransitionEnd: function onTransitionEnd() {
+            onActiveEnd === null || onActiveEnd === void 0 ? void 0 : onActiveEnd();
         }
-    }, children || /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-text-inner"),
+    })), showText && /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-text"),
         style: {
-            background: color
+            fontSize: fontSize && parseInt(fontSize.toString())
         }
-    }, percent, "%")))));
+    }, children || "".concat(percent, "%")));
 };
 Progress.displayName = 'NutProgress';

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/packages/range/range.js

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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;