@nutui/nutui-react-taro 3.0.4 → 3.0.6

package/dist/cjs/packages/tabbaritem/style/style.harmony.css

@@ -5,25 +5,16 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: #1a1a1a;
   height: 100%;
 }
-.nut-tabbar-item-icon-box {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.nut-tabbar-item-icon-box .nut-icon {
-  width: 22px;
-  height: 22px;
-  font-size: 22px;
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   /* #ifdef harmony*/
   color: #1a1a1a;
   /* #endif*/
@@ -31,23 +22,32 @@
   color: inherit;
   /* #endif*/
 }
-.nut-tabbar-item-icon-box-nav {
+.nut-tabbar-item-text {
   display: block;
   color: #505259;
-  font-size: 11px;
-  line-height: 11px;
-  margin-top: 3px;
+  font-size: 10px;
+  line-height: 10px;
+  margin-top: 4px;
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
 }
-.nut-tabbar-item-icon-box-large {
+.nut-tabbar-item-large .nut-tabbar-item-text {
   font-size: 16px;
   margin-top: 0;
-  line-height: 20px;
+  line-height: 16px;
   font-weight: 400;
 }
 .nut-tabbar-item-active {
   color: #ff0f23;
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box {
+.nut-tabbar-item-active .nut-tabbar-item-text {
   /* #ifdef harmony*/
   color: #ff0f23;
   /* #endif*/

package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss

@@ -1,45 +1,48 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-icon-box {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+  .nut-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    /* #ifdef harmony*/
+    color: $tabbar-inactive-color;
+    /* #endif*/
+    /* #ifndef harmony*/
+    color: inherit;
+    /* #endif*/
+  }
 
-    .nut-icon {
-      width: 22px;
-      height: 22px;
-      font-size: 22px;
-      /* #ifdef harmony*/
-      color: $tabbar-inactive-color;
-      /* #endif*/
-      /* #ifndef harmony*/
-      color: inherit;
-      /* #endif*/
-    }
+  &-text {
+    display: block;
+    color: $color-text;
+    font-size: $tabbar-text-font-size;
+    line-height: $tabbar-text-font-size;
+    margin-top: $tabbar-text-margin-top;
+  }
 
-    &-nav {
-      display: block;
-      color: $color-text;
-      font-size: $tabbar-text-font-size;
-      line-height: $tabbar-text-font-size;
-      margin-top: $tabbar-text-margin-top;
+  .nut-image {
+    &-default {
+      width: 38px;
+      height: 38px;
+      border-radius: 38px;
     }
+  }
+
+  &-large {
+    justify-content: center;
+    padding: 0;
 
-    &-large {
+    .nut-tabbar-item-text {
       font-size: $tabbar-text-large-font-size;
       margin-top: 0;
-      line-height: $tabbar-text-line-height;
+      line-height: $tabbar-text-large-font-size;
       font-weight: $tabbar-text-large-font-weight;
     }
   }
@@ -47,7 +50,7 @@
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box,
+    .nut-tabbar-item-text,
     .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;

package/dist/cjs/packages/tabbaritem/tabbaritem.js

@@ -20,7 +20,6 @@ var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("../tabbar/context"));
-var _addcolorforharmony = /*#__PURE__*/ _interop_require_default._(require("../../utils/add-color-for-harmony"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
     icon: null,
@@ -28,11 +27,12 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     dot: false,
     max: 99,
     top: '0',
-    right: '0'
+    right: '0',
+    direction: 'vertical'
 });
 var TabbarItem = function TabbarItem(props) {
     var ctx = (0, _react.useContext)(_context.default);
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index = _ref.index, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "style",
         "title",
@@ -42,15 +42,19 @@ var TabbarItem = function TabbarItem(props) {
         "max",
         "top",
         "right",
-        "index"
+        "index",
+        "direction",
+        "onActiveClick"
     ]);
     var active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
     var classPrefix = 'nut-tabbar-item';
-    var tabbarItemClass = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-active"), active), className);
-    var boxPrefix = "".concat(classPrefix, "-icon-box");
-    var titleClass = (0, _classnames.default)(boxPrefix, "".concat(boxPrefix, "-nav"), (0, _define_property._)({}, "".concat(boxPrefix, "-large"), !icon));
+    var _obj;
+    var tabbarItemClass = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-active"), active), (0, _define_property._)(_obj, "".concat(classPrefix, "-large"), !icon || !title), _obj), className);
+    var renderNodeWithActive = function renderNodeWithActive(node) {
+        return node && typeof node === 'function' ? node(active) : node;
+    };
     var badgeProps = {
-        value: value,
+        value: renderNodeWithActive(value),
         dot: dot,
         max: max,
         top: top,
@@ -59,11 +63,33 @@ var TabbarItem = function TabbarItem(props) {
     };
     var renderTitleText = function renderTitleText() {
         return title && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: titleClass,
+            className: "".concat(classPrefix, "-text"),
             style: {
                 color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
             }
-        }, title);
+        }, renderNodeWithActive(title));
+    };
+    var renderTitle = function renderTitle() {
+        return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
+            size: "normal"
+        }, badgeProps), renderTitleText());
+    };
+    var renderIcon = function renderIcon() {
+        var distIcon = renderNodeWithActive(icon);
+        // 鸿蒙差异处理，需要手动给icon一个color
+        return /*#__PURE__*/ _react.default.isValidElement(distIcon) ? /*#__PURE__*/ _react.default.cloneElement(distIcon, (0, _object_spread_props._)((0, _object_spread._)({}, distIcon.props), {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        })) : null;
+    };
+    var renderIconAndTitle = function renderIconAndTitle() {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({
+            size: "normal"
+        }, badgeProps), {
+            top: 3
+        }), renderIcon()), renderTitleText());
+    };
+    var renderDualItem = function renderDualItem() {
+        return dot ? null : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), renderTitleText(), /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps));
     };
     return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: tabbarItemClass,
