mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Cameron Bourke
680abf2d56
Summary:
## Context
Moving SegmentedControlIOS to use a generated view config.
---
It's worth mentioning that even though `RCTSegmentedControlNativeComponent` defines a different event type to that of `RCTView`. We currently do not have 100% type safety for the event types in Paper. In other words, when an event for `onChange` in this case comes from the native side, it could potentially be shaped differently than what was typed in the native component file. This will be addressed in `Fabric`.
```
// RCTSegmentedControlNativeComponent.js
export type Event = $ReadOnly<{|
value: Int32,
selectedSegmentIndex: Int32,
|}>;
...
export type NativeProps = $ReadOnly<{|
...
onChange?: ?(event: BubblingEvent<Event>) => mixed,
|}>
```
This means that in the view config diff, there will be a value of `none` for `bubblingEventTypes`
Reviewed By: rickhanlonii
Differential Revision: D15851692
fbshipit-source-id: 6653fe7a77e46afdd55808aa5a4df813b34d7f70
123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
/**
|
|
* 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
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as React from 'react';
|
|
import StyleSheet from '../../StyleSheet/StyleSheet';
|
|
import type {OnChangeEvent} from './RCTSegmentedControlNativeComponent';
|
|
import type {ViewProps} from '../View/ViewPropTypes';
|
|
import RCTSegmentedControlNativeComponent from './RCTSegmentedControlNativeComponent';
|
|
|
|
type SegmentedControlIOSProps = $ReadOnly<{|
|
|
...ViewProps,
|
|
/**
|
|
* The labels for the control's segment buttons, in order.
|
|
*/
|
|
values?: $ReadOnlyArray<string>,
|
|
/**
|
|
* The index in `props.values` of the segment to be (pre)selected.
|
|
*/
|
|
selectedIndex?: ?number,
|
|
/**
|
|
* If false the user won't be able to interact with the control.
|
|
*/
|
|
enabled?: boolean,
|
|
/**
|
|
* Accent color of the control.
|
|
*/
|
|
tintColor?: ?string,
|
|
/**
|
|
* If true, then selecting a segment won't persist visually.
|
|
* The `onValueChange` callback will still work as expected.
|
|
*/
|
|
momentary?: ?boolean,
|
|
/**
|
|
* Callback that is called when the user taps a segment
|
|
*/
|
|
onChange?: ?(event: OnChangeEvent) => mixed,
|
|
/**
|
|
* Callback that is called when the user taps a segment;
|
|
* passes the segment's value as an argument
|
|
*/
|
|
onValueChange?: ?(value: number) => mixed,
|
|
|}>;
|
|
|
|
type Props = $ReadOnly<{|
|
|
...SegmentedControlIOSProps,
|
|
forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
|
|
|}>;
|
|
|
|
/**
|
|
* Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
|
|
*
|
|
* #### Programmatically changing selected index
|
|
*
|
|
* The selected index can be changed on the fly by assigning the
|
|
* selectedIndex prop to a state variable, then changing that variable.
|
|
* Note that the state variable would need to be updated as the user
|
|
* selects a value and changes the index, as shown in the example below.
|
|
*
|
|
* ````
|
|
* <SegmentedControlIOS
|
|
* values={['One', 'Two']}
|
|
* selectedIndex={this.state.selectedIndex}
|
|
* onChange={(event) => {
|
|
* this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
|
|
* }}
|
|
* />
|
|
* ````
|
|
*/
|
|
|
|
class SegmentedControlIOS extends React.Component<Props> {
|
|
static defaultProps = {
|
|
values: [],
|
|
enabled: true,
|
|
};
|
|
|
|
_onChange = (event: 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;
|
|
return (
|
|
<RCTSegmentedControlNativeComponent
|
|
{...props}
|
|
ref={forwardedRef}
|
|
style={[styles.segmentedControl, style]}
|
|
onChange={this._onChange}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
segmentedControl: {
|
|
height: 28,
|
|
},
|
|
});
|
|
|
|
const SegmentedControlIOSWithRef = React.forwardRef(
|
|
(
|
|
props: SegmentedControlIOSProps,
|
|
forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
|
|
) => {
|
|
return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
|
|
},
|
|
);
|
|
|
|
/* $FlowFixMe(>=0.89.0 site=react_native_ios_fb) This comment suppresses an
|
|
* error found when Flow v0.89 was deployed. To see the error, delete this
|
|
* comment and run Flow. */
|
|
module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);
|