rc-rate - npm Package Compare versions

Comparing version 2.9.2 to 2.10.0

es/Rate.d.ts

 import React from 'react';
-import Star from './Star';
 import type { StarProps } from './Star';
-declare function noop(): void;
-export interface RateProps extends Pick<StarProps, "count" | "character" | "characterRender" | "allowHalf" | "disabled"> {
+export interface RateProps extends Pick<StarProps, 'count' | 'character' | 'characterRender' | 'allowHalf' | 'disabled'> {
     value?: number;
@@ -21,42 +19,7 @@ defaultValue?: number;
 }
-interface RateState {
-    value: number;
-    cleanedValue: number;
-    hoverValue?: number;
-    focused: boolean;
+export interface RateRef {
+    focus: VoidFunction;
+    blur: VoidFunction;
 }
-declare class Rate extends React.Component<RateProps, RateState> {
-    static defaultProps: {
-        defaultValue: number;
-        count: number;
-        allowHalf: boolean;
-        allowClear: boolean;
-        style: {};
-        prefixCls: string;
-        onChange: typeof noop;
-        character: string;
-        onHoverChange: typeof noop;
-        tabIndex: number;
-        direction: string;
-    };
-    stars: Record<string, Star>;
-    rate: HTMLUListElement;
-    constructor(props: RateProps);
-    componentDidMount(): void;
-    onHover: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
-    onMouseLeave: () => void;
-    onClick: (event: React.MouseEvent | React.KeyboardEvent, index: number) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-    onKeyDown: React.KeyboardEventHandler<HTMLUListElement>;
-    static getDerivedStateFromProps(nextProps: RateProps, state: RateState): RateState;
-    getStarDOM(index: number): HTMLElement;
-    getStarValue(index: number, x: number): number;
-    saveRef: (index: number) => (node: Star) => void;
-    saveRate: (node: HTMLUListElement) => void;
-    focus(): void;
-    blur(): void;
-    changeValue(value: number): void;
-    render(): JSX.Element;
-}
-export default Rate;
+declare const _default: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
+export default _default;

es/Rate.js

@@ -1,8 +0,5 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
+import useMergedState from "rc-util/es/hooks/useMergedState";
 import findDOMNode from "rc-util/es/Dom/findDOMNode";
@@ -13,325 +10,205 @@ import classNames from 'classnames';
 import Star from './Star';
-
-function noop() {}
-
-var Rate = /*#__PURE__*/function (_React$Component) {
-  _inherits(Rate, _React$Component);
-
-  var _super = _createSuper(Rate);
-
-  function Rate(props) {
-    var _this;
-
-    _classCallCheck(this, Rate);
-
-    _this = _super.call(this, props);
-    _this.stars = void 0;
-    _this.rate = void 0;
-
-    _this.onHover = function (event, index) {
-      var onHoverChange = _this.props.onHoverChange;
-
-      var hoverValue = _this.getStarValue(index, event.pageX);
-
-      var cleanedValue = _this.state.cleanedValue;
-
-      if (hoverValue !== cleanedValue) {
-        _this.setState({
-          hoverValue: hoverValue,
-          cleanedValue: null
-        });
-      }
-
-      onHoverChange(hoverValue);
-    };
-
-    _this.onMouseLeave = function () {
-      var onHoverChange = _this.props.onHoverChange;
-
-      _this.setState({
-        hoverValue: undefined,
-        cleanedValue: null
-      });
-
-      onHoverChange(undefined);
-    };
-
-    _this.onClick = function (event, index) {
-      var allowClear = _this.props.allowClear;
-      var value = _this.state.value;
-
-      var newValue = _this.getStarValue(index, event.pageX);
-
-      var isReset = false;
-
-      if (allowClear) {
-        isReset = newValue === value;
-      }
-
-      _this.onMouseLeave();
-
-      _this.changeValue(isReset ? 0 : newValue);
-
-      _this.setState({
-        cleanedValue: isReset ? newValue : null
-      });
-    };
-
-    _this.onFocus = function () {
-      var onFocus = _this.props.onFocus;
-
-      _this.setState({
-        focused: true
-      });
-
-      if (onFocus) {
-        onFocus();
-      }
-    };
-
-    _this.onBlur = function () {
-      var onBlur = _this.props.onBlur;
-
-      _this.setState({
-        focused: false
-      });
-
-      if (onBlur) {
-        onBlur();
-      }
-    };
-
-    _this.onKeyDown = function (event) {
-      var keyCode = event.keyCode;
-      var _this$props = _this.props,
-          count = _this$props.count,
-          allowHalf = _this$props.allowHalf,
-          onKeyDown = _this$props.onKeyDown,
-          direction = _this$props.direction;
-      var reverse = direction === 'rtl';
-      var value = _this.state.value;
-
-      if (keyCode === KeyCode.RIGHT && value < count && !reverse) {
-        if (allowHalf) {
-          value += 0.5;
-        } else {
-          value += 1;
+import useRefs from './useRefs';
+function Rate(props, ref) {
+  var _classNames;
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-rate' : _props$prefixCls,
+    className = props.className,
+    style = props.style,
+    defaultValue = props.defaultValue,
+    propValue = props.value,
+    _props$count = props.count,
+    count = _props$count === void 0 ? 5 : _props$count,
+    _props$allowHalf = props.allowHalf,
+    allowHalf = _props$allowHalf === void 0 ? false : _props$allowHalf,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    _props$character = props.character,
+    character = _props$character === void 0 ? '★' : _props$character,
+    characterRender = props.characterRender,
+    disabled = props.disabled,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'ltr' : _props$direction,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    autoFocus = props.autoFocus,
+    onHoverChange = props.onHoverChange,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown;
+  var _useRefs = useRefs(),
+    _useRefs2 = _slicedToArray(_useRefs, 2),
+    getStarRef = _useRefs2[0],
+    setStarRef = _useRefs2[1];
+  var rateRef = React.useRef(null);
+  // ============================ Ref =============================
+  var triggerFocus = function triggerFocus() {
+    if (!disabled) {
+      var _rateRef$current;
+      (_rateRef$current = rateRef.current) === null || _rateRef$current === void 0 ? void 0 : _rateRef$current.focus();
+    }
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: triggerFocus,
+      blur: function blur() {
+        if (!disabled) {
+          var _rateRef$current2;
+          (_rateRef$current2 = rateRef.current) === null || _rateRef$current2 === void 0 ? void 0 : _rateRef$current2.blur();
         }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === KeyCode.LEFT && value > 0 && !reverse) {
-        if (allowHalf) {
-          value -= 0.5;
-        } else {
-          value -= 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === KeyCode.RIGHT && value > 0 && reverse) {
-        if (allowHalf) {
-          value -= 0.5;
-        } else {
-          value -= 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === KeyCode.LEFT && value < count && reverse) {
-        if (allowHalf) {
-          value += 0.5;
-        } else {
-          value += 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
       }
-
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
     };
-
-    _this.saveRef = function (index) {
-      return function (node) {
-        _this.stars[index] = node;
-      };
-    };
-
-    _this.saveRate = function (node) {
-      _this.rate = node;
-    };
-
-    var _value = props.value;
-
-    if (_value === undefined) {
-      _value = props.defaultValue;
-    }
-
-    _this.stars = {};
-    _this.state = {
-      value: _value,
-      focused: false,
-      cleanedValue: null
-    };
-    return _this;
-  }
-
-  _createClass(Rate, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props2 = this.props,
-          autoFocus = _this$props2.autoFocus,
-          disabled = _this$props2.disabled;
-
-      if (autoFocus && !disabled) {
-        this.focus();
+  });
+  // =========================== Value ============================
+  var _useMergedState = useMergedState(defaultValue || 0, {
+      value: propValue
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var _useMergedState3 = useMergedState(null),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    cleanedValue = _useMergedState4[0],
+    setCleanedValue = _useMergedState4[1];
+  var getStarValue = function getStarValue(index, x) {
+    var reverse = direction === 'rtl';
+    var starValue = index + 1;
+    if (allowHalf) {
+      var starEle = findDOMNode(getStarRef(index));
+      var leftDis = getOffsetLeft(starEle);
+      var width = starEle.clientWidth;
+      if (reverse && x - leftDis > width / 2) {
+        starValue -= 0.5;
+      } else if (!reverse && x - leftDis < width / 2) {
+        starValue -= 0.5;
       }
     }
-  }, {
-    key: "getStarDOM",
-    value: function getStarDOM(index) {
-      return findDOMNode(this.stars[index]);
+    return starValue;
+  };
+  // >>>>> Change
+  var changeValue = function changeValue(nextValue) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  };
+  // =========================== Focus ============================
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var onInternalFocus = function onInternalFocus() {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+  };
+  var onInternalBlur = function onInternalBlur() {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  // =========================== Hover ============================
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hoverValue = _React$useState4[0],
+    setHoverValue = _React$useState4[1];
+  var onHover = function onHover(event, index) {
+    var nextHoverValue = getStarValue(index, event.pageX);
+    if (nextHoverValue !== cleanedValue) {
+      setHoverValue(nextHoverValue);
+      setCleanedValue(null);
     }
-  }, {
-    key: "getStarValue",
-    value: function getStarValue(index, x) {
-      var _this$props3 = this.props,
-          allowHalf = _this$props3.allowHalf,
-          direction = _this$props3.direction;
-      var reverse = direction === 'rtl';
-      var value = index + 1;
-
+    onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(nextHoverValue);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setHoverValue(null);
+    setCleanedValue(null);
+    onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(undefined);
+  };
+  // =========================== Click ============================
+  var onClick = function onClick(event, index) {
+    var newValue = getStarValue(index, event.pageX);
+    var isReset = false;
+    if (allowClear) {
+      isReset = newValue === value;
+    }
+    onMouseLeave();
+    changeValue(isReset ? 0 : newValue);
+    setCleanedValue(isReset ? newValue : null);
+  };
+  // ========================== Keyboard ==========================
+  var onInternalKeyDown = function onInternalKeyDown(event) {
+    var keyCode = event.keyCode;
+    var reverse = direction === 'rtl';
+    var nextValue = value;
+    if (keyCode === KeyCode.RIGHT && nextValue < count && !reverse) {
       if (allowHalf) {
-        var starEle = this.getStarDOM(index);
-        var leftDis = getOffsetLeft(starEle);
-        var width = starEle.clientWidth;
-
-        if (reverse && x - leftDis > width / 2) {
-          value -= 0.5;
-        } else if (!reverse && x - leftDis < width / 2) {
-          value -= 0.5;
-        }
+        nextValue += 0.5;
+      } else {
+        nextValue += 1;
       }
-
-      return value;
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var disabled = this.props.disabled;
-
-      if (!disabled) {
-        this.rate.focus();
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === KeyCode.LEFT && nextValue > 0 && !reverse) {
+      if (allowHalf) {
+        nextValue -= 0.5;
+      } else {
+        nextValue -= 1;
       }
-    }
-  }, {
-    key: "blur",
-    value: function blur() {
-      var disabled = this.props.disabled;
-
-      if (!disabled) {
-        this.rate.blur();
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === KeyCode.RIGHT && nextValue > 0 && reverse) {
+      if (allowHalf) {
+        nextValue -= 0.5;
+      } else {
+        nextValue -= 1;
       }
-    }
-  }, {
-    key: "changeValue",
-    value: function changeValue(value) {
-      var onChange = this.props.onChange;
-
-      if (!('value' in this.props)) {
-        this.setState({
-          value: value
-        });
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === KeyCode.LEFT && nextValue < count && reverse) {
+      if (allowHalf) {
+        nextValue += 0.5;
+      } else {
+        nextValue += 1;
       }
-
-      onChange(value);
+      changeValue(nextValue);
+      event.preventDefault();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          count = _this$props4.count,
-          allowHalf = _this$props4.allowHalf,
-          style = _this$props4.style,
-          prefixCls = _this$props4.prefixCls,
-          disabled = _this$props4.disabled,
-          className = _this$props4.className,
-          character = _this$props4.character,
-          characterRender = _this$props4.characterRender,
-          tabIndex = _this$props4.tabIndex,
-          direction = _this$props4.direction;
-      var _this$state = this.state,
-          value = _this$state.value,
-          hoverValue = _this$state.hoverValue,
-          focused = _this$state.focused;
-      var stars = [];
-      var disabledClass = disabled ? "".concat(prefixCls, "-disabled") : '';
-
-      for (var index = 0; index < count; index += 1) {
-        stars.push( /*#__PURE__*/React.createElement(Star, {
-          ref: this.saveRef(index),
-          index: index,
-          count: count,
-          disabled: disabled,
-          prefixCls: "".concat(prefixCls, "-star"),
-          allowHalf: allowHalf,
-          value: hoverValue === undefined ? value : hoverValue,
-          onClick: this.onClick,
-          onHover: this.onHover,
-          key: index,
-          character: character,
-          characterRender: characterRender,
-          focused: focused
-        }));
-      }
-
-      var rateClassName = classNames(prefixCls, disabledClass, className, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
-      return /*#__PURE__*/React.createElement("ul", {
-        className: rateClassName,
-        style: style,
-        onMouseLeave: disabled ? null : this.onMouseLeave,
-        tabIndex: disabled ? -1 : tabIndex,
-        onFocus: disabled ? null : this.onFocus,
-        onBlur: disabled ? null : this.onBlur,
-        onKeyDown: disabled ? null : this.onKeyDown,
-        ref: this.saveRate,
-        role: "radiogroup"
-      }, stars);
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+  // =========================== Effect ===========================
+  React.useEffect(function () {
+    if (autoFocus && !disabled) {
+      triggerFocus();
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, state) {
-      if ('value' in nextProps && nextProps.value !== undefined) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          value: nextProps.value
-        });
-      }
-
-      return state;
-    }
-  }]);
-
-  return Rate;
-}(React.Component);
-
-Rate.defaultProps = {
-  defaultValue: 0,
-  count: 5,
-  allowHalf: false,
-  allowClear: true,
-  style: {},
-  prefixCls: 'rc-rate',
-  onChange: noop,
-  character: '★',
-  onHoverChange: noop,
-  tabIndex: 0,
-  direction: 'ltr'
-};
-export default Rate;
+  }, []);
+  // =========================== Render ===========================
+  // >>> Star
+  var starNodes = new Array(count).fill(0).map(function (_, index) {
+    return /*#__PURE__*/React.createElement(Star, {
+      ref: setStarRef(index),
+      index: index,
+      count: count,
+      disabled: disabled,
+      prefixCls: "".concat(prefixCls, "-star"),
+      allowHalf: allowHalf,
+      value: hoverValue === null ? value : hoverValue,
+      onClick: onClick,
+      onHover: onHover,
+      key: index,
+      character: character,
+      characterRender: characterRender,
+      focused: focused
+    });
+  });
+  // >>> Node
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames)),
+    style: style,
+    onMouseLeave: disabled ? null : onMouseLeave,
+    tabIndex: disabled ? -1 : tabIndex,
+    onFocus: disabled ? null : onInternalFocus,
+    onBlur: disabled ? null : onInternalBlur,
+    onKeyDown: disabled ? null : onInternalKeyDown,
+    ref: rateRef,
+    role: "radiogroup"
+  }, starNodes);
+}
+export default /*#__PURE__*/React.forwardRef(Rate);

es/Star.d.ts

@@ -15,8 +15,3 @@ import React from 'react';
 }
-export default class Star extends React.Component<StarProps> {
-    onHover: React.MouseEventHandler<HTMLDivElement>;
-    onClick: (e: any) => void;
-    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-    getClassName(): string;
-    render(): React.ReactNode;
-}
+declare const _default: React.ForwardRefExoticComponent<StarProps & React.RefAttributes<HTMLLIElement>>;
+export default _default;

es/Star.js

@@ -1,123 +0,75 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-
-var Star = /*#__PURE__*/function (_React$Component) {
-  _inherits(Star, _React$Component);
-
-  var _super = _createSuper(Star);
-
-  function Star() {
-    var _this;
-
-    _classCallCheck(this, Star);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.onHover = function (e) {
-      var _this$props = _this.props,
-          onHover = _this$props.onHover,
-          index = _this$props.index;
-      onHover(e, index);
-    };
-
-    _this.onClick = function (e) {
-      var _this$props2 = _this.props,
-          onClick = _this$props2.onClick,
-          index = _this$props2.index;
+import KeyCode from "rc-util/es/KeyCode";
+import classNames from 'classnames';
+function Star(props, ref) {
+  var disabled = props.disabled,
+    prefixCls = props.prefixCls,
+    character = props.character,
+    characterRender = props.characterRender,
+    index = props.index,
+    count = props.count,
+    value = props.value,
+    allowHalf = props.allowHalf,
+    focused = props.focused,
+    onHover = props.onHover,
+    onClick = props.onClick;
+  // =========================== Events ===========================
+  var onInternalHover = function onInternalHover(e) {
+    onHover(e, index);
+  };
+  var onInternalClick = function onInternalClick(e) {
+    onClick(e, index);
+  };
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    if (e.keyCode === KeyCode.ENTER) {
       onClick(e, index);
-    };
-
-    _this.onKeyDown = function (e) {
-      var _this$props3 = _this.props,
-          onClick = _this$props3.onClick,
-          index = _this$props3.index;
-
-      if (e.keyCode === 13) {
-        onClick(e, index);
-      }
-    };
-
-    return _this;
-  }
-
-  _createClass(Star, [{
-    key: "getClassName",
-    value: function getClassName() {
-      var _this$props4 = this.props,
-          prefixCls = _this$props4.prefixCls,
-          index = _this$props4.index,
-          value = _this$props4.value,
-          allowHalf = _this$props4.allowHalf,
-          focused = _this$props4.focused;
-      var starValue = index + 1;
-      var className = prefixCls;
-
-      if (value === 0 && index === 0 && focused) {
-        className += " ".concat(prefixCls, "-focused");
-      } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
-        className += " ".concat(prefixCls, "-half ").concat(prefixCls, "-active");
-
-        if (focused) {
-          className += " ".concat(prefixCls, "-focused");
-        }
-      } else {
-        className += starValue <= value ? " ".concat(prefixCls, "-full") : " ".concat(prefixCls, "-zero");
-
-        if (starValue === value && focused) {
-          className += " ".concat(prefixCls, "-focused");
-        }
-      }
-
-      return className;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var onHover = this.onHover,
-          onClick = this.onClick,
-          onKeyDown = this.onKeyDown;
-      var _this$props5 = this.props,
-          disabled = _this$props5.disabled,
-          prefixCls = _this$props5.prefixCls,
-          character = _this$props5.character,
-          characterRender = _this$props5.characterRender,
-          index = _this$props5.index,
-          count = _this$props5.count,
-          value = _this$props5.value;
-      var characterNode = typeof character === 'function' ? character(this.props) : character;
-      var start = /*#__PURE__*/React.createElement("li", {
-        className: this.getClassName()
-      }, /*#__PURE__*/React.createElement("div", {
-        onClick: disabled ? null : onClick,
-        onKeyDown: disabled ? null : onKeyDown,
-        onMouseMove: disabled ? null : onHover,
-        role: "radio",
-        "aria-checked": value > index ? 'true' : 'false',
-        "aria-posinset": index + 1,
-        "aria-setsize": count,
-        tabIndex: disabled ? -1 : 0
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-first")
-      }, characterNode), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-second")
-      }, characterNode)));
-
-      if (characterRender) {
-        start = characterRender(start, this.props);
-      }
-
-      return start;
+  };
+  // =========================== Render ===========================
+  // >>>>> ClassName
+  var starValue = index + 1;
+  var classNameList = new Set([prefixCls]);
+  // TODO: Current we just refactor from CC to FC. This logic seems can be optimized.
+  if (value === 0 && index === 0 && focused) {
+    classNameList.add("".concat(prefixCls, "-focused"));
+  } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
+    classNameList.add("".concat(prefixCls, "-half"));
+    classNameList.add("".concat(prefixCls, "-active"));
+    if (focused) {
+      classNameList.add("".concat(prefixCls, "-focused"));
     }
-  }]);
-
-  return Star;
-}(React.Component);
-
-export { Star as default };
+  } else {
+    if (starValue <= value) {
+      classNameList.add("".concat(prefixCls, "-full"));
+    } else {
+      classNameList.add("".concat(prefixCls, "-zero"));
+    }
+    if (starValue === value && focused) {
+      classNameList.add("".concat(prefixCls, "-focused"));
+    }
+  }
+  // >>>>> Node
+  var characterNode = typeof character === 'function' ? character(props) : character;
+  var start = /*#__PURE__*/React.createElement("li", {
+    className: classNames(Array.from(classNameList)),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: disabled ? null : onInternalClick,
+    onKeyDown: disabled ? null : onInternalKeyDown,
+    onMouseMove: disabled ? null : onInternalHover,
+    role: "radio",
+    "aria-checked": value > index ? 'true' : 'false',
+    "aria-posinset": index + 1,
+    "aria-setsize": count,
+    tabIndex: disabled ? -1 : 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-first")
+  }, characterNode), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-second")
+  }, characterNode)));
+  if (characterRender) {
+    start = characterRender(start, props);
+  }
+  return start;
+}
+export default /*#__PURE__*/React.forwardRef(Star);

