refactor(rate): rewrite with hook (#23545)

* refactor(rate): rewrite with hook

* fix: useContext

* fix

* remove

* fix: add displayName

components/rate/__tests__/index.test.js

@@ -4,7 +4,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('Rate', () => {
-  focusTest(Rate);
+  focusTest(Rate, { refFocus: true });
   mountTest(Rate);
   rtlTest(Rate);
 });

components/rate/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import StarFilled from '@ant-design/icons/StarFilled';
 
 import Tooltip from '../tooltip';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export interface RateProps {
   prefixCls?: string;
@@ -27,53 +27,36 @@ interface RateNodeProps {
   index: number;
 }
 
-export default class Rate extends React.Component<RateProps, any> {
-  static defaultProps = {
-    character: <StarFilled />,
-  };
-
-  private rcRate: any;
-
-  saveRate = (node: any) => {
-    this.rcRate = node;
-  };
-
-  characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
-    const { tooltips } = this.props;
+const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
+  const characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
+    const { tooltips } = props;
     if (!tooltips) return node;
-
     return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
   };
 
-  focus() {
-    this.rcRate.focus();
-  }
-
-  blur() {
-    this.rcRate.blur();
-  }
-
-  renderRate = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const { prefixCls, className, ...restProps } = this.props;
-
-    const rateProps = omit(restProps, ['tooltips']);
-    const ratePrefixCls = getPrefixCls('rate', prefixCls);
-    const rateClassNames = classNames(className, {
-      [`${ratePrefixCls}-rtl`]: direction === 'rtl',
-    });
-
-    return (
-      <RcRate
-        ref={this.saveRate}
-        characterRender={this.characterRender}
-        {...rateProps}
-        prefixCls={ratePrefixCls}
-        className={rateClassNames}
-      />
-    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderRate}</ConfigConsumer>;
-  }
-}
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { prefixCls, className, ...restProps } = props;
+  const rateProps = omit(restProps, ['tooltips']);
+  const ratePrefixCls = getPrefixCls('rate', prefixCls);
+  const rateClassNames = classNames(className, {
+    [`${ratePrefixCls}-rtl`]: direction === 'rtl',
+  });
+
+  return (
+    <RcRate
+      ref={ref}
+      characterRender={characterRender}
+      {...rateProps}
+      prefixCls={ratePrefixCls}
+      className={rateClassNames}
+    />
+  );
+});
+
+Rate.displayName = 'Rate';
+
+Rate.defaultProps = {
+  character: <StarFilled />,
+};
+
+export default Rate;