Skip to content

Commit 0d072c7

Browse files
vagusXvagusX
authored
refactor: onChange API changed (#33)
1 parent 5aa4844 commit 0d072c7

File tree

10 files changed

+47
-47
lines changed

10 files changed

+47
-47
lines changed

‎.github/workflows/main.yml

+8-5
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ name: CI
22

33
on:
44
push:
5-
branches: [ master ]
5+
branches: [master]
66
pull_request:
7-
branches: [ master ]
7+
branches: [master]
88

99
jobs:
1010
setup:
@@ -43,7 +43,7 @@ jobs:
4343
- name: install
4444
if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
4545
run: npm ci
46-
46+
4747
lint:
4848
runs-on: ubuntu-latest
4949
steps:
@@ -65,8 +65,11 @@ jobs:
6565
- name: lint
6666
run: npm run lint
6767

68+
- name: type:check
69+
run: npm run type:check
70+
6871
needs: setup
69-
72+
7073
compile:
7174
runs-on: ubuntu-latest
7275
steps:
@@ -89,7 +92,7 @@ jobs:
8992
run: npm run compile
9093

9194
needs: setup
92-
95+
9396
coverage:
9497
runs-on: ubuntu-latest
9598
steps:

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,17 @@ import { render } from 'react-dom';
3535
render(
3636
<Segmented
3737
options={['Antd', 'Antv', 'Egg.js']}
38-
onChange={(e) => handleValueChange(e.target.value)}
38+
onChange={(value) => handleValueChange(value)}
3939
/>,
4040
mountNode,
4141
);
4242
```
4343

4444
## API
4545

46+
Please note that **onChange** API
47+
changed on v2.0.0+
48+
4649
| Property | Type | Default | Description |
4750
| --------- | --------- | --------- | --------- |
4851
| prefixCls | string | rc-segmented | prefixCls of this component |
@@ -52,7 +55,7 @@ render(
5255
| value | string \| number | | value of segmented |
5356
| defaultValue | string \| number | | defaultValue of segmented |
5457
| value | string \| number | | currently selected value of segmented |
55-
| onChange | (e: any) => void | | defaultValue of segmented |
58+
| onChange | (value: string \| number) => void | | defaultValue of segmented |
5659
| disabled | boolean | false | disabled status of segmented |
5760

5861
### SegmentedOption

‎docs/examples/basic.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export default function App() {
88
<div className="wrapper">
99
<Segmented
1010
options={['iOS', 'Android', 'Web']}
11-
onChange={(e) => console.log(e.target.value, typeof e.target.value)}
11+
onChange={(value) => console.log(value, typeof value)}
1212
/>
1313
</div>
1414
<div className="wrapper">
1515
<Segmented
1616
options={[13333333333, 157110000, 12110086]}
17-
onChange={(e) => console.log(e.target.value, typeof e.target.value)}
17+
onChange={(value) => console.log(value, typeof value)}
1818
/>
1919
</div>
2020
<div className="wrapper">

‎docs/examples/controlled.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@ export default class Demo extends React.Component<
1717
<Segmented
1818
options={['iOS', 'Android', 'Web3']}
1919
value={this.state.value}
20-
onChange={(e) =>
20+
onChange={(value) =>
2121
this.setState({
22-
value: e.target.value,
22+
value,
2323
})
2424
}
2525
/>
2626
&nbsp;&nbsp;
2727
<Segmented
2828
options={['iOS', 'Android', 'Web3']}
2929
value={this.state.value}
30-
onChange={(e) =>
30+
onChange={(value) =>
3131
this.setState({
32-
value: e.target.value,
32+
value,
3333
})
3434
}
3535
/>

‎docs/examples/refs.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ class ClassComponentWithStringRef extends React.Component {
99
}
1010

1111
render() {
12-
return <Segmented options={['iOS', 'Android', 'Web']} ref="segmentedRef" />;
12+
return (
13+
<Segmented
14+
options={['iOS', 'Android', 'Web']}
15+
ref={'segmentedRef' as any}
16+
/>
17+
);
1318
}
1419
}
1520

@@ -34,7 +39,7 @@ class ClassComponentWithCreateRef extends React.Component<
3439
Record<string, never>,
3540
Record<string, never>
3641
> {
37-
segmentedRef = React.createRef();
42+
segmentedRef = React.createRef<HTMLDivElement>();
3843

3944
componentDidMount() {
4045
console.log(this.segmentedRef.current, 'ref');
@@ -48,7 +53,7 @@ class ClassComponentWithCreateRef extends React.Component<
4853
}
4954

5055
function FunctionalComponent() {
51-
const segmentedRef = React.useRef();
56+
const segmentedRef = React.useRef<HTMLDivElement>(null);
5257
React.useEffect(() => {
5358
console.log(segmentedRef.current, 'ref');
5459
}, []);

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"license": "MIT",
3232
"scripts": {
3333
"start": "dumi dev",
34+
"type:check": "tsc --noEmit",
3435
"docs:build": "dumi build",
3536
"docs:deploy": "gh-pages -d .doc",
3637
"compile": "father build && lessc assets/index.less assets/index.css",

‎src/index.tsx

+4-19
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,12 @@ export interface SegmentedLabeledOption {
2222

2323
type SegmentedOptions = (SegmentedRawOption | SegmentedLabeledOption)[];
2424

25-
type ExtendedHTMLInputElement = Omit<HTMLInputElement, 'value'> & {
26-
value: SegmentedValue;
27-
};
28-
29-
export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
25+
export interface SegmentedProps
26+
extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
3027
options: SegmentedOptions;
3128
defaultValue?: SegmentedValue;
3229
value?: SegmentedValue;
33-
onChange?: (e: React.ChangeEvent<ExtendedHTMLInputElement>) => void;
30+
onChange?: (value: SegmentedValue) => void;
3431
disabled?: boolean;
3532
prefixCls?: string;
3633
direction?: 'ltr' | 'rtl';
@@ -230,19 +227,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
230227

231228
setSelected(val);
232229

233-
if (onChange) {
234-
const mutatedTarget = Object.create(event.target, {
235-
value: {
236-
value: val,
237-
},
238-
});
239-
const mutatedEvent = Object.create(event, {
240-
target: {
241-
value: mutatedTarget,
242-
},
243-
});
244-
onChange(mutatedEvent);
245-
}
230+
onChange?.(val);
246231
};
247232

248233
// --- motion event handlers for thumb move

‎tests/index.spec.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('rc-segmented', () => {
7676
const wrapper = mount(
7777
<Segmented
7878
options={['iOS', 'Android', 'Web']}
79-
onChange={(e) => handleValueChange(e.target.value)}
79+
onChange={(value) => handleValueChange(value)}
8080
/>,
8181
);
8282
expect(wrapper.render()).toMatchSnapshot();
@@ -108,7 +108,7 @@ describe('rc-segmented', () => {
108108
const wrapper = mount(
109109
<Segmented
110110
options={[1, 2, 3, 4, 5]}
111-
onChange={(e) => handleValueChange(e.target.value)}
111+
onChange={(value) => handleValueChange(value)}
112112
/>,
113113
);
114114
expect(wrapper.render()).toMatchSnapshot();
@@ -133,7 +133,7 @@ describe('rc-segmented', () => {
133133
const wrapper = mount(
134134
<Segmented
135135
options={['iOS', { label: 'Android', value: 'Android' }, 'Web']}
136-
onChange={(e) => handleValueChange(e.target.value)}
136+
onChange={(value) => handleValueChange(value)}
137137
/>,
138138
);
139139
expect(wrapper.render()).toMatchSnapshot();
@@ -157,7 +157,7 @@ describe('rc-segmented', () => {
157157
{ label: 'Android', value: 'Android', disabled: true },
158158
'Web',
159159
]}
160-
onChange={(e) => handleValueChange(e.target.value)}
160+
onChange={(value) => handleValueChange(value)}
161161
/>,
162162
);
163163
expect(wrapper.render()).toMatchSnapshot();
@@ -197,7 +197,7 @@ describe('rc-segmented', () => {
197197
<Segmented
198198
options={['iOS', 'Android', 'Web']}
199199
disabled
200-
onChange={(e) => handleValueChange(e.target.value)}
200+
onChange={(value) => handleValueChange(value)}
201201
/>,
202202
);
203203
expect(wrapper.render()).toMatchSnapshot();
@@ -248,7 +248,8 @@ describe('rc-segmented', () => {
248248
/>,
249249
);
250250

251-
expect(wrapper.find(Segmented).getElement().ref).toBe(ref);
251+
const segmentedEl = wrapper.find(Segmented).getElement();
252+
expect((segmentedEl as any).ref).toBe(ref);
252253
});
253254

254255
it('render segmented with controlled mode', () => {
@@ -262,9 +263,9 @@ describe('rc-segmented', () => {
262263
<Segmented
263264
options={['iOS', 'Android', 'Web3']}
264265
value={this.state.value}
265-
onChange={(e) =>
266+
onChange={(value) =>
266267
this.setState({
267-
value: e.target.value,
268+
value,
268269
})
269270
}
270271
/>
@@ -320,7 +321,7 @@ describe('rc-segmented', () => {
320321
const wrapper = mount(
321322
<Segmented
322323
options={['iOS', 'Android', 'Web3']}
323-
onChange={(e) => handleValueChange(e.target.value)}
324+
onChange={(value) => handleValueChange(value)}
324325
/>,
325326
);
326327
expect(wrapper.render()).toMatchSnapshot();
@@ -404,7 +405,7 @@ describe('rc-segmented', () => {
404405
<Segmented
405406
options={[null, undefined, ''] as any}
406407
disabled
407-
onChange={(e) => handleValueChange(e.target.value)}
408+
onChange={(value) => handleValueChange(value)}
408409
/>,
409410
);
410411
expect(wrapper.render()).toMatchSnapshot();

‎tests/wrapper.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ export function mount<
1212
P = C['props'],
1313
S = C['state'],
1414
>(...args: MountParam) {
15-
return enzymeMount(...args) as WrapperType<P, S, C>;
15+
return enzymeMount(...args) as unknown as WrapperType<P, S, C>;
1616
}

‎tsconfig.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,7 @@
1818
"@@/*": ["src/.umi/*"],
1919
"rc-segmented": ["src/index.tsx"]
2020
}
21-
}
21+
},
22+
"include": ["src", "tests", "docs/examples"],
23+
"exclude": [".umi*"]
2224
}

0 commit comments

Comments
 (0)