refactor: BackTop cssinjs (#34882)

* feat: finish half

* feat: next-backtop finish

* fix: delete px and add duration

* fix: use genComponentStyleHook and change right to logical css

Co-authored-by: zengguhao.zgh <zengguhao.zgh@alibaba-inc.com>
Co-authored-by: 龙濠 <longhao@longhaodeMacBook-Pro.local>

components/_util/theme/interface.ts

@@ -8,6 +8,7 @@ import type { ComponentToken as MentionsComponentToken } from '../../mentions/st
 import type { ComponentToken as SelectComponentToken } from '../../select/style';
 import type { ComponentToken as SliderComponentToken } from '../../slider/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
+import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
 import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
 import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
 import type { ComponentToken as MenuComponentToken } from '../../menu/style';
@@ -45,6 +46,7 @@ export interface OverrideToken {
   Affix?: {};
   Alert?: {};
   Avatar?: {};
+  BackTop?: BackTopComponentToken;
   Badge?: {};
   Button?: ButtonComponentToken;
   Carousel?: {};

components/back-top/index.tsx

@@ -11,6 +11,8 @@ import getScroll from '../_util/getScroll';
 import scrollTo from '../_util/scrollTo';
 import { cloneElement } from '../_util/reactNode';
 
+import useStyle from './style';
+
 export interface BackTopProps {
   visibilityHeight?: number;
   onClick?: React.MouseEventHandler<HTMLElement>;
@@ -105,7 +107,10 @@ const BackTop: React.FC<BackTopProps> = props => {
   const { prefixCls: customizePrefixCls, className = '' } = props;
   const prefixCls = getPrefixCls('back-top', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   const classString = classNames(
+    hashId,
     prefixCls,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -123,10 +128,10 @@ const BackTop: React.FC<BackTopProps> = props => {
     'visible',
   ]);
 
-  return (
+  return wrapSSR(
     <div {...divProps} className={classString} onClick={scrollToTop} ref={ref}>
       {renderChildren({ prefixCls, rootPrefixCls })}
-    </div>
+    </div>,
   );
 };
 

components/back-top/style/index.less

@@ -1,49 +1,49 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
 
-@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
+// @backtop-prefix-cls: ~'@{ant-prefix}-back-top';
 
-.@{backtop-prefix-cls} {
-  .reset-component();
+// .@{backtop-prefix-cls} {
+//   .reset-component();
 
-  position: fixed;
-  right: 100px;
-  bottom: 50px;
-  z-index: @zindex-back-top;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
+//   position: fixed;
+//   right: 100px;
+//   bottom: 50px;
+//   z-index: @zindex-back-top;
+//   width: 40px;
+//   height: 40px;
+//   cursor: pointer;
 
-  &:empty {
-    display: none;
-  }
+//   &:empty {
+//     display: none;
+//   }
 
-  &-rtl {
-    right: auto;
-    left: 100px;
-    direction: rtl;
-  }
+//   &-rtl {
+//     right: auto;
+//     left: 100px;
+//     direction: rtl;
+//   }
 
-  &-content {
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    color: @back-top-color;
-    text-align: center;
-    background-color: @back-top-bg;
-    border-radius: 20px;
-    transition: all 0.3s;
+//   &-content {
+//     width: 40px;
+//     height: 40px;
+//     overflow: hidden;
+//     color: @back-top-color;
+//     text-align: center;
+//     background-color: @back-top-bg;
+//     border-radius: 20px;
+//     transition: all 0.3s;
 
-    &:hover {
-      background-color: @back-top-hover-bg;
-      transition: all 0.3s;
-    }
-  }
+//     &:hover {
+//       background-color: @back-top-hover-bg;
+//       transition: all 0.3s;
+//     }
+//   }
 
-  &-icon {
-    font-size: 24px;
-    line-height: 40px;
-  }
-}
+//   &-icon {
+//     font-size: 24px;
+//     line-height: 40px;
+//   }
+// }
 
-@import './responsive';
+// @import './responsive';

components/back-top/style/index.tsx

@@ -1,2 +1,113 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+import { CSSObject } from '@ant-design/cssinjs';
+import {
+  resetComponent,
+  genComponentStyleHook,
+  GenerateStyle,
+  FullToken,
+  mergeToken,
+} from '../../_util/theme';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {}
+
+type BackTopToken = FullToken<'BackTop'> & {
+  backTopBackground: string;
+  backTopColor: string;
+  backTopHoverBackground: string;
+
+  durationSlow: number;
+};
+
+// ============================== Shared ==============================
+const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      position: 'fixed',
+      // FIXME
+      insetInlineEnd: 100,
+      // FIXME
+      insetBlockEnd: 50,
+      // FIX ME @zindex-back-top
+      zIndex: token.zIndexPopup,
+      width: 40,
+      height: 40,
+      cursor: 'pointer',
+
+      '&:empty': {
+        display: 'none',
+      },
+
+      [`${componentCls}-content`]: {
+        width: 40,
+        height: 40,
+        overflow: 'hidden',
+        // FIXME @back-top-color
+        color: token.backTopColor,
+        textAlign: 'center',
+        // FIXME @back-top-bg
+        backgroundColor: token.backTopBackground,
+        // FIXME
+        borderRadius: 20,
+        transition: `all ${token.durationSlow}s`,
+
+        '&:hover': {
+          // FIX ME @back-top-hover-bg
+          backgroundColor: token.backTopHoverBackground,
+          transition: `all ${token.durationSlow}s`,
+        },
+      },
+
+      // change to .backtop .backtop-icon
+      [`${componentCls}-icon`]: {
+        // FIXME
+        fontSize: 24,
+        // FIXME
+        lineHeight: '40px',
+      },
+    },
+  };
+};
+
+const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`@media (max-width: ${token.screenMD}px)`]: {
+      [componentCls]: {
+        marginInlineEnd: 60,
+      },
+    },
+
+    [`@media (max-width: ${token.screenXS}px)`]: {
+      [componentCls]: {
+        marginInlineEnd: 20,
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook<'BackTop'>(
+  'BackTop',
+
+  token => {
+    const backTopBackground = 'rgb(16, 136, 233)';
+    const backTopColor = '#fff';
+    const backTopHoverBackground = '#000000d9';
+
+    const backTopToken = mergeToken<BackTopToken>(token, {
+      backTopBackground,
+      backTopColor,
+      backTopHoverBackground,
+
+      // FIX ME
+      durationSlow: 3,
+    });
+    return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
+  },
+);

components/back-top/style/responsive.less

@@ -1,21 +1,21 @@
-@media screen and (max-width: @screen-md) {
-  .@{backtop-prefix-cls} {
-    right: 60px;
+// @media screen and (max-width: @screen-md) {
+//   .@{backtop-prefix-cls} {
+//     right: 60px;
 
-    &-rtl {
-      right: auto;
-      left: 60px;
-    }
-  }
-}
+//     &-rtl {
+//       right: auto;
+//       left: 60px;
+//     }
+//   }
+// }
 
-@media screen and (max-width: @screen-xs) {
-  .@{backtop-prefix-cls} {
-    right: 20px;
+// @media screen and (max-width: @screen-xs) {
+//   .@{backtop-prefix-cls} {
+//     right: 20px;
 
-    &-rtl {
-      right: auto;
-      left: 20px;
-    }
-  }
-}
+//     &-rtl {
+//       right: auto;
+//       left: 20px;
+//     }
+//   }
+// }