fix: Image operation can not hide & export default seedToken (#38494)

* chore: export defaultSeed

* fix: image motion operation miss

components/image/style/index.tsx

@@ -279,7 +279,7 @@ const genPreviewMotion: GenerateStyle<ImageToken> = token => {
 
   return {
     [`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
-    '&': initFadeMotion(token),
+    [`&`]: initFadeMotion(token, true),
   };
 };
 

components/style/motion/fade.tsx

@@ -22,22 +22,26 @@ export const fadeOut = new Keyframes('antFadeOut', {
   },
 });
 
-export const initFadeMotion = (token: TokenWithCommonCls<AliasToken>): CSSInterpolation => {
+export const initFadeMotion = (
+  token: TokenWithCommonCls<AliasToken>,
+  sameLevel = false,
+): CSSInterpolation => {
   const { antCls } = token;
   const motionCls = `${antCls}-fade`;
+  const sameLevelPrefix = sameLevel ? '&' : '';
 
   return [
-    initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid),
+    initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel),
     {
       [`
-        ${motionCls}-enter,
-        ${motionCls}-appear
+        ${sameLevelPrefix}${motionCls}-enter,
+        ${sameLevelPrefix}${motionCls}-appear
       `]: {
         opacity: 0,
         animationTimingFunction: 'linear',
       },
 
-      [`${motionCls}-leave`]: {
+      [`${sameLevelPrefix}${motionCls}-leave`]: {
         animationTimingFunction: 'linear',
       },
     },

components/style/motion/motion.tsx

@@ -17,31 +17,36 @@ export const initMotion = (
   inKeyframes: Keyframes,
   outKeyframes: Keyframes,
   duration: string,
-): CSSObject => ({
-  [`
-    ${motionCls}-enter,
-    ${motionCls}-appear
-  `]: {
-    ...initMotionCommon(duration),
-    animationPlayState: 'paused',
-  },
+  sameLevel = false,
+): CSSObject => {
+  const sameLevelPrefix = sameLevel ? '&' : '';
 
-  [`${motionCls}-leave`]: {
-    ...initMotionCommonLeave(duration),
-    animationPlayState: 'paused',
-  },
+  return {
+    [`
+      ${sameLevelPrefix}${motionCls}-enter,
+      ${sameLevelPrefix}${motionCls}-appear
+    `]: {
+      ...initMotionCommon(duration),
+      animationPlayState: 'paused',
+    },
 
-  [`
-    ${motionCls}-enter${motionCls}-enter-active,
-    ${motionCls}-appear${motionCls}-appear-active
-  `]: {
-    animationName: inKeyframes,
-    animationPlayState: 'running',
-  },
+    [`${sameLevelPrefix}${motionCls}-leave`]: {
+      ...initMotionCommonLeave(duration),
+      animationPlayState: 'paused',
+    },
 
-  [`${motionCls}-leave${motionCls}-leave-active`]: {
-    animationName: outKeyframes,
-    animationPlayState: 'running',
-    pointerEvents: 'none',
-  },
-});
+    [`
+      ${sameLevelPrefix}${motionCls}-enter${motionCls}-enter-active,
+      ${sameLevelPrefix}${motionCls}-appear${motionCls}-appear-active
+    `]: {
+      animationName: inKeyframes,
+      animationPlayState: 'running',
+    },
+
+    [`${sameLevelPrefix}${motionCls}-leave${motionCls}-leave-active`]: {
+      animationName: outKeyframes,
+      animationPlayState: 'running',
+      pointerEvents: 'none',
+    },
+  };
+};

components/theme/export.ts

@@ -18,6 +18,9 @@ export default {
   /** @private Test Usage. Do not use in production. */
   defaultConfig,
 
+  /** Default seedToken */
+  defaultSeed: defaultConfig.token,
+
   useToken,
   defaultAlgorithm,
   darkAlgorithm,

package.json

@@ -126,7 +126,7 @@
     "rc-drawer": "~6.0.0",
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
-    "rc-image": "~5.10.2",
+    "rc-image": "~5.11.0",
     "rc-input": "~0.1.4",
     "rc-input-number": "~7.3.9",
     "rc-mentions": "~1.10.0",