-
-
Notifications
You must be signed in to change notification settings - Fork 2k
/
RadioButton.tsx
122 lines (113 loc) · 2.78 KB
/
RadioButton.tsx
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
122
import * as React from 'react';
import { Platform } from 'react-native';
import {
RadioButtonAndroid,
RadioButtonGroup,
RadioButtonIOS,
RadioButtonItem,
} from './RadioButtonElements';
import { withTheme } from '../../core/theming';
export type Props = {
/**
* Value of the radio button
*/
value: string;
/**
* Status of radio button.
*/
status?: 'checked' | 'unchecked';
/**
* Whether radio is disabled.
*/
disabled?: boolean;
/**
* Function to execute on press.
*/
onPress?: () => void;
/**
* Custom color for unchecked radio.
*/
uncheckedColor?: string;
/**
* Custom color for radio.
*/
color?: string;
/**
* @optional
*/
theme: ReactNativePaper.Theme;
/**
* testID to be used on tests.
*/
testID?: string;
};
/**
* Radio buttons allow the selection a single option from a set.
*
* <div class="screenshots">
* <figure>
* <img src="screenshots/radio-enabled.android.png" />
* <figcaption>Android (enabled)</figcaption>
* </figure>
* <figure>
* <img src="screenshots/radio-disabled.android.png" />
* <figcaption>Android (disabled)</figcaption>
* </figure>
* <figure>
* <img src="screenshots/radio-enabled.ios.png" />
* <figcaption>iOS (enabled)</figcaption>
* </figure>
* <figure>
* <img src="screenshots/radio-disabled.ios.png" />
* <figcaption>iOS (disabled)</figcaption>
* </figure>
* </div>
*
* ## Usage
* ```js
* import * as React from 'react';
* import { View } from 'react-native';
* import { RadioButton } from 'react-native-paper';
*
* const MyComponent = () => {
* const [checked, setChecked] = React.useState('first');
*
* return (
* <View>
* <RadioButton
* value="first"
* status={ checked === 'first' ? 'checked' : 'unchecked' }
* onPress={() => setChecked('first')}
* />
* <RadioButton
* value="second"
* status={ checked === 'second' ? 'checked' : 'unchecked' }
* onPress={() => setChecked('second')}
* />
* </View>
* );
* };
*
* export default MyComponent;
* ```
*/
const RadioButton = (props: Props) => {
const Button = Platform.select({
default: RadioButtonAndroid,
ios: RadioButtonIOS,
});
return <Button {...props} />;
};
// @component ./RadioButtonGroup.tsx
RadioButton.Group = RadioButtonGroup;
// @component ./RadioButtonAndroid.tsx
RadioButton.Android = RadioButtonAndroid;
// @component ./RadioButtonIOS.tsx
RadioButton.IOS = RadioButtonIOS;
// @component ./RadioButtonItem.tsx
RadioButton.Item = RadioButtonItem;
export default withTheme(RadioButton);
// @component-docs ignore-next-line
const RadioButtonWithTheme = withTheme(RadioButton);
// @component-docs ignore-next-line
export { RadioButtonWithTheme as RadioButton };