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

package/dist/es/types/spec/rate/base.d.ts

@@ -2,12 +2,21 @@ import { ReactNode } from 'react';
 import { BasicComponent } from "../../../utils/typings";
 import { UISize } from '../../base/atoms';
 export type RateSize = Extract<UISize, 'large' | 'normal' | 'small'>;
+export type RateDirection = 'horizontal' | 'vertical';
 export interface BaseRate extends BasicComponent {
     /**
     * star 尺寸
     */
     size: RateSize
     /**
+    * 方向
+    */
+    direction: RateDirection
+    /**
+    * 标签文字
+    */
+    label: ReactNode | ReactNode[]
+    /**
     * 展示评分
     */
     showScore: boolean

package/dist/nutui.react.umd.js

@@ -18720,6 +18720,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   Range.displayName = "NutRange";
   var defaultProps$R = _object_spread_props(_object_spread({}, ComponentDefaults), {
     size: "normal",
+    direction: "horizontal",
     showScore: false,
     count: 5,
     min: 0,
@@ -18731,15 +18732,29 @@ Please add \`${key2}Action\` when creating your handler.`);
     touchable: false
   });
   var Rate = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$R, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value2 = _$_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$R, 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, value2 = _$_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 classPrefix2 = "nut-rate";
-    var _useState = _sliced_to_array(React.useState([
+    var shouldAnimate = direction === "vertical" || size === "large";
+    var _useState = _sliced_to_array(React.useState(-1), 2), animatingIndex = _useState[0], setAnimatingIndex = _useState[1];
+    React.useEffect(function() {
+      if (animatingIndex >= 0) {
+        var timer = setTimeout(function() {
+          return setAnimatingIndex(-1);
+        }, 300);
+        return function() {
+          return clearTimeout(timer);
+        };
+      }
+    }, [
+      animatingIndex
+    ]);
+    var _useState1 = _sliced_to_array(React.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 = React.useRef([]);
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -18771,12 +18786,18 @@ Please add \`${key2}Action\` when creating your handler.`);
         value3 = index2;
       }
       value3 = Math.max(value3, min);
+      if (shouldAnimate && value3 > score) {
+        setAnimatingIndex(index2 - 1);
+      }
       setScore(value3);
     };
     var onHalfClick = function(event, n2) {
       event.preventDefault();
       event.stopPropagation();
       var value3 = Math.max(min, n2 - 0.5);
+      if (shouldAnimate && value3 > score) {
+        setAnimatingIndex(n2 - 1);
+      }
       setScore(value3);
     };
     var getScoreByPosition = function(x) {
@@ -18858,14 +18879,41 @@ Please add \`${key2}Action\` when creating your handler.`);
         }
       };
     }, []);