es/util.js

 function getScroll(w) {
   var ret = w.pageXOffset;
   var method = 'scrollLeft';
-
   if (typeof ret !== 'number') {
-    var d = w.document; // ie6,7,8 standard mode
-
+    var d = w.document;
+    // ie6,7,8 standard mode
     ret = d.documentElement[method];
-
     if (typeof ret !== 'number') {
@@ -15,6 +13,4 @@ // quirks mode
   }
-
   return ret;
 }
-
 function getClientPosition(elem) {
@@ -36,7 +32,6 @@ var x;
 }
-
 export function getOffsetLeft(el) {
   var pos = getClientPosition(el);
-  var doc = el.ownerDocument; // Only IE use `parentWindow`
-
+  var doc = el.ownerDocument;
+  // Only IE use `parentWindow`
   var w = doc.defaultView || doc.parentWindow;
@@ -43,0 +38,0 @@ pos.left += getScroll(w);

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,4 @@ value: true
 exports.default = void 0;
-
 var _Rate = _interopRequireDefault(require("./Rate"));
-
 var _default = _Rate.default;
 exports.default = _default;

lib/Rate.d.ts

 import React from 'react';
-import Star from './Star';
 import type { StarProps } from './Star';
-declare function noop(): void;
-export interface RateProps extends Pick<StarProps, "count" | "character" | "characterRender" | "allowHalf" | "disabled"> {
+export interface RateProps extends Pick<StarProps, 'count' | 'character' | 'characterRender' | 'allowHalf' | 'disabled'> {
     value?: number;
@@ -21,42 +19,7 @@ defaultValue?: number;
 }
-interface RateState {
-    value: number;
-    cleanedValue: number;
-    hoverValue?: number;
-    focused: boolean;
+export interface RateRef {
+    focus: VoidFunction;
+    blur: VoidFunction;
 }
-declare class Rate extends React.Component<RateProps, RateState> {
-    static defaultProps: {
-        defaultValue: number;
-        count: number;
-        allowHalf: boolean;
-        allowClear: boolean;
-        style: {};
-        prefixCls: string;
-        onChange: typeof noop;
-        character: string;
-        onHoverChange: typeof noop;
-        tabIndex: number;
-        direction: string;
-    };
-    stars: Record<string, Star>;
-    rate: HTMLUListElement;
-    constructor(props: RateProps);
-    componentDidMount(): void;
-    onHover: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
-    onMouseLeave: () => void;
-    onClick: (event: React.MouseEvent | React.KeyboardEvent, index: number) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-    onKeyDown: React.KeyboardEventHandler<HTMLUListElement>;
-    static getDerivedStateFromProps(nextProps: RateProps, state: RateState): RateState;
-    getStarDOM(index: number): HTMLElement;
-    getStarValue(index: number, x: number): number;
-    saveRef: (index: number) => (node: Star) => void;
-    saveRate: (node: HTMLUListElement) => void;
-    focus(): void;
-    blur(): void;
-    changeValue(value: number): void;
-    render(): JSX.Element;
-}
-export default Rate;
+declare const _default: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
+export default _default;

lib/Rate.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,348 +8,215 @@ value: true
 exports.default = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-
+var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-
 var _util = require("./util");
-
 var _Star = _interopRequireDefault(require("./Star"));
-
-function noop() {}
-
-var Rate = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Rate, _React$Component);
-
-  var _super = (0, _createSuper2.default)(Rate);
-
-  function Rate(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Rate);
-    _this = _super.call(this, props);
-    _this.stars = void 0;
-    _this.rate = void 0;
-
-    _this.onHover = function (event, index) {
-      var onHoverChange = _this.props.onHoverChange;
-
-      var hoverValue = _this.getStarValue(index, event.pageX);
-
-      var cleanedValue = _this.state.cleanedValue;
-
-      if (hoverValue !== cleanedValue) {
-        _this.setState({
-          hoverValue: hoverValue,
-          cleanedValue: null
-        });
-      }
-
-      onHoverChange(hoverValue);
-    };
-
-    _this.onMouseLeave = function () {
-      var onHoverChange = _this.props.onHoverChange;
-
-      _this.setState({
-        hoverValue: undefined,
-        cleanedValue: null
-      });
-
-      onHoverChange(undefined);
-    };
-
-    _this.onClick = function (event, index) {
-      var allowClear = _this.props.allowClear;
-      var value = _this.state.value;
-
-      var newValue = _this.getStarValue(index, event.pageX);
-
-      var isReset = false;
-
-      if (allowClear) {
-        isReset = newValue === value;
-      }
-
-      _this.onMouseLeave();
-
-      _this.changeValue(isReset ? 0 : newValue);
-
-      _this.setState({
-        cleanedValue: isReset ? newValue : null
-      });
-    };
-
-    _this.onFocus = function () {
-      var onFocus = _this.props.onFocus;
-
-      _this.setState({
-        focused: true
-      });
-
-      if (onFocus) {
-        onFocus();
-      }
-    };
-
-    _this.onBlur = function () {
-      var onBlur = _this.props.onBlur;
-
-      _this.setState({
-        focused: false
-      });
-
-      if (onBlur) {
-        onBlur();
-      }
-    };
-
-    _this.onKeyDown = function (event) {
-      var keyCode = event.keyCode;
-      var _this$props = _this.props,
-          count = _this$props.count,
-          allowHalf = _this$props.allowHalf,
-          onKeyDown = _this$props.onKeyDown,
-          direction = _this$props.direction;
-      var reverse = direction === 'rtl';
-      var value = _this.state.value;
-
-      if (keyCode === _KeyCode.default.RIGHT && value < count && !reverse) {
-        if (allowHalf) {
-          value += 0.5;
-        } else {
-          value += 1;
+var _useRefs3 = _interopRequireDefault(require("./useRefs"));
+function Rate(props, ref) {
+  var _classNames;
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-rate' : _props$prefixCls,
+    className = props.className,
+    style = props.style,
+    defaultValue = props.defaultValue,
+    propValue = props.value,
+    _props$count = props.count,
+    count = _props$count === void 0 ? 5 : _props$count,
+    _props$allowHalf = props.allowHalf,
+    allowHalf = _props$allowHalf === void 0 ? false : _props$allowHalf,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    _props$character = props.character,
+    character = _props$character === void 0 ? '★' : _props$character,
+    characterRender = props.characterRender,
+    disabled = props.disabled,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'ltr' : _props$direction,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    autoFocus = props.autoFocus,
+    onHoverChange = props.onHoverChange,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown;
+  var _useRefs = (0, _useRefs3.default)(),
+    _useRefs2 = (0, _slicedToArray2.default)(_useRefs, 2),
+    getStarRef = _useRefs2[0],
+    setStarRef = _useRefs2[1];
+  var rateRef = _react.default.useRef(null);
+  // ============================ Ref =============================
+  var triggerFocus = function triggerFocus() {
+    if (!disabled) {
+      var _rateRef$current;
+      (_rateRef$current = rateRef.current) === null || _rateRef$current === void 0 ? void 0 : _rateRef$current.focus();
+    }
+  };
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      focus: triggerFocus,
+      blur: function blur() {
+        if (!disabled) {
+          var _rateRef$current2;
+          (_rateRef$current2 = rateRef.current) === null || _rateRef$current2 === void 0 ? void 0 : _rateRef$current2.blur();
         }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === _KeyCode.default.LEFT && value > 0 && !reverse) {
-        if (allowHalf) {
-          value -= 0.5;
-        } else {
-          value -= 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === _KeyCode.default.RIGHT && value > 0 && reverse) {
-        if (allowHalf) {
-          value -= 0.5;
-        } else {
-          value -= 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
-      } else if (keyCode === _KeyCode.default.LEFT && value < count && reverse) {
-        if (allowHalf) {
-          value += 0.5;
-        } else {
-          value += 1;
-        }
-
-        _this.changeValue(value);
-
-        event.preventDefault();
       }
-
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
     };
-
-    _this.saveRef = function (index) {
-      return function (node) {
-        _this.stars[index] = node;
-      };
-    };
-
-    _this.saveRate = function (node) {
-      _this.rate = node;
-    };
-
-    var _value = props.value;
-
-    if (_value === undefined) {
-      _value = props.defaultValue;
-    }
-
-    _this.stars = {};
-    _this.state = {
-      value: _value,
-      focused: false,
-      cleanedValue: null
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(Rate, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props2 = this.props,
-          autoFocus = _this$props2.autoFocus,
-          disabled = _this$props2.disabled;
-
-      if (autoFocus && !disabled) {
-        this.focus();
+  });
+  // =========================== Value ============================
+  var _useMergedState = (0, _useMergedState5.default)(defaultValue || 0, {
+      value: propValue
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var _useMergedState3 = (0, _useMergedState5.default)(null),
+    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+    cleanedValue = _useMergedState4[0],
+    setCleanedValue = _useMergedState4[1];
+  var getStarValue = function getStarValue(index, x) {
+    var reverse = direction === 'rtl';
+    var starValue = index + 1;
+    if (allowHalf) {
+      var starEle = (0, _findDOMNode.default)(getStarRef(index));
+      var leftDis = (0, _util.getOffsetLeft)(starEle);
+      var width = starEle.clientWidth;
+      if (reverse && x - leftDis > width / 2) {
+        starValue -= 0.5;
+      } else if (!reverse && x - leftDis < width / 2) {
+        starValue -= 0.5;
       }
     }
-  }, {
-    key: "getStarDOM",
-    value: function getStarDOM(index) {
-      return (0, _findDOMNode.default)(this.stars[index]);
+    return starValue;
+  };
+  // >>>>> Change
+  var changeValue = function changeValue(nextValue) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  };
+  // =========================== Focus ============================
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var onInternalFocus = function onInternalFocus() {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+  };
+  var onInternalBlur = function onInternalBlur() {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  // =========================== Hover ============================
+  var _React$useState3 = _react.default.useState(null),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    hoverValue = _React$useState4[0],
+    setHoverValue = _React$useState4[1];
+  var onHover = function onHover(event, index) {
+    var nextHoverValue = getStarValue(index, event.pageX);
+    if (nextHoverValue !== cleanedValue) {
+      setHoverValue(nextHoverValue);
+      setCleanedValue(null);
     }
-  }, {
-    key: "getStarValue",
-    value: function getStarValue(index, x) {
-      var _this$props3 = this.props,
-          allowHalf = _this$props3.allowHalf,
-          direction = _this$props3.direction;
-      var reverse = direction === 'rtl';
-      var value = index + 1;
-
+    onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(nextHoverValue);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setHoverValue(null);
+    setCleanedValue(null);
+    onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(undefined);
+  };
+  // =========================== Click ============================
+  var onClick = function onClick(event, index) {
+    var newValue = getStarValue(index, event.pageX);
+    var isReset = false;
+    if (allowClear) {
+      isReset = newValue === value;
+    }
+    onMouseLeave();
+    changeValue(isReset ? 0 : newValue);
+    setCleanedValue(isReset ? newValue : null);
+  };
+  // ========================== Keyboard ==========================
+  var onInternalKeyDown = function onInternalKeyDown(event) {
+    var keyCode = event.keyCode;
+    var reverse = direction === 'rtl';
+    var nextValue = value;
+    if (keyCode === _KeyCode.default.RIGHT && nextValue < count && !reverse) {
       if (allowHalf) {
-        var starEle = this.getStarDOM(index);
-        var leftDis = (0, _util.getOffsetLeft)(starEle);
-        var width = starEle.clientWidth;
-
-        if (reverse && x - leftDis > width / 2) {
-          value -= 0.5;
-        } else if (!reverse && x - leftDis < width / 2) {
-          value -= 0.5;
-        }
+        nextValue += 0.5;
+      } else {
+        nextValue += 1;
       }
-
-      return value;
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var disabled = this.props.disabled;
-
-      if (!disabled) {
-        this.rate.focus();
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === _KeyCode.default.LEFT && nextValue > 0 && !reverse) {
+      if (allowHalf) {
+        nextValue -= 0.5;
+      } else {
+        nextValue -= 1;
       }
-    }
-  }, {
-    key: "blur",
-    value: function blur() {
-      var disabled = this.props.disabled;
-
-      if (!disabled) {
-        this.rate.blur();
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === _KeyCode.default.RIGHT && nextValue > 0 && reverse) {
+      if (allowHalf) {
+        nextValue -= 0.5;
+      } else {
+        nextValue -= 1;
       }
-    }
-  }, {
-    key: "changeValue",
-    value: function changeValue(value) {
-      var onChange = this.props.onChange;
-
-      if (!('value' in this.props)) {
-        this.setState({
-          value: value
-        });
+      changeValue(nextValue);
+      event.preventDefault();
+    } else if (keyCode === _KeyCode.default.LEFT && nextValue < count && reverse) {
+      if (allowHalf) {
+        nextValue += 0.5;
+      } else {
+        nextValue += 1;
       }
-
-      onChange(value);
+      changeValue(nextValue);
+      event.preventDefault();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          count = _this$props4.count,
-          allowHalf = _this$props4.allowHalf,
-          style = _this$props4.style,
-          prefixCls = _this$props4.prefixCls,
-          disabled = _this$props4.disabled,
-          className = _this$props4.className,
-          character = _this$props4.character,
-          characterRender = _this$props4.characterRender,
-          tabIndex = _this$props4.tabIndex,
-          direction = _this$props4.direction;
-      var _this$state = this.state,
-          value = _this$state.value,
-          hoverValue = _this$state.hoverValue,
-          focused = _this$state.focused;
-      var stars = [];
-      var disabledClass = disabled ? "".concat(prefixCls, "-disabled") : '';
-
-      for (var index = 0; index < count; index += 1) {
-        stars.push( /*#__PURE__*/_react.default.createElement(_Star.default, {
-          ref: this.saveRef(index),
-          index: index,
-          count: count,
-          disabled: disabled,
-          prefixCls: "".concat(prefixCls, "-star"),
-          allowHalf: allowHalf,
-          value: hoverValue === undefined ? value : hoverValue,
-          onClick: this.onClick,
-          onHover: this.onHover,
-          key: index,
-          character: character,
-          characterRender: characterRender,
-          focused: focused
-        }));
-      }
-
-      var rateClassName = (0, _classnames.default)(prefixCls, disabledClass, className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
-      return /*#__PURE__*/_react.default.createElement("ul", {
-        className: rateClassName,
-        style: style,
-        onMouseLeave: disabled ? null : this.onMouseLeave,
-        tabIndex: disabled ? -1 : tabIndex,
-        onFocus: disabled ? null : this.onFocus,
-        onBlur: disabled ? null : this.onBlur,
-        onKeyDown: disabled ? null : this.onKeyDown,
-        ref: this.saveRate,
-        role: "radiogroup"
-      }, stars);
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+  // =========================== Effect ===========================
+  _react.default.useEffect(function () {
+    if (autoFocus && !disabled) {
+      triggerFocus();
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, state) {
-      if ('value' in nextProps && nextProps.value !== undefined) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          value: nextProps.value
-        });
-      }
-
-      return state;
-    }
-  }]);
-  return Rate;
-}(_react.default.Component);
-
-Rate.defaultProps = {
-  defaultValue: 0,
-  count: 5,
-  allowHalf: false,
-  allowClear: true,
-  style: {},
-  prefixCls: 'rc-rate',
-  onChange: noop,
-  character: '★',
-  onHoverChange: noop,
-  tabIndex: 0,
-  direction: 'ltr'
-};
-var _default = Rate;
+  }, []);
+  // =========================== Render ===========================
+  // >>> Star
+  var starNodes = new Array(count).fill(0).map(function (_, index) {
+    return /*#__PURE__*/_react.default.createElement(_Star.default, {
+      ref: setStarRef(index),
+      index: index,
+      count: count,
+      disabled: disabled,
+      prefixCls: "".concat(prefixCls, "-star"),
+      allowHalf: allowHalf,
+      value: hoverValue === null ? value : hoverValue,
+      onClick: onClick,
+      onHover: onHover,
+      key: index,
+      character: character,
+      characterRender: characterRender,
+      focused: focused
+    });
+  });
+  // >>> Node
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames)),
+    style: style,
+    onMouseLeave: disabled ? null : onMouseLeave,
+    tabIndex: disabled ? -1 : tabIndex,
+    onFocus: disabled ? null : onInternalFocus,
+    onBlur: disabled ? null : onInternalBlur,
+    onKeyDown: disabled ? null : onInternalKeyDown,
+    ref: rateRef,
+    role: "radiogroup"
+  }, starNodes);
+}
+var _default = /*#__PURE__*/_react.default.forwardRef(Rate);
 exports.default = _default;

lib/Star.d.ts

@@ -15,8 +15,3 @@ import React from 'react';
 }
-export default class Star extends React.Component<StarProps> {
-    onHover: React.MouseEventHandler<HTMLDivElement>;
-    onClick: (e: any) => void;
-    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-    getClassName(): string;
-    render(): React.ReactNode;
-}
+declare const _default: React.ForwardRefExoticComponent<StarProps & React.RefAttributes<HTMLLIElement>>;
+export default _default;

lib/Star.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,129 +8,77 @@ value: true
 exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var Star = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Star, _React$Component);
-
-  var _super = (0, _createSuper2.default)(Star);
-
-  function Star() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Star);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.onHover = function (e) {
-      var _this$props = _this.props,
-          onHover = _this$props.onHover,
-          index = _this$props.index;
-      onHover(e, index);
-    };
-
-    _this.onClick = function (e) {
-      var _this$props2 = _this.props,
-          onClick = _this$props2.onClick,
-          index = _this$props2.index;
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function Star(props, ref) {
+  var disabled = props.disabled,
+    prefixCls = props.prefixCls,
+    character = props.character,
+    characterRender = props.characterRender,
+    index = props.index,
+    count = props.count,
+    value = props.value,
+    allowHalf = props.allowHalf,
+    focused = props.focused,
+    onHover = props.onHover,
+    onClick = props.onClick;
+  // =========================== Events ===========================
+  var onInternalHover = function onInternalHover(e) {
+    onHover(e, index);
+  };
+  var onInternalClick = function onInternalClick(e) {
+    onClick(e, index);
+  };
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    if (e.keyCode === _KeyCode.default.ENTER) {
       onClick(e, index);
-    };
-
-    _this.onKeyDown = function (e) {
-      var _this$props3 = _this.props,
-          onClick = _this$props3.onClick,
-          index = _this$props3.index;
-
-      if (e.keyCode === 13) {
-        onClick(e, index);
-      }
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(Star, [{
-    key: "getClassName",
-    value: function getClassName() {
-      var _this$props4 = this.props,
-          prefixCls = _this$props4.prefixCls,
-          index = _this$props4.index,
-          value = _this$props4.value,
-          allowHalf = _this$props4.allowHalf,
-          focused = _this$props4.focused;
-      var starValue = index + 1;
-      var className = prefixCls;
-
-      if (value === 0 && index === 0 && focused) {
-        className += " ".concat(prefixCls, "-focused");
-      } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
-        className += " ".concat(prefixCls, "-half ").concat(prefixCls, "-active");
-
-        if (focused) {
-          className += " ".concat(prefixCls, "-focused");
-        }
-      } else {
-        className += starValue <= value ? " ".concat(prefixCls, "-full") : " ".concat(prefixCls, "-zero");
-
-        if (starValue === value && focused) {
-          className += " ".concat(prefixCls, "-focused");
-        }
-      }
-
-      return className;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var onHover = this.onHover,
-          onClick = this.onClick,
-          onKeyDown = this.onKeyDown;
-      var _this$props5 = this.props,
-          disabled = _this$props5.disabled,
-          prefixCls = _this$props5.prefixCls,
-          character = _this$props5.character,
-          characterRender = _this$props5.characterRender,
-          index = _this$props5.index,
-          count = _this$props5.count,
-          value = _this$props5.value;
-      var characterNode = typeof character === 'function' ? character(this.props) : character;
-
-      var start = /*#__PURE__*/_react.default.createElement("li", {
-        className: this.getClassName()
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        onClick: disabled ? null : onClick,
-        onKeyDown: disabled ? null : onKeyDown,
-        onMouseMove: disabled ? null : onHover,
-        role: "radio",
-        "aria-checked": value > index ? 'true' : 'false',
-        "aria-posinset": index + 1,
-        "aria-setsize": count,
-        tabIndex: disabled ? -1 : 0
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-first")
-      }, characterNode), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-second")
-      }, characterNode)));
-
-      if (characterRender) {
-        start = characterRender(start, this.props);
-      }
-
-      return start;
+  };
+  // =========================== Render ===========================
+  // >>>>> ClassName
+  var starValue = index + 1;
+  var classNameList = new Set([prefixCls]);
+  // TODO: Current we just refactor from CC to FC. This logic seems can be optimized.
+  if (value === 0 && index === 0 && focused) {
+    classNameList.add("".concat(prefixCls, "-focused"));
+  } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
+    classNameList.add("".concat(prefixCls, "-half"));
+    classNameList.add("".concat(prefixCls, "-active"));
+    if (focused) {
+      classNameList.add("".concat(prefixCls, "-focused"));
     }
-  }]);
-  return Star;
-}(_react.default.Component);
-
-exports.default = Star;
+  } else {
+    if (starValue <= value) {
+      classNameList.add("".concat(prefixCls, "-full"));
+    } else {
+      classNameList.add("".concat(prefixCls, "-zero"));
+    }
+    if (starValue === value && focused) {
+      classNameList.add("".concat(prefixCls, "-focused"));
+    }
+  }
+  // >>>>> Node
+  var characterNode = typeof character === 'function' ? character(props) : character;
+  var start = /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _classnames.default)(Array.from(classNameList)),
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: disabled ? null : onInternalClick,
+    onKeyDown: disabled ? null : onInternalKeyDown,
+    onMouseMove: disabled ? null : onInternalHover,
+    role: "radio",
+    "aria-checked": value > index ? 'true' : 'false',
+    "aria-posinset": index + 1,
+    "aria-setsize": count,
+    tabIndex: disabled ? -1 : 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-first")
+  }, characterNode), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-second")
+  }, characterNode)));
+  if (characterRender) {
+    start = characterRender(start, props);
+  }
+  return start;
+}
+var _default = /*#__PURE__*/_react.default.forwardRef(Star);
+exports.default = _default;

