From 6e12a903c7590110b1f6054c00cc4b9c26ccb543 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 22 Oct 2024 10:09:31 +0800
Subject: [PATCH] demo: improve the use of Segmented (#51324)

---
 components/flex/demo/align.tsx            | 6 +++---
 components/popover/demo/arrow.tsx         | 2 +-
 components/qr-code/demo/download.tsx      | 5 +----
 components/table/demo/virtual-list.tsx    | 2 +-
 components/tabs/demo/custom-indicator.tsx | 4 ++--
 components/tooltip/demo/arrow.tsx         | 2 +-
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/flex/demo/align.tsx b/components/flex/demo/align.tsx
index 1b230dbb13..5102ad3563 100644
--- a/components/flex/demo/align.tsx
+++ b/components/flex/demo/align.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Flex, Segmented } from 'antd';
-import type { FlexProps, SegmentedProps } from 'antd';
+import type { FlexProps } from 'antd';
 
 const boxStyle: React.CSSProperties = {
   width: '100%',
@@ -26,9 +26,9 @@ const App: React.FC = () => {
   return (
     <Flex gap="middle" align="start" vertical>
       <p>Select justify :</p>
-      <Segmented options={justifyOptions} onChange={setJustify as SegmentedProps['onChange']} />
+      <Segmented options={justifyOptions} onChange={setJustify} />
       <p>Select align :</p>
-      <Segmented options={alignOptions} onChange={setAlignItems as SegmentedProps['onChange']} />
+      <Segmented options={alignOptions} onChange={setAlignItems} />
       <Flex style={boxStyle} justify={justify} align={alignItems}>
         <Button type="primary">Primary</Button>
         <Button type="primary">Primary</Button>
diff --git a/components/popover/demo/arrow.tsx b/components/popover/demo/arrow.tsx
index 5742dc01f9..0198935248 100644
--- a/components/popover/demo/arrow.tsx
+++ b/components/popover/demo/arrow.tsx
@@ -34,7 +34,7 @@ const App: React.FC = () => {
     <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
       <Segmented
         options={['Show', 'Hide', 'Center']}
-        onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
+        onChange={setArrow}
         style={{ marginBottom: 24 }}
       />
       <Flex vertical justify="center" align="center" className="demo">
diff --git a/components/qr-code/demo/download.tsx b/components/qr-code/demo/download.tsx
index a822a15801..d37d3945d1 100644
--- a/components/qr-code/demo/download.tsx
+++ b/components/qr-code/demo/download.tsx
@@ -32,10 +32,7 @@ const App: React.FC = () => {
   const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
   return (
     <Space id="myqrcode" direction="vertical">
-      <Segmented
-        options={['canvas', 'svg']}
-        onChange={(val) => setRenderType(val as QRCodeProps['type'])}
-      />
+      <Segmented options={['canvas', 'svg']} value={renderType} onChange={setRenderType} />
       <div>
         <QRCode
           type={renderType}
diff --git a/components/table/demo/virtual-list.tsx b/components/table/demo/virtual-list.tsx
index e91725492b..f0cca9e000 100644
--- a/components/table/demo/virtual-list.tsx
+++ b/components/table/demo/virtual-list.tsx
@@ -168,7 +168,7 @@ const App: React.FC = () => {
           />
           <Segmented
             value={count}
-            onChange={(value: number) => setCount(value)}
+            onChange={setCount}
             options={[
               { label: 'None', value: 0 },
               { label: 'Less', value: 4 },
diff --git a/components/tabs/demo/custom-indicator.tsx b/components/tabs/demo/custom-indicator.tsx
index 99e73f531b..c2ec04abf3 100644
--- a/components/tabs/demo/custom-indicator.tsx
+++ b/components/tabs/demo/custom-indicator.tsx
@@ -19,9 +19,9 @@ const App: React.FC = () => {
   return (
     <>
       <Segmented
-        defaultValue="center"
+        value={alignValue}
         style={{ marginBottom: 8 }}
-        onChange={(value) => setAlignValue(value as Align)}
+        onChange={setAlignValue}
         options={['start', 'center', 'end']}
       />
       <Tabs
diff --git a/components/tooltip/demo/arrow.tsx b/components/tooltip/demo/arrow.tsx
index 761c081fe1..66c844f48d 100644
--- a/components/tooltip/demo/arrow.tsx
+++ b/components/tooltip/demo/arrow.tsx
@@ -28,7 +28,7 @@ const App: React.FC = () => {
       <Segmented
         value={arrow}
         options={['Show', 'Hide', 'Center']}
-        onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
+        onChange={setArrow}
         style={{ marginBottom: 24 }}
       />
       <Flex vertical justify="center" align="center" className="demo">