chore: code style optimization (#39405)

* chore: code style optimization

* fix lint

* add size-limit

components/watermark/__tests__/index.test.tsx

@@ -12,9 +12,7 @@ describe('Watermark', () => {
 
   beforeAll(() => {
     mockSrcSet.mockImplementation(function fn() {
-      if (this.onload) {
-        this.onload();
-      }
+      this.onload?.();
     });
   });
 
@@ -36,11 +34,11 @@ describe('Watermark', () => {
         content={['Ant Design', 'Ant Design Pro']}
       />,
     );
-    const target = container.querySelector('.watermark div') as HTMLDivElement;
-    expect(target.style.left).toBe('100px');
-    expect(target.style.top).toBe('100px');
-    expect(target.style.width).toBe('calc(100% - 100px)');
-    expect(target.style.height).toBe('calc(100% - 100px)');
+    const target = container.querySelector<HTMLDivElement>('.watermark div');
+    expect(target?.style.left).toBe('100px');
+    expect(target?.style.top).toBe('100px');
+    expect(target?.style.width).toBe('calc(100% - 100px)');
+    expect(target?.style.height).toBe('calc(100% - 100px)');
     expect(container).toMatchSnapshot();
   });
 
@@ -53,8 +51,8 @@ describe('Watermark', () => {
 
   it('MutationObserver should work properly', () => {
     const { container } = render(<Watermark className="watermark" content="MutationObserver" />);
-    const target = container.querySelector('.watermark div') as HTMLDivElement;
-    target.remove();
+    const target = container.querySelector<HTMLDivElement>('.watermark div');
+    target?.remove();
     expect(container).toMatchSnapshot();
   });
 
@@ -62,8 +60,8 @@ describe('Watermark', () => {
     const { container } = render(
       <Watermark offset={[-200, -200]} className="watermark" content="MutationObserver" />,
     );
-    const target = container.querySelector('.watermark div') as HTMLDivElement;
-    target.setAttribute('style', '');
+    const target = container.querySelector<HTMLDivElement>('.watermark div');
+    target?.setAttribute('style', '');
     expect(container).toMatchSnapshot();
   });
 });

components/watermark/index.en-US.md

@@ -41,7 +41,7 @@ Add specific text or patterns to the page.
 ### Font
 
 <!-- prettier-ignore -->
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | color | font color | string | rgba(0,0,0,.15) |  |
 | fontSize | font size | number | 16 |  |

components/watermark/index.tsx

@@ -3,8 +3,8 @@ import useMutationObserver from './useMutationObserver';
 
 const FontGap = 3;
 
-const getStyleStr = (style: Record<string, string | number>): string => {
-  const styleArr = Object.keys(style).map((item) => {
+const getStyleStr = (style: React.CSSProperties): string => {
+  const styleArr = Object.keys(style).map((item: keyof React.CSSProperties) => {
     const key = item.replace(/([A-Z])/g, '-$1').toLowerCase();
     return `${key}: ${style[item]};`;
   });
@@ -158,7 +158,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     if (!image && ctx.measureText) {
       ctx.font = `${Number(fontSize)}px ${fontFamily}`;
       const contents = Array.isArray(content) ? content : [content];
-      const widths = contents.map((item) => ctx.measureText(item as string).width);
+      const widths = contents.map((item) => ctx.measureText(item!).width);
       defaultWidth = Math.ceil(Math.max(...widths));
       defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap;
     }
@@ -209,25 +209,20 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
         ctx.translate(mergedMarkWidth / 2, 0);
-        if (Array.isArray(content)) {
-          content?.forEach((item: string, index: number) =>
-            ctx.fillText(
-              item,
-              mergedGapXCenter,
-              mergedGapYCenter + index * (mergedFontSize + FontGap * ratio),
-            ),
+        const contents = Array.isArray(content) ? content : [content];
+        contents?.forEach((item, index) => {
+          ctx.fillText(
+            item ?? '',
+            mergedGapXCenter,
+            mergedGapYCenter + index * (mergedFontSize + FontGap * ratio),
           );
-        } else {
-          ctx.fillText(content ?? '', mergedGapXCenter, mergedGapYCenter);
-        }
+        });
         appendWatermark(canvas.toDataURL(), markWidth);
       }
     }
   };
 
-  useEffect(() => {
-    renderWatermark();
-  }, [
+  useEffect(renderWatermark, [
     rotate,
     zIndex,
     width,
@@ -246,14 +241,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
   ]);
 
   return (
-    <div
-      ref={containerRef}
-      style={{
-        position: 'relative',
-        ...style,
-      }}
-      className={className}
-    >
+    <div ref={containerRef} className={className} style={{ position: 'relative', ...style }}>
       {children}
     </div>
   );

components/watermark/useMutationObserver.ts

@@ -23,10 +23,7 @@ export default function useMutationObserver() {
     }
   };
 
-  useEffect(() => () => destroyObserver(), []);
+  useEffect(() => destroyObserver, []);
 
-  return {
-    createObserver,
-    destroyObserver,
-  };
+  return { createObserver, destroyObserver };
 }

package.json

@@ -317,7 +317,7 @@
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "435 KiB"
+      "limit": "436 KiB"
     }
   ],
   "bundlesize": [