lib/util.js

@@ -7,12 +7,9 @@ "use strict";
 exports.getOffsetLeft = getOffsetLeft;
-
 function getScroll(w) {
   var ret = w.pageXOffset;
   var method = 'scrollLeft';
-
   if (typeof ret !== 'number') {
-    var d = w.document; // ie6,7,8 standard mode
-
+    var d = w.document;
+    // ie6,7,8 standard mode
     ret = d.documentElement[method];
-
     if (typeof ret !== 'number') {
@@ -23,6 +20,4 @@ // quirks mode
   }
-
   return ret;
 }
-
 function getClientPosition(elem) {
@@ -44,7 +39,6 @@ var x;
 }
-
 function getOffsetLeft(el) {
   var pos = getClientPosition(el);
-  var doc = el.ownerDocument; // Only IE use `parentWindow`
-
+  var doc = el.ownerDocument;
+  // Only IE use `parentWindow`
   var w = doc.defaultView || doc.parentWindow;
@@ -51,0 +45,0 @@ pos.left += getScroll(w);

package.json

 {
   "name": "rc-rate",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "description": "React Star Rate Component",
@@ -36,3 +36,3 @@ "engines": {
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "postpublish": "npm run gh-pages",
+    "postpublish": "npm run docs:build && npm run docs:deploy",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
@@ -56,3 +56,3 @@ "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "cross-env": "^7.0.0",
-    "dumi": "^1.1.0",
+    "dumi": "^2.1.2",
     "enzyme": "^3.1.1",
@@ -59,0 +59,0 @@ "enzyme-adapter-react-16": "^1.0.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70529

increased by63.16%

Number of package files

32

increased by60%

Lines of code

1836

increased by63.2%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes