Remove defaultProps from SegmentedControlIOS (#31804)

Summary:
Issue https://github.com/facebook/react-native/issues/31604 . Remove `defaultProps` from `SegmentedControlIOS`.

## Changelog

[JavaScript] [Changed] - Remove defaultProps from SegmentedControlIOS

Pull Request resolved: https://github.com/facebook/react-native/pull/31804

Test Plan: Added tests for `SegmentedControlIOS` pass.

Reviewed By: yungsters

Differential Revision: D29653982

Pulled By: lunaleaps

fbshipit-source-id: ed6e133cc3af629be6cd83be79e402ad1e68b29b
This commit is contained in:
Joshua Wiegmann 2021-07-13 19:23:27 -07:00 коммит произвёл Facebook GitHub Bot
Родитель b5c94e316c
Коммит fa0518d3d3
3 изменённых файлов: 155 добавлений и 6 удалений

Просмотреть файл

@ -19,6 +19,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
...ViewProps,
/**
* The labels for the control's segment buttons, in order.
*
* The default value is an empty array.
*/
values?: $ReadOnlyArray<string>,
/**
@ -27,6 +29,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
selectedIndex?: ?number,
/**
* If false the user won't be able to interact with the control.
*
* The default value is true.
*/
enabled?: boolean,
/**
@ -76,11 +80,6 @@ type Props = $ReadOnly<{|
*/
class SegmentedControlIOS extends React.Component<Props> {
static defaultProps = {
values: [],
enabled: true,
};
_onChange = (event: SyntheticEvent<OnChangeEvent>) => {
this.props.onChange && this.props.onChange(event);
this.props.onValueChange &&
@ -88,12 +87,21 @@ class SegmentedControlIOS extends React.Component<Props> {
};
render() {
const {forwardedRef, onValueChange, style, ...props} = this.props;
const {
enabled,
forwardedRef,
onValueChange,
style,
values,
...props
} = this.props;
return (
<RCTSegmentedControlNativeComponent
{...props}
ref={forwardedRef}
style={[styles.segmentedControl, style]}
enabled={enabled !== false}
values={values ?? []}
onChange={this._onChange}
/>
);

Просмотреть файл

@ -0,0 +1,55 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
*/
'use strict';
const React = require('react');
const ReactTestRenderer = require('react-test-renderer');
const SegmentedControlIOS = require('../SegmentedControlIOS.ios');
describe('SegmentedControlIOS', () => {
it('renders the segmented control', () => {
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
expect(component).not.toBeNull();
});
it('renders the segmented control with enabled default value', () => {
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
expect(component.toTree().rendered.props.enabled).toBe(true);
expect(component).toMatchSnapshot();
});
it('renders the segmented control with enabled', () => {
const component = ReactTestRenderer.create(
<SegmentedControlIOS enabled={true} />,
);
expect(component.toTree().rendered.props.enabled).toBe(true);
expect(component).toMatchSnapshot();
});
it('renders the segmented control with enabled set to false', () => {
const component = ReactTestRenderer.create(
<SegmentedControlIOS enabled={false} />,
);
expect(component.toTree().rendered.props.enabled).toBe(false);
expect(component).toMatchSnapshot();
});
it('renders the segmented control with values default value', () => {
const component = ReactTestRenderer.create(<SegmentedControlIOS />);
expect(component.toTree().rendered.props.values).toEqual([]);
expect(component).toMatchSnapshot();
});
it('renders the segmented control with values', () => {
const values = ['One', 'Two'];
const component = ReactTestRenderer.create(
<SegmentedControlIOS values={values} />,
);
expect(component.toTree().rendered.props.values).toBe(values);
expect(component).toMatchSnapshot();
});
});

Просмотреть файл

@ -0,0 +1,86 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SegmentedControlIOS renders the segmented control with enabled 1`] = `
<RCTSegmentedControl
enabled={true}
onChange={[Function]}
style={
Array [
Object {
"height": 28,
},
undefined,
]
}
values={Array []}
/>
`;
exports[`SegmentedControlIOS renders the segmented control with enabled default value 1`] = `
<RCTSegmentedControl
enabled={true}
onChange={[Function]}
style={
Array [
Object {
"height": 28,
},
undefined,
]
}
values={Array []}
/>
`;
exports[`SegmentedControlIOS renders the segmented control with enabled set to false 1`] = `
<RCTSegmentedControl
enabled={false}
onChange={[Function]}
style={
Array [
Object {
"height": 28,
},
undefined,
]
}
values={Array []}
/>
`;
exports[`SegmentedControlIOS renders the segmented control with values 1`] = `
<RCTSegmentedControl
enabled={true}
onChange={[Function]}
style={
Array [
Object {
"height": 28,
},
undefined,
]
}
values={
Array [
"One",
"Two",
]
}
/>
`;
exports[`SegmentedControlIOS renders the segmented control with values default value 1`] = `
<RCTSegmentedControl
enabled={true}
onChange={[Function]}
style={
Array [
Object {
"height": 28,
},
undefined,
]
}
values={Array []}
/>
`;