demo: rewrite render function with React.FC (#50779)

* demo: rewrite render function with React.FC * demo: rewrite render function with React.FC * fix: fix snap * Update components/splitter/Splitter.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: clear --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-11-24 02:59:58 +08:00 · 2024-09-10 22:35:32 +08:00 · 2024-09-10 22:35:32 +08:00 · 01d1b3d492
commit 01d1b3d492
parent fbf8b10425
12 changed files with 127 additions and 208 deletions
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@ -132,7 +132,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
  const maskCls = `${prefixCls}-mask`;

  const stackSizes = React.useMemo(() => {
-    const mergedSizes = [];
+    const mergedSizes: number[] = [];

    let stack = 0;
    for (let i = 0; i < items.length; i += 1) {
@ -200,13 +200,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {

      {/* Fake mask for cursor */}
      {typeof movingIndex === 'number' && (
-        <div
-          aria-hidden
-          className={classNames(maskCls, {
-            [`${maskCls}-horizontal`]: !isVertical,
-            [`${maskCls}-vertical`]: isVertical,
-          })}
-        />
+        <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
      )}
    </>,
  );
--- a/components/splitter/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/splitter/tests/snapshots/demo-extend.test.ts.snap
@ -20,7 +20,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
          class="ant-typography ant-typography-secondary"
          style="white-space: nowrap;"
        >
-          first
+          First
        </h5>
      </div>
    </div>
@ -95,7 +95,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
          class="ant-typography ant-typography-secondary"
          style="white-space: nowrap;"
        >
-          second
+          Second
        </h5>
      </div>
    </div>
@ -116,7 +116,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
          class="ant-typography ant-typography-secondary"
          style="white-space: nowrap;"
        >
-          first
+          First
        </h5>
      </div>
    </div>
@ -191,7 +191,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
          class="ant-typography ant-typography-secondary"
          style="white-space: nowrap;"
        >
-          second
+          Second
        </h5>
      </div>
    </div>
@ -825,6 +825,7 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space: nowrap;"
      >
        First
      </h5>
@ -851,6 +852,7 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space: nowrap;"
      >
        Second
      </h5>
@ -876,6 +878,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space: nowrap;"
      >
        First
      </h5>
@ -902,6 +905,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space: nowrap;"
      >
        Second
      </h5>
--- a/components/splitter/tests/snapshots/demo.test.ts.snap
+++ b/components/splitter/tests/snapshots/demo.test.ts.snap
@ -20,7 +20,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
          class="ant-typography ant-typography-secondary"
          style="white-space:nowrap"
        >
-          first
+          First
        </h5>
      </div>
    </div>
@ -95,7 +95,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
          class="ant-typography ant-typography-secondary"
          style="white-space:nowrap"
        >
-          second
+          Second
        </h5>
      </div>
    </div>
@ -116,7 +116,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
          class="ant-typography ant-typography-secondary"
          style="white-space:nowrap"
        >
-          first
+          First
        </h5>
      </div>
    </div>
@ -191,7 +191,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
          class="ant-typography ant-typography-secondary"
          style="white-space:nowrap"
        >
-          second
+          Second
        </h5>
      </div>
    </div>
@ -841,6 +841,7 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space:nowrap"
      >
        First
      </h5>
@ -867,6 +868,7 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space:nowrap"
      >
        Second
      </h5>
@ -890,6 +892,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space:nowrap"
      >
        First
      </h5>
@ -916,6 +919,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
    >
      <h5
        class="ant-typography ant-typography-secondary"
+        style="white-space:nowrap"
      >
        Second
      </h5>
--- a/components/splitter/demo/collapsible.tsx
+++ b/components/splitter/demo/collapsible.tsx
@ -2,45 +2,29 @@ import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';
 import type { SplitterProps } from 'antd';

-const renderDesc = (text: string) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title
-      type="secondary"
-      level={5}
-      style={{
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {text}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
    </Typography.Title>
  </Flex>
 );

-const renderSplitter = ({ style, ...restProps }: SplitterProps) => (
-  <Splitter
-    style={{
-      boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-      ...style,
-    }}
-    {...restProps}
-  >
+const CustomSplitter: React.FC<Readonly<SplitterProps>> = ({ style, ...restProps }) => (
+  <Splitter style={{ boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', ...style }} {...restProps}>
    <Splitter.Panel collapsible min="20%">
-      {renderDesc('first')}
+      <Desc text="First" />
+    </Splitter.Panel>
+    <Splitter.Panel collapsible>
+      <Desc text="Second" />
    </Splitter.Panel>
-
-    <Splitter.Panel collapsible>{renderDesc('second')}</Splitter.Panel>
  </Splitter>
 );

 const App: React.FC = () => (
  <Flex gap="middle" vertical>
-    {renderSplitter({
-      style: { height: 200 },
-    })}
-    {renderSplitter({
-      style: { height: 300 },
-      layout: 'vertical',
-    })}
+    <CustomSplitter style={{ height: 200 }} />
+    <CustomSplitter style={{ height: 300 }} layout="vertical" />
  </Flex>
 );

--- a/components/splitter/demo/control.tsx
+++ b/components/splitter/demo/control.tsx
@ -1,16 +1,10 @@
 import React from 'react';
 import { Button, Flex, Splitter, Switch, Typography } from 'antd';

-const renderDesc = (text: string) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title
-      type="secondary"
-      level={5}
-      style={{
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {text}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
    </Typography.Title>
  </Flex>
 );
@ -18,42 +12,27 @@ const renderDesc = (text: string) => (
 const App: React.FC = () => {
  const [sizes, setSizes] = React.useState<(number | string)[]>(['50%', '50%']);
  const [enabled, setEnabled] = React.useState(true);
-
  return (
    <Flex vertical gap="middle">
      <Splitter
-        style={{
-          height: 200,
-          boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-        }}
-        onResize={(nextSizes) => {
-          setSizes(nextSizes);
-        }}
+        onResize={setSizes}
+        style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
      >
        <Splitter.Panel size={sizes[0]} resizable={enabled}>
-          {renderDesc('First')}
+          <Desc text="First" />
+        </Splitter.Panel>
+        <Splitter.Panel size={sizes[1]}>
+          <Desc text="Second" />
        </Splitter.Panel>
-
-        <Splitter.Panel size={sizes[1]}>{renderDesc('Second')}</Splitter.Panel>
      </Splitter>
-
      <Flex gap="middle" justify="space-between">
        <Switch
          value={enabled}
-          onChange={() => {
-            setEnabled(!enabled);
-          }}
+          onChange={() => setEnabled(!enabled)}
          checkedChildren="Enabled"
          unCheckedChildren="Disabled"
        />
-
-        <Button
-          onClick={() => {
-            setSizes(['50%', '50%']);
-          }}
-        >
-          Reset
-        </Button>
+        <Button onClick={() => setSizes(['50%', '50%'])}>Reset</Button>
      </Flex>
    </Flex>
  );
--- a/components/splitter/demo/debug.tsx
+++ b/components/splitter/demo/debug.tsx
@ -1,16 +1,10 @@
 import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';

-const renderDesc = (id: number) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title
-      type="secondary"
-      level={5}
-      style={{
-        whiteSpace: 'nowrap',
-      }}
-    >
-      Panel {id}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      Panel {props.text}
    </Typography.Title>
  </Flex>
 );
@ -18,58 +12,45 @@ const renderDesc = (id: number) => (
 const App: React.FC = () => (
  <Flex vertical gap="middle">
    <Typography.Title level={3}>[true, 0, false]</Typography.Title>
-    <Splitter
-      style={{
-        height: 200,
-        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-      }}
-    >
-      <Splitter.Panel>{renderDesc(1)}</Splitter.Panel>
-
-      <Splitter.Panel defaultSize={0}>{renderDesc(2)}</Splitter.Panel>
-
-      <Splitter.Panel resizable={false}>{renderDesc(3)}</Splitter.Panel>
-    </Splitter>
-
-    <Typography.Title level={3}>[false, 0, true]</Typography.Title>
-    <Splitter
-      style={{
-        height: 200,
-        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-      }}
-    >
-      <Splitter.Panel resizable={false}>{renderDesc(1)}</Splitter.Panel>
-
-      <Splitter.Panel defaultSize={0}>{renderDesc(2)}</Splitter.Panel>
-
-      <Splitter.Panel>{renderDesc(3)}</Splitter.Panel>
-    </Splitter>
-
-    <Typography.Title level={3}>Start have min & max</Typography.Title>
-    <Splitter
-      style={{
-        height: 200,
-        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-      }}
-    >
-      <Splitter.Panel min={50} max={100}>
-        {renderDesc(1)}
+    <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+      <Splitter.Panel>
+        <Desc text={1} />
+      </Splitter.Panel>
+      <Splitter.Panel defaultSize={0}>
+        <Desc text={2} />
+      </Splitter.Panel>
+      <Splitter.Panel resizable={false}>
+        <Desc text={3} />
+      </Splitter.Panel>
+    </Splitter>
+    <Typography.Title level={3}>[false, 0, true]</Typography.Title>
+    <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+      <Splitter.Panel resizable={false}>
+        <Desc text={1} />
+      </Splitter.Panel>
+      <Splitter.Panel defaultSize={0}>
+        <Desc text={2} />
+      </Splitter.Panel>
+      <Splitter.Panel>
+        <Desc text={3} />
+      </Splitter.Panel>
+    </Splitter>
+    <Typography.Title level={3}>Start have min & max</Typography.Title>
+    <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+      <Splitter.Panel min={50} max={100}>
+        <Desc text={1} />
+      </Splitter.Panel>
+      <Splitter.Panel>
+        <Desc text={2} />
      </Splitter.Panel>
-
-      <Splitter.Panel>{renderDesc(2)}</Splitter.Panel>
    </Splitter>
-
    <Typography.Title level={3}>End have min & max</Typography.Title>
-    <Splitter
-      style={{
-        height: 200,
-        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-      }}
-    >
-      <Splitter.Panel>{renderDesc(1)}</Splitter.Panel>
-
+    <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+      <Splitter.Panel>
+        <Desc text={1} />
+      </Splitter.Panel>
      <Splitter.Panel min="20%" max="70%">
-        {renderDesc(2)}
+        <Desc text={2} />
      </Splitter.Panel>
    </Splitter>
  </Flex>
--- a/components/splitter/demo/group.tsx
+++ b/components/splitter/demo/group.tsx
@ -1,32 +1,27 @@
 import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';

-const renderDesc = (text: string) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title
-      type="secondary"
-      level={5}
-      style={{
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {text}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
    </Typography.Title>
  </Flex>
 );

 const App: React.FC = () => (
-  <Splitter
-    style={{
-      height: 300,
-      boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-    }}
-  >
-    <Splitter.Panel collapsible>{renderDesc('Left')}</Splitter.Panel>
+  <Splitter style={{ height: 300, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+    <Splitter.Panel collapsible>
+      <Desc text="Left" />
+    </Splitter.Panel>
    <Splitter.Panel>
      <Splitter layout="vertical">
-        <Splitter.Panel>{renderDesc('Top')}</Splitter.Panel>
-        <Splitter.Panel>{renderDesc('Bottom')}</Splitter.Panel>
+        <Splitter.Panel>
+          <Desc text="Top" />
+        </Splitter.Panel>
+        <Splitter.Panel>
+          <Desc text="Bottom" />
+        </Splitter.Panel>
      </Splitter>
    </Splitter.Panel>
  </Splitter>
--- a/components/splitter/demo/multiple.tsx
+++ b/components/splitter/demo/multiple.tsx
@ -1,38 +1,25 @@
 import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';

-const renderDesc = (id: number) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title
-      type="secondary"
-      level={5}
-      style={{
-        whiteSpace: 'nowrap',
-      }}
-    >
-      Panel {id}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      Panel {props.text}
    </Typography.Title>
  </Flex>
 );

 const App: React.FC = () => (
-  <Splitter
-    style={{
-      height: 200,
-      boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-    }}
-  >
-    <Splitter.Panel collapsible>{renderDesc(1)}</Splitter.Panel>
-
-    <Splitter.Panel
-      collapsible={{
-        start: true,
-      }}
-    >
-      {renderDesc(2)}
+  <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+    <Splitter.Panel collapsible>
+      <Desc text={1} />
+    </Splitter.Panel>
+    <Splitter.Panel collapsible={{ start: true }}>
+      <Desc text={2} />
+    </Splitter.Panel>
+    <Splitter.Panel>
+      <Desc text={3} />
    </Splitter.Panel>
-
-    <Splitter.Panel>{renderDesc(3)}</Splitter.Panel>
  </Splitter>
 );

--- a/components/splitter/demo/size.tsx
+++ b/components/splitter/demo/size.tsx
@ -1,26 +1,22 @@
 import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';

-const renderDesc = (text: string) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title type="secondary" level={5}>
-      {text}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
    </Typography.Title>
  </Flex>
 );

 const App: React.FC = () => (
-  <Splitter
-    style={{
-      height: 200,
-      boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-    }}
-  >
+  <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
    <Splitter.Panel defaultSize="40%" min="20%" max="70%">
-      {renderDesc('First')}
+      <Desc text="First" />
+    </Splitter.Panel>
+    <Splitter.Panel>
+      <Desc text="Second" />
    </Splitter.Panel>
-
-    <Splitter.Panel>{renderDesc('Second')}</Splitter.Panel>
  </Splitter>
 );

--- a/components/splitter/demo/vertical.tsx
+++ b/components/splitter/demo/vertical.tsx
@ -1,25 +1,22 @@
 import React from 'react';
 import { Flex, Splitter, Typography } from 'antd';

-const renderDesc = (text: string) => (
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
  <Flex justify="center" align="center" style={{ height: '100%' }}>
-    <Typography.Title type="secondary" level={5}>
-      {text}
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
    </Typography.Title>
  </Flex>
 );

 const App: React.FC = () => (
-  <Splitter
-    layout="vertical"
-    style={{
-      height: 300,
-      boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-    }}
-  >
-    <Splitter.Panel>{renderDesc('First')}</Splitter.Panel>
-
-    <Splitter.Panel>{renderDesc('Second')}</Splitter.Panel>
+  <Splitter layout="vertical" style={{ height: 300, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+    <Splitter.Panel>
+      <Desc text="First" />
+    </Splitter.Panel>
+    <Splitter.Panel>
+      <Desc text="Second" />
+    </Splitter.Panel>
  </Splitter>
 );

--- a/components/splitter/hooks/useSizes.ts
+++ b/components/splitter/hooks/useSizes.ts
@ -27,7 +27,7 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
    items.map((item) => item.defaultSize),
  );
  const sizes = React.useMemo(() => {
-    const mergedSizes = [];
+    const mergedSizes: PanelProps['size'][] = [];

    for (let i = 0; i < itemsCount; i += 1) {
      mergedSizes[i] = propSizes[i] ?? innerSizes[i];
@ -61,7 +61,7 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
      }
    }

-    const totalPtg = ptgList.reduce((acc: number, ptg) => acc + (ptg || 0), 0);
+    const totalPtg = ptgList.reduce<number>((acc, ptg) => acc + (ptg || 0), 0);

    if (totalPtg > 1 || !emptyCount) {
      // If total percentage is larger than 1, we will scale it down.
--- a/components/splitter/interface.ts
+++ b/components/splitter/interface.ts
@ -16,12 +16,7 @@ export interface PanelProps {
  min?: number | string;
  max?: number | string;
  size?: number | string;
-  collapsible?:
-    | boolean
-    | {
-        start?: boolean;
-        end?: boolean;
-      };
+  collapsible?: boolean | { start?: boolean; end?: boolean };
  resizable?: boolean;
  defaultSize?: number | string;
 }
@ -40,6 +35,7 @@ export interface UseResizeProps extends Pick<SplitterProps, 'onResize'> {
  reverse: boolean;
  setBasicsState: React.Dispatch<React.SetStateAction<number[]>>;
 }
+
 export interface UseResize {
  setSize: (data: { size: number; index: number }[]) => void;
  setOffset: (offset: number, containerSize: number, index: number) => void;
@ -52,6 +48,7 @@ export interface UseHandleProps
  setOffset: UseResize['setOffset'];
  setResizing: React.Dispatch<React.SetStateAction<boolean>>;
 }
+
 export interface UseHandle {
  onStart: (x: number, y: number, index: number) => void;
 }
@ -63,6 +60,7 @@ export interface UseCollapsibleProps {
  reverse: boolean;
  setSize?: UseResize['setSize'];
 }
+
 export interface UseCollapsible {
  nextIcon: boolean;
  overlap: boolean;