@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/Range.js

@@ -1,123 +1,91 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default, { useState, useRef, useEffect, useCallback } from "react";
 import classNames from "classnames";
 import { u as useTouch } from "./use-touch.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  range: false,
-  min: 0,
-  max: 100,
-  step: 1,
-  vertical: false,
-  marks: {}
-});
-var Range = function Range2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, range = _defaultProps$props.range, disabled = _defaultProps$props.disabled, button = _defaultProps$props.button, vertical = _defaultProps$props.vertical, marks = _defaultProps$props.marks, onChange = _defaultProps$props.onChange, onStart = _defaultProps$props.onStart, onEnd = _defaultProps$props.onEnd, minDescription = _defaultProps$props.minDescription, maxDescription = _defaultProps$props.maxDescription, currentDescription = _defaultProps$props.currentDescription, min = _defaultProps$props.min, max = _defaultProps$props.max, step = _defaultProps$props.step, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue;
-  var classPrefix = "nut-range";
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), buttonIndex = _useState2[0], setButtonIndex = _useState2[1];
-  var _useState3 = useState("start"), _useState4 = _slicedToArray(_useState3, 2), dragStatus = _useState4[0], setDragStatus = _useState4[1];
-  var touch = useTouch();
-  var root = useRef(null);
-  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), marksList = _useState6[0], setMarksList = _useState6[1];
-  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), startValue = _useState8[0], setStartValue = _useState8[1];
-  var handleChange = function handleChange2(value2) {
+import { a as useRtl } from "./configprovider2.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { range: false, min: 0, max: 100, step: 1, vertical: false, marks: {} });
+const Range = (props) => {
+  const rtl = useRtl();
+  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
     onChange && onChange(value2);
   };
-  var _usePropsValue = usePropsValue({
+  const [current, setCurrent] = usePropsValue({
     value,
     defaultValue,
     finalValue: 0,
     onChange: handleChange
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), current = _usePropsValue2[0], setCurrent = _usePropsValue2[1];
-  var _useState9 = useState(function() {
-    return value || defaultValue || 0;
-  }), _useState10 = _slicedToArray(_useState9, 2), exactValue = _useState10[0], setEaxctValue = _useState10[1];
-  var marksRef = useRef({});
-  useEffect(function() {
+  });
+  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  const marksRef = useRef({});
+  useEffect(() => {
     if (marks) {
       if (Array.isArray(marks)) {
-        var list = marks.sort(function(a, b) {
-          return a.value - b.value;
-        }).filter(function(point) {
-          return point.value >= min && point.value <= max;
-        });
-        setMarksList(list.map(function(mark) {
-          return mark.value;
-        }));
-        list.forEach(function(mark) {
+        const list = marks.sort((a, b) => a.value - b.value).filter((point) => point.value >= min && point.value <= max);
+        setMarksList(list.map((mark) => mark.value));
+        list.forEach((mark) => {
           marksRef.current[mark.value] = mark.label !== void 0 ? mark.label : mark.value;
         });
       } else {
-        var marksKeys = Object.keys(marks);
-        var _list = marksKeys.map(parseFloat).sort(function(a, b) {
-          return a - b;
-        }).filter(function(point) {
-          return point >= min && point <= max;
-        });
-        setMarksList(_list);
+        const marksKeys = Object.keys(marks);
+        const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
+        setMarksList(list);
       }
     }
   }, [marks]);
-  var scope = function scope2() {
+  const scope = () => {
     return max - min;
   };
-  var classes = classNames(classPrefix, _defineProperty(_defineProperty({}, "".concat(classPrefix, "-disabled"), disabled), "".concat(classPrefix, "-vertical"), vertical));
-  var containerClasses = classNames("".concat(classPrefix, "-container"), _defineProperty({}, "".concat(classPrefix, "-container-vertical"), vertical), className);
-  var markClassName = useCallback(function(mark) {
-    var classPrefix2 = "nut-range-mark";
-    var lowerBound = min;
-    var upperBound = max;
+  const classes = classNames(classPrefix, {
+    [`${classPrefix}-disabled`]: disabled,
+    [`${classPrefix}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix}-container`, {
+    [`${classPrefix}-container-vertical`]: vertical
+  }, className);
+  const markClassName = useCallback((mark) => {
+    const classPrefix2 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
     if (range && Array.isArray(current)) {
       lowerBound = current[0];
       upperBound = current[1];
     } else {
       upperBound = current;
     }
-    var isActive = mark <= upperBound && mark >= lowerBound;
-    return ["".concat(classPrefix2, "-text"), "".concat(isActive ? "".concat(classPrefix2, "-text-active") : "")].join(" ");
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix2}-text`,
+      `${isActive ? `${classPrefix2}-text-active` : ""}`
+    ].join(" ");
   }, [range, current, min, max]);
-  var isRange = function isRange2(val) {
+  const isRange = (val) => {
     return !!range && Array.isArray(val);
   };
-  var calcMainAxis = function calcMainAxis2() {
-    var modelVal = current;
+  const calcMainAxis = () => {
+    const modelVal = current;
     if (isRange(modelVal)) {
-      return "".concat((modelVal[1] - modelVal[0]) * 100 / scope(), "%");
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
     }
-    return "".concat((modelVal - min) * 100 / scope(), "%");
+    return `${(modelVal - min) * 100 / scope()}%`;
   };
-  var calcOffset = function calcOffset2() {
-    var modelVal = current;
+  const calcOffset = () => {
+    const modelVal = current;
     if (isRange(modelVal)) {
-      return "".concat((modelVal[0] - min) * 100 / scope(), "%");
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
     }
-    return "0%";
+    return `0%`;
   };
-  var barStyle = function barStyle2() {
+  const barStyle = () => {
     if (vertical) {
       return {
         height: calcMainAxis(),
@@ -125,43 +93,45 @@ var Range = function Range2(props) {
         transition: dragStatus ? "none" : void 0
       };
     }
+    const dir = rtl ? "right" : "left";
     return {
       width: calcMainAxis(),
-      left: calcOffset(),
+      [dir]: calcOffset(),
       transition: dragStatus ? "none" : void 0
     };
   };
-  var marksStyle = function marksStyle2(mark) {
-    var style = {
-      left: "".concat((mark - min) / scope() * 100, "%")
+  const marksStyle = (mark) => {
+    const dir = rtl ? "right" : "left";
+    let style = {
+      [dir]: `${(mark - min) / scope() * 100}%`
     };
     if (vertical) {
       style = {
-        top: "".concat((mark - min) / scope() * 100, "%")
+        top: `${(mark - min) / scope() * 100}%`
       };
     }
     return style;
   };
-  var tickClass = function tickClass2(mark) {
+  const tickClass = (mark) => {
     if (range && Array.isArray(current)) {
       return mark <= current[1] && mark >= current[0];
     }
     return mark <= current;
   };
-  var format = function format2(value2) {
+  const format = (value2) => {
     value2 = Math.max(+min, Math.min(value2, +max));
     return Math.round(value2 / +step) * +step;
   };
-  var isSameValue = function isSameValue2(newValue, oldValue) {
+  const isSameValue = (newValue, oldValue) => {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
   };
-  var handleOverlap = function handleOverlap2(value2) {
+  const handleOverlap = (value2) => {
     if (value2[0] > value2[1]) {
       return value2.slice(0).reverse();
     }
     return value2;
   };
-  var updateValue = function updateValue2(value2, end) {
+  const updateValue = (value2, end) => {
     if (isRange(value2)) {
       value2 = handleOverlap(value2).map(format);
     } else {
@@ -172,23 +142,23 @@ var Range = function Range2(props) {
     }
     end && onEnd && onEnd(value2);
   };
-  var click = function click2(event) {
+  const click = (event) => {
     if (disabled || !root.current) {
       return;
     }
     setDragStatus("");
-    var rect = getRect(root.current);
-    var delta = event.clientX - rect.left;
-    var total = rect.width;
+    const rect = getRect(root.current);
+    let delta = event.clientX - rect.left;
+    let total = rect.width;
     if (vertical) {
       delta = event.clientY - rect.top;
       total = rect.height;
     }
-    var value2 = min + delta / total * scope();
+    const value2 = min + delta / total * scope();
     setEaxctValue(current);
     if (isRange(current)) {
-      var _current = _slicedToArray(current, 2), left = _current[0], right = _current[1];
-      var middle = (left + right) / 2;
+      const [left, right] = current;
+      const middle = (left + right) / 2;
       if (value2 <= middle) {
         updateValue([value2, right], true);
       } else {
@@ -198,7 +168,7 @@ var Range = function Range2(props) {
       updateValue(value2, true);
     }
   };
-  var _onTouchStart = function onTouchStart(event) {
+  const onTouchStart = (event) => {
     if (disabled) {
       return;
     }
@@ -211,7 +181,7 @@ var Range = function Range2(props) {
     }
     setDragStatus("start");
   };
-  var _onTouchMove = function onTouchMove(event) {
+  const onTouchMove = (event) => {
     event.stopPropagation();
     if (disabled || !root.current) {
       return;
@@ -221,16 +191,17 @@ var Range = function Range2(props) {
     }
     touch.move(event);
     setDragStatus("draging");
-    var rect = getRect(root.current);
-    var delta = touch.deltaX.current;
-    var total = rect.width;
-    var diff = delta / total * scope();
+    const rect = getRect(root.current);
+    let delta = touch.deltaX.current;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    diff = rtl ? -diff : diff;
     if (vertical) {
       delta = touch.deltaY.current;
       total = rect.height;
       diff = delta / total * scope();
     }
-    var newValue;
+    let newValue;
     if (isRange(startValue)) {
       newValue = exactValue.slice();
       newValue[buttonIndex] = startValue[buttonIndex] + diff;
@@ -240,7 +211,7 @@ var Range = function Range2(props) {
     setEaxctValue(newValue);
     updateValue(newValue);
   };
-  var onTouchEnd = function onTouchEnd2() {
+  const onTouchEnd = () => {
     if (disabled) {
       return;
     }
@@ -249,78 +220,43 @@ var Range = function Range2(props) {
     }
     setDragStatus("");
   };
-  var curValue = function curValue2(idx) {
-    var modelVal = current;
-    var value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+  const curValue = (idx) => {
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
     return value2;
   };
-  var renderButton = function renderButton2(index) {
-    return React__default.createElement(React__default.Fragment, null, button || React__default.createElement("div", {
-      className: "nut-range-button"
-    }, currentDescription !== null && React__default.createElement("div", {
-      className: "number"
-    }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
+  const renderButton = (index) => {
+    return React__default.createElement(React__default.Fragment, null, button || React__default.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React__default.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
   };
-  return React__default.createElement("div", {
-    className: containerClasses
-  }, minDescription !== null && React__default.createElement("div", {
-    className: "min"
-  }, minDescription || min), React__default.createElement("div", {
-    ref: root,
-    className: classes,
-    onClick: function onClick(e) {
-      return click(e);
-    }
-  }, marksList.length > 0 && React__default.createElement("div", {
-    className: "nut-range-mark"
-  }, marksList.map(function(mark) {
-    return React__default.createElement("span", {
-      key: mark,
-      className: markClassName(mark),
-      style: marksStyle(mark)
-    }, Array.isArray(marks) ? marksRef.current[mark] : marks[mark], React__default.createElement("span", {
-      className: classNames("nut-range-tick", {
-        active: tickClass(mark)
-      })
-    }));
-  })), React__default.createElement("div", {
-    className: "nut-range-bar",
-    style: barStyle()
-  }, range ? [0, 1].map(function(item, index) {
-    return React__default.createElement("div", {
-      key: index,
-      className: "".concat(index === 0 ? "nut-range-button-wrapper-left" : "", "\n                  ").concat(index === 1 ? "nut-range-button-wrapper-right" : ""),
-      onTouchStart: function onTouchStart(e) {
-        if (typeof index === "number") {
-          setButtonIndex(index);
-        }
-        _onTouchStart(e);
-      },
-      onTouchMove: function onTouchMove(e) {
-        return _onTouchMove(e);
-      },
-      onTouchEnd,
-      onTouchCancel: onTouchEnd,
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, renderButton(index));
-  }) : React__default.createElement("div", {
-    className: "nut-range-button-wrapper",
-    onTouchStart: function onTouchStart(e) {
-      return _onTouchStart(e);
-    },
-    onTouchMove: function onTouchMove(e) {
-      return _onTouchMove(e);
-    },
-    onTouchEnd,
-    onTouchCancel: onTouchEnd,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, renderButton()))), maxDescription !== null && React__default.createElement("div", {
-    className: "max"
-  }, maxDescription || max));
+  return React__default.createElement(
+    "div",
+    { className: containerClasses },
+    minDescription !== null && React__default.createElement("div", { className: "min" }, minDescription || min),
+    React__default.createElement(
+      "div",
+      { ref: root, className: classes, onClick: (e) => click(e) },
+      marksList.length > 0 && React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
+        return React__default.createElement(
+          "span",
+          { key: mark, className: markClassName(mark), style: marksStyle(mark) },
+          Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
+          React__default.createElement("span", { className: classNames("nut-range-tick", {
+            active: tickClass(mark)
+          }) })
+        );
+      })),
+      React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React__default.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
+          if (typeof index === "number") {
+            setButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton(index));
+      }) : React__default.createElement("div", { className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton()))
+    ),
+    maxDescription !== null && React__default.createElement("div", { className: "max" }, maxDescription || max)
+  );
 };
 Range.defaultProps = defaultProps;
 Range.displayName = "NutRange";

package/dist/esm/Rate.js

@@ -1,26 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { StarFill } from "@nutui/icons-react";
@@ -28,63 +5,54 @@ import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
 import { g as getRect } from "./use-client-rect.js";
 import { u as useRefs } from "./use-refs.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  count: 5,
-  min: 0,
-  checkedIcon: null,
-  uncheckedIcon: null,
-  disabled: false,
-  readOnly: false,
-  allowHalf: false,
-  touchable: false
-});
-var Rate = function Rate2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, count = _defaultProps$props.count, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, min = _defaultProps$props.min, checkedIcon = _defaultProps$props.checkedIcon, uncheckedIcon = _defaultProps$props.uncheckedIcon, disabled = _defaultProps$props.disabled, readOnly = _defaultProps$props.readOnly, allowHalf = _defaultProps$props.allowHalf, touchable = _defaultProps$props.touchable, onChange = _defaultProps$props.onChange, onTouchEnd = _defaultProps$props.onTouchEnd;
-  var classPrefix = "nut-rate";
-  var _useState = useState([1, 2, 3, 4, 5]), _useState2 = _slicedToArray(_useState, 2), countArray = _useState2[0], setCountArray = _useState2[1];
-  var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
-  var rateRects = useRef([]);
-  var _usePropsValue = usePropsValue({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { count: 5, min: 0, checkedIcon: null, uncheckedIcon: null, disabled: false, readOnly: false, allowHalf: false, touchable: false });
+const Rate = (props) => {
+  const { className, style, count, value, defaultValue, min, checkedIcon, uncheckedIcon, disabled, readOnly, allowHalf, touchable, onChange, onTouchEnd } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-rate";
+  const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+  const [refs, setRefs] = useRefs();
+  const rateRects = useRef([]);
+  const [score, setScore] = usePropsValue({
     value,
     defaultValue: Math.max(defaultValue || 0, min),
     finalValue: 0,
     onChange
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), score = _usePropsValue2[0], setScore = _usePropsValue2[1];
-  useEffect(function() {
-    var tmp = [];
-    for (var i = 1; i <= Number(count); i++) {
+  });
+  useEffect(() => {
+    const tmp = [];
+    for (let i = 1; i <= Number(count); i++) {
       tmp.push(i);
     }
     setCountArray(tmp);
   }, [count]);
-  var renderIcon = function renderIcon2(n) {
+  const renderIcon = (n) => {
     return n <= score ? checkedIcon || React__default.createElement(StarFill, null) : uncheckedIcon || (checkedIcon ? React__default.cloneElement(checkedIcon, {
       color: void 0
     }) : React__default.createElement(StarFill, null));
   };
-  var _onClick = function onClick(e, index) {
+  const onClick = (e, index) => {
     e.preventDefault();
     e.stopPropagation();
     if (disabled || readOnly)
       return;
-    var value2 = 0;
+    let value2 = 0;
     if (!(index === 1 && score === index)) {
       value2 = index;
     }
     value2 = Math.max(value2, min);
     setScore(value2);
   };
-  var onHalfClick = function onHalfClick2(event, n) {
+  const onHalfClick = (event, n) => {
     event.preventDefault();
     event.stopPropagation();
-    var value2 = Math.max(min, n - 0.5);
+    const value2 = Math.max(min, n - 0.5);
     setScore(value2);
   };
-  var getScoreByPosition = function getScoreByPosition2(x) {
-    var _rateRects$current;
-    if ((_rateRects$current = rateRects.current) !== null && _rateRects$current !== void 0 && _rateRects$current.length) {
-      for (var index = rateRects.current.length - 1; index >= 0; index--) {
-        var item = rateRects.current[index];
+  const getScoreByPosition = (x) => {
+    var _a;
+    if ((_a = rateRects.current) === null || _a === void 0 ? void 0 : _a.length) {
+      for (let index = rateRects.current.length - 1; index >= 0; index--) {
+        const item = rateRects.current[index];
         if (item && x > item.left) {
           return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
         }
@@ -92,15 +60,15 @@ var Rate = function Rate2(props) {
       return 0;
     }
   };
-  var updateRects = function updateRects2() {
-    for (var index = 0; index < refs.length; index++) {
-      var item = refs[index];
+  const updateRects = () => {
+    for (let index = 0; index < refs.length; index++) {
+      const item = refs[index];
       if (item) {
         rateRects.current[index] = getRect(item);
       }
     }
   };
-  var handleTouchStart = function handleTouchStart2(e) {
+  const handleTouchStart = (e) => {
     if (!touchable || readOnly || disabled) {
       return;
     }
@@ -110,7 +78,7 @@ var Rate = function Rate2(props) {
     e.stopPropagation();
     updateRects();
   };
-  var handleTouchMove = function handleTouchMove2(e) {
+  const handleTouchMove = (e) => {
     if (!touchable || readOnly || disabled) {
       return;
     }
@@ -118,12 +86,12 @@ var Rate = function Rate2(props) {
       e.preventDefault();
     }
     e.stopPropagation();
-    var val = getScoreByPosition(e.touches[0].clientX);
+    const val = getScoreByPosition(e.touches[0].clientX);
     if (val !== void 0) {
       setScore(Math.max(min, val));
     }
   };
-  var handleTouchEnd = function handleTouchEnd2(e) {
+  const handleTouchEnd = (e) => {
     if (!touchable || readOnly || disabled) {
       return;
     }
@@ -131,27 +99,23 @@ var Rate = function Rate2(props) {
       e.preventDefault();
     }
     e.stopPropagation();
-    var val = getScoreByPosition(e.changedTouches[0].clientX);
+    const val = getScoreByPosition(e.changedTouches[0].clientX);
     if (val !== void 0) {
       setScore(Math.max(min, val));
       onTouchEnd && onTouchEnd(e, Math.max(min, val));
     }
   };
-  var rateRef = useRef(null);
-  useEffect(function() {
-    var element = rateRef.current;
+  const rateRef = useRef(null);
+  useEffect(() => {
+    const element = rateRef.current;
     if (element) {
       element.addEventListener("touchstart", handleTouchStart, {
         passive: false
       });
-      element.addEventListener("touchmove", handleTouchMove, {
-        passive: false
-      });
-      element.addEventListener("touchend", handleTouchEnd, {
-        passive: false
-      });
+      element.addEventListener("touchmove", handleTouchMove, { passive: false });
+      element.addEventListener("touchend", handleTouchEnd, { passive: false });
     }
-    return function() {
+    return () => {
       if (element) {
         element.removeEventListener("touchstart", handleTouchStart);
         element.removeEventListener("touchmove", handleTouchMove);
@@ -159,29 +123,18 @@ var Rate = function Rate2(props) {
       }
     };
   }, []);
-  return React__default.createElement("div", {
-    className: classNames(classPrefix, {
-      disabled,
-      readonly: readOnly
-    }, className),
-    ref: rateRef,
-    style
-  }, countArray.map(function(n, index) {
-    return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-item"),
-      key: n,
-      ref: setRefs(index),
-      onClick: function onClick(event) {
-        return _onClick(event, n);
-      }
-    }, React__default.createElement("div", {
-      className: classNames("".concat(classPrefix, "-item-icon"), _defineProperty({}, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score))
-    }, renderIcon(n)), allowHalf && score > n - 1 && React__default.createElement("div", {
-      className: classNames("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
-      onClick: function onClick(event) {
-        return onHalfClick(event, n);
-      }
-    }, renderIcon(n)));
+  return React__default.createElement("div", { className: classNames(classPrefix, {
+    disabled,
+    readonly: readOnly
+  }, className), ref: rateRef, style }, countArray.map((n, index) => {
+    return React__default.createElement(
+      "div",
+      { className: `${classPrefix}-item`, key: n, ref: setRefs(index), onClick: (event) => onClick(event, n) },
+      React__default.createElement("div", { className: classNames(`${classPrefix}-item-icon`, {
+        [`${classPrefix}-item-icon-disabled`]: disabled || n > score
+      }) }, renderIcon(n)),
+      allowHalf && score > n - 1 && React__default.createElement("div", { className: classNames(`${classPrefix}-item-half`, `${classPrefix}-item-icon`, `${classPrefix}-item-icon-half`), onClick: (event) => onHalfClick(event, n) }, renderIcon(n))
+    );
   }));
 };
 Rate.defaultProps = defaultProps;