@nutui/nutui-react-taro 3.0.0-beta.10 → 3.0.0-beta.12

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

@@ -0,0 +1,363 @@
+@charset "UTF-8";
+
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-popup {
+  position: fixed;
+  min-height: 46%;
+  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-default-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-default-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);
+  }
+}
+@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);
+  }
+}
+@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);
+  }
+}
+@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);
+  }
+}
+@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-default-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/popup/types.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { OverlayProps } from "../overlay/types";
+export type Teleport = HTMLElement | (() => HTMLElement) | null;
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'none';
+export type CloseIconPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface PopupProps extends OverlayProps {
+    position: Position;
+    transition: string;
+    overlayStyle: React.CSSProperties;
+    overlayClassName: string;
+    closeable: boolean;
+    closeIconPosition: CloseIconPosition;
+    closeIcon: ReactNode;
+    left?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    destroyOnClose: boolean;
+    portal: Teleport;
+    overlay: boolean;
+    round: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onOverlayClick: (e: React.MouseEvent) => boolean | void;
+    onCloseIconClick: (e: React.MouseEvent) => boolean | void;
+}

package/dist/es/packages/popup/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/popup/types.taro.d.ts

@@ -0,0 +1,8 @@
+import { ITouchEvent } from '@tarojs/components';
+import { PopupProps as PopupWebProps } from './types';
+export type { CloseIconPosition, Teleport } from './types';
+export type PopupProps = Omit<PopupWebProps, 'onOverlayClick' | 'onCloseIconClick' | 'onClick'> & {
+    onClick: (event: ITouchEvent) => void;
+    onOverlayClick: (e: ITouchEvent) => boolean | void;
+    onCloseIconClick: (e: ITouchEvent) => boolean | void;
+};

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

@@ -20,7 +20,7 @@
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
   font-family: "JD-Bold";
-  color: var(--nutui-price-color, var(--nutui-brand-6));
+  color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-price-symbol {
   padding-right: var(--nutui-price-symbol-padding-right, 0px);

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

@@ -11,7 +11,7 @@ import pxTransform from "../../utils/px-transform";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
 import useUuid from "../../utils/use-uuid";
-import { harmony, harmonyAndRn, rn, web } from "../../utils/platform-taro";
+import { harmony, web } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     percent: 0,
     showText: false,
@@ -132,7 +132,7 @@ export var Progress = function(props) {
     useEffect(function() {
         if (web()) {
             handleWebObserver();
-        } else if (!harmonyAndRn()) {
+        } else if (!harmony()) {
             handleOtherObserver();
         }
     }, []);
@@ -147,19 +147,16 @@ export var Progress = function(props) {
         if (children) {
             return 0;
         }
-        if (!harmonyAndRn()) {
+        if (!harmony()) {
             return Math.floor("".concat(percent, "%").length * 9 / 2);
         }
-        if (rn()) {
-            return "".concat(percent, "%").length * 9 + 4;
-        }
         return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
     };
     var computeInnerStyle = function() {
         var style = {
             backgroundColor: color || '#ff0f23'
         };
-        if (harmonyAndRn()) {
+        if (harmony()) {
             style.width = harmony() ? pxTransform("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
         }
         return style;

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

@@ -12,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-gray-3));
+  background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";

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

@@ -0,0 +1,77 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-progress {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+.nut-progress-outer {
+  flex: auto;
+  border-radius: 12px;
+  height: 10px;
+  background: #f2f3f5;
+}
+.nut-progress-outer .nut-progress-active:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 12px;
+  animation: progressActive 2s ease-in-out infinite;
+}
+.nut-progress-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: all 0.4s;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+}
+.nut-progress-text {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -4px;
+  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: #ffffff;
+  padding: 0 5px;
+  border-radius: 5px;
+  font-size: 9px;
+  line-height: 1;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+}
+@keyframes progressActive {
+  0% {
+    background: rgba(255, 255, 255, 0.1);
+    width: 0;
+  }
+  20% {
+    background: rgba(255, 255, 255, 0.5);
+    width: 0;
+  }
+  to {
+    background: rgba(255, 255, 255, 0);
+    width: 100%;
+  }
+}
+
+[dir=rtl] .nut-progress-text,
+.nut-rtl .nut-progress-text {
+  transform: translate(50%);
+}

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -15,7 +15,6 @@ import { rubberbandIfOutOfBounds } from "../../utils/rubberband";
 import { sleep } from "../../utils/sleep";
 import { ComponentDefaults } from "../../utils/typings";
 import pxTransform from "../../utils/px-transform";
-import { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -87,11 +86,6 @@ export var PullToRefresh = function(p) {
             setStatus(height > threshold ? 'canRelease' : 'pulling');
         }
         clearTimeout(timer.current);
-        if (rn()) {
-            timer.current = setTimeout(function() {
-                handleTouchEnd();
-            }, 300);
-        }
     };
     function _doRefresh() {
         _doRefresh = _async_to_generator(function() {
@@ -171,6 +165,7 @@ export var PullToRefresh = function(p) {
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,
         style: props.style,
+        catchMove: true,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd

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

@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-5);
+  color: var(--nutui-color-text-help, #888b94);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -24,13 +24,13 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
 }
 .nut-pulltorefresh-primary-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-head-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-status-text {
   color: #ffffff;