refactor: Image migrate to genComponentStyleHook (#34933)

components/_util/theme/interface.ts

@@ -53,6 +53,7 @@ export interface OverrideToken {
   Empty?: EmptyComponentToken;
   Form?: {};
   Grid?: {};
+  Image?: {};
   Input?: {};
   InputNumber?: InputNumberComponentToken;
   List?: {};

components/image/PreviewGroup.tsx

@@ -29,11 +29,11 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   preview,
   ...props
 }) => {
-  const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const mergedPreview = React.useMemo(() => {
     if (preview === false) {

components/image/index.tsx

@@ -20,14 +20,14 @@ const Image: CompositionImage<ImageProps> = ({
   rootClassName,
   ...otherProps
 }) => {
-  const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('image', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
 
   const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
   const imageLocale = contextLocale.Image || defaultLocale.Image;
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const mergedRootClassName = classNames(rootClassName, hashId);
   const mergedPreview = React.useMemo(() => {

components/image/style/index.tsx

@@ -1,19 +1,10 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import {
+import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
-  DerivativeToken,
-  GenerateStyle,
-  resetComponent,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-} from '../../_util/theme';
 
-export interface ImageToken extends DerivativeToken {
+export interface ImageToken extends FullToken<'Image'> {
-  prefixCls: string;
   previewPrefixCls: string;
-  iconPrefixCls: string;
   imageSizeBase: number;
   marginXXS: number;
   imageBg: string;
@@ -45,8 +36,7 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
 });
 
 export const genImageMaskStyle = (token: ImageToken): CSSObject => {
-  const { iconPrefixCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } =
+  const { iconCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = token;
-    token;
   return {
     position: 'absolute',
     inset: 0,
@@ -64,7 +54,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
-      [`.${iconPrefixCls}`]: {
+      [iconCls]: {
         marginInlineEnd: marginXXS,
       },
     },
@@ -95,7 +85,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
     background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(), // FIXME: hard code
     pointerEvents: 'auto',
 
-    [`.${previewPrefixCls}-operations-operation`]: {
+    [`${previewPrefixCls}-operations-operation`]: {
       marginInlineStart: paddingSM,
       padding: paddingSM,
       cursor: 'pointer',
@@ -110,7 +100,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
       },
     },
 
-    [`.${previewPrefixCls}-icon`]: {
+    [`${previewPrefixCls}-icon`]: {
       fontSize: imagePreviewOperationSize,
     },
   };
@@ -119,7 +109,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
   const {
     black,
     modalMaskBg,
-    iconPrefixCls,
+    iconCls,
     imagePreviewOperationDisabledColor,
     previewPrefixCls,
     switchWidth,
@@ -145,14 +135,14 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
     cursor: 'pointer',
     pointerEvents: 'auto',
 
-    [`.${previewPrefixCls}-disabled`]: {
+    [`${previewPrefixCls}-disabled`]: {
       color: imagePreviewOperationDisabledColor,
       cursor: 'not-allowed',
-      [`> .${iconPrefixCls}`]: {
+      [`> ${iconCls}`]: {
         cursor: 'not-allowed',
       },
     },
-    [`> .${iconPrefixCls}`]: {
+    [`> ${iconCls}`]: {
       fontSize: iconPrefixClsFontSize,
     },
   };
@@ -164,12 +154,12 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
   return {
     height: '100%',
     textAlign: 'center',
-    [`.${previewPrefixCls}-body`]: {
+    [`${previewPrefixCls}-body`]: {
       ...genBoxStyle(),
       overflow: 'hidden',
     },
 
-    [`.${previewPrefixCls}-img`]: {
+    [`${previewPrefixCls}-img`]: {
       maxWidth: '100%',
       maxHeight: '100%',
       verticalAlign: 'middle',
@@ -193,8 +183,8 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
       },
     },
 
-    [`.${previewPrefixCls}-moving`]: {
+    [`${previewPrefixCls}-moving`]: {
-      [`.${previewPrefixCls}-preview-img`]: {
+      [`${previewPrefixCls}-preview-img`]: {
         cursor: 'grabbing',
 
         '&-wrapper': {
@@ -203,19 +193,19 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
       },
     },
 
-    [`.${previewPrefixCls}-operations`]: {
+    [`${previewPrefixCls}-operations`]: {
       ...genPreviewOperationsStyle(token),
     },
 
-    [`.${previewPrefixCls}-switch-left, .${previewPrefixCls}-switch-right`]: {
+    [`${previewPrefixCls}-switch-left, ${previewPrefixCls}-switch-right`]: {
       ...genPreviewSwitchStyle(token),
     },
 
-    [`.${previewPrefixCls}-switch-left`]: {
+    [`${previewPrefixCls}-switch-left`]: {
       insetInlineStart: switchLeft,
     },
 
-    [`.${previewPrefixCls}-switch-right`]: {
+    [`${previewPrefixCls}-switch-right`]: {
       insetInlineEnd: switchRight,
     },
   };
@@ -262,15 +252,14 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
     },
     // ============================== preview ==============================
     pointerEvents: 'none',
-    [`.${previewPrefixCls}.${prefixCls}-zoom-enter, .${previewPrefixCls}.${prefixCls}zoom-appear`]:
+    [`${previewPrefixCls}.${prefixCls}-zoom-enter, ${previewPrefixCls}.${prefixCls}zoom-appear`]: {
-      {
+      transform: 'none',
-        transform: 'none',
+      opacity: 0,
-        opacity: 0,
+      animationDuration: motionDurationSlow,
-        animationDuration: motionDurationSlow,
+      userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
-        userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
+    },
-      },
+    [`${previewPrefixCls}-root`]: {
-    [`.${previewPrefixCls}-root`]: {
+      [`${previewPrefixCls}-mask`]: {
-      [`.${previewPrefixCls}-mask`]: {
         ...genBoxStyle('fixed'),
         zIndex: zIndexModalMask,
         height: '100%',
@@ -280,13 +269,13 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
           display: 'none',
         },
       },
-      [`.${previewPrefixCls}-wrap`]: {
+      [`${previewPrefixCls}-wrap`]: {
         ...genBoxStyle('fixed'),
         overflow: 'auto',
         outline: 0,
         WebkitOverflowScrolling: 'touch',
         zIndex: zIndexImage,
-        [`.${previewPrefixCls}`]: {
+        [`${previewPrefixCls}`]: {
           ...genImagePreviewStyle(token),
         },
       },
@@ -295,16 +284,10 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
 };
 
 // ============================== Export ==============================
-export default function useStyle(
+export default genComponentStyleHook('Image', (token, { hashId }) => {
-  prefixCls: string,
+  const imageToken: ImageToken = {
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-  const inputToken: ImageToken = {
     ...token,
-    prefixCls,
+    previewPrefixCls: `${token.componentCls}-preview`,
-    iconPrefixCls,
-    previewPrefixCls: `${prefixCls}-preview`,
 
     white: '#fff', // FIXME: hard code
     black: '#000', // FIXME: hard code
@@ -328,10 +311,5 @@ export default function useStyle(
     motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4
   };
 
-  return [
+  return [genImageStyle(imageToken, hashId)];
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+});
-      genImageStyle(inputToken, hashId),
-    ]),
-    hashId,
-  ];
-}