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

package/dist/es/packages/calendaritem/calendaritem.js

@@ -5,7 +5,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
-import { ScrollView } from "@tarojs/components";
+import { ScrollView, View } from "@tarojs/components";
 import Taro, { nextTick } from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { Utils, getCurrMonthData, getDaysStatus, getPreMonthDates } from "../../utils/date";
@@ -42,7 +42,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, children = _$_object_spread.children, popup = _$_object_spread.popup, type = _$_object_spread.type, autoBackfill = _$_object_spread.autoBackfill, title = _$_object_spread.title, defaultValue = _$_object_spread.defaultValue, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, showToday = _$_object_spread.showToday, startText = _$_object_spread.startText, endText = _$_object_spread.endText, confirmText = _$_object_spread.confirmText, showTitle = _$_object_spread.showTitle, showSubTitle = _$_object_spread.showSubTitle, scrollAnimation = _$_object_spread.scrollAnimation, firstDayOfWeek = _$_object_spread.firstDayOfWeek, disableDate = _$_object_spread.disableDate, renderHeaderButtons = _$_object_spread.renderHeaderButtons, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, value = _$_object_spread.value, onConfirm = _$_object_spread.onConfirm, onUpdate = _$_object_spread.onUpdate, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange;
+    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, children = _$_object_spread.children, popup = _$_object_spread.popup, type = _$_object_spread.type, autoBackfill = _$_object_spread.autoBackfill, title = _$_object_spread.title, defaultValue = _$_object_spread.defaultValue, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, showToday = _$_object_spread.showToday, startText = _$_object_spread.startText, endText = _$_object_spread.endText, confirmText = _$_object_spread.confirmText, showTitle = _$_object_spread.showTitle, showSubTitle = _$_object_spread.showSubTitle, scrollAnimation = _$_object_spread.scrollAnimation, firstDayOfWeek = _$_object_spread.firstDayOfWeek, disableDate = _$_object_spread.disableDate, renderHeaderButtons = _$_object_spread.renderHeaderButtons, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, renderBottomButton = _$_object_spread.renderBottomButton, value = _$_object_spread.value, onConfirm = _$_object_spread.onConfirm, onUpdate = _$_object_spread.onUpdate, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange;
     var weekdays = locale.calendaritem.weekdays;
     var weeks = _to_consumable_array(weekdays.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdays.slice(0, firstDayOfWeek)));
     var monthTitle = locale.calendaritem.monthTitle;
@@ -279,6 +279,7 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                     type: 'curr'
                 }, monthsData[current.current], true);
             } else if (type === 'multiple') {
+                ;
                 _to_consumable_array(currentDate).forEach(function(item) {
                     var dateArr = splitDate(item);
                     var currentIndex = current.current;
@@ -337,10 +338,14 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     };
     useEffect(function() {
         setCurrentDate(resetDefaultValue() || []);
-        popup && resetRender();
     }, [
         defaultValue
     ]);
+    useEffect(function() {
+        popup && resetRender();
+    }, [
+        currentDate
+    ]);
     // 暴露出的API
     var scrollToDate = function(date) {
         if (Utils.compareDate(date, propStartDate)) {
@@ -385,6 +390,7 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         var scrollTop = e.target.scrollTop;
         Taro.getEnv() === 'WEB' && setScrollTop(scrollTop);
         var current = Math.floor(scrollTop / avgHeight);
+        if (current < 0) return;
         if (!monthsData[current + 1]) return;
         var nextTop = monthsData[current + 1].scrollTop;
         var nextHeight = monthsData[current + 1].cssHeight;
@@ -461,13 +467,16 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                 if (isFirst) {
                     state.currDateArray.push(_to_consumable_array(days));
                 } else if (hasIndex !== '') {
+                    ;
                     currentDate.splice(hasIndex, 1);
                     state.currDateArray.splice(hasIndex, 1);
                 } else {
+                    ;
                     currentDate.push(days[3]);
                     state.currDateArray.push(_to_consumable_array(days));
                 }
             } else {
+                ;
                 currentDate.push(days[3]);
                 state.currDateArray = [
                     _to_consumable_array(days)
@@ -556,19 +565,19 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         return currentDate.length >= 2 && (type === 'range' || type === 'week') && day.type === 'active' && isEnd(getCurrDate(day, month), currentDate);
     };
     var renderHeader = function() {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: headerClasses
-        }, showTitle && /*#__PURE__*/ React.createElement("div", {
+        }, showTitle && /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-title")
-        }, title || locale.calendaritem.title), renderHeaderButtons && /*#__PURE__*/ React.createElement("div", {
+        }, title || locale.calendaritem.title), renderHeaderButtons && /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-header-buttons")
-        }, renderHeaderButtons()), showSubTitle && /*#__PURE__*/ React.createElement("div", {
+        }, renderHeaderButtons()), showSubTitle && /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-sub-title")
-        }, yearMonthTitle), /*#__PURE__*/ React.createElement("div", {
+        }, yearMonthTitle), /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-weeks"),
             ref: weeksPanel
         }, weeks.map(function(item) {
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 className: "".concat(classPrefix, "-week-item"),
                 key: item
             }, item);
