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

package/dist/es/packages/menu/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-menu {
   position: relative;
 }
@@ -61,7 +57,7 @@ page {
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

package/dist/es/packages/menuitem/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-menu-container-content {
   padding: var(--nutui-menu-content-padding, calc(12px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1)));
   max-height: var(--nutui-menu-content-max-height, calc(214px * var(--nut-scale-f, 1)));

package/dist/es/packages/navbar/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-navbar {
   width: var(--nutui-navbar-width, 100%);
   position: relative;

package/dist/es/packages/noticebar/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-noticebar {
   width: 100%;
 }

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

@@ -9,10 +9,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 /*入场动画开始*/
 .fade-enter {
   opacity: 0;

package/dist/es/packages/numberkeyboard/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-numberkeyboard {
   width: 100%;
   padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);

package/dist/es/packages/overlay/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-overlay {
   position: fixed;
   top: 0;

package/dist/es/packages/pagination/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-pagination {
   display: flex;
   flex-direction: row;
@@ -61,7 +57,7 @@ page {
 .nut-pagination-item-disabled,
 .nut-pagination-next-disabled,
 .nut-pagination-prev-disabled {
-  color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
   background-color: var(--nutui-pagination-disable-background-color, #f7f8fa);
   cursor: not-allowed;
 }
@@ -85,7 +81,7 @@ page {
   display: flex;
   flex-direction: row;
   align-items: center;
-  color: #ffffff;
+  color: var(--nutui-color-primary-text, #ffffff);
   background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
   border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }

package/dist/es/packages/picker/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-picker {
   width: 100%;
 }

package/dist/es/packages/pickerview/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-pickerview {
   position: relative;
   display: flex;

package/dist/es/packages/popover/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-popover {
   position: absolute;
   display: inline-block;
@@ -124,7 +120,7 @@ page {
   margin-left: var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
-  color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
   cursor: not-allowed;
 }
 .nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem {

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

@@ -9,10 +9,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-popup {
   position: fixed;
   min-height: 26%;

package/dist/es/packages/price/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-price {
   direction: ltr;
   font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));

package/dist/es/packages/progress/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-progress {
   display: flex;
   align-items: center;

package/dist/es/packages/pulltorefresh/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-pulltorefresh-head {
   overflow: hidden;
   position: relative;

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

@@ -9,10 +9,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-quickenter {
   width: 100%;
   /* 限制弹层最大高度，包含安全区 */

package/dist/es/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/es/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/es/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/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,
@@ -22,15 +23,29 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     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;
+    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({
@@ -62,12 +77,18 @@ 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) {
         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) {
@@ -149,14 +170,41 @@ export var Rate = function(props) {
             }
         };
     }, []);
+    var isArrayLabel = Array.isArray(label);
+    var renderSingleLabel = function() {
+        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() {
+        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() {
+        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,
@@ -165,15 +213,13 @@ export var Rate = function(props) {
                 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) {
                 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';