refactor(cssinjs): simplify code of style (ant-design#57023)

* refactor(cssinjs): simplify code of style

* update

* update

* update

* update

* update

Author: li-jia-nan

components/_util/__tests__/responsiveObserve.test.tsx

@@ -5,20 +5,23 @@ import useResponsiveObserver from '../responsiveObserver';
 
 describe('Test ResponsiveObserve', () => {
   it('test ResponsiveObserve subscribe and unsubscribe', () => {
-    let responsiveRef: any = null;
+    const responsiveRef = React.createRef<ReturnType<typeof useResponsiveObserver>>();
     const Demo: React.FC = () => {
       const responsiveObserver = useResponsiveObserver();
-      responsiveRef = responsiveObserver;
+      responsiveRef.current = responsiveObserver;
       return null;
     };
     render(<Demo />);
     const subscribeFunc = jest.fn();
-    const token = responsiveRef.subscribe(subscribeFunc);
-    expect(responsiveRef.matchHandlers[responsiveRef.responsiveMap.xs].mql.matches).toBeTruthy();
+    const instance = responsiveRef.current;
+    const token = instance?.subscribe(subscribeFunc);
+    expect(instance?.matchHandlers[instance?.responsiveMap.xs].mql.matches).toBeTruthy();
     expect(subscribeFunc).toHaveBeenCalledTimes(1);
-    responsiveRef.unsubscribe(token);
+    if (token !== undefined) {
+      instance?.unsubscribe(token);
+    }
     expect(
-      responsiveRef.matchHandlers[responsiveRef.responsiveMap.xs].mql?.removeEventListener,
+      instance?.matchHandlers[instance?.responsiveMap.xs].mql?.removeEventListener,
     ).toHaveBeenCalled();
   });
 });

components/cascader/style/index.ts

@@ -92,7 +92,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareComponentToken = (token: GlobalToken) => {
+export const prepareComponentToken = (token: GlobalToken): ComponentToken => {
   const itemPaddingVertical = Math.round(
     (token.controlHeight - token.fontSize * token.lineHeight) / 2,
   );

components/input/style/index.ts

@@ -33,16 +33,15 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
   },
 });
 
-export const genActiveStyle = (token: InputToken) => ({
+export const genActiveStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   borderColor: token.activeBorderColor,
   boxShadow: token.activeShadow,
   outline: 0,
   backgroundColor: token.activeBg,
 });
 
-export const genInputLargeStyle = (token: InputToken): CSSObject => {
+export const genInputLargeStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { paddingBlockLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
-
   return {
     padding: `${unit(paddingBlockLG)} ${unit(paddingInlineLG)}`,
     fontSize: token.inputFontSizeLG,
@@ -51,7 +50,7 @@ export const genInputLargeStyle = (token: InputToken): CSSObject => {
   };
 };
 
-export const genInputSmallStyle = (token: InputToken): CSSObject => ({
+export const genInputSmallStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
   padding: `${unit(token.paddingBlockSM)} ${unit(token.paddingInlineSM)}`,
   fontSize: token.inputFontSizeSM,
   borderRadius: token.borderRadiusSM,
@@ -92,7 +91,7 @@ export const genBasicInputStyle = (
   },
 });
 
-export const genInputGroupStyle = (token: InputToken): CSSObject => {
+export const genInputGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
   return {
@@ -389,7 +388,7 @@ export const genInputStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   };
 };
 
-const genAllowClearStyle = (token: InputToken): CSSObject => {
+const genAllowClearStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     // ========================= Input =========================

components/input/style/search.ts

@@ -32,6 +32,4 @@ const genSearchStyle: GenerateStyle<FullToken<'Input'>, CSSObject> = (token) =>
   };
 };
 
-export default genStyleHooks(['Input', 'Search'], (token) => {
-  return [genSearchStyle(token)];
-});
+export default genStyleHooks(['Input', 'Search'], genSearchStyle);

components/masonry/style/index.ts

@@ -59,4 +59,4 @@ export const genMasonryStyle: GenerateStyle<MasonryToken, CSSObject> = (token) =
   };
 };
 
-export default genStyleHooks('Masonry', (token) => [genMasonryStyle(token)]);
+export default genStyleHooks('Masonry', genMasonryStyle);

components/popconfirm/style/index.ts

@@ -90,6 +90,6 @@ export const prepareComponentToken: GetDefaultToken<'Popconfirm'> = (token) => {
   };
 };
 
-export default genStyleHooks('Popconfirm', (token) => genBaseStyle(token), prepareComponentToken, {
+export default genStyleHooks('Popconfirm', genBaseStyle, prepareComponentToken, {
   resetStyle: false,
 });

components/result/style/index.ts

@@ -137,8 +137,6 @@ const genResultStyle: GenerateStyle<ResultToken> = (token) => [
   genStatusIconStyle(token),
 ];
 
-const getStyle: GenerateStyle<ResultToken> = (token) => genResultStyle(token);
-
 // ============================== Export ==============================
 export const prepareComponentToken: GetDefaultToken<'Result'> = (token) => ({
   titleFontSize: token.fontSizeHeading3,
@@ -163,8 +161,7 @@ export default genStyleHooks(
       imageWidth: 250,
       imageHeight: 295,
     });
-
-    return [getStyle(resultToken)];
+    return genResultStyle(resultToken);
   },
   prepareComponentToken,
 );

components/space/style/compact.ts

@@ -34,13 +34,8 @@ const genSpaceCompactStyle: GenerateStyle<SpaceToken, CSSObject> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genStyleHooks(
-  ['Space', 'Compact'],
-  (token) => [genSpaceCompactStyle(token)],
-  () => ({}),
-  {
-    // Space component don't apply extra font style
-    // https://github.com/ant-design/ant-design/issues/40315
-    resetStyle: false,
-  },
-);
+export default genStyleHooks(['Space', 'Compact'], genSpaceCompactStyle, () => ({}), {
+  // Space component don't apply extra font style
+  // https://github.com/ant-design/ant-design/issues/40315
+  resetStyle: false,
+});

tests/setupAfterEnv.ts

@@ -94,9 +94,8 @@ expect.addSnapshotSerializer({
     container.innerHTML = html;
 
     const children = Array.from(container.childNodes).filter(
-      (node: any) =>
-        // Ignore `link` node since React 18 or blew not support this
-        node.nodeName !== 'LINK',
+      // Ignore `link` node since React 18 or below not support this
+      (node) => node.nodeName !== 'LINK',
     );
 
     // Clean up `data-reactroot` since React 18 do not have this