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

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

@@ -14,9 +14,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     lazy: false,
     delay: 0
 });
-export var Progress = function(props) {
+export var Progress = function Progress(props) {
     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, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, 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, borderRadius = _$_object_spread.borderRadius, fontSize = _$_object_spread.fontSize, activeMode = _$_object_spread.activeMode, duration = _$_object_spread.duration, onActiveEnd = _$_object_spread.onActiveEnd, rest = _object_without_properties(_$_object_spread, [
         "className",
         "style",
         "percent",
@@ -72,7 +72,7 @@ export var Progress = function(props) {
     var _useState1 = _sliced_to_array(useState(false), 2), intersecting = _useState1[0], setIntersecting = _useState1[1];
     var progressRef = useRef(null);
     var observer = useRef(null);
-    var initObserver = function() {
+    var initObserver = function initObserver() {
         var options = {
             threshold: [
                 0
@@ -86,7 +86,7 @@ export var Progress = function(props) {
         }, options);
         observer.current.observe(progressRef.current);
     };
-    var resetObserver = function() {
+    var resetObserver = function resetObserver() {
         observer.current.disconnect && observer.current.disconnect();
     };
     useEffect(function() {
@@ -126,7 +126,7 @@ export var Progress = function(props) {
     }, /*#__PURE__*/ React.createElement("div", {
         className: classesInner,
         style: stylesInner,
-        onTransitionEnd: function() {
+        onTransitionEnd: function onTransitionEnd() {
             onActiveEnd === null || onActiveEnd === void 0 ? void 0 : onActiveEnd();
         }
     })), showText && /*#__PURE__*/ React.createElement("div", {

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

@@ -26,9 +26,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     headHeight: 80,
     threshold: 60,
-    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;
@@ -61,7 +61,7 @@ export var PullToRefresh = function(p) {
                     case 3:
                         e = _state.sent();
                         api.start({
-                            to: function(next) {
+                            to: function to(next) {
                                 return _async_to_generator(function() {
                                     return _ts_generator(this, function(_state) {
                                         switch(_state.label){
@@ -98,7 +98,7 @@ export var PullToRefresh = function(p) {
                         _state.label = 6;
                     case 6:
                         api.start({
-                            to: function(next) {
+                            to: function to(next) {
                                 return _async_to_generator(function() {
                                     return _ts_generator(this, function(_state) {
                                         switch(_state.label){
@@ -218,19 +218,19 @@ export var PullToRefresh = function(p) {
             passive: false
         } : false
     });
-    var renderIcons = function(status) {
+    var renderIcons = function renderIcons(status) {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", {
             className: "".concat(classPrefix, "-head-content-icons")
         }, (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);

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

@@ -17,8 +17,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",
@@ -42,7 +42,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);
@@ -50,30 +50,30 @@ 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) {
         onChange === null || onChange === void 0 ? void 0 : onChange(item, index);
     };
-    var renderTitleBar = function() {
+    var renderTitleBar = function renderTitleBar() {
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-control")
         }, /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-title")
         }, mergedTitle), /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-close-btn"),
-            onClick: function(e) {
+            onClick: function onClick(e) {
                 e.stopPropagation();
                 onCancelEvent();
             }
@@ -81,18 +81,18 @@ var InternalQuickEnter = function(props, ref) {
             "aria-label": locale.close
         })));
     };
-    var renderContent = function() {
+    var renderContent = function renderContent() {
         return /*#__PURE__*/ React.createElement("div", {
             className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-content-scrollable"), options.length > 8))
         }, /*#__PURE__*/ React.createElement("div", {
             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("div", {
                 key: index,
                 className: "".concat(classPrefix, "-item"),
-                onClick: function() {
+                onClick: function onClick() {
                     return handleItemClick(item, index);
                 },
                 "aria-label": "".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)
@@ -107,7 +107,7 @@ var InternalQuickEnter = function(props, ref) {
             }, item.title));
         })));
     };
-    var renderQuickEnterElement = function() {
+    var renderQuickEnterElement = function renderQuickEnterElement() {
         return /*#__PURE__*/ React.createElement("div", _object_spread({
             className: classes,
             style: style
@@ -123,7 +123,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

@@ -16,11 +16,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, 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, others = _object_without_properties(_$_object_spread, [
         "children",
         "className",
         "style",
@@ -53,7 +53,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 {
@@ -61,11 +61,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) {
             return /*#__PURE__*/ React.createElement(CheckDisabled, {
@@ -85,26 +85,26 @@ export var Radio = function(props) {
             className: classNames(color())
         });
     };
-    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("div", {
             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("div", {
             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

@@ -10,13 +10,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",
@@ -36,8 +36,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",
@@ -64,10 +64,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

@@ -19,16 +19,16 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 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) {
     if (value[0] > value[1]) {
         return value.slice(0).reverse();
     }
     return value;
 };
-export var Range = function(props) {
+export var Range = function Range(props) {
     var rtl = useRtl();
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
     var rtlClassPrefix = useMemo(function() {
@@ -51,7 +51,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({
@@ -411,14 +411,14 @@ export var Range = function(props) {
                 style: {
                     transform: transform
                 },
-                onTouchStart: function(e) {
+                onTouchStart: function onTouchStart1(e) {
                     setButtonIndex(index);
                     onTouchStart(e);
                 },
                 onTouchMove: onTouchMove,
                 onTouchEnd: onTouchEnd,
                 onTouchCancel: onTouchEnd,
-                onClick: function(e) {
+                onClick: function onClick(e) {
                     return e.stopPropagation();
                 }
             }, renderButton(index));
@@ -443,7 +443,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/range/utils.js

@@ -1,6 +1,6 @@
-export var isSameValue = function(newValue, oldValue) {
+export var isSameValue = function isSameValue(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
 };
-export var handleOverlap = function(value) {
+export var handleOverlap = function handleOverlap(value) {
     return value[0] > value[1] ? value.slice(0).reverse() : value;
 };

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

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

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

@@ -11,6 +11,7 @@ import { getRect } from "../../utils/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,
@@ -21,16 +22,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({
@@ -48,12 +63,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;
@@ -62,15 +77,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--){
@@ -82,7 +103,7 @@ export var Rate = function(props) {
             return 0;
         }
     };
-    var updateRects = function() {
+    var updateRects = function updateRects() {
         for(var index = 0; index < refs.length; index++){
             var item = refs[index];
             if (item) {
@@ -90,7 +111,7 @@ export var Rate = function(props) {
             }
         }
     };
-    var handleTouchStart = function(e) {
+    var handleTouchStart = function handleTouchStart(e) {
         if (!touchable || readOnly || disabled) {
             return;
         }
@@ -100,7 +121,7 @@ export var Rate = function(props) {
         e.stopPropagation();
         updateRects();
     };
-    var handleTouchMove = function(e) {
+    var handleTouchMove = function handleTouchMove(e) {
         if (!touchable || readOnly || disabled) {
             return;
         }
@@ -113,7 +134,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;
         }
@@ -149,31 +170,56 @@ export var Rate = function(props) {
             }
         };
     }, []);
+    var isArrayLabel = Array.isArray(label);
+    var renderSingleLabel = function renderSingleLabel() {
+        if (label == null || isArrayLabel) return null;
+        return /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(classPrefix, "-label"), "".concat(classPrefix, "-label-").concat(size))
+        }, label);
+    };
+    var renderArrayLabels = function renderArrayLabels() {
+        if (!isArrayLabel) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(classPrefix, "-labels"), "".concat(classPrefix, "-labels-").concat(size))
+        }, label.map(function(item, index) {
+            return /*#__PURE__*/ React.createElement("span", {
+                className: "".concat(classPrefix, "-labels-item"),
+                key: index
+            }, item);
+        }));
+    };
+    var renderScore = function renderScore() {
+        if (!showScore) return null;
+        return /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), _define_property({}, "".concat(classPrefix, "-score-disabled"), disabled))
+        }, score.toFixed(1));
+    };
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(classPrefix, {
+        className: classNames(classPrefix, "".concat(classPrefix, "-").concat(direction), {
             disabled: disabled,
             readonly: readOnly
         }, className),
         ref: rateRef,
         style: style
+    }, direction === 'horizontal' && renderSingleLabel(), /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-list")
     }, countArray.map(function(n, index) {
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
             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("div", {
-            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("div", {
             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("span", {
-        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';