@nutui/nutui-react-taro 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/es/packages/radio/radio.js

@@ -4,11 +4,10 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext } from "react";
-import { CheckChecked, CheckNormal, CheckDisabled } from "@nutui/icons-react-taro";
+import { CheckChecked, CheckDisabled, CheckNormal } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import RadioContext from "../radiogroup/context";
-import RadioGroup from "../radiogroup/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -86,14 +85,14 @@ export var Radio = function(props) {
     };
     var renderLabel = function() {
         var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement(View, {
             className: labelcls
         }, children));
     };
     var renderButton = function() {
         var _obj;
         var buttoncls = classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: buttoncls
         }, children);
     };
@@ -115,4 +114,3 @@ export var Radio = function(props) {
     }, renderRadioItem());
 };
 Radio.displayName = 'NutRadio';
-Radio.Group = RadioGroup;

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

@@ -77,6 +77,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

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

@@ -1,41 +1,14 @@
 import React from 'react';
+import { ViewProps } from '@tarojs/components/types/View';
 import { RadioGroupDirection, RadioGroupOption, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
-    /**
-    * 当前选中项的标识符
-    * @default -
-    */
-    value?: string | number
+    value?: string | number;
     defaultValue?: string | number;
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioGroupPosition
-    /**
-    * 使用横纵方向
-    * @default vertical
-    */
-    direction: RadioGroupDirection
-    /**
-    * 形状
-    * @default -
-    */
-    shape?: RadioGroupShape
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 配置 options 渲染单选按钮
-    * @default -
-    */
-    options: RadioGroupOption[]
-    /**
-    * 值变化时触发
-    * @default -
-    */
-    onChange: (value: string | number) => void
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
+    disabled?: boolean;
+    options: RadioGroupOption[];
+    onChange: (value: string | number) => void;
 }
-export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Partial<RadioGroupProps> & Omit<ViewProps, "onChange">, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/radiogroup/radiogroup.js

@@ -5,6 +5,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useCallback } from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import RadioContext from "./context";
 import Radio from "../radio/index";
 import { usePropsValue } from "../../utils/use-props-value";
@@ -28,7 +29,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
-    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(direction), direction), className);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         defaultValue: props.defaultValue,
         value: props.value,
@@ -71,7 +72,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                 setVal2State('');
             }
         }
-    }, /*#__PURE__*/ React.createElement("div", _object_spread({
+    }, /*#__PURE__*/ React.createElement(View, _object_spread({
         className: cls
     }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children));
 });

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

