feat: upgrade rc-segmented v2 (#35187)

* docs: add debug demo for segmented * chore: update * feat: upgrade rc-segmented v2 * Update components/segmented/__tests__/index.test.tsx Co-authored-by: afc163 <afc163@gmail.com> * Update components/segmented/demo/controlled-two.md Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
ant-design · Apr 23, 2022 · 1548f44 · 1548f44
1 parent 5bb4705
commit 1548f44
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 30 deletions.
diff --git a/components/segmented/__tests__/index.test.tsx b/components/segmented/__tests__/index.test.tsx
@@ -88,7 +88,7 @@ describe('Segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['Daily', 'Weekly', 'Monthly']}
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={handleValueChange}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -115,7 +115,7 @@ describe('Segmented', () => {
   it('render segmented with numeric options', () => {
     const handleValueChange = jest.fn();
     const wrapper = mount(
-      <Segmented options={[1, 2, 3, 4, 5]} onChange={e => handleValueChange(e.target.value)} />,
+      <Segmented options={[1, 2, 3, 4, 5]} onChange={value => handleValueChange(value)} />,
     );
     expect(wrapper.render()).toMatchSnapshot();
     expect(
@@ -139,7 +139,7 @@ describe('Segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['Daily', { label: 'Weekly', value: 'Weekly' }, 'Monthly']}
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={value => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -159,7 +159,7 @@ describe('Segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['Daily', { label: 'Weekly', value: 'Weekly', disabled: true }, 'Monthly']}
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={value => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -194,7 +194,7 @@ describe('Segmented', () => {
       <Segmented
         disabled
         options={['Daily', 'Weekly', 'Monthly']}
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={value => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -242,7 +242,7 @@ describe('Segmented', () => {
     expect((wrapper.find(Segmented).getElement() as any).ref).toBe(ref);
   });
 
-  it('render segmented with controlled mode', () => {
+  it('render segmented with controlled mode', async () => {
     class Demo extends React.Component<{}, { value: SegmentedValue }> {
       state = {
         value: 'Map',
@@ -253,9 +253,9 @@ describe('Segmented', () => {
           <Segmented
             options={['Map', 'Transit', 'Satellite']}
             value={this.state.value}
-            onChange={e =>
+            onChange={value =>
               this.setState({
-                value: e.target.value,
+                value,
               })
             }
           />
@@ -277,7 +277,7 @@ describe('Segmented', () => {
       <Segmented
         options={[null, undefined, ''] as any}
         disabled
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={value => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -293,7 +293,7 @@ describe('Segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['Map', 'Transit', 'Satellite']}
-        onChange={e => handleValueChange(e.target.value)}
+        onChange={value => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();

diff --git a/components/segmented/demo/controlled-two.md b/components/segmented/demo/controlled-two.md
@@ -22,17 +22,9 @@ const Demo = () => {
   const [foo, setFoo] = useState('AND');
   return (
     <>
-      <Segmented
-        value={foo}
-        options={['AND', 'OR', 'NOT']}
-        onChange={e => setFoo(e.target.value)}
-      />
+      <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />
       &nbsp;&nbsp;
-      <Segmented
-        value={foo}
-        options={['AND', 'OR', 'NOT']}
-        onChange={e => setFoo(e.target.value)}
-      />
+      <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={value => setFoo(value)} />
     </>
   );
 };

diff --git a/components/segmented/demo/controlled.md b/components/segmented/demo/controlled.md
@@ -20,13 +20,7 @@ import { Segmented } from 'antd';
 const Demo: React.FC = () => {
   const [value, setValue] = useState<string | number>('Map');
 
-  return (
-    <Segmented
-      options={['Map', 'Transit', 'Satellite']}
-      value={value}
-      onChange={e => setValue(e.target.value)}
-    />
-  );
+  return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;
 };
 
 export default Demo;

diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md
@@ -21,7 +21,7 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 | block | Option to fit width to its parent\'s width | boolean | false |  |
 | defaultValue | Default selected value | string \| number |  |  |
 | disabled | Disable all segments | boolean | false |  |
-| onChange | The callback function that is triggered when the state changes | function(e:Event) |  |  |
+| onChange | The callback function that is triggered when the state changes | function(value: string \| number) |  |  |
 | options | Set children optional | string\[] \| number\[] \| Array<{ label: string value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | The size of the Segmented. | `large` \| `middle` \| `small` | - |  |
 | value | Currently selected value | string \| number |  |  |
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
@@ -24,7 +24,7 @@ cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1
 | block | 将宽度调整为父元素宽度的选项 | boolean | false |  |
 | defaultValue | 默认选中的值 | string \| number |  |  |
 | disabled | 是否禁用 | boolean | false |  |
-| onChange | 选项变化时的回调函数 | function(e:Event) |  |  |
+| onChange | 选项变化时的回调函数 | function(value: string \| number) |  |  |
 | options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: string value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | 控件尺寸 | `large` \| `middle` \| `small` | - |  |
 | value | 当前选中的值 | string \| number |  |  |
diff --git a/package.json b/package.json
@@ -142,7 +142,7 @@
     "rc-progress": "~3.2.1",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.2.0",
-    "rc-segmented": "~1.3.0",
+    "rc-segmented": "~2.0.0",
     "rc-select": "~14.1.1",
     "rc-slider": "~10.0.0",
     "rc-steps": "~4.1.0",