Skip to content

Commit fa0518d

Browse files
Joshua Wiegmannfacebook-github-bot
authored andcommitted
Remove defaultProps from SegmentedControlIOS (#31804)
Summary: Issue #31604 . Remove `defaultProps` from `SegmentedControlIOS`. ## Changelog [JavaScript] [Changed] - Remove defaultProps from SegmentedControlIOS Pull Request resolved: #31804 Test Plan: Added tests for `SegmentedControlIOS` pass. Reviewed By: yungsters Differential Revision: D29653982 Pulled By: lunaleaps fbshipit-source-id: ed6e133cc3af629be6cd83be79e402ad1e68b29b
1 parent b5c94e3 commit fa0518d

3 files changed

Lines changed: 155 additions & 6 deletions

File tree

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
1919
...ViewProps,
2020
/**
2121
* The labels for the control's segment buttons, in order.
22+
*
23+
* The default value is an empty array.
2224
*/
2325
values?: $ReadOnlyArray<string>,
2426
/**
@@ -27,6 +29,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
2729
selectedIndex?: ?number,
2830
/**
2931
* If false the user won't be able to interact with the control.
32+
*
33+
* The default value is true.
3034
*/
3135
enabled?: boolean,
3236
/**
@@ -76,24 +80,28 @@ type Props = $ReadOnly<{|
7680
*/
7781

7882
class SegmentedControlIOS extends React.Component<Props> {
79-
static defaultProps = {
80-
values: [],
81-
enabled: true,
82-
};
83-
8483
_onChange = (event: SyntheticEvent<OnChangeEvent>) => {
8584
this.props.onChange && this.props.onChange(event);
8685
this.props.onValueChange &&
8786
this.props.onValueChange(event.nativeEvent.value);
8887
};
8988

9089
render() {
91-
const {forwardedRef, onValueChange, style, ...props} = this.props;
90+
const {
91+
enabled,
92+
forwardedRef,
93+
onValueChange,
94+
style,
95+
values,
96+
...props
97+
} = this.props;
9298
return (
9399
<RCTSegmentedControlNativeComponent
94100
{...props}
95101
ref={forwardedRef}
96102
style={[styles.segmentedControl, style]}
103+
enabled={enabled !== false}
104+
values={values ?? []}
97105
onChange={this._onChange}
98106
/>
99107
);
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @emails oncall+react_native
9+
*/
10+
11+
'use strict';
12+
13+
const React = require('react');
14+
const ReactTestRenderer = require('react-test-renderer');
15+
16+
const SegmentedControlIOS = require('../SegmentedControlIOS.ios');
17+
18+
describe('SegmentedControlIOS', () => {
19+
it('renders the segmented control', () => {
20+
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
21+
expect(component).not.toBeNull();
22+
});
23+
it('renders the segmented control with enabled default value', () => {
24+
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
25+
expect(component.toTree().rendered.props.enabled).toBe(true);
26+
expect(component).toMatchSnapshot();
27+
});
28+
it('renders the segmented control with enabled', () => {
29+
const component = ReactTestRenderer.create(
30+
<SegmentedControlIOS enabled={true} />,
31+
);
32+
expect(component.toTree().rendered.props.enabled).toBe(true);
33+
expect(component).toMatchSnapshot();
34+
});
35+
it('renders the segmented control with enabled set to false', () => {
36+
const component = ReactTestRenderer.create(
37+
<SegmentedControlIOS enabled={false} />,
38+
);
39+
expect(component.toTree().rendered.props.enabled).toBe(false);
40+
expect(component).toMatchSnapshot();
41+
});
42+
it('renders the segmented control with values default value', () => {
43+
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
44+
expect(component.toTree().rendered.props.values).toEqual([]);
45+
expect(component).toMatchSnapshot();
46+
});
47+
it('renders the segmented control with values', () => {
48+
const values = ['One', 'Two'];
49+
const component = ReactTestRenderer.create(
50+
<SegmentedControlIOS values={values} />,
51+
);
52+
expect(component.toTree().rendered.props.values).toBe(values);
53+
expect(component).toMatchSnapshot();
54+
});
55+
});
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`SegmentedControlIOS renders the segmented control with enabled 1`] = `
4+
<RCTSegmentedControl
5+
enabled={true}
6+
onChange={[Function]}
7+
style={
8+
Array [
9+
Object {
10+
"height": 28,
11+
},
12+
undefined,
13+
]
14+
}
15+
values={Array []}
16+
/>
17+
`;
18+
19+
exports[`SegmentedControlIOS renders the segmented control with enabled default value 1`] = `
20+
<RCTSegmentedControl
21+
enabled={true}
22+
onChange={[Function]}
23+
style={
24+
Array [
25+
Object {
26+
"height": 28,
27+
},
28+
undefined,
29+
]
30+
}
31+
values={Array []}
32+
/>
33+
`;
34+
35+
exports[`SegmentedControlIOS renders the segmented control with enabled set to false 1`] = `
36+
<RCTSegmentedControl
37+
enabled={false}
38+
onChange={[Function]}
39+
style={
40+
Array [
41+
Object {
42+
"height": 28,
43+
},
44+
undefined,
45+
]
46+
}
47+
values={Array []}
48+
/>
49+
`;
50+
51+
exports[`SegmentedControlIOS renders the segmented control with values 1`] = `
52+
<RCTSegmentedControl
53+
enabled={true}
54+
onChange={[Function]}
55+
style={
56+
Array [
57+
Object {
58+
"height": 28,
59+
},
60+
undefined,
61+
]
62+
}
63+
values={
64+
Array [
65+
"One",
66+
"Two",
67+
]
68+
}
69+
/>
70+
`;
71+
72+
exports[`SegmentedControlIOS renders the segmented control with values default value 1`] = `
73+
<RCTSegmentedControl
74+
enabled={true}
75+
onChange={[Function]}
76+
style={
77+
Array [
78+
Object {
79+
"height": 28,
80+
},
81+
undefined,
82+
]
83+
}
84+
values={Array []}
85+
/>
86+
`;

0 commit comments

Comments
 (0)