@@ -18,10 +18,10 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
-    margin-right: $rate-item-margin;
+    margin-left: $rate-item-margin;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      margin-left: 0;
     }
 
     &-half {
@@ -39,11 +39,16 @@
 
     &-icon {
       display: flex;
-      color: $rate-icon-color;
       cursor: pointer;
 
+      .nut-icon {
+        color: $rate-icon-color;
+      }
+
       &-disabled {
-        color: $rate-icon-inactive-color;
+        .nut-icon {
+          color: $rate-icon-inactive-color;
+        }
       }
 
       &.nut-rate-item-icon.nut-rate-item-icon-half {

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

@@ -12,10 +12,10 @@
   display: flex;
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--nutui-rate-item-margin, 14px);
+  margin-left: var(--nutui-rate-item-margin, 14px);
 }
-.nut-rate-item:last-child {
-  margin-right: 0;
+.nut-rate-item:first-child {
+  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -30,10 +30,12 @@
 }
 .nut-rate-item-icon {
   display: flex;
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
   cursor: pointer;
 }
-.nut-rate-item-icon-disabled {
+.nut-rate-item-icon .nut-icon {
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-rate-item-icon-disabled .nut-icon {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {

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

@@ -1,10 +1,6 @@
 import { FC } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface SafeAreaProps extends BasicComponent {
-    /**
-    * 安全区的位置
-    * @default -
-    */
-    position: 'top' | 'bottom'
+    position: 'top' | 'bottom';
 }
 export declare const SafeArea: FC<SafeAreaProps>;

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

@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 
   &-position-top {

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

@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 }
 .nut-safe-area-position-top {

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

@@ -3,100 +3,24 @@ import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
 import { ITouchEvent } from '@tarojs/components';
 import { BasicComponent } from "../../utils/typings";
 export interface SearchBarProps extends BasicComponent {
-    /**
-    * 当前输入的值
-    * @default -
-    */
-    value?: number | string
-    /**
-    * 输入框默认暗纹
-    * @default 请输入
-    */
-    placeholder?: string
-    /**
-    * 搜索框形状，可选值为 round
-    * @default square
-    */
-    shape?: 'square' | 'round'
-    /**
-    * 是否禁用输入框
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 最大输入长度
-    * @default 9999
-    */
-    maxLength?: number
-    /**
-    * 是否展示清除按钮
-    * @default true
-    */
-    clearable?: boolean
-    /**
-    * 输入框只读
-    * @default false
-    */
-    readOnly?: boolean
-    /**
-    * 是否自动聚焦
-    * @default false
-    */
-    autoFocus?: boolean
-    /**
-    * 是否展示返回按钮
-    * @default false
-    */
-    backable: boolean
-    /**
-    * 搜索框左侧区域
-    * @default -
-    */
-    left: React.ReactNode
-    /**
-    * 搜搜框右侧区域
-    * @default -
-    */
-    right: React.ReactNode
-    /**
-    * 输入框内左侧区域
-    * @default <Search size="12" />
-    */
-    leftIn: React.ReactNode
-    /**
-    * 输入框内右侧区域
-    * @default -
-    */
-    rightIn: React.ReactNode
-    /**
-    * 确定搜索时触发
-    * @default -
-    */
-    onSearch?: (val: string) => void
-    /**
-    * 输入内容时触发
-    * @default -
-    */
-    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
-    /**
-    * 聚焦时触发
-    * @default -
-    */
-    onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-    /**
-    * 失焦时触发
-    * @default -
-    */
-    onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-    /**
-    * 点击清空时触发
-    * @default -
-    */
-    onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
-    /**
-    * 点击输入区域时触发
-    * @default -
-    */
-    onInputClick?: (event: MouseEvent<HTMLInputElement>) => void
+    value?: string;
+    placeholder?: string;
+    shape?: 'square' | 'round';
+    disabled?: boolean;
+    maxLength?: number;
+    clearable?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    backable: boolean;
+    left: React.ReactNode;
+    right: React.ReactNode;
+    leftIn: React.ReactNode;
+    rightIn: React.ReactNode;
+    onSearch?: (val: string) => void;
+    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;
 }
 export declare const SearchBar: FunctionComponent<Partial<SearchBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>>;

package/dist/es/packages/searchbar/searchbar.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 React, { useEffect, useRef, useState } from "react";
-import { View } from "@tarojs/components";
+import { View, Input as TaroInput } from "@tarojs/components";
 import { MaskClose, Search, ArrowLeft } from "@nutui/icons-react-taro";
 import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
@@ -34,21 +34,23 @@ export var SearchBar = function(props) {
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.focus();
     };
-    var change = function(event) {
-        if (value === event.target.value) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, event));
-        setValue(event.target.value);
-        event.target.value === '' && forceFocus();
+    var onInput = function(event) {
+        var _event_detail;
+        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        if (value === eventValue) return;
+        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        setValue(eventValue);
+        eventValue === '' && forceFocus();
     };
     var focus = function(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+        var _event_detail;
+        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     var blur = function(event) {
+        var _event_detail;
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     useEffect(function() {
         setValue(outerValue || '');
@@ -61,28 +63,21 @@ export var SearchBar = function(props) {
         autoFocus
     ]);
     var renderField = function() {
-        return /*#__PURE__*/ React.createElement("input", {
+        return /*#__PURE__*/ React.createElement(TaroInput, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
             style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
-            disabled: disabled,
-            readOnly: readOnly,
-            maxLength: maxLength,
-            onKeyPress: onKeypress,
-            onChange: function(e) {
-                return change(e);
-            },
-            onFocus: function(e) {
-                return focus(e);
-            },
-            onBlur: function(e) {
-                return blur(e);
-            },
-            onClick: function(e) {
-                return clickInput(e);
-            }
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            // @ts-ignore
+            // onKeyDown={onKeypress}
+            onInput: onInput,
+            onFocus: focus,
+            onBlur: blur,
+            onClick: clickInput,
+            onConfirm: onConfirm
         });
     };
     var clickInput = function(e) {
@@ -133,13 +128,16 @@ export var SearchBar = function(props) {
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
         onClear && onClear(event);
     };
-    var onKeypress = function(e) {
-        if (e.key === 'Enter' || e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
+    //   const onKeypress = (event: any) => {
+    //     if (event?.detail?.keyCode === 13) {
+    //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    //         event.preventDefault()
+    //       }
+    //       onSearch && onSearch(value as string)
+    //     }
+    //   }
+    var onConfirm = function() {
+        onSearch && onSearch(value);
     };
     return /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),

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

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

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

@@ -30,7 +30,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +40,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +71,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,8 +81,6 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));

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

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,30 +114,15 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
@@ -149,25 +130,6 @@
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
 
 .nut-skeleton {
   display: inline-block;