refactor: onChange API changed (#33)

Author: vagusX

.github/workflows/main.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   setup:
@@ -43,7 +43,7 @@ jobs:
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: npm ci
-  
+
   lint:
     runs-on: ubuntu-latest
     steps:
@@ -65,8 +65,11 @@ jobs:
       - name: lint
         run: npm run lint
 
+      - name: type:check
+        run: npm run type:check
+
     needs: setup
-  
+
   compile:
     runs-on: ubuntu-latest
     steps:
@@ -89,7 +92,7 @@ jobs:
         run: npm run compile
 
     needs: setup
-  
+
   coverage:
     runs-on: ubuntu-latest
     steps:

README.md

@@ -35,14 +35,17 @@ import { render } from 'react-dom';
 render(
   <Segmented
     options={['Antd', 'Antv', 'Egg.js']}
-    onChange={(e) => handleValueChange(e.target.value)}
+    onChange={(value) => handleValueChange(value)}
   />,
   mountNode,
 );
 ```
 
 ## API
 
+Please note that **onChange** API
+ changed on v2.0.0+
+
 | Property     | Type                                                           | Default      | Description                        |
 | --------- | --------- | --------- | --------- |
 | prefixCls    | string                                                         | rc-segmented | prefixCls of this component |
@@ -52,7 +55,7 @@ render(
 | value        | string \| number                                               |              | value of segmented                 |
 | defaultValue | string \| number                                               |              | defaultValue of segmented          |
 | value | string \| number                                               |              | currently selected value of segmented          |
-| onChange     | (e: any) => void                                               |              | defaultValue of segmented          |
+| onChange     | (value: string \| number) => void                                               |              | defaultValue of segmented          |
 | disabled     | boolean                                                        | false        | disabled status of segmented       |
 
 ### SegmentedOption

docs/examples/basic.tsx

@@ -8,13 +8,13 @@ export default function App() {
       <div className="wrapper">
         <Segmented
           options={['iOS', 'Android', 'Web']}
-          onChange={(e) => console.log(e.target.value, typeof e.target.value)}
+          onChange={(value) => console.log(value, typeof value)}
         />
       </div>
       <div className="wrapper">
         <Segmented
           options={[13333333333, 157110000, 12110086]}
-          onChange={(e) => console.log(e.target.value, typeof e.target.value)}
+          onChange={(value) => console.log(value, typeof value)}
         />
       </div>
       <div className="wrapper">

docs/examples/controlled.tsx

@@ -17,19 +17,19 @@ export default class Demo extends React.Component<
         <Segmented
           options={['iOS', 'Android', 'Web3']}
           value={this.state.value}
-          onChange={(e) =>
+          onChange={(value) =>
             this.setState({
-              value: e.target.value,
+              value,
             })
           }
         />
         &nbsp;&nbsp;
         <Segmented
           options={['iOS', 'Android', 'Web3']}
           value={this.state.value}
-          onChange={(e) =>
+          onChange={(value) =>
             this.setState({
-              value: e.target.value,
+              value,
             })
           }
         />

docs/examples/refs.tsx

@@ -9,7 +9,12 @@ class ClassComponentWithStringRef extends React.Component {
   }
 
   render() {
-    return <Segmented options={['iOS', 'Android', 'Web']} ref="segmentedRef" />;
+    return (
+      <Segmented
+        options={['iOS', 'Android', 'Web']}
+        ref={'segmentedRef' as any}
+      />
+    );
   }
 }
 
@@ -34,7 +39,7 @@ class ClassComponentWithCreateRef extends React.Component<
   Record<string, never>,
   Record<string, never>
 > {
-  segmentedRef = React.createRef();
+  segmentedRef = React.createRef<HTMLDivElement>();
 
   componentDidMount() {
     console.log(this.segmentedRef.current, 'ref');
@@ -48,7 +53,7 @@ class ClassComponentWithCreateRef extends React.Component<
 }
 
 function FunctionalComponent() {
-  const segmentedRef = React.useRef();
+  const segmentedRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     console.log(segmentedRef.current, 'ref');
   }, []);

package.json

@@ -31,6 +31,7 @@
   "license": "MIT",
   "scripts": {
     "start": "dumi dev",
+    "type:check": "tsc --noEmit",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && lessc assets/index.less assets/index.css",

src/index.tsx

@@ -22,15 +22,12 @@ export interface SegmentedLabeledOption {
 
 type SegmentedOptions = (SegmentedRawOption | SegmentedLabeledOption)[];
 
-type ExtendedHTMLInputElement = Omit<HTMLInputElement, 'value'> & {
-  value: SegmentedValue;
-};
-
-export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
+export interface SegmentedProps
+  extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   options: SegmentedOptions;
   defaultValue?: SegmentedValue;
   value?: SegmentedValue;
-  onChange?: (e: React.ChangeEvent<ExtendedHTMLInputElement>) => void;
+  onChange?: (value: SegmentedValue) => void;
   disabled?: boolean;
   prefixCls?: string;
   direction?: 'ltr' | 'rtl';
@@ -230,19 +227,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
       setSelected(val);
 
-      if (onChange) {
-        const mutatedTarget = Object.create(event.target, {
-          value: {
-            value: val,
-          },
-        });
-        const mutatedEvent = Object.create(event, {
-          target: {
-            value: mutatedTarget,
-          },
-        });
-        onChange(mutatedEvent);
-      }
+      onChange?.(val);
     };
 
     // --- motion event handlers for thumb move

tests/index.spec.tsx

@@ -76,7 +76,7 @@ describe('rc-segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['iOS', 'Android', 'Web']}
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -108,7 +108,7 @@ describe('rc-segmented', () => {
     const wrapper = mount(
       <Segmented
         options={[1, 2, 3, 4, 5]}
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -133,7 +133,7 @@ describe('rc-segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['iOS', { label: 'Android', value: 'Android' }, 'Web']}
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -157,7 +157,7 @@ describe('rc-segmented', () => {
           { label: 'Android', value: 'Android', disabled: true },
           'Web',
         ]}
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -197,7 +197,7 @@ describe('rc-segmented', () => {
       <Segmented
         options={['iOS', 'Android', 'Web']}
         disabled
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -248,7 +248,8 @@ describe('rc-segmented', () => {
       />,
     );
 
-    expect(wrapper.find(Segmented).getElement().ref).toBe(ref);
+    const segmentedEl = wrapper.find(Segmented).getElement();
+    expect((segmentedEl as any).ref).toBe(ref);
   });
 
   it('render segmented with controlled mode', () => {
@@ -262,9 +263,9 @@ describe('rc-segmented', () => {
           <Segmented
             options={['iOS', 'Android', 'Web3']}
             value={this.state.value}
-            onChange={(e) =>
+            onChange={(value) =>
               this.setState({
-                value: e.target.value,
+                value,
               })
             }
           />
@@ -320,7 +321,7 @@ describe('rc-segmented', () => {
     const wrapper = mount(
       <Segmented
         options={['iOS', 'Android', 'Web3']}
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();
@@ -404,7 +405,7 @@ describe('rc-segmented', () => {
       <Segmented
         options={[null, undefined, ''] as any}
         disabled
-        onChange={(e) => handleValueChange(e.target.value)}
+        onChange={(value) => handleValueChange(value)}
       />,
     );
     expect(wrapper.render()).toMatchSnapshot();

tests/wrapper.ts

@@ -12,5 +12,5 @@ export function mount<
   P = C['props'],
   S = C['state'],
 >(...args: MountParam) {
-  return enzymeMount(...args) as WrapperType<P, S, C>;
+  return enzymeMount(...args) as unknown as WrapperType<P, S, C>;
 }

tsconfig.json

@@ -18,5 +18,7 @@
       "@@/*": ["src/.umi/*"],
       "rc-segmented": ["src/index.tsx"]
     }
-  }
+  },
+  "include": ["src", "tests", "docs/examples"],
+  "exclude": [".umi*"]
 }