refactor: Rate migrate to genComponentStyleHook (#34919)

components/_util/theme/interface.ts

@@ -55,6 +55,7 @@ export interface OverrideToken {
   Mentions?: MentionsComponentToken;
   Pagination?: {};
   Popover?: {};
+  Rate?: {};
   Result?: {};
   Select?: SelectComponentToken;
   Slider?: SliderComponentToken;

components/rate/index.tsx

@@ -33,11 +33,11 @@ const Rate = React.forwardRef<unknown, RateProps>(({ prefixCls, tooltips, ...pro
     return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
   };
 
-  const { getPrefixCls, iconPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const ratePrefixCls = getPrefixCls('rate', prefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(ratePrefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(ratePrefixCls);
 
   return wrapSSR(
     <RcRate

components/rate/style/index.tsx

@@ -1,27 +1,18 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import {
-  DerivativeToken,
-  resetComponent,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-  GenerateStyle,
-} from '../../_util/theme';
+import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
 
-interface RateToken extends DerivativeToken {
+interface RateToken extends FullToken<'Rate'> {
   rateStarColor: string;
   rateStarSize: number;
   rateStarHoverScale: CSSObject['transform'];
-  rateCls: string;
-  iconPrefixCls: string;
 }
 
 const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
-  const { rateCls } = token;
+  const { componentCls } = token;
 
   return {
-    [`${rateCls}-star`]: {
+    [`${componentCls}-star`]: {
       position: 'relative',
       display: 'inline-block',
       color: 'inherit',
@@ -53,7 +44,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
         transition: `all ${token.motionDurationSlow}`,
         userSelect: 'none',
 
-        [token.iconPrefixCls]: {
+        [token.iconCls]: {
           verticalAlign: 'middle',
         },
       },
@@ -68,11 +59,11 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
         opacity: 0,
       },
 
-      [`&-half ${rateCls}-star-first, &-half ${rateCls}-star-second`]: {
+      [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
         opacity: 1,
       },
 
-      [`&-half ${rateCls}-star-first, &-full ${rateCls}-star-second`]: {
+      [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
         color: 'inherit',
       },
     },
@@ -80,16 +71,16 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
 };
 
 const genRateRtlStyle = (token: RateToken): CSSObject => ({
-  [`&-rtl${token.rateCls}`]: {
+  [`&-rtl${token.componentCls}`]: {
     direction: 'rtl',
   },
 });
 
 const genRateStyle: GenerateStyle<RateToken> = token => {
-  const { rateCls } = token;
+  const { componentCls } = token;
 
   return {
-    [rateCls]: {
+    [componentCls]: {
       ...resetComponent(token),
 
       display: 'inline-block',
@@ -102,7 +93,7 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
       outline: 'none',
 
       // disable styles
-      [`&-disabled${rateCls} ${rateCls}-star`]: {
+      [`&-disabled${componentCls} ${componentCls}-star`]: {
         cursor: 'default',
 
         '&:hover': {
@@ -114,7 +105,7 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
       ...genRateStarStyle(token),
 
       // text styles
-      [`+ ${rateCls}-text`]: {
+      [`+ ${componentCls}-text`]: {
         display: 'inline-block',
         marginInlineStart: token.marginXS,
         fontSize: token.fontSize,
@@ -127,24 +118,13 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
 };
 
 // ============================== Export ==============================
-export default function useStyle(
-  prefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
+export default genComponentStyleHook('Rate', token => {
   const rateToken: RateToken = {
     ...token,
     // FIXME: missing token
     rateStarColor: '#fadb14', // @yellow-6
     rateStarSize: 20, // fixed-value
     rateStarHoverScale: 'scale(1.1)', // fixed-value
-    rateCls: `.${prefixCls}`,
-    iconPrefixCls: `.${iconPrefixCls}`,
   };
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [genRateStyle(rateToken)]),
-    hashId,
-  ];
-}
+  return [genRateStyle(rateToken)];
+});