@nutui/nutui-react-taro 3.0.4 → 3.0.6

package/dist/es/packages/tabbaritem/tabbaritem.js

@@ -8,7 +8,6 @@ import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import Badge from "../badge/index";
 import TabbarContext from "../tabbar/context";
-import addColorForHarmony from "../../utils/add-color-for-harmony";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: '',
     icon: null,
@@ -16,12 +15,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     dot: false,
     max: 99,
     top: '0',
-    right: '0'
+    right: '0',
+    direction: 'vertical'
 });
 export var TabbarItem = function(props) {
     var ctx = useContext(TabbarContext);
     var _ref = _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, // @ts-ignore
-    index = _ref.index, rest = _object_without_properties(_ref, [
+    index = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "title",
@@ -31,15 +31,19 @@ export var TabbarItem = function(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 = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-active"), active), className);
-    var boxPrefix = "".concat(classPrefix, "-icon-box");
-    var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _define_property({}, "".concat(boxPrefix, "-large"), !icon));
+    var _obj;
+    var tabbarItemClass = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-active"), active), _define_property(_obj, "".concat(classPrefix, "-large"), !icon || !title), _obj), className);
+    var renderNodeWithActive = function(node) {
+        return node && typeof node === 'function' ? node(active) : node;
+    };
     var badgeProps = {
-        value: value,
+        value: renderNodeWithActive(value),
         dot: dot,
         max: max,
         top: top,
@@ -48,11 +52,33 @@ export var TabbarItem = function(props) {
     };
     var renderTitleText = function() {
         return title && /*#__PURE__*/ React.createElement(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() {
+        return /*#__PURE__*/ React.createElement(Badge, _object_spread({
+            size: "normal"
+        }, badgeProps), renderTitleText());
+    };
+    var renderIcon = function() {
+        var distIcon = renderNodeWithActive(icon);
+        // 鸿蒙差异处理，需要手动给icon一个color
+        return /*#__PURE__*/ React.isValidElement(distIcon) ? /*#__PURE__*/ React.cloneElement(distIcon, _object_spread_props(_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() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, _object_spread_props(_object_spread({
+            size: "normal"
+        }, badgeProps), {
+            top: 3
+        }), renderIcon()), renderTitleText());
+    };
+    var renderDualItem = function() {
+        return dot ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), renderTitleText(), /*#__PURE__*/ React.createElement(Badge, badgeProps));
     };
     return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: tabbarItemClass,
@@ -60,9 +86,7 @@ export var TabbarItem = function(props) {
             color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
         }, style),
         onClick: function() {
-            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.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
-        className: boxPrefix
-    }, addColorForHarmony(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), renderTitleText()) : /*#__PURE__*/ React.createElement(Badge, badgeProps, renderTitleText()));
+    }, rest), direction === 'horizontal' && !dot ? renderDualItem() : /*#__PURE__*/ React.createElement(React.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
 };

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

@@ -32,4 +32,8 @@ export interface BaseBadge extends BaseProps {
     * dot 尺寸，当 dot 等于 true 时生效
     */
     size: BadgeDotSize
+    /**
+    * 是否禁用
+    */
+    disabled: boolean
 }

package/dist/es/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 {
     /**

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

@@ -1,18 +1,35 @@
+import { PositionY } from "../../base/atoms";
 import { BaseProps } from '../../base/props';
 export interface BaseNotify extends BaseProps {
     id: string;
     /**
-    * 展示时长(ms)，值为 0 时，notify 不会消失
+    * 距离顶部/底部距离
     */
-    duration: number
+    distance: number
+    /**
+    * 顶部导航高度
+    */
+    navHeight: number
+    /**
+    * 是否启用关闭模式
+    */
+    closeable: boolean
     /**
-    * 提示的信息类型（primary，success ，danger，warning）
+    * 左边的 icon
     */
-    type: string
+    leftIcon: React.ReactNode
+    /**
+    * 右边的 icon，在 closeable 模式下默认为 <Close />
+    */
+    rightIcon: React.ReactNode
     /**
     * 自定义位置 (top, bottom)
     */
-    position: string
+    position: PositionY
+    /**
+    * 展示时长(ms)，值为 0 时，notify 不会消失
+    */
+    duration: number
     /**
     * 点击事件回调
     */

package/dist/es/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/es/types/spec/skeleton/base.d.ts

@@ -1,32 +1,37 @@
 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
     /**
-    * 设置段落行数
+    * 指定使用的内置高度
     */
-    rows: number
+    size: Extract<UISize, 'small' | 'normal' | 'large'>
     /**
-    * 是否显示段落标题
+    * 设置宽度，优先级高于 size 属性
     */
-    title: boolean
+    width?: SimpleValue
     /**
-    * 是否显示头像
+    * 设置高度，优先级高于 size 属性
     */
-    avatar: boolean
+    height?: SimpleValue
     /**
-    * 头像大小
+    * 设置形状
     */
-    avatarSize: string
+    shape: UIRound | 'circle'
     /**
-    * 是否显示骨架屏(true不显示骨架屏，false显示骨架屏)
+    * 是否开启骨架屏动画
     */
-    visible: boolean
+    animated: boolean
+    /**
+    * 动画时长
+    */
+    duration: number
     /**
-    * 头像形状：正方形/圆形
+    * 是否显示骨架屏(true不显示骨架屏，false显示骨架屏)
     */
-    avatarShape: avatarShape
+    visible: boolean
 }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
-export interface BaseSwitch<EVENT = any> extends BaseProps {
+export interface BaseSwitch extends BaseProps {
     /**
     * 开关状态，受控
     */
@@ -22,7 +22,11 @@ export interface BaseSwitch<EVENT = any> extends BaseProps {
     */
     inactiveText: ReactNode
     /**
+    * 受控 loading 态图标
+    */
+    loadingIcon: ReactNode
+    /**
     * 切换开关时触发
     */
-    onChange: (val: boolean, event: EVENT) => void
+    onChange: (val: boolean) => void
 }

package/dist/es/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/es/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/es/types/spec/tabbar/base.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BaseProps } from '../../base/props';
+import { BaseProps, Direction } from "../../../types";
 export interface BaseTabbar extends BaseProps {
     /**
     * 默认选中的标签的索引值
@@ -21,6 +21,7 @@ export interface BaseTabbar extends BaseProps {
     * icon激活的颜色
     */
     activeColor: string
+    direction: Direction;
     /**
     * 是否开启iphone系列全面屏底部安全区适配
     */
@@ -31,11 +32,13 @@ export interface BaseTabbar extends BaseProps {
     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;
 }