@@ -583,25 +592,25 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             className: "".concat(classPrefix, "-content"),
             onScroll: monthsViewScroll,
             ref: monthsRef
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-pannel"),
             ref: monthsPanel
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: "viewArea",
             ref: viewAreaRef,
             style: {
                 transform: "translateY(".concat(translateY, "px)")
             }
         }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 className: "".concat(classPrefix, "-month"),
                 key: key
-            }, /*#__PURE__*/ React.createElement("div", {
+            }, /*#__PURE__*/ React.createElement(View, {
                 className: "".concat(classPrefix, "-month-title")
-            }, month.title), /*#__PURE__*/ React.createElement("div", {
+            }, month.title), /*#__PURE__*/ React.createElement(View, {
                 className: "".concat(classPrefix, "-days")
             }, month.monthData.map(function(day, i) {
-                return /*#__PURE__*/ React.createElement("div", {
+                return /*#__PURE__*/ React.createElement(View, {
                     className: [
                         "".concat(classPrefix, "-day"),
                         getClasses(day, month)
@@ -610,33 +619,35 @@ export var CalendarItem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                         chooseDay(day, month);
                     },
                     key: i
-                }, /*#__PURE__*/ React.createElement("div", {
+                }, /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-day")
-                }, renderDay ? renderDay(day) : day.day), !isStartTip(day, month) && renderDayTop && /*#__PURE__*/ React.createElement("div", {
+                }, renderDay ? renderDay(day) : day.day), !isStartTip(day, month) && renderDayTop && /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-info-top")
-                }, renderDayTop(day)), !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && /*#__PURE__*/ React.createElement("div", {
+                }, renderDayTop(day)), !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-info-bottom")
-                }, renderDayBottom(day)), !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && /*#__PURE__*/ React.createElement("div", {
+                }, renderDayBottom(day)), !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-info-curr")
-                }, locale.calendaritem.today), isStartTip(day, month) && /*#__PURE__*/ React.createElement("div", {
+                }, locale.calendaritem.today), isStartTip(day, month) && /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-info ").concat(isStartAndEnd(currentDate) ? "".concat(classPrefix, "-day-info-top") : '')
-                }, startText || locale.calendaritem.start), isEndTip(day, month) && /*#__PURE__*/ React.createElement("div", {
+                }, startText || locale.calendaritem.start), isEndTip(day, month) && /*#__PURE__*/ React.createElement(View, {
                     className: "".concat(classPrefix, "-day-info")
                 }, endText || locale.calendaritem.end));
             })));
         }))));
     };
     var renderFooter = function() {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "nut-calendar-footer"
-        }, children, /*#__PURE__*/ React.createElement("div", {
+        }, children, /*#__PURE__*/ React.createElement(View, {
             className: "calendar-confirm-btn",
             onClick: confirm
-        }, confirmText || locale.confirm));
+        }, renderBottomButton ? renderBottomButton() : /*#__PURE__*/ React.createElement(View, {
+            className: "calendar-confirm-btn"
+        }, confirmText || locale.confirm)));
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(View, {
         className: classes,
         style: style
-    }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : ''));
+    }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : '');
 });
 CalendarItem.displayName = 'NutCalendarItem';

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

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/es/packages/card/card.d.ts

