@nutui/nutui-react 3.0.0-beta.2 → 3.0.0-beta.3

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

@@ -2,70 +2,18 @@ import React, { ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import type { CalendarCardDay, CalendarCardMonth, CalendarCardRef, CalendarCardValue } from './types';
 export interface CalendarCardProps extends BasicComponent {
-    /**
-    * 类型，单个日期 single，多个日期 multiple，日期范围 range，周选择 week
-    * @default single
-    */
-    type: 'single' | 'multiple' | 'range' | 'week'
-    /**
-    * 受控模式下的值，与 onChange 搭配使用
-    * @default -
-    */
-    value?: CalendarCardValue
-    /**
-    * 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式
-    * @default -
-    */
-    defaultValue?: CalendarCardValue
-    /**
-    * 设置周起始日，0 为周日，1 为周一
-    * @default 1
-    */
-    firstDayOfWeek?: number
-    /**
-    * 限制范围开始日期
-    * @default -
-    */
-    startDate?: Date
-    /**
-    * 限制范围结束日期
-    * @default -
-    */
-    endDate?: Date
-    /**
-    * 设置不可选日期
-    * @default -
-    */
-    disableDay?: (day: CalendarCardDay) => boolean
-    /**
-    * 日期信息
-    * @default -
-    */
-    renderDay?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期顶部信息
-    * @default -
-    */
-    renderDayTop?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期底部信息
-    * @default -
-    */
-    renderDayBottom?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 点击后触发
-    * @default -
-    */
-    onDayClick?: (day: CalendarCardDay) => void
-    /**
-    * 切换月份时触发
-    * @default -
-    */
-    onPageChange: (data: CalendarCardMonth) => void
-    /**
-    * 选择值发生变化时触发
-    * @default -
-    */
-    onChange: (value: CalendarCardValue) => void
+    type: 'single' | 'multiple' | 'range' | 'week';
+    value?: CalendarCardValue;
+    defaultValue?: CalendarCardValue;
+    firstDayOfWeek?: number;
+    startDate?: Date;
+    endDate?: Date;
+    disableDay?: (day: CalendarCardDay) => boolean;
+    renderDay?: (day: CalendarCardDay) => ReactNode;
+    renderDayTop?: (day: CalendarCardDay) => ReactNode;
+    renderDayBottom?: (day: CalendarCardDay) => ReactNode;
+    onDayClick?: (day: CalendarCardDay) => void;
+    onPageChange: (data: CalendarCardMonth) => void;
+    onChange: (value: CalendarCardValue) => void;
 }
 export declare const CalendarCard: React.ForwardRefExoticComponent<Partial<CalendarCardProps> & React.RefAttributes<CalendarCardRef>>;

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 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 } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import classNames from "classnames";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
 import { ComponentDefaults } from "../../utils/typings";
@@ -70,7 +70,7 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(val);
         }
     };
-    var getDays = function(month) {
+    var getDays = useCallback(function(month) {
         var y = month.year;
         var m = month.month;
         var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
@@ -87,13 +87,18 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             });
         }
         return days;