+    var isArrayLabel = Array.isArray(label);
+    var renderSingleLabel = function() {
+      if (label == null || isArrayLabel) return null;
+      return /* @__PURE__ */ React.createElement("span", {
+        className: classNames("".concat(classPrefix2, "-label"), "".concat(classPrefix2, "-label-").concat(size))
+      }, label);
+    };
+    var renderArrayLabels = function() {
+      if (!isArrayLabel) return null;
+      return /* @__PURE__ */ React.createElement("div", {
+        className: classNames("".concat(classPrefix2, "-labels"), "".concat(classPrefix2, "-labels-").concat(size))
+      }, label.map(function(item, index2) {
+        return /* @__PURE__ */ React.createElement("span", {
+          className: "".concat(classPrefix2, "-labels-item"),
+          key: index2
+        }, item);
+      }));
+    };
+    var renderScore = function() {
+      if (!showScore) return null;
+      return /* @__PURE__ */ React.createElement("span", {
+        className: classNames("".concat(classPrefix2, "-score"), "".concat(classPrefix2, "-score-").concat(size), _define_property({}, "".concat(classPrefix2, "-score-disabled"), disabled))
+      }, score.toFixed(1));
+    };
     return /* @__PURE__ */ React.createElement("div", {
-      className: classNames(classPrefix2, {
+      className: classNames(classPrefix2, "".concat(classPrefix2, "-").concat(direction), {
         disabled,
         readonly: readOnly
       }, className),
       ref: rateRef,
       style
+    }, direction === "horizontal" && renderSingleLabel(), /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-list")
     }, countArray.map(function(n2, index2) {
+      var _obj;
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-item ").concat(classPrefix2, "-item-").concat(size),
         key: n2,
@@ -18874,16 +18922,14 @@ Please add \`${key2}Action\` when creating your handler.`);
           return onClick(event, n2);
         }
       }, /* @__PURE__ */ React.createElement("div", {
-        className: classNames("".concat(classPrefix2, "-item-icon"), _define_property({}, "".concat(classPrefix2, "-item-icon-disabled"), disabled || n2 > score))
+        className: classNames("".concat(classPrefix2, "-item-icon"), (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-item-icon-disabled"), disabled || n2 > score), _define_property(_obj, "".concat(classPrefix2, "-item-icon-animate"), animatingIndex === index2), _obj))
       }, renderIcon(n2)), allowHalf && score > n2 - 1 && /* @__PURE__ */ React.createElement("div", {
         className: classNames("".concat(classPrefix2, "-item-half"), "".concat(classPrefix2, "-item-icon"), "".concat(classPrefix2, "-item-icon-half")),
         onClick: function(event) {
           return onHalfClick(event, n2);
         }
       }, renderIcon(n2)));
-    }), showScore ? /* @__PURE__ */ React.createElement("span", {
-      className: classNames("".concat(classPrefix2, "-score"), "".concat(classPrefix2, "-score-").concat(size), _define_property({}, "".concat(classPrefix2, "-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";
   var defaultProps$Q = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -20323,6 +20369,19 @@ Please add \`${key2}Action\` when creating your handler.`);
     return PriceColorEnum2;
   }({});
   var destroyList = [];
+  var EMPTY_STATUS_IMAGES = {
+    network: "https://img10.360buyimg.com/imagetools/jfs/t1/449411/36/15729/19102/6a30e810F36720c83/03e61e01e08ab731.png",
+    comment: "https://img12.360buyimg.com/imagetools/jfs/t1/458866/29/4221/20560/6a30e810F02e0c676/03e61e01e02c0dab.png",
+    search: "https://img12.360buyimg.com/imagetools/jfs/t1/453287/39/13487/21638/6a30e810Fc7b15ec6/03e61e01e0bf5f81.png",
+    shop: "https://img11.360buyimg.com/imagetools/jfs/t1/447986/21/19304/24327/6a30e810F0a9c3aca/03e61e01dd8d09b1.png",
+    address: "https://img12.360buyimg.com/imagetools/jfs/t1/446923/19/19328/23073/6a30e810F37ec221d/03e61e01e0e69357.png",
+    order: "https://img11.360buyimg.com/imagetools/jfs/t1/455990/2/7107/24405/6a30e810Fcb5a39b1/03e61e01e0715a43.png",
+    favor: "https://img12.360buyimg.com/imagetools/jfs/t1/458517/13/4983/22338/6a30e810F9d69ff57/03e61e01e092c3f9.png",
+    cart: "https://img11.360buyimg.com/imagetools/jfs/t1/453149/9/10304/23216/6a30e810Ff6c0d230/03e61e01e0b41203.png"
+  };
+  var getEmptyStatusImage = function(status) {
+    return EMPTY_STATUS_IMAGES[status] || EMPTY_STATUS_IMAGES.network;
+  };
   function ConfirmDialog(props) {
     return /* @__PURE__ */ React.createElement(Dialog, props, props.content);
   }
@@ -20772,24 +20831,17 @@ Please add \`${key2}Action\` when creating your handler.`);
     }), children));
   };
   Drag.displayName = "NutDrag";
-  var defaultStatus = {
-    empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
-    error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
-    network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
-  };
   var defaultProps$G = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: "",
     description: "",
     imageSize: "",
