1
1
import _ from 'lodash' ;
2
- import PropTypes from 'prop-types' ;
3
- import React from 'react' ;
4
- import { StyleSheet , Animated , Easing } from 'react-native' ;
2
+ import React , { PureComponent } from 'react' ;
3
+ import {
4
+ StyleSheet ,
5
+ Animated ,
6
+ Easing ,
7
+ TextStyle ,
8
+ StyleProp ,
9
+ ImageSourcePropType ,
10
+ ImageStyle ,
11
+ ViewStyle ,
12
+ ViewProps
13
+ } from 'react-native' ;
5
14
import { Colors } from '../../style' ;
6
- import { BaseComponent } from '../../commons' ;
15
+ import { asBaseComponent , forwardRef , BaseComponentInjectedProps , ForwardRefInjectedProps } from '../../commons/new ' ;
7
16
import TouchableOpacity from '../touchableOpacity' ;
8
17
import View from '../view' ;
9
18
import Text from '../text' ;
10
- import Image from '../image' ;
19
+ const Image = require ( '../image' ) . default ; // TODO: change this once Image is written in typescript
11
20
import asRadioGroupChild from './asRadioGroupChild' ;
21
+ import { RadioGroupContextPropTypes } from './RadioGroupContext' ;
12
22
13
23
const DEFAULT_SIZE = 24 ;
14
24
const DEFAULT_COLOR = Colors . blue30 ;
15
25
26
+ interface RadioButtonPropTypes {
27
+ /**
28
+ * The identifier value of the radio button. must be different than other RadioButtons in the same group
29
+ */
30
+ value ?: string | boolean ;
31
+ /**
32
+ * When using RadioButton without a RadioGroup, use this prop to toggle selection
33
+ */
34
+ selected ?: boolean ;
35
+ /**
36
+ * Invoked when pressing the button
37
+ */
38
+ onPress ?: Function ;
39
+ /**
40
+ * Whether the radio button should be disabled
41
+ */
42
+ disabled ?: boolean ;
43
+ /**
44
+ * The color of the radio button
45
+ */
46
+ color ?: string ;
47
+ /**
48
+ * The size of the radio button, affect both width & height
49
+ */
50
+ size ?: number ;
51
+ /**
52
+ * The radio button border radius
53
+ */
54
+ borderRadius ?: number ;
55
+ /**
56
+ * A label for the radio button description
57
+ */
58
+ label ?: string ;
59
+ /**
60
+ * Label style
61
+ */
62
+ labelStyle ?: TextStyle ;
63
+ /**
64
+ * Icon image source
65
+ */
66
+ iconSource ?: ImageSourcePropType ;
67
+ /**
68
+ * Icon image style
69
+ */
70
+ iconStyle ?: ImageStyle ;
71
+ /**
72
+ * Should the icon be on the right side of the label
73
+ */
74
+ iconOnRight ?: boolean ;
75
+ }
76
+
77
+ interface RadioButtonState {
78
+ opacityAnimationValue : Animated . Value ;
79
+ scaleAnimationValue : Animated . Value ;
80
+ }
81
+
82
+ type Props = RadioButtonPropTypes &
83
+ RadioGroupContextPropTypes &
84
+ BaseComponentInjectedProps &
85
+ ForwardRefInjectedProps &
86
+ ViewProps ;
87
+
16
88
/**
17
89
* A Radio Button component, should be wrapped inside a RadioGroup
18
90
*/
19
- class RadioButton extends BaseComponent {
91
+ class RadioButton extends PureComponent < Props , RadioButtonState > {
20
92
static displayName = 'RadioButton' ;
21
93
22
- static propTypes = {
23
- /**
24
- * The identifier value of the radio button. must be different than other RadioButtons in the same group
25
- */
26
- value : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . bool ] ) ,
27
- /**
28
- * When using RadioButton without a RadioGroup, use this prop to toggle selection
29
- */
30
- selected : PropTypes . bool ,
31
- /**
32
- * Invoked when pressing the button
33
- */
34
- onPress : PropTypes . func ,
35
- /**
36
- * Whether the radio button should be disabled
37
- */
38
- disabled : PropTypes . bool ,
39
- /**
40
- * The color of the radio button
41
- */
42
- color : PropTypes . string ,
43
- /**
44
- * The size of the radio button, affect both width & height
45
- */
46
- size : PropTypes . number ,
47
- /**
48
- * The radio button border radius
49
- */
50
- borderRadius : PropTypes . number ,
51
- /**
52
- * A label for the radio button description
53
- */
54
- label : PropTypes . string ,
55
- /**
56
- * Label style
57
- */
58
- labelStyle : PropTypes . oneOfType ( [ PropTypes . object , PropTypes . number , PropTypes . array ] ) ,
59
- /**
60
- * Icon image source
61
- */
62
- iconSource : PropTypes . oneOfType ( [ PropTypes . object , PropTypes . number ] ) ,
63
- /**
64
- * Icon image style
65
- */
66
- iconStyle : PropTypes . oneOfType ( [ PropTypes . object , PropTypes . number , PropTypes . array ] ) ,
67
- /**
68
- * Should the icon be on the right side of the label
69
- */
70
- iconOnRight : PropTypes . bool
71
- } ;
72
-
73
94
static defaultProps = {
74
95
iconOnRight : false
75
96
} ;
76
97
77
- constructor ( props ) {
98
+ styles : {
99
+ radioButtonOutline : StyleProp < ViewStyle > ;
100
+ radioButtonInner : StyleProp < ViewStyle > ;
101
+ image : StyleProp < ImageStyle > ;
102
+ } ;
103
+
104
+ constructor ( props : Props ) {
78
105
super ( props ) ;
106
+ this . styles = createStyles ( props ) ;
79
107
this . state = {
80
108
opacityAnimationValue : new Animated . Value ( 0 ) ,
81
109
scaleAnimationValue : new Animated . Value ( 0.8 )
@@ -86,7 +114,7 @@ class RadioButton extends BaseComponent {
86
114
this . animate ( ) ;
87
115
}
88
116
89
- componentDidUpdate ( prevProps ) {
117
+ componentDidUpdate ( prevProps : Props ) {
90
118
if ( prevProps . selected !== this . props . selected ) {
91
119
this . animate ( ) ;
92
120
}
@@ -128,10 +156,6 @@ class RadioButton extends BaseComponent {
128
156
}
129
157
}
130
158
131
- generateStyles ( ) {
132
- this . styles = createStyles ( this . getThemeProps ( ) ) ;
133
- }
134
-
135
159
onPress = ( ) => {
136
160
const { disabled, value, selected} = this . props ;
137
161
if ( ! disabled ) {
@@ -141,7 +165,7 @@ class RadioButton extends BaseComponent {
141
165
} ;
142
166
143
167
getAccessibilityProps = ( ) => {
144
- const { label = '' , selected, disabled} = this . getThemeProps ( ) ;
168
+ const { label = '' , selected, disabled} = this . props ;
145
169
const selectedAccessibilityText = selected ? 'selected' : 'unselected' ;
146
170
const accessibilityLabel = `${ selectedAccessibilityText } . ${ label } ` ;
147
171
@@ -154,7 +178,7 @@ class RadioButton extends BaseComponent {
154
178
} ;
155
179
156
180
getRadioButtonOutlineStyle ( ) {
157
- const { color, size, borderRadius, style : propsStyle , disabled} = this . getThemeProps ( ) ;
181
+ const { color, size, borderRadius, style : propsStyle , disabled} = this . props ;
158
182
const style = [ this . styles . radioButtonOutline ] ;
159
183
160
184
if ( size ) {
@@ -172,7 +196,7 @@ class RadioButton extends BaseComponent {
172
196
}
173
197
174
198
getRadioButtonInnerStyle ( ) {
175
- const { color, borderRadius, disabled} = this . getThemeProps ( ) ;
199
+ const { color, borderRadius, disabled} = this . props ;
176
200
const style = [ this . styles . radioButtonInner ] ;
177
201
178
202
if ( borderRadius ) {
@@ -197,18 +221,18 @@ class RadioButton extends BaseComponent {
197
221
}
198
222
199
223
renderIcon ( ) {
200
- const { iconSource} = this . props ;
201
- const { iconStyle} = this . getThemeProps ( ) ;
224
+ const { iconSource, iconStyle} = this . props ;
202
225
const style = [ this . styles . image , iconStyle ] ;
203
226
return iconSource && < Image style = { style } source = { iconSource } /> ;
204
227
}
205
228
206
229
render ( ) {
207
- const { onPress, onValueChange, ...others } = this . getThemeProps ( ) ;
230
+ const { onPress, onValueChange, ...others } = this . props ;
208
231
const { opacityAnimationValue, scaleAnimationValue} = this . state ;
209
232
const Container = onPress || onValueChange ? TouchableOpacity : View ;
210
233
211
234
return (
235
+ // @ts -ignore
212
236
< Container
213
237
row
214
238
centerV
@@ -234,7 +258,8 @@ class RadioButton extends BaseComponent {
234
258
}
235
259
}
236
260
237
- function createStyles ( { size = DEFAULT_SIZE , borderRadius = DEFAULT_SIZE / 2 , color = DEFAULT_COLOR , disabled} ) {
261
+ function createStyles ( props : Props ) {
262
+ const { size = DEFAULT_SIZE , borderRadius = DEFAULT_SIZE / 2 , color = DEFAULT_COLOR , disabled} = props ;
238
263
return StyleSheet . create ( {
239
264
radioButtonOutline : {
240
265
borderWidth : 2 ,
@@ -255,4 +280,4 @@ function createStyles({size = DEFAULT_SIZE, borderRadius = DEFAULT_SIZE / 2, col
255
280
} ) ;
256
281
}
257
282
258
- export default asRadioGroupChild ( RadioButton ) ;
283
+ export default asBaseComponent < RadioButtonPropTypes > ( forwardRef ( asRadioGroupChild ( RadioButton ) ) ) ;
0 commit comments