@@ -1,60 +1,16 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface CardProps extends BasicComponent {
-    /**
-    * 左侧图片 Url
-    * @default -
-    */
-    src: string
-    /**
-    * 标题
-    * @default -
-    */
-    title: string
-    /**
-    * 商品价格
-    * @default -
-    */
-    price: string
-    /**
-    * 会员价格
-    * @default -
-    */
-    vipPrice: string
-    /**
-    * 店铺介绍
-    * @default -
-    */
-    shopDescription: string
-    /**
-    * 配送方式
-    * @default -
-    */
-    delivery: string
-    /**
-    * 店铺名称
-    * @default -
-    */
-    shopName: string
-    /**
-    * 自定义商品介绍
-    * @default -
-    */
-    description: React.ReactNode
-    /**
-    * 店铺介绍自定义
-    * @default -
-    */
-    tag: React.ReactNode
-    /**
-    * 价格后方自定义内容
-    * @default -
-    */
-    priceTag: React.ReactNode
-    /**
-    * 右下角内容自定义
-    * @default -
-    */
-    extra: React.ReactNode
+    src: string;
+    title: string;
+    price: string;
+    vipPrice: string;
+    shopDescription: string;
+    delivery: string;
+    shopName: string;
+    description: React.ReactNode;
+    tag: React.ReactNode;
+    priceTag: React.ReactNode;
+    extra: React.ReactNode;
 }
 export declare const Card: FunctionComponent<Partial<CardProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/card/card.js

@@ -6,6 +6,7 @@ import { View } from "@tarojs/components";
 import classNames from "classnames";
 import Price from "../price/index";
 import Tag from "../tag/index";
+import Image from "../image/index";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     src: '',
@@ -42,9 +43,8 @@ export var Card = function(props) {
         style: style
     }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-left")
-    }, /*#__PURE__*/ React.createElement("img", {
-        src: src,
-        alt: ""
+    }, /*#__PURE__*/ React.createElement(Image, {
+        src: src
     })), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-right")
     }, /*#__PURE__*/ React.createElement(View, {

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

@@ -37,28 +37,13 @@
       line-height: 18px;
       margin-top: 9px;
 
-      .nut-price {
-        .nut-price-big {
-          font-size: 18px;
-        }
-
-        .nut-price-symbol,
-        .nut-price-point,
-        .nut-price-small {
-          font-size: 12px;
-        }
-      }
-
       &-origin {
         &.nut-price {
           margin-left: 2px;
-          color: #d2a448;
-
-          .nut-price-big,
           .nut-price-symbol,
-          .nut-price-point,
-          .nut-price-small {
-            font-size: 12px;
+          .nut-price-integer,
+          .nut-price-decimal {
+            color: #d2a448;
           }
         }
       }

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

@@ -1,49 +1,72 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
-  font-size: var(--nutui-font-size-4, 16px);
+  font-size: var(--nutui-font-size-l, 16px);
   display: flex;
   flex-direction: row;
   align-items: baseline;
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-price-color, var(--nutui-color-text-help));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-darkgray-color, var(--nutui-gray-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));
 }
 .nut-price-symbol {
-  font-size: var(--nutui-price-symbol-medium-size, 14px);
-  padding-right: var(--nutui-price-symbol-padding-right, 1px);
+  padding-right: var(--nutui-price-symbol-padding-right, 0px);
+}
+.nut-price-symbol-xlarge {
+  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-big-size, 18px);
+  font-size: var(--nutui-price-symbol-large-size, 12px);
+}
+.nut-price-symbol-normal {
+  font-size: var(--nutui-price-symbol-normal-size, 12px);
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 10px);
+  font-size: var(--nutui-price-symbol-small-size, 12px);
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
-  padding-left: var(--nutui-price-symbol-padding-right, 1px);
+  padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
-.nut-price-integer {
-  font-size: var(--nutui-price-integer-medium-size, 16px);
+.nut-price-integer-xlarge {
+  font-size: var(--nutui-price-integer-xlarge-size, 24px);
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-big-size, 24px);
+  font-size: var(--nutui-price-integer-large-size, 18px);
+}
+.nut-price-integer-normal {
+  font-size: var(--nutui-price-integer-normal-size, 16px);
 }
 .nut-price-integer-small {
   font-size: var(--nutui-price-integer-small-size, 12px);
 }
-.nut-price-decimal {
-  font-size: var(--nutui-price-decimal-medium-size, 14px);
+.nut-price-decimal-xlarge {
+  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-big-size, 18px);
+  font-size: var(--nutui-price-decimal-large-size, 12px);
+}
+.nut-price-decimal-normal {
+  font-size: var(--nutui-price-decimal-normal-size, 12px);
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 10px);
+  font-size: var(--nutui-price-decimal-small-size, 12px);
 }
 .nut-price-line {
-  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  font-size: var(--nutui-price-line-font-size, 12px);
-  color: var(--nutui-price-line-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));
 }
 
 .nut-tag {
@@ -52,7 +75,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
   border-radius: var(--nutui-tag-border-radius, 2px);
   height: var(--nutui-tag-height, 14px);
   color: var(--nutui-tag-color, #ffffff);
@@ -61,31 +84,32 @@
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
   color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text-plain {
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
 }
 .nut-tag-default {
-  background: var(--nutui-tag-background-color, var(--nutui-gray-7, #1a1a1a));
+  background: var(--nutui-tag-background-color, var(--nutui-gray-7));
 }
 .nut-tag-primary {
   background: #fa2c19;
 }
 .nut-tag-info {
-  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #1988fa));
+  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-tag-success {
   background: var(--nutui-tag-success-background-color, #4fc08d);
 }
 .nut-tag-danger {
-  background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  background: var(--nutui-tag-danger-background-color, var(--nutui-red-2));
 }
 .nut-tag-warning {
-  background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #c47600));
+  background: var(--nutui-tag-warning-background-color, var(--nutui-yellow-2));
 }
 .nut-tag-round {
   border-radius: var(--nutui-tag-round-border-radius, 8px);
@@ -100,11 +124,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
+  color: var(--nutui-tag-color, #ffffff);
+  margin-left: 4px;
 }
 .nut-tag-plain {
   background-color: #fff;
-  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-gray-7, #1a1a1a);
+  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-gray-7);
 }
 
 [dir=rtl] .nut-tag .nut-icon,
@@ -142,7 +168,7 @@
   word-break: break-all;
   line-height: 1.5;
   font-size: 14px;
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
 }
 .nut-card-right-price {
   display: flex;
@@ -151,23 +177,13 @@
   line-height: 18px;
   margin-top: 9px;
 }
-.nut-card-right-price .nut-price .nut-price-big {
-  font-size: 18px;
-}
-.nut-card-right-price .nut-price .nut-price-symbol,
-.nut-card-right-price .nut-price .nut-price-point,
-.nut-card-right-price .nut-price .nut-price-small {
-  font-size: 12px;
-}
 .nut-card-right-price-origin.nut-price {
   margin-left: 2px;
-  color: #d2a448;
 }
-.nut-card-right-price-origin.nut-price .nut-price-big,
 .nut-card-right-price-origin.nut-price .nut-price-symbol,
-.nut-card-right-price-origin.nut-price .nut-price-point,
-.nut-card-right-price-origin.nut-price .nut-price-small {
-  font-size: 12px;
+.nut-card-right-price-origin.nut-price .nut-price-integer,
+.nut-card-right-price-origin.nut-price .nut-price-decimal {
+  color: #d2a448;
 }
 .nut-card-right-other {
   display: flex;
@@ -177,7 +193,7 @@
 .nut-card-right-other .nut-tag {
   padding: 0 2px;
   margin-right: 5px;
-  font-size: var(--nutui-font-size-1, 10px);
+  font-size: var(--nutui-font-size-xs, 11px);
 }
 .nut-card-right-shop {
   display: flex;
@@ -186,7 +202,7 @@
 }
 .nut-card-right-shop-name {
   line-height: 1.5;
-  color: var(--nutui-gray-6, #505259);
+  color: var(--nutui-gray-6);
   font-size: 12px;
   padding-top: 4px;
 }