-    size: "base",
-    status: "empty",
+    size: "half",
+    status: "network",
     actions: []
   });
   var classPrefix$e = "nut-empty";
   var Empty = function(props) {
-    var _ref = _object_spread({}, defaultProps$G, props), image = _ref.image, imageSize = _ref.imageSize, title = _ref.title, description = _ref.description, children = _ref.children, className = _ref.className, size = _ref.size, status = _ref.status, actions = _ref.actions;
-    _ref.style;
-    var rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$G, props), image = _ref.image, imageSize = _ref.imageSize, title = _ref.title, description = _ref.description, children = _ref.children, className = _ref.className, size = _ref.size, status = _ref.status, actions = _ref.actions, style = _ref.style, rest = _object_without_properties(_ref, [
       "image",
       "imageSize",
       "title",
@@ -20802,7 +20854,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       "style"
     ]);
     var _useState = _sliced_to_array(React.useState({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
-    var imageUrl = image || defaultStatus[status];
+    var imageUrl = image || getEmptyStatusImage(status);
     var imageNode = typeof imageUrl === "string" ? /* @__PURE__ */ React.createElement("img", {
       style: {
         width: "100%",
@@ -20830,18 +20882,26 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, [
       imageSize
     ]);
-    var cls = classNames(classPrefix$e, className);
-    return /* @__PURE__ */ React.createElement("div", _object_spread({
-      className: cls
-    }, rest), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix$e, "-").concat(size),
+    var cls = classNames(classPrefix$e, "".concat(classPrefix$e, "--").concat(size), className);
+    var imageBlock = /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$e, "-image"),
       style: imgStyle
-    }, imageNode), typeof title === "string" && title ? /* @__PURE__ */ React.createElement("div", {
+    }, imageNode);
+    var titleBlock = typeof title === "string" && title ? /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix$e, "-title")
-    }, title) : title, typeof description === "string" ? /* @__PURE__ */ React.createElement("div", {
+    }, title) : title;
+    var descriptionBlock = typeof description === "string" ? /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix$e, "-description")
-    }, description) : description, actions.length ? /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix$e, "-actions-").concat(size)
+    }, description) : description;
+    return /* @__PURE__ */ React.createElement("div", _object_spread({
+      className: cls,
+      style
+    }, rest), size === "partial" ? /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$e, "-partial-body")
+    }, imageBlock, /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$e, "-content")
+    }, titleBlock, descriptionBlock)) : /* @__PURE__ */ React.createElement(React.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$e, "-actions")
     }, actions.map(function(action, index2) {
       action.text;
       var rest2 = _object_without_properties(action, [
@@ -22257,7 +22317,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _$_object_spread = _object_spread({}, defaultProps$A, props), className = _$_object_spread.className, style = _$_object_spread.style, title = _$_object_spread.title, description = _$_object_spread.description, icon = _$_object_spread.icon, status = _$_object_spread.status, actions = _$_object_spread.actions, children = _$_object_spread.children;
     var classPrefix2 = "nut-resultpage";
     var cls = classNames(classPrefix2, className);
-    var defaultStatus2 = {
+    var defaultStatus = {
       success: /* @__PURE__ */ React.createElement(d$3, {
         color: "var(--nutui-color-success, #0acc2a)"
       }),
@@ -22279,7 +22339,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       style
     }, /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-icon")
-    }, icon || defaultStatus2[status]), typeof title === "string" && title ? /* @__PURE__ */ React.createElement("div", {
+    }, icon || defaultStatus[status]), typeof title === "string" && title ? /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-title")
     }, title) : title, typeof description === "string" && description ? /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-description")
@@ -24163,17 +24223,18 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
       return "";
     };
-    var _ref = _object_spread({}, defaultProps$k, props), color = _ref.color, type2 = _ref.type, total = _ref.total, current = _ref.current, children = _ref.children, className = _ref.className, direction = _ref.direction, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$k, props), color = _ref.color, type2 = _ref.type, total = _ref.total, current = _ref.current, children = _ref.children, className = _ref.className, direction = _ref.direction, placement = _ref.placement, rest = _object_without_properties(_ref, [
       "color",
       "type",
       "total",
       "current",
       "children",
       "className",
-      "direction"
+      "direction",
+      "placement"
     ]);
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$3, "-vertical"), direction === "vertical"), _define_property(_obj, "".concat(classPrefix$3, "-white"), color === "default"), _define_property(_obj, "".concat(classPrefix$3, "-track"), type2 === "slide"), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$3, "-vertical"), direction === "vertical"), _define_property(_obj, "".concat(classPrefix$3, "-white"), color === "default"), _define_property(_obj, "".concat(classPrefix$3, "-track"), type2 === "slide"), _define_property(_obj, "".concat(classPrefix$3, "-").concat(placement), !!placement), _obj));
     var renderDotElement = function() {
       var childs = [];
       for (var item = 0; item < total; item++) {
@@ -24188,12 +24249,10 @@ Please add \`${key2}Action\` when creating your handler.`);
       return childs;
     };
     var renderLineElement = function() {
-      var trackWidth = 21;
-      var sliderWidth = 6;
-      var stride = (trackWidth - sliderWidth) / (total - 1);
       return /* @__PURE__ */ React.createElement("div", {
         style: {
-          transform: "".concat(direction === "vertical" ? "translateY" : "translateX", "(").concat(current * stride, "px)")
+          "--nutui-indicator-current": current,
+          "--nutui-indicator-total": total
         },
         className: "".concat(classPrefix$3, "-line ").concat(classPrefix$3, "-line-active")
       });
@@ -43831,6 +43890,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   exports.Dialog = Dialog;
   exports.Divider = Divider;
   exports.Drag = Drag;
+  exports.EMPTY_STATUS_IMAGES = EMPTY_STATUS_IMAGES;
   exports.Elevator = Elevator;
   exports.Ellipsis = Ellipsis;
   exports.Empty = Empty;
@@ -43919,6 +43979,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   exports.getCurrMonthData = getCurrMonthData;
   exports.getDaysStatus = getDaysStatus;
   exports.getDefaultConfig = getDefaultConfig;
+  exports.getEmptyStatusImage = getEmptyStatusImage;
   exports.getPreMonthDates = getPreMonthDates;
   exports.getRect = getRect;
   exports.getRefValue = getRefValue;