Skip to content

Commit

Permalink
Remove defaultProps from SegmentedControlIOS (#31804)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Joshua Wiegmann authored and facebook-github-bot committed Jul 14, 2021
1 parent b5c94e3 commit fa0518d
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
/**
Expand All @@ -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,
/**
Expand Down Expand Up @@ -76,24 +80,28 @@ 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 &&
this.props.onValueChange(event.nativeEvent.value);
};

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}
/>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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 []}
/>
`;

0 comments on commit fa0518d

Please sign in to comment.