-
Notifications
You must be signed in to change notification settings - Fork 24.3k
/
SegmentedControlIOS.ios.js
121 lines (111 loc) · 3.46 KB
/
SegmentedControlIOS.ios.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* 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 strict-local
*/
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';
import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
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: SyntheticEvent<OnChangeEvent>) => void,
/**
* 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: 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;
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[cannot-resolve-name] (>=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);