@@ -71,9 +97,7 @@ var TabbarItem = function TabbarItem(props) {
             color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
         }, style),
         onClick: function onClick() {
-            return ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
+            return active ? onActiveClick === null || onActiveClick === void 0 ? void 0 : onActiveClick() : ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
         }
-    }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: boxPrefix
-    }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), renderTitleText()) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, renderTitleText()));
+    }, rest), direction === 'horizontal' && !dot ? renderDualItem() : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
 };

package/dist/cjs/types/spec/badge/base.d.ts

@@ -11,4 +11,5 @@ export interface BaseBadge extends BaseProps {
     right: SimpleValue;
     fill: BadgeFill;
     size: BadgeDotSize;
+    disabled: boolean;
 }

package/dist/cjs/types/spec/indicator/base.d.ts

@@ -1,6 +1,6 @@
 import { BaseProps } from '../../base/props';
 import { UIType } from '../../base/atoms';
-export type IndicatorType = 'anchor' | 'slide';
+export type IndicatorType = 'anchor' | 'slide' | 'dualScreen';
 export type IndicatorColor = Extract<UIType, 'primary' | 'default'>;
 export interface BaseIndicator extends BaseProps {
     total: number;

package/dist/cjs/types/spec/notify/base.d.ts

@@ -1,9 +1,14 @@
+import { PositionY } from "../../base/atoms";
 import { BaseProps } from '../../base/props';
 export interface BaseNotify extends BaseProps {
     id: string;
+    distance: number;
+    navHeight: number;
+    closeable: boolean;
+    leftIcon: React.ReactNode;
+    rightIcon: React.ReactNode;
+    position: PositionY;
     duration: number;
-    type: string;
-    position: string;
     onClick: () => void;
     onClose: () => void;
 }

package/dist/cjs/types/spec/searchbar/taro.d.ts

@@ -1,10 +1,13 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
-import { ITouchEvent } from '@tarojs/components';
+import { BaseEventOrig, ITouchEvent, InputProps } from '@tarojs/components';
 import { BaseSearchBar } from './base';
+type inputEventDetail = InputProps.inputEventDetail;
+type inputForceEventDetail = InputProps.inputForceEventDetail;
+type inputValueEventDetail = InputProps.inputValueEventDetail;
 export interface TaroSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'> {
-    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
-    onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onChange?: (value: string, event?: BaseEventOrig<inputEventDetail>) => void;
+    onFocus?: (value: string, event: BaseEventOrig<inputForceEventDetail>) => void;
+    onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void;
+    onClear?: (event: ITouchEvent) => void;
+    onInputClick?: (event: ITouchEvent) => void;
 }
+export {};

package/dist/cjs/types/spec/skeleton/base.d.ts

@@ -1,11 +1,13 @@
 import { BaseProps } from '../../base/props';
+import { SimpleValue, UIRound, UISize } from '../../base/atoms';
 export type avatarShape = 'round' | 'square';
 export interface BaseSkeleton extends BaseProps {
-    animated: boolean;
     rows: number;
-    title: boolean;
-    avatar: boolean;
-    avatarSize: string;
+    size: Extract<UISize, 'small' | 'normal' | 'large'>;
+    width?: SimpleValue;
+    height?: SimpleValue;
+    shape: UIRound | 'circle';
+    animated: boolean;
+    duration: number;
     visible: boolean;
-    avatarShape: avatarShape;
 }

package/dist/cjs/types/spec/switch/base.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
-export interface BaseSwitch<EVENT = any> extends BaseProps {
+export interface BaseSwitch extends BaseProps {
     checked: boolean;
     defaultChecked: boolean;
     disabled: boolean;
     activeText: ReactNode;
     inactiveText: ReactNode;
-    onChange: (val: boolean, event: EVENT) => void;
+    loadingIcon: ReactNode;
+    onChange: (val: boolean) => void;
 }

package/dist/cjs/types/spec/switch/h5.d.ts

@@ -1,3 +1,3 @@
 import { BaseSwitch } from '../switch/base';
-export interface WebSwitchProps extends BaseSwitch<React.MouseEvent> {
+export interface WebSwitchProps extends BaseSwitch {
 }

package/dist/cjs/types/spec/switch/taro.d.ts

@@ -1,6 +1,3 @@
-import { ITouchEvent } from '@tarojs/components';
 import { BaseSwitch } from './base';
-type UnionEvent = React.MouseEvent<Element, MouseEvent> | ITouchEvent;
-export interface TaroSwitchProps extends BaseSwitch<UnionEvent> {
+export interface TaroSwitchProps extends BaseSwitch {
 }
-export {};

package/dist/cjs/types/spec/tabbar/base.d.ts

@@ -1,20 +1,23 @@
 import { ReactNode } from 'react';
-import { BaseProps } from '../../base/props';
+import { BaseProps, Direction } from "../../../types";
 export interface BaseTabbar extends BaseProps {
     defaultValue: number;
     value?: number;
     fixed: boolean;
     inactiveColor: string;
     activeColor: string;
+    direction: Direction;
     safeArea: boolean;
     onSwitch: (value: number) => void;
 }
 export interface BaseTabbarItem extends BaseProps {
-    title: ReactNode;
-    icon: ReactNode;
-    value: ReactNode;
+    title: ReactNode | ((active: boolean) => ReactNode);
+    icon: ReactNode | ((active: boolean) => ReactNode);
+    value: ReactNode | ((active: boolean) => ReactNode);
     dot: boolean;
     max: number;
     top: string;
     right: string;
+    direction: Direction;
+    onActiveClick: () => void;
 }

package/dist/es/packages/badge/badge.js

@@ -19,7 +19,8 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     top: 0,
     right: 0,
     fill: 'solid',
-    size: 'large'
+    size: 'large',
+    disabled: false
 });
 export var Badge = function(props) {
     var getContent = function getContent() {
@@ -40,14 +41,14 @@ export var Badge = function(props) {
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
     var classPrefix = 'nut-badge';
     var isHarmony = harmony();
     var classes = classNames(classPrefix, className);
     var badgeRef = useRef(null);
     var _useState = _sliced_to_array(useState({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
     var _obj;
-    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix, "-one"), typeof getContent() === 'string' && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix, "-dot"), dot), _define_property(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _define_property(_obj, "".concat(classPrefix, "-content"), children), _obj));
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix, "-one"), typeof getContent() === 'string' && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix, "-dot"), dot), _define_property(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _define_property(_obj, "".concat(classPrefix, "-content"), children), _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _obj));
     useEffect(function() {
         if (badgeRef.current) {
             getPositionStyle();

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

@@ -1,6 +1,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 
   &-icon {
@@ -37,8 +39,7 @@
 
   &-sup {
     display: inline-flex;
-    justify-content: center;
-    height: $badge-height;
+    text-align: center;
     min-width: $badge-min-width;
     padding: $badge-padding;
     box-sizing: border-box;
@@ -52,14 +53,12 @@
     z-index: 1;
   }
 
+  &-disabled {
+    background: $badge-background-disabled-color;
+  }
+
   &-number {
     font-family: 'JD';
-    /* #ifdef harmony */
-    line-height: 12px;
-    /* #endif */
-    /* #ifndef harmony */
-    line-height: 13px;
-    /* #endif */
   }
 
   &-one {

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

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -51,14 +52,11 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
@@ -82,14 +80,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;

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

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -51,13 +53,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: 14px;
+  text-align: center;
   min-width: 6px;
   padding: 1px 4px;
   box-sizing: border-box;
   color: #ffffff;
-  font-size: 10px;
+  font-size: 9px;
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -65,14 +66,11 @@
   background: #ff0f23;
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: #c2c4cc;
+}
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: 14px;