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

package/dist/cjs/packages/radio/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-radio {
   display: flex;
   align-items: center;
@@ -35,10 +31,10 @@ page {
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-radio-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   background-color: var(--nutui-color-background-overlay, #ffffff);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
@@ -58,7 +54,7 @@ page {
   border-radius: 50%;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
 }
 .nut-radio-button {
   /* #ifdef dynamic*/
@@ -83,13 +79,13 @@ page {
   border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-color-text-disabled, #b4b8bf);
   color: #ffffff;
-  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #b4b8bf);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
@@ -49,9 +45,9 @@ page {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-color-text-disabled, #b4b8bf);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-color-text-disabled, #b4b8bf);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -83,10 +79,10 @@ page {
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-radio-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   background-color: var(--nutui-color-background-overlay, #ffffff);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
@@ -106,7 +102,7 @@ page {
   border-radius: 50%;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
 }
 .nut-radio-button {
   /* #ifdef dynamic*/
@@ -131,13 +127,13 @@ page {
   border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-color-text-disabled, #b4b8bf);
   color: #ffffff;
-  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #b4b8bf);
 }
 
 [dir=rtl] .nut-radio:last-child,

package/dist/cjs/packages/radiogroup/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
@@ -49,9 +45,9 @@ page {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-color-text-disabled, #b4b8bf);
   color: #ffffff;
-  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #b4b8bf);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
@@ -49,9 +45,9 @@ page {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-color-text-disabled, #b4b8bf);
   color: #ffffff;
-  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #b4b8bf);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

package/dist/cjs/packages/range/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;
@@ -64,7 +60,7 @@ page {
   display: flex;
   width: var(--nutui-range-button-width, calc(24px * var(--nut-scale-f, 1)));
   height: var(--nutui-range-button-height, calc(24px * var(--nut-scale-f, 1)));
-  background: var(--nutui-range-button-background, #ffffff);
+  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
   border-radius: 50%;
   box-shadow: 0 calc(1px * var(--nut-scale-f, 1)) calc(2px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.15);
   border: var(--nutui-range-button-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;
@@ -64,7 +60,7 @@ page {
   display: flex;
   width: var(--nutui-range-button-width, calc(24px * var(--nut-scale-f, 1)));
   height: var(--nutui-range-button-height, calc(24px * var(--nut-scale-f, 1)));
-  background: var(--nutui-range-button-background, #ffffff);
+  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
   border-radius: 50%;
   box-shadow: 0 calc(1px * var(--nut-scale-f, 1)) calc(2px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.15);
   border: var(--nutui-range-button-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));

package/dist/cjs/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/cjs/packages/rate/rate.js

@@ -24,6 +24,7 @@ var _getrect = require("../../utils/taro/get-rect");
 var _userefs = require("../../hooks/use-refs");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     size: 'normal',
+    direction: 'horizontal',
     showScore: false,
     count: 5,
     min: 0,
@@ -35,15 +36,29 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     touchable: false
 });
 var Rate = function Rate(props) {
-    var _$_object_spread = (0, _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;
+    var _$_object_spread = (0, _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 = (0, _sliced_to_array._)((0, _react.useState)([
+    var shouldAnimate = direction === 'vertical' || size === 'large';
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(-1), 2), animatingIndex = _useState[0], setAnimatingIndex = _useState[1];
+    (0, _react.useEffect)(function() {
+        if (animatingIndex >= 0) {
+            var timer = setTimeout(function() {
+                return setAnimatingIndex(-1);
+            }, 300);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        animatingIndex
+    ]);
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([
         1,
         2,
         3,
         4,
         5
-    ]), 2), countArray = _useState[0], setCountArray = _useState[1];
+    ]), 2), countArray = _useState1[0], setCountArray = _useState1[1];
     var _useRefs = (0, _sliced_to_array._)((0, _userefs.useRefs)(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
     var rateRects = (0, _react.useRef)([]);
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
@@ -75,12 +90,18 @@ var Rate = function Rate(props) {
             value = index;
         }
         value = Math.max(value, min);
+        if (shouldAnimate && value > score) {
+            setAnimatingIndex(index - 1);
+        }
         setScore(value);
     };
     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 getScoreByPosition(x) {
@@ -150,8 +171,32 @@ var Rate = function Rate(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.default.createElement(_components.Text, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-label"), "".concat(classPrefix, "-label-").concat(size))
+        }, label);
+    };
+    var renderArrayLabels = function renderArrayLabels() {
+        if (!isArrayLabel) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-labels"), "".concat(classPrefix, "-labels-").concat(size))
+        }, label.map(function(item, index) {
+            return /*#__PURE__*/ _react.default.createElement(_components.Text, {
+                className: "".concat(classPrefix, "-labels-item"),
+                key: index
+            }, item);
+        }));
+    };
+    var renderScore = function renderScore() {
+        if (!showScore) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.Text, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
+        }, score.toFixed(1));
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, {
+        className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-").concat(direction), {
             disabled: disabled,
             readonly: readOnly
         }, className),
@@ -161,7 +206,10 @@ var Rate = function Rate(props) {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         onTouchCancel: handleTouchEnd
+    }, direction === 'horizontal' && renderSingleLabel(), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-list")
     }, countArray.map(function(n, index) {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
@@ -170,15 +218,13 @@ var Rate = function Rate(props) {
                 return onClick(event, n);
             }
         }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (0, _define_property._)({}, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score))
+            className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score), (0, _define_property._)(_obj, "".concat(classPrefix, "-item-icon-animate"), animatingIndex === index), _obj))
         }, renderIcon(n)), allowHalf && score > n - 1 && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: (0, _classnames.default)("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
             onClick: function onClick(event) {
                 return onHalfClick(event, n);
             }
         }, renderIcon(n)));
-    }), showScore ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
-    }, score.toFixed(1)) : null);
+    })), direction === 'horizontal' && renderScore(), direction === 'vertical' && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderScore(), isArrayLabel ? renderArrayLabels() : renderSingleLabel()));
 };
 Rate.displayName = 'NutRate';