@nutui/nutui-react-taro 4.0.0-beta.3 → 4.0.0-beta.5

package/dist/es/packages/progress/progress.js

@@ -19,10 +19,11 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     lazy: false,
     delay: 0
 });
-export var Progress = function(props) {
+export var Progress = function Progress(props) {
+    var _ref, _props_showText, _ref1, _props_color, _ref2, _props_background, _ref3, _props_animated;
     var rtl = useRtl();
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, // tc
-    showInfo = _ref.showInfo, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeColor = _ref.activeColor, backgroundColor = _ref.backgroundColor, active = _ref.active, activeMode = _ref.activeMode, duration = _ref.duration, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, percent = _$_object_spread.percent, background = _$_object_spread.background, color = _$_object_spread.color, strokeWidth = _$_object_spread.strokeWidth, showText = _$_object_spread.showText, animated = _$_object_spread.animated, children = _$_object_spread.children, lazy = _$_object_spread.lazy, delay = _$_object_spread.delay, // tc
+    showInfo = _$_object_spread.showInfo, borderRadius = _$_object_spread.borderRadius, fontSize = _$_object_spread.fontSize, activeColor = _$_object_spread.activeColor, backgroundColor = _$_object_spread.backgroundColor, active = _$_object_spread.active, activeMode = _$_object_spread.activeMode, duration = _$_object_spread.duration, onActiveEnd = _$_object_spread.onActiveEnd, rest = _object_without_properties(_$_object_spread, [
         "className",
         "style",
         "percent",
@@ -45,18 +46,14 @@ export var Progress = function(props) {
         "onActiveEnd"
     ]);
     var classPrefix = 'nut-progress';
-    var _props_showText, _ref1;
-    var effectiveShowText = (_ref1 = (_props_showText = props.showText) !== null && _props_showText !== void 0 ? _props_showText : showInfo) !== null && _ref1 !== void 0 ? _ref1 : defaultProps.showText;
-    var _props_color, _ref2;
-    var effectiveColor = (_ref2 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : activeColor) !== null && _ref2 !== void 0 ? _ref2 : defaultProps.color;
-    var _props_background, _ref3;
-    var effectiveBgColor = (_ref3 = (_props_background = props.background) !== null && _props_background !== void 0 ? _props_background : backgroundColor) !== null && _ref3 !== void 0 ? _ref3 : defaultProps.background;
-    var _props_animated, _ref4;
-    var effectiveAnimated = (_ref4 = (_props_animated = props.animated) !== null && _props_animated !== void 0 ? _props_animated : active) !== null && _ref4 !== void 0 ? _ref4 : defaultProps.animated;
+    var effectiveShowText = (_ref = (_props_showText = props.showText) !== null && _props_showText !== void 0 ? _props_showText : showInfo) !== null && _ref !== void 0 ? _ref : defaultProps.showText;
+    var effectiveColor = (_ref1 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : activeColor) !== null && _ref1 !== void 0 ? _ref1 : defaultProps.color;
+    var effectiveBgColor = (_ref2 = (_props_background = props.background) !== null && _props_background !== void 0 ? _props_background : backgroundColor) !== null && _ref2 !== void 0 ? _ref2 : defaultProps.background;
+    var effectiveAnimated = (_ref3 = (_props_animated = props.animated) !== null && _props_animated !== void 0 ? _props_animated : active) !== null && _ref3 !== void 0 ? _ref3 : defaultProps.animated;
     var _obj;
     var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-inner"), true), _define_property(_obj, "".concat(classPrefix, "-active"), effectiveAnimated), _obj));
     var _useState = _sliced_to_array(useState(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
-    var getStyles = function() {
+    var getStyles = function getStyles() {
         // 基础样式
         var baseStyles = {
             height: strokeWidth && pxTransform(Number(strokeWidth)),
@@ -77,7 +74,7 @@ export var Progress = function(props) {
         };
     };
     var _getStyles = getStyles(), stylesOuter = _getStyles.outer, stylesInner = _getStyles.inner;
-    var handlePercent = function() {
+    var handlePercent = function handlePercent() {
         var timer = null;
         if (delay) {
             setDispalyPercent(0);
@@ -115,7 +112,7 @@ export var Progress = function(props) {
     var webObserver = useRef(null);
     var uuid = useUuid();
     var selector = "".concat(classPrefix, "-lazy-").concat(uuid);
-    var resetObserver = function() {
+    var resetObserver = function resetObserver() {
         var observer = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
         if (web()) {
             webObserver.current.disconnect && webObserver.current.disconnect();
@@ -136,7 +133,7 @@ export var Progress = function(props) {
     }, [
         intersecting
     ]);
-    var handleWebObserver = function() {
+    var handleWebObserver = function handleWebObserver() {
         /// web环境
         if (lazy) {
             webObserver.current = new IntersectionObserver(function(entires, self) {
@@ -153,7 +150,7 @@ export var Progress = function(props) {
         }
         handlePercent();
     };
-    var handleOtherObserver = function() {
+    var handleOtherObserver = function handleOtherObserver() {
         // 非web环境
         var observer = null;
         if (lazy) {
@@ -178,14 +175,14 @@ export var Progress = function(props) {
             handleOtherObserver();
         }
     }, []);
-    var getTextStyle = function() {
+    var getTextStyle = function getTextStyle() {
         return rtl ? {
             right: '100%'
         } : {
             left: '100%'
         };
     };
-    var computeRight = function() {
+    var computeRight = function computeRight() {
         if (children) {
             return 0;
         }
@@ -194,7 +191,7 @@ export var Progress = function(props) {
         }
         return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
     };
-    var computeInnerStyle = function() {
+    var computeInnerStyle = function computeInnerStyle() {
         var style = {
             backgroundColor: effectiveColor || 'var(--nutui-color-primary, #ff0f23)',
             fontSize: fontSize && pxTransform(parseInt(fontSize.toString()))

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -27,9 +27,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     headHeight: 80,
     threshold: 60,
     scrollTop: 0,
-    onRefresh: function() {}
+    onRefresh: function onRefresh() {}
 });
-export var PullToRefresh = function(p) {
+export var PullToRefresh = function PullToRefresh(p) {
     var doRefresh = function doRefresh() {
         return _async_to_generator(function() {
             var e;
@@ -100,17 +100,17 @@ export var PullToRefresh = function(p) {
     var _useState = _sliced_to_array(useState('pulling'), 2), status = _useState[0], setStatus = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), height = _useState1[0], setHeight = _useState1[1];
     var timer = useRef();
-    var renderIcons = function(status) {
+    var renderIcons = function renderIcons(status) {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, (status === 'pulling' || status === 'complete') && /*#__PURE__*/ React.createElement(Loading, null), (status === 'canRelease' || status === 'refreshing') && /*#__PURE__*/ React.createElement(More, null));
     };
-    var renderStatusIcon = function() {
+    var renderStatusIcon = function renderStatusIcon() {
         if (props.renderIcon) {
             var _props_renderIcon;
             return (_props_renderIcon = props.renderIcon) === null || _props_renderIcon === void 0 ? void 0 : _props_renderIcon.call(props, status);
         }
         return renderIcons(status);
     };
-    var renderStatusText = function() {
+    var renderStatusText = function renderStatusText() {
         if (props.renderText) {
             var _props_renderText;
             return (_props_renderText = props.renderText) === null || _props_renderText === void 0 ? void 0 : _props_renderText.call(props, status);
@@ -121,11 +121,11 @@ export var PullToRefresh = function(p) {
         if (status === 'complete') return props.completeText;
         return '';
     };
-    var handleTouchStart = function(e) {
+    var handleTouchStart = function handleTouchStart(e) {
         if (props.disabled) return;
         touch.start(e);
     };
-    var handleTouchMove = function(e) {
+    var handleTouchMove = function handleTouchMove(e) {
         if (props.scrollTop > 0 || props.disabled) {
             return;
         }
@@ -139,7 +139,7 @@ export var PullToRefresh = function(p) {
         }
         clearTimeout(timer.current);
     };
-    var handleTouchEnd = function() {
+    var handleTouchEnd = function handleTouchEnd() {
         if (props.disabled) return;
         pullingRef.current = false;
         if (status === 'canRelease') {

package/dist/es/packages/quickenter/quickenter.js

@@ -19,8 +19,8 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     closeOnOverlayClick: true,
     safeAreaInsetTop: true
 });
-var InternalQuickEnter = function(props, ref) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, visible = _ref.visible, title = _ref.title, _ref_options = _ref.options, options = _ref_options === void 0 ? [] : _ref_options, closeOnOverlayClick = _ref.closeOnOverlayClick, _ref_popupProps = _ref.popupProps, popupProps = _ref_popupProps === void 0 ? {} : _ref_popupProps, className = _ref.className, style = _ref.style, onClose = _ref.onClose, onChange = _ref.onChange, closeIcon = _ref.closeIcon, safeAreaInsetTop = _ref.safeAreaInsetTop, rest = _object_without_properties(_ref, [
+var InternalQuickEnter = function InternalQuickEnter(props, ref) {
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, title = _$_object_spread.title, _object_spread_options = _$_object_spread.options, options = _object_spread_options === void 0 ? [] : _object_spread_options, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, _object_spread_popupProps = _$_object_spread.popupProps, popupProps = _object_spread_popupProps === void 0 ? {} : _object_spread_popupProps, className = _$_object_spread.className, style = _$_object_spread.style, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange, closeIcon = _$_object_spread.closeIcon, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, rest = _object_without_properties(_$_object_spread, [
         "children",
         "visible",
         "title",
@@ -44,7 +44,7 @@ var InternalQuickEnter = function(props, ref) {
         value: props.visible,
         defaultValue: false,
         finalValue: false,
-        onChange: function(v) {
+        onChange: function onChange(v) {
             if (!v) {
                 var _props_onClose;
                 (_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props);
@@ -52,20 +52,20 @@ var InternalQuickEnter = function(props, ref) {
         }
     }), 2), innerVisible = _usePropsValue[0], setInnerVisible = _usePropsValue[1];
     var actions = {
-        open: function() {
+        open: function open() {
             setInnerVisible(true);
         },
-        close: function() {
+        close: function close() {
             setInnerVisible(false);
         }
     };
     useImperativeHandle(ref, function() {
         return actions;
     });
-    var onCancelEvent = function() {
+    var onCancelEvent = function onCancelEvent() {
         setInnerVisible(false);
     };
-    var handleItemClick = function(item, index) {
+    var handleItemClick = function handleItemClick(item, index) {
         if (item.url) {
             Taro.navigateTo({
                 url: item.url
@@ -73,14 +73,14 @@ var InternalQuickEnter = function(props, ref) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(item, index);
     };
-    var renderTitleBar = function() {
+    var renderTitleBar = function renderTitleBar() {
         return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-control")
         }, /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-title")
         }, mergedTitle), /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-close-btn"),
-            onClick: function(e) {
+            onClick: function onClick(e) {
                 e.stopPropagation();
                 onCancelEvent();
             }
@@ -88,19 +88,19 @@ var InternalQuickEnter = function(props, ref) {
             ariaLabel: locale.close
         })));
     };
-    var renderContent = function() {
+    var renderContent = function renderContent() {
         return /*#__PURE__*/ React.createElement(View, {
             className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-content-scrollable"), options.length > 8))
         }, /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-list")
         }, options.map(function(item, index) {
-            var _item_badgeProps, _item_badgeProps1;
             var _item_badge, _item_badge1;
+            var _item_badgeProps, _item_badgeProps1;
             return /*#__PURE__*/ React.createElement(View, {
                 key: index,
                 className: "".concat(classPrefix, "-item"),
                 ariaLabel: "".concat(item.title, " ").concat((_item_badge = item.badge) !== null && _item_badge !== void 0 ? _item_badge : (_item_badgeProps = item.badgeProps) === null || _item_badgeProps === void 0 ? void 0 : _item_badgeProps.value),
-                onClick: function() {
+                onClick: function onClick() {
                     return handleItemClick(item, index);
                 }
             }, /*#__PURE__*/ React.createElement(View, {
@@ -114,7 +114,7 @@ var InternalQuickEnter = function(props, ref) {
             }, item.title));
         })));
     };
-    var renderQuickEnterElement = function() {
+    var renderQuickEnterElement = function renderQuickEnterElement() {
         return /*#__PURE__*/ React.createElement(View, _object_spread({
             className: classes,
             style: style
@@ -130,7 +130,7 @@ var InternalQuickEnter = function(props, ref) {
         },
         visible: innerVisible,
         position: "top",
-        onOverlayClick: function() {
+        onOverlayClick: function onOverlayClick() {
             if (!closeOnOverlayClick) return;
             onCancelEvent();
         },

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

@@ -17,11 +17,11 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     labelPosition: 'right',
     icon: null,
     activeIcon: null,
-    onChange: function(checked) {}
+    onChange: function onChange(checked) {}
 });
-export var Radio = function(props) {
+export var Radio = function Radio(props) {
     var classPrefix = 'nut-radio';
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value, icon = _ref.icon, activeIcon = _ref.activeIcon, onChange = _ref.onChange, ariaLabel = _ref.ariaLabel, others = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style, checked = _$_object_spread.checked, defaultChecked = _$_object_spread.defaultChecked, shape = _$_object_spread.shape, value = _$_object_spread.value, icon = _$_object_spread.icon, activeIcon = _$_object_spread.activeIcon, onChange = _$_object_spread.onChange, ariaLabel = _$_object_spread.ariaLabel, others = _object_without_properties(_$_object_spread, [
         "children",
         "className",
         "style",
@@ -52,7 +52,7 @@ export var Radio = function(props) {
         if (context.disabled !== undefined) {
             disabled = context.disabled;
         }
-        setCheckedStatement = function(value) {
+        setCheckedStatement = function setCheckedStatement(value) {
             if (value) {
                 context.check(props.value === undefined ? '' : props.value);
             } else {
@@ -60,11 +60,11 @@ export var Radio = function(props) {
             }
         };
     }
-    var color = function() {
+    var color = function color() {
         var _obj;
         return _obj = {}, _define_property(_obj, "".concat(classPrefix, "-icon-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-icon"), !checkedStatement), _define_property(_obj, "".concat(classPrefix, "-icon-checked"), checkedStatement), _obj;
     };
-    var renderIcon = function() {
+    var renderIcon = function renderIcon() {
         var icon = props.icon, activeIcon = props.activeIcon;
         if (disabled && !checkedStatement) {
             // @ts-ignore
@@ -90,26 +90,26 @@ export var Radio = function(props) {
             ariaHidden: true
         });
     };
-    var renderLabel = function() {
+    var renderLabel = function renderLabel() {
         var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
         return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), children && /*#__PURE__*/ React.createElement(View, {
             className: labelcls
         }, children));
     };
-    var renderButton = function() {
+    var renderButton = function renderButton() {
         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(View, {
             className: buttoncls
         }, children);
     };
-    var renderByShape = function(shape) {
+    var renderByShape = function renderByShape(shape) {
         return shape === 'button' ? renderButton() : renderLabel();
     };
-    var renderRadioItem = function() {
+    var renderRadioItem = function renderRadioItem() {
         return renderByShape(context && context.shape ? context.shape : shape);
     };
-    var handleClick = function(e) {
+    var handleClick = function handleClick(e) {
         if (disabled || checkedStatement) return;
         setCheckedStatement(!checkedStatement);
     };

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

@@ -11,13 +11,13 @@ import Radio from "../radio/index";
 import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = {
     labelPosition: 'right',
-    onChange: function(value) {},
+    onChange: function onChange(value) {},
     direction: 'vertical',
     options: []
 };
 var classPrefix = 'nut-radiogroup';
 export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, shape = _ref.shape, labelPosition = _ref.labelPosition, direction = _ref.direction, options = _ref.options, disabled = _ref.disabled, rest = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, shape = _$_object_spread.shape, labelPosition = _$_object_spread.labelPosition, direction = _$_object_spread.direction, options = _$_object_spread.options, disabled = _$_object_spread.disabled, rest = _object_without_properties(_$_object_spread, [
         "children",
         "className",
         "value",
@@ -37,8 +37,8 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         onChange: onChange
     }), 2), val2State = _usePropsValue[0], setVal2State = _usePropsValue[1];
     var renderOptionsChildren = useCallback(function() {
-        return options === null || options === void 0 ? void 0 : options.map(function(_param) {
-            var label = _param.label, value = _param.value, disabled = _param.disabled, onChange = _param.onChange, rest = _object_without_properties(_param, [
+        return options === null || options === void 0 ? void 0 : options.map(function(_0) {
+            var label = _0.label, value = _0.value, disabled = _0.disabled, onChange = _0.onChange, rest = _object_without_properties(_0, [
                 "label",
                 "value",
                 "disabled",
@@ -65,10 +65,10 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             disabled: disabled,
             shape: shape,
             value: val2State,
-            check: function(value) {
+            check: function check(value) {
                 setVal2State(value);
             },
-            uncheck: function() {
+            uncheck: function uncheck() {
                 setVal2State('');
             }
         }

package/dist/es/packages/range/range.js

@@ -27,13 +27,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 var isHm = harmony();
 var classPrefix = 'nut-range';
 var verticalClassPrefix = "".concat(classPrefix, "-vertical");
-var isSameValue = function(newValue, oldValue) {
+var isSameValue = function isSameValue(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
 };
-var handleOverlap = function(value) {
+var handleOverlap = function handleOverlap(value) {
     return value[0] > value[1] ? value.slice(0).reverse() : value;
 };
-export var Range = function(props) {
+export var Range = function Range(props) {
     var rtl = useRtl();
     var _mergeProps = mergeProps(defaultProps, props), className = _mergeProps.className, style = _mergeProps.style, range = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
     var rtlClassPrefix = useMemo(function() {
@@ -57,7 +57,7 @@ export var Range = function(props) {
         max,
         min
     ]);
-    var handleChange = function(value) {
+    var handleChange = function handleChange(value) {
         onChange && onChange(value);
     };
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -227,7 +227,7 @@ export var Range = function(props) {
     ]);
     var handleClick = useCallback(function(event) {
         return _async_to_generator(function() {
-            var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value, _innerValue, left, right, middle;
+            var _ref, _event_detail, rect, x, delta, total, _ref1, _event_detail1, y, value, _innerValue, left, right, middle;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -245,14 +245,14 @@ export var Range = function(props) {
                         ];
                     case 1:
                         rect = _state.sent();
-                        x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
+                        x = (_ref = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _ref !== void 0 ? _ref : event.clientX;
                         if (isHm) x = parseFloat(pxTransform(event.windowX || x));
                         delta = x - rect.left;
                         total = rect.width;
                         if (vertical) {
                             ;
                             ;
-                            y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
+                            y = (_ref1 = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _ref1 !== void 0 ? _ref1 : event.clientY;
                             if (isHm) y = parseFloat(pxTransform(event.windowY || y));
                             delta = y - rect.top;
                             total = rect.height;
@@ -292,7 +292,7 @@ export var Range = function(props) {
         vertical
     ]);
     useReady(function() {
-        var getRootRect = function() {
+        var getRootRect = function getRootRect() {
             return _async_to_generator(function() {
                 var rect;
                 return _ts_generator(this, function(_state) {
@@ -352,7 +352,7 @@ export var Range = function(props) {
                     dragStatusRef.current = 'draging';
                 }
                 touch.move(event);
-                handleMove = function() {
+                handleMove = function handleMove() {
                     return _async_to_generator(function() {
                         var delta, total, diff, newValue;
                         return _ts_generator(this, function(_state) {
@@ -486,14 +486,14 @@ export var Range = function(props) {
                 style: {
                     transform: 'translate(-50%, -50%)'
                 },
-                onTouchStart: function(e) {
+                onTouchStart: function onTouchStart1(e) {
                     buttonRef.current = index;
                     onTouchStart(e);
                 },
                 onTouchMove: onTouchMove,
                 onTouchEnd: onTouchEnd,
                 onTouchCancel: onTouchEnd,
-                onClick: function(e) {
+                onClick: function onClick(e) {
                     return e.stopPropagation();
                 }
             }, renderButton(index));
@@ -518,7 +518,7 @@ export var Range = function(props) {
             onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd,
             onTouchCancel: onTouchEnd,
-            onClick: function(e) {
+            onClick: function onClick(e) {
                 return e.stopPropagation();
             }
         }, renderButton());

package/dist/es/packages/rate/index.d.ts

@@ -1,3 +1,3 @@
 import { Rate } from "./rate";
-export type { RateSize, TaroRateProps as RateProps } from "../../types";
+export type { RateSize, RateDirection, TaroRateProps as RateProps, } from "../../types";
 export default Rate;

package/dist/es/packages/rate/rate.js

@@ -12,6 +12,7 @@ import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
 import { useRefs } from "../../hooks/use-refs";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     size: 'normal',
+    direction: 'horizontal',
     showScore: false,
     count: 5,
     min: 0,
@@ -22,16 +23,30 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     allowHalf: false,
     touchable: false
 });
-export var Rate = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
+export var Rate = function Rate(props) {
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, direction = _$_object_spread.direction, label = _$_object_spread.label, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
     var classPrefix = 'nut-rate';
-    var _useState = _sliced_to_array(useState([
+    var shouldAnimate = direction === 'vertical' || size === 'large';
+    var _useState = _sliced_to_array(useState(-1), 2), animatingIndex = _useState[0], setAnimatingIndex = _useState[1];
+    useEffect(function() {
+        if (animatingIndex >= 0) {
+            var timer = setTimeout(function() {
+                return setAnimatingIndex(-1);
+            }, 300);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        animatingIndex
+    ]);
+    var _useState1 = _sliced_to_array(useState([
         1,
         2,
         3,
         4,
         5
-    ]), 2), countArray = _useState[0], setCountArray = _useState[1];
+    ]), 2), countArray = _useState1[0], setCountArray = _useState1[1];
     var _useRefs = _sliced_to_array(useRefs(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
     var rateRects = useRef([]);
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -49,12 +64,12 @@ export var Rate = function(props) {
     }, [
         count
     ]);
-    var renderIcon = function(n) {
+    var renderIcon = function renderIcon(n) {
         return n <= score ? checkedIcon || /*#__PURE__*/ React.createElement(StarFill, null) : uncheckedIcon || (checkedIcon ? /*#__PURE__*/ React.cloneElement(checkedIcon, {
             color: undefined
         }) : /*#__PURE__*/ React.createElement(StarFill, null));
     };
-    var onClick = function(e, index) {
+    var onClick = function onClick(e, index) {
         e.preventDefault();
         e.stopPropagation();
         if (disabled || readOnly) return;
@@ -63,15 +78,21 @@ export var Rate = function(props) {
             value = index;
         }
         value = Math.max(value, min);
+        if (shouldAnimate && value > score) {
+            setAnimatingIndex(index - 1);
+        }
         setScore(value);
     };
-    var onHalfClick = function(event, n) {
+    var onHalfClick = function onHalfClick(event, n) {
         event.preventDefault();
         event.stopPropagation();
         var value = Math.max(min, n - 0.5);
+        if (shouldAnimate && value > score) {
+            setAnimatingIndex(n - 1);
+        }
         setScore(value);
     };
-    var getScoreByPosition = function(x) {
+    var getScoreByPosition = function getScoreByPosition(x) {
         var _rateRects_current;
         if ((_rateRects_current = rateRects.current) === null || _rateRects_current === void 0 ? void 0 : _rateRects_current.length) {
             for(var index = rateRects.current.length - 1; index >= 0; index--){
@@ -101,7 +122,7 @@ export var Rate = function(props) {
     }, [
         updateRects
     ]);
-    var handleTouchStart = function(e) {
+    var handleTouchStart = function handleTouchStart(e) {
         if (!touchable || readOnly || disabled) {
             return;
         }
@@ -111,7 +132,7 @@ export var Rate = function(props) {
         e.stopPropagation();
         updateRects();
     };
-    var handleTouchMove = function(e) {
+    var handleTouchMove = function handleTouchMove(e) {
         if (!touchable || readOnly || disabled) {
             return;
         }
@@ -124,7 +145,7 @@ export var Rate = function(props) {
             setScore(Math.max(min, val));
         }
     };
-    var handleTouchEnd = function(e) {
+    var handleTouchEnd = function handleTouchEnd(e) {
         if (!touchable || readOnly || disabled) {
             return;
         }
@@ -138,8 +159,32 @@ export var Rate = function(props) {
             onTouchEnd && onTouchEnd(e, Math.max(min, val));
         }
     };
+    var isArrayLabel = Array.isArray(label);
+    var renderSingleLabel = function renderSingleLabel() {
+        if (label == null || isArrayLabel) return null;
+        return /*#__PURE__*/ React.createElement(Text, {
+            className: classNames("".concat(classPrefix, "-label"), "".concat(classPrefix, "-label-").concat(size))
+        }, label);
+    };
+    var renderArrayLabels = function renderArrayLabels() {
+        if (!isArrayLabel) return null;
+        return /*#__PURE__*/ React.createElement(View, {
+            className: classNames("".concat(classPrefix, "-labels"), "".concat(classPrefix, "-labels-").concat(size))
+        }, label.map(function(item, index) {
+            return /*#__PURE__*/ React.createElement(Text, {
+                className: "".concat(classPrefix, "-labels-item"),
+                key: index
+            }, item);
+        }));
+    };
+    var renderScore = function renderScore() {
+        if (!showScore) return null;
+        return /*#__PURE__*/ React.createElement(Text, {
+            className: classNames("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), _define_property({}, "".concat(classPrefix, "-score-disabled"), disabled))
+        }, score.toFixed(1));
+    };
     return /*#__PURE__*/ React.createElement(View, {
-        className: classNames(classPrefix, {
+        className: classNames(classPrefix, "".concat(classPrefix, "-").concat(direction), {
             disabled: disabled,
             readonly: readOnly
         }, className),
@@ -149,24 +194,25 @@ export var Rate = function(props) {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         onTouchCancel: handleTouchEnd
+    }, direction === 'horizontal' && renderSingleLabel(), /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-list")
     }, countArray.map(function(n, index) {
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
             ref: setRefs(index),
-            onClick: function(event) {
+            onClick: function onClick1(event) {
                 return onClick(event, n);
             }
         }, /*#__PURE__*/ React.createElement(View, {
-            className: classNames("".concat(classPrefix, "-item-icon"), _define_property({}, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score))
+            className: classNames("".concat(classPrefix, "-item-icon"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score), _define_property(_obj, "".concat(classPrefix, "-item-icon-animate"), animatingIndex === index), _obj))
         }, renderIcon(n)), allowHalf && score > n - 1 && /*#__PURE__*/ React.createElement(View, {
             className: classNames("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
-            onClick: function(event) {
+            onClick: function onClick(event) {
                 return onHalfClick(event, n);
             }
         }, renderIcon(n)));
-    }), showScore ? /*#__PURE__*/ React.createElement(Text, {
-        className: classNames("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), _define_property({}, "".concat(classPrefix, "-score-disabled"), disabled))
-    }, score.toFixed(1)) : null);
+    })), direction === 'horizontal' && renderScore(), direction === 'vertical' && /*#__PURE__*/ React.createElement(React.Fragment, null, renderScore(), isArrayLabel ? renderArrayLabels() : renderSingleLabel()));
 };
 Rate.displayName = 'NutRate';