@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/es/packages/popup/style/style.harmony.css

@@ -0,0 +1,375 @@
+@charset "UTF-8";
+
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-popup {
+  position: fixed;
+  min-height: 26%;
+  max-height: 100%;
+  background-color: #ffffff;
+  -webkit-overflow-scrolling: touch;
+  font-size: 14px;
+}
+.nut-popup-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 0;
+  padding: 16px;
+  position: relative;
+}
+.nut-popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-popup-title-title {
+  color: #1a1a1a;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 16px;
+}
+.nut-popup-title-description {
+  color: #505259;
+  font-size: 14px;
+  font-weight: 400;
+}
+.nut-popup-title-description-gap {
+  margin-top: 8px;
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+}
+.nut-popup-title-right {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  width: 20px;
+  height: 20px;
+  color: #1a1a1a;
+  cursor: pointer;
+}
+.nut-popup-title-right:active {
+  opacity: 0.7;
+}
+.nut-popup-title-right-top-left {
+  top: 16px;
+  left: 16px;
+}
+.nut-popup-title-right-bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+.nut-popup-title-right-bottom-right {
+  right: 16px;
+  bottom: 16px;
+}
+.nut-popup-center {
+  top: 50%;
+  left: 50%;
+  min-height: 10%;
+  max-width: 295px;
+  transform: translate(-50%, -50%);
+}
+.nut-popup-center.nut-popup-round {
+  border-radius: 12px;
+}
+.nut-popup-bottom, .nut-popup-top {
+  max-height: 87%;
+}
+.nut-popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-bottom.nut-popup-round {
+  border-radius: 12px 12px 0 0;
+}
+.nut-popup-right {
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-right.nut-popup-round {
+  border-radius: 12px 0 0 12px;
+}
+.nut-popup-left {
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-left.nut-popup-round {
+  border-radius: 0 12px 12px 0;
+}
+.nut-popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-top.nut-popup-round {
+  border-radius: 0 0 12px 12px;
+}
+.nut-popup-slide {
+  /* 从顶部滑出 */
+  /* 从右侧滑出 */
+  /* 从底部滑出 */
+  /* 从左侧滑出 */
+}
+@keyframes popup-scale-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes popup-scale-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+.nut-popup-slide-none-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-none-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-out;
+  animation-duration: 0.3s;
+}
+@keyframes popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes popup-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.nut-popup-slide-center-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-center-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-out;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-top-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
+}
+@keyframes popup-slide-top-exit {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.nut-popup-slide-top-enter-active {
+  transform: translate3d(0, 0%, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-top-appear-active {
+  transform: translate3d(0, 0%, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-top-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+@keyframes popup-slide-right-exit {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.nut-popup-slide-right-enter-active {
+  transform: translate3d(0, 0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-right-appear-active {
+  transform: translate3d(0, 0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-right-exit {
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-bottom-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
+}
+@keyframes slide-bottom-exit {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.nut-popup-slide-bottom-enter-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-bottom-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-bottom-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-bottom-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-bottom-exit {
+  animation-fill-mode: both;
+  animation-name: slide-bottom-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+@keyframes popup-slide-left-exit {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.nut-popup-slide-left-enter-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-exit;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-exit-done {
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-exit;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+  display: none;
+}
+.nut-popup .nut-overflow-hidden {
+  overflow: hidden;
+}
+
+[dir=rtl] .nut-popup-title-left {
+  left: auto;
+  right: 16px;
+}
+
+.nut-rtl .nut-popup-title-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right {
+  right: auto;
+  left: 16px;
+}
+.nut-rtl .nut-popup-title-right {
+  right: auto;
+  left: 16px;
+}
+[dir=rtl] .nut-popup-title-right-top-left {
+  left: auto;
+  right: 16px;
+}
+.nut-rtl .nut-popup-title-right-top-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right-bottom-left {
+  left: auto;
+  right: 16px;
+}
+.nut-rtl .nut-popup-title-right-bottom-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right-bottom-right {
+  right: auto;
+  left: 16px;
+}
+.nut-rtl .nut-popup-title-right-bottom-right {
+  right: auto;
+  left: 16px;
+}
+[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
+.nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
+  transform: rotate(180deg);
+}
+[dir=rtl] .nut-popup-center,
+.nut-rtl .nut-popup-center {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+[dir=rtl] .nut-popup-bottom,
+.nut-rtl .nut-popup-bottom {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-popup-top,
+.nut-rtl .nut-popup-top {
+  left: auto;
+  right: 0;
+}

package/dist/es/packages/price/style/style.harmony.css

@@ -0,0 +1,96 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-price {
+  direction: ltr;
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+.nut-price-symbol {
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-integer {
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-decimal {
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-darkgray .nut-price-integer {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-primary .nut-price-symbol {
+  font-family: "JD-Bold";
+  color: #ff0f23;
+}
+.nut-price-primary .nut-price-integer {
+  font-family: "JD-Bold";
+  color: #ff0f23;
+}
+.nut-price-primary .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: #ff0f23;
+}
+.nut-price-symbol {
+  padding-right: 0px;
+}
+.nut-price-symbol-xlarge {
+  font-size: 12px;
+}
+.nut-price-symbol-large {
+  font-size: 12px;
+}
+.nut-price-symbol-normal {
+  font-size: 12px;
+}
+.nut-price-symbol-small {
+  font-size: 12px;
+}
+.nut-price-symbol-rtl {
+  padding-right: 0;
+  padding-left: 0px;
+}
+.nut-price-integer-xlarge {
+  font-size: 24px;
+}
+.nut-price-integer-large {
+  font-size: 18px;
+}
+.nut-price-integer-normal {
+  font-size: 16px;
+}
+.nut-price-integer-small {
+  font-size: 12px;
+}
+.nut-price-decimal-xlarge {
+  font-size: 12px;
+}
+.nut-price-decimal-large {
+  font-size: 12px;
+}
+.nut-price-decimal-normal {
+  font-size: 12px;
+}
+.nut-price-decimal-small {
+  font-size: 12px;
+}
+.nut-price-line {
+  text-decoration: line-through #888b94;
+}

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

@@ -21,7 +21,8 @@ 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, // tc
+    showInfo = _ref.showInfo, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeColor = _ref.activeColor, backgroundColor = _ref.backgroundColor, active = _ref.active, activeMode = _ref.activeMode, duration = _ref.duration, ariaLabel = _ref.ariaLabel, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "percent",
@@ -32,24 +33,51 @@ export var Progress = function(props) {
         "animated",
         "children",
         "lazy",
-        "delay"
+        "delay",
+        "showInfo",
+        "borderRadius",
+        "fontSize",
+        "activeColor",
+        "backgroundColor",
+        "active",
+        "activeMode",
+        "duration",
+        "ariaLabel",
+        "onActiveEnd"
     ]);
     var classPrefix = 'nut-progress';
+    var _props_showText, _ref1;
+    var effectiveShowText = (_ref1 = (_props_showText = props.showText) !== null && _props_showText !== void 0 ? _props_showText : showInfo) !== null && _ref1 !== void 0 ? _ref1 : defaultProps.showText;
+    var _props_color, _ref2;
+    var effectiveColor = (_ref2 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : activeColor) !== null && _ref2 !== void 0 ? _ref2 : defaultProps.color;
+    var _props_background, _ref3;
+    var effectiveBgColor = (_ref3 = (_props_background = props.background) !== null && _props_background !== void 0 ? _props_background : backgroundColor) !== null && _ref3 !== void 0 ? _ref3 : defaultProps.background;
+    var _props_animated, _ref4;
+    var effectiveAnimated = (_ref4 = (_props_animated = props.animated) !== null && _props_animated !== void 0 ? _props_animated : active) !== null && _ref4 !== void 0 ? _ref4 : defaultProps.animated;
     var _obj;
-    var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-inner"), true), _define_property(_obj, "".concat(classPrefix, "-active"), animated), _obj));
-    var stylesOuter = {
-        width: '100%',
-        backgroundColor: background
-    };
+    var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-inner"), true), _define_property(_obj, "".concat(classPrefix, "-active"), effectiveAnimated), _obj));
     var _useState = _sliced_to_array(useState(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
-    var stylesInner = {
-        width: "".concat(displayPercent, "%"),
-        background: color || '#FF0F23'
+    var getStyles = function() {
+        // 基础样式
+        var baseStyles = {
+            height: strokeWidth && pxTransform(Number(strokeWidth)),
+            borderRadius: borderRadius && pxTransform(parseInt(borderRadius.toString()))
+        };
+        var transitionStyle = {
+            transition: "width ".concat(duration || 300, "ms ease-in-out")
+        };
+        return {
+            outer: _object_spread({
+                width: '100%',
+                backgroundColor: effectiveBgColor
+            }, baseStyles),
+            inner: _object_spread({
+                width: "".concat(displayPercent, "%"),
+                background: effectiveColor || '#FF0F23'
+            }, baseStyles, transitionStyle)
+        };
     };
-    if (strokeWidth) {
-        stylesOuter.height = pxTransform(Number(strokeWidth));
-        stylesInner.height = pxTransform(Number(strokeWidth));
-    }
+    var _getStyles = getStyles(), stylesOuter = _getStyles.outer, stylesInner = _getStyles.inner;
     var handlePercent = function() {
         var timer = null;
         if (delay) {
@@ -64,9 +92,24 @@ export var Progress = function(props) {
         };
     };
     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);
@@ -154,7 +197,8 @@ export var Progress = function(props) {
     };
     var computeInnerStyle = function() {
         var style = {
-            backgroundColor: color || '#ff0f23'
+            backgroundColor: effectiveColor || '#ff0f23',
+            fontSize: fontSize && pxTransform(parseInt(fontSize.toString()))
         };
         if (harmony()) {
             style.width = harmony() ? pxTransform("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
@@ -165,7 +209,8 @@ export var Progress = function(props) {
         ref: progressRef,
         id: selector,
         className: classNames(classPrefix, className),
-        style: style
+        style: style,
+        "aria-label": ariaLabel
     }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter
@@ -173,22 +218,13 @@ export var Progress = function(props) {
         className: classesInner,
         style: _object_spread_props(_object_spread({}, stylesInner), {
             position: 'relative'
-        })
-    }, showText && /*#__PURE__*/ React.createElement(View, {
-        style: _define_property({
-            position: 'relative'
-        }, rtl ? 'left' : 'right', computeRight())
-    }, /*#__PURE__*/ React.createElement(View, {
+        }),
+        onTransitionEnd: onActiveEnd
+    })), effectiveShowText && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-text"),
-        style: _object_spread_props(_object_spread({}, getTextStyle()), {
-            height: // eslint-disable-next-line no-nested-ternary
-            harmony() ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18) : strokeWidth ? Number(strokeWidth) + 8 : 18,
-            position: 'absolute',
-            top: -(strokeWidth ? (Number(strokeWidth) + 8 - 9) / 2 + 5 : 9)
-        })
-    }, children || /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-text-inner"),
-        style: computeInnerStyle()
-    }, "".concat(percent, "%")))))));
+        style: {
+            fontSize: fontSize && parseInt(fontSize.toString())
+        }
+    }, 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% {