refactor: next-affix change affix use cssinjs (#34558)

* refactor: next-affix

* fix: wrong spell

* fix: add fixme

* fix: prefixnam

* fix: change hash to classname

* fix: omit hashclassName

* fix: change name to rootclassName

* fix: rootClassName add

Co-authored-by: zengguhao.zgh <zengguhao.zgh@alibaba-inc.com>

components/_util/theme/interface.ts

@@ -192,6 +192,7 @@ export interface AliasToken extends DerivativeToken {
   componentBackgroundDisabled: string;
 
   zIndexDropdown: number;
+  zIndexAffix: number;
 
   boxShadow?: string;
 

components/_util/theme/util/alias.ts

@@ -149,6 +149,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     durationFast: '0.1s',
 
     zIndexDropdown: 1050,
+    zIndexAffix: 10,
   };
 
   return aliasToken;

components/affix/index.tsx

@@ -12,6 +12,7 @@ import {
   getFixedTop,
   getFixedBottom,
 } from './utils';
+import useStyle from './style';
 
 function getDefaultTarget() {
   return typeof window !== 'undefined' ? window : null;
@@ -35,6 +36,7 @@ export interface AffixProps {
 
 export interface InternalAffixProps extends AffixProps {
   affixPrefixCls: string;
+  rootClassName: string;
 }
 
 enum AffixStatus {
@@ -255,8 +257,9 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
   // =================== Render ===================
   render() {
     const { affixStyle, placeholderStyle } = this.state;
-    const { affixPrefixCls, children } = this.props;
+    const { affixPrefixCls, rootClassName, children } = this.props;
     const className = classNames({
+      [rootClassName]: !!affixStyle,
       [affixPrefixCls]: !!affixStyle,
     });
 
@@ -267,6 +270,7 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
       'target',
       'onChange',
       'affixPrefixCls',
+      'rootClassName',
     ]);
     // Omit this since `onTestUpdatePosition` only works on test.
     if (process.env.NODE_ENV === 'test') {
@@ -299,16 +303,18 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
 const AffixFC = React.forwardRef<Affix, AffixProps>((props, ref) => {
   const { prefixCls: customizePrefixCls } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
-
   const affixPrefixCls = getPrefixCls('affix', customizePrefixCls);
 
+  const [wrapSSR, hashId] = useStyle(affixPrefixCls);
+
   const AffixProps: InternalAffixProps = {
     ...props,
 
     affixPrefixCls,
+    rootClassName: hashId,
   };
 
-  return <Affix {...AffixProps} ref={ref} />;
+  return wrapSSR(<Affix {...AffixProps} ref={ref} />);
 });
 
 if (process.env.NODE_ENV !== 'production') {

components/affix/style/index.less

@@ -1,6 +1,6 @@
-@import '../../style/themes/index';
+// @import '../../style/themes/index';
 
-.@{ant-prefix}-affix {
+// .@{ant-prefix}-affix {
-  position: fixed;
+//   position: fixed;
-  z-index: @zindex-affix;
+//   z-index: @zindex-affix;
-}
+// }

components/affix/style/index.tsx

@@ -1,2 +1,43 @@
-import '../../style/index.less';
+// deps-lint-skip-all
-import './index.less';
+import { CSSObject } from '@ant-design/cssinjs';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  UseComponentStyleResult,
+  GenerateStyle,
+} from '../../_util/theme';
+
+interface AffixToken extends DerivativeToken {
+  affixCls: string;
+}
+
+// ============================== Shared ==============================
+const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
+  const { affixCls } = token;
+
+  return {
+    [affixCls]: {
+      position: 'fixed',
+      zIndex: token.zIndexAffix,
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default function useStyle(prefixCls: string): UseComponentStyleResult {
+  const [theme, token, hashId] = useToken();
+
+  const affixToken: AffixToken = {
+    ...token,
+
+    affixCls: `.${prefixCls}`,
+  };
+
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      genSharedAffixStyle(affixToken),
+    ]),
+    hashId,
+  ];
+}