-    };
+    }, [
+        firstDayOfWeek
+    ]);
     useEffect(function() {
         var newDays = getDays(month);
         setDays(newDays);
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-        month
+        month,
+        getDays,
+        onPageChange,
+        firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
         return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);

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

@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

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

@@ -47,6 +47,9 @@
   cursor: auto;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 12px;
   font-size: 12px;
@@ -57,11 +60,21 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-color-primary-text, #ffffff);
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
+.nut-calendarcard-day.active .nut-calendarcard-day-top,
+.nut-calendarcard-day.active .nut-calendarcard-day-inner,
+.nut-calendarcard-day.active .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-primary-text, #ffffff);
+}
 .nut-calendarcard-day.start, .nut-calendarcard-day.end {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-calendarcard-day.start .nut-calendarcard-day-top,
+.nut-calendarcard-day.start .nut-calendarcard-day-inner,
+.nut-calendarcard-day.start .nut-calendarcard-day-bottom, .nut-calendarcard-day.end .nut-calendarcard-day-top,
+.nut-calendarcard-day.end .nut-calendarcard-day-inner,
+.nut-calendarcard-day.end .nut-calendarcard-day-bottom {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.start {
@@ -74,15 +87,27 @@
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-calendarcard-day.mid .nut-calendarcard-day-top,
+.nut-calendarcard-day.mid .nut-calendarcard-day-inner,
+.nut-calendarcard-day.mid .nut-calendarcard-day-bottom {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-calendarcard-day .nut-calendar-day-info {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.prev, .nut-calendarcard-day.next, .nut-calendarcard-day.disabled {
-  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
+.nut-calendarcard-day.prev .nut-calendarcard-day-top,
+.nut-calendarcard-day.prev .nut-calendarcard-day-inner,
+.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, .nut-calendarcard-day.next .nut-calendarcard-day-top,
+.nut-calendarcard-day.next .nut-calendarcard-day-inner,
+.nut-calendarcard-day.next .nut-calendarcard-day-bottom, .nut-calendarcard-day.disabled .nut-calendarcard-day-top,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-inner,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 
 [dir=rtl] .nut-calendarcard-header-left .left, [dir=rtl] .nut-calendarcard-header-right .left,
 .nut-rtl .nut-calendarcard-header-left .left,

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

@@ -3,20 +3,8 @@ import { BasicComponent } from "../../utils/typings";
 export type LoadingType = 'spinner' | 'circular';
 export type LoadingDirection = 'horizontal' | 'vertical';
 export interface LoadingProps extends BasicComponent {
-    /**
-    * loading图标的样式
-    * @default circular
-    */
-    type: LoadingType
-    /**
-    * loading图标和文字的排列方式
-    * @default horizontal
-    */
-    direction: LoadingDirection
-    /**
-    * 自定义loading的图标
-    * @default -
-    */
-    icon?: ReactNode
+    type: LoadingType;
+    direction: LoadingDirection;
+    icon?: ReactNode;
 }
 export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/navbar/navbar.js

@@ -4,6 +4,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { getRect } from "../../utils/use-client-rect";
 import { SafeArea } from "../safearea/safearea";
@@ -20,6 +21,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var NavBar = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -63,11 +65,12 @@ export var NavBar = function(props) {
         back
     ]);
     var renderLeft = function() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-left"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-left-back"),
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
@@ -82,14 +85,16 @@ export var NavBar = function(props) {
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-title"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function() {
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-right"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -101,7 +106,7 @@ export var NavBar = function(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = classNames(classPrefix, classes, className);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"

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

@@ -2,6 +2,8 @@
   width: $navbar-width;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
@@ -16,6 +18,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
   }
 
@@ -24,27 +27,32 @@
     width: 100%;
   }
 
+  &-safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
+  &-align-left {
+    padding-left: 14px;
+  }
+
   &-title {
-    min-width: 53%;
-    margin: 0 auto;
+    width: 50%;
+    height: 100%;
     text-align: center;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
-
-    .nut-tabs-titles {
-      background: transparent;
-
-      &-item-text {
-        color: $color-title;
-      }
-    }
-
-    .nut-tabpane {
-      display: none;
+    &-align-left {
+      min-width: 0;
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 8px;
+      text-align: left;
     }
   }
 
@@ -59,125 +67,62 @@
     bottom: 0;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    height: 100%;
     cursor: pointer;
     padding: 0 14px;
-
+    /* #ifndef rn harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;
       height: 20px;
       font-size: 20px;
     }
+    /* #endif */
   }
 
   &-left {
     left: 0;
+    &-rtl {
+      left: auto;
+      right: 0;
+    }
+    &-align-left {
+      position: static;
+      padding: 0;
+    }
 
     &-back {
       display: flex;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
-      margin-right: 10px;
+      &-children {
+        margin-right: 10px;
+        &-rtl {
+          margin-right: 0;
+          margin-left: 10px;
+        }
+      }
     }
   }
 
   &-right {
     right: 0;
-
-    .nut-icon {
-      margin-left: 12px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    padding-left: 14px;
-
-    .nut-navbar-left {
-      position: static;
-      padding: 0;
-
-      .nut-icon {
-        margin-left: 12px;
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+    &-rtl {
+      right: auto;
+      left: 0;
     }
-    .nut-navbar-right {
+    &-align-left {
       position: static;
       display: inline-flex;
       white-space: nowrap;
       padding-left: 0;
     }
-    .nut-navbar-left-back {
-      margin-right: 0;
-    }
-
-    .nut-navbar-title {
-      min-width: 0;
-      margin: 0;
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 8px;
-      text-align: left;
-    }
   }
-}
-
-[dir='rtl'] .nut-navbar,
-.nut-rtl .nut-navbar {
-  &-fixed {
-    left: auto;
-    right: 0;
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
+  &-rtl {
     .nut-icon-ArrowLeft {
       transform: rotateY(180deg);
     }
-    &-back {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-
-  &-right {
-    right: auto;
-    left: 0;
-    .nut-icon {
-      margin-left: 0;
-      margin-right: 12px;
-
-      &:first-child {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    .nut-navbar-left {
-      .nut-icon-ArrowLeft {
-        margin-left: 0;
-        margin-right: 12px;
-
-        &:first-child {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .nut-navbar-left-back {
-      margin-right: 0;
-      margin-left: 0;
-    }
   }
 }