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

package/dist/cjs/packages/rate/rate.js

@@ -23,6 +23,7 @@ var _getrect = require("../../utils/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,
@@ -34,15 +35,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)({
@@ -74,12 +89,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) {
@@ -161,14 +182,41 @@ var Rate = function Rate(props) {
             }
         };
     }, []);
+    var isArrayLabel = Array.isArray(label);
+    var renderSingleLabel = function renderSingleLabel() {
+        if (label == null || isArrayLabel) return null;
+        return /*#__PURE__*/ _react.default.createElement("span", {
+            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("div", {
+            className: (0, _classnames.default)("".concat(classPrefix, "-labels"), "".concat(classPrefix, "-labels-").concat(size))
+        }, label.map(function(item, index) {
+            return /*#__PURE__*/ _react.default.createElement("span", {
+                className: "".concat(classPrefix, "-labels-item"),
+                key: index
+            }, item);
+        }));
+    };
+    var renderScore = function renderScore() {
+        if (!showScore) return null;
+        return /*#__PURE__*/ _react.default.createElement("span", {
+            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("div", {
-        className: (0, _classnames.default)(classPrefix, {
+        className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-").concat(direction), {
             disabled: disabled,
             readonly: readOnly
         }, className),
         ref: rateRef,
         style: style
+    }, direction === 'horizontal' && renderSingleLabel(), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-list")
     }, countArray.map(function(n, index) {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
@@ -177,15 +225,13 @@ var Rate = function Rate(props) {
                 return onClick(event, n);
             }
         }, /*#__PURE__*/ _react.default.createElement("div", {
-            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("div", {
             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("span", {
-        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';

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

@@ -14,6 +14,37 @@
     }
   }
 
+  &-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-list {
+    display: flex;
+    align-items: center;
+  }
+
+  &-label {
+    color: $rate-label-color;
+    white-space: nowrap;
+  }
+
+  &-labels {
+    display: flex;
+    width: 100%;
+
+    &-item {
+      flex: 1;
+      text-align: center;
+      color: $rate-label-color;
+    }
+  }
+
   &-item {
     display: flex;
     align-items: center;
@@ -33,38 +64,6 @@
       }
     }
 
-    &-normal {
-      margin-left: $rate-item-margin;
-      .nut-icon {
-        height: $rate-icon-size;
-        width: $rate-icon-size;
-      }
-    }
-
-    &-large {
-      margin-left: calc($rate-item-margin * 2);
-      .nut-icon {
-        height: calc($rate-icon-size + scale-px(8px));
-        width: calc($rate-icon-size + scale-px(8px));
-      }
-    }
-
-    &-small {
-      margin-left: calc($rate-item-margin / 2);
-      .nut-icon {
-        height: calc($rate-icon-size - scale-px(4px));
-        width: calc($rate-icon-size - scale-px(4px));
-      }
-    }
-
-    &-normal,
-    &-large,
-    &-small {
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
     &-icon {
       display: flex;
       align-items: center;
@@ -93,6 +92,10 @@
         left: auto;
         transform: none;
       }
+
+      &-animate {
+        animation: nut-rate-bounce 0.3s ease-in-out;
+      }
     }
   }
 
@@ -107,85 +110,250 @@
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
 
-    &-normal {
-      padding-left: $rate-item-margin;
-      font-size: $rate-font-size;
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
+
+  // horizontal layout
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    // 12DP - star gap 2px
+    .nut-rate-item-small {
+      margin-left: scale-px(2px);
+      &:first-child {
+        margin-left: 0;
+      }
+      .nut-icon {
+        height: scale-font-px(12px);
+        width: scale-font-px(12px);
+      }
+    }
+
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(16px);
+        width: scale-font-px(16px);
+      }
+    }
+
+    .nut-rate-item-large {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-label-small {
+      font-size: $font-size-s;
+      margin-right: scale-px(4px);
+    }
+
+    .nut-rate-label-normal {
+      font-size: $font-size-s;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-base;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-score-small {
+      padding-left: scale-px(4px);
+      font-size: $font-size-s;
       line-height: $line-height-s;
     }
 
-    &-large {
-      font-size: $rate-font-size-large;
-      line-height: $line-height-xl;
-      padding-left: calc($rate-item-margin * 2);
+    .nut-rate-score-normal {
+      padding-left: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: $line-height-s;
     }
 
-    &-small {
-      font-size: $rate-font-size-small;
-      line-height: $line-height-xxs;
-      padding-left: calc($rate-item-margin / 2);
+    .nut-rate-score-large {
+      padding-left: scale-px(12px);
+      font-size: $font-size-base;
+      line-height: $line-height-base;
     }
+  }
 
-    &-disabled {
-      color: $rate-icon-inactive-color;
+  // vertical layout
+  &-vertical {
+    .nut-rate-list {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .nut-rate-item-small,
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-item-large {
+      flex: 1;
+      justify-content: center;
+
+      .nut-icon {
+        height: scale-font-px(28px);
+        width: scale-font-px(28px);
+      }
+    }
+
+    .nut-rate-label-small,
+    .nut-rate-label-normal {
+      font-size: $font-size-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-s;
+      margin-top: scale-px(8px);
+    }
+
+    .nut-rate-labels {
+      width: 100%;
+    }
+
+    .nut-rate-labels-small,
+    .nut-rate-labels-normal {
+      margin-top: scale-px(6px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-xs;
+      }
+    }
+
+    .nut-rate-labels-large {
+      margin-top: scale-px(8px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-s;
+      }
+    }
+
+    .nut-rate-score-small,
+    .nut-rate-score-normal {
+      font-size: $font-size-xs;
+      line-height: $line-height-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-score-large {
+      font-size: $font-size-s;
+      line-height: $line-height-s;
+      margin-top: scale-px(8px);
     }
   }
 }
 
+@keyframes nut-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
-  &-item {
-    margin-left: 0;
-    &:first-child {
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-item-small {
+      margin-left: 0;
+      margin-right: scale-px(2px);
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-label {
       margin-right: 0;
     }
 
-    &-normal {
-      margin-right: $rate-item-margin;
+    .nut-rate-label-small {
+      margin-left: scale-px(4px);
     }
 
-    &-large {
-      margin-right: calc($rate-item-margin * 2);
+    .nut-rate-label-normal {
+      margin-left: scale-px(12px);
     }
 
-    &-small {
-      margin-right: calc($rate-item-margin - scale-px(2px));
+    .nut-rate-label-large {
+      margin-left: scale-px(12px);
     }
 
-    &:last-child {
-      margin-left: 0;
+    .nut-rate-score {
+      padding-left: 0;
     }
 
-    &-half {
-      left: auto;
-      right: 0;
+    .nut-rate-score-small {
+      padding-right: scale-px(4px);
     }
 
-    &-icon {
-      &.nut-rate-item-icon.nut-rate-item-icon-half {
-        left: auto;
-        right: 0;
-      }
+    .nut-rate-score-normal {
+      padding-right: scale-px(12px);
+    }
 
-      &.nut-rate-item-icon::before {
-        left: auto;
-        right: auto;
-      }
+    .nut-rate-score-large {
+      padding-right: scale-px(12px);
     }
   }
 
-  &-score {
-    padding-left: 0;
+  &-vertical {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
 
-    &-large {
-      padding-right: calc($rate-item-margin * 2);
+      &:first-child {
+        margin-right: 0;
+      }
     }
+  }
 
-    &-normal {
-      padding-right: $rate-item-margin;
+  &-item-half {
+    left: auto;
+    right: 0;
+  }
+
+  &-item-icon {
+    &.nut-rate-item-icon.nut-rate-item-icon-half {
+      left: auto;
+      right: 0;
     }
 
-    &-small {
-      padding-right: calc($rate-item-margin - scale-px(2px));
+    &.nut-rate-item-icon::before {
+      left: auto;
+      right: auto;
     }
   }
 }