@@ -22,6 +22,7 @@ import {longOptions} from './PickerScreenLongOptions';
22
22
23
23
const tagIcon = require ( '../../assets/icons/tags.png' ) ;
24
24
const dropdown = require ( '../../assets/icons/chevronDown.png' ) ;
25
+ const dropdownIcon = < Icon source = { dropdown } tintColor = { Colors . $iconDefault } /> ;
25
26
26
27
const contacts = _ . map ( contactsData , ( c , index ) => ( { ...c , value : index , label : c . name } ) ) ;
27
28
@@ -56,7 +57,7 @@ export default class PickerScreen extends Component {
56
57
dialogHeader : DialogProps [ 'renderPannableHeader' ] = props => {
57
58
const { title} = props ;
58
59
return (
59
- < Text margin-15 text60 >
60
+ < Text margin-15 text60 $textDefault >
60
61
{ title }
61
62
</ Text >
62
63
) ;
@@ -76,7 +77,7 @@ export default class PickerScreen extends Component {
76
77
height = "45%"
77
78
bottom
78
79
useSafeArea
79
- containerStyle = { { backgroundColor : Colors . white } }
80
+ containerStyle = { { backgroundColor : Colors . $backgroundDefault } }
80
81
renderPannableHeader = { this . dialogHeader }
81
82
panDirection = { PanningProvider . Directions . DOWN }
82
83
pannableHeaderProps = { { title : 'Custom modal' } }
@@ -90,7 +91,9 @@ export default class PickerScreen extends Component {
90
91
return (
91
92
< ScrollView keyboardShouldPersistTaps = "always" >
92
93
< View flex padding-20 >
93
- < Text text40 > Picker</ Text >
94
+ < Text text40 $textDefault >
95
+ Picker
96
+ </ Text >
94
97
< Picker
95
98
placeholder = "Favorite Language"
96
99
floatingPlaceholder
@@ -103,6 +106,7 @@ export default class PickerScreen extends Component {
103
106
searchPlaceholder = { 'Search a language' }
104
107
searchStyle = { { color : Colors . blue30 , placeholderTextColor : Colors . grey50 } }
105
108
// onSearchChange={value => console.warn('value', value)}
109
+ migrateTextField
106
110
>
107
111
{ _ . map ( longOptions , option => (
108
112
< Picker . Item key = { option . value } value = { option } label = { '' } disabled = { option . disabled } />
@@ -115,7 +119,8 @@ export default class PickerScreen extends Component {
115
119
onChange = { items => this . setState ( { languages : items } ) }
116
120
mode = { Picker . modes . MULTI }
117
121
selectionLimit = { 3 }
118
- rightIconSource = { dropdown }
122
+ trailingAccessory = { dropdownIcon }
123
+ migrateTextField
119
124
>
120
125
{ _ . map ( options , option => (
121
126
< Picker . Item key = { option . value } value = { option } label = { '' } disabled = { option . disabled } />
@@ -152,12 +157,13 @@ export default class PickerScreen extends Component {
152
157
</ Picker >
153
158
154
159
< Picker
155
- title = "Custom modal"
160
+ label = "Custom modal"
156
161
placeholder = "Pick multiple Languages"
157
162
value = { this . state . customModalValues }
158
163
onChange = { items => this . setState ( { customModalValues : items } ) }
159
164
mode = { Picker . modes . MULTI }
160
- rightIconSource = { dropdown }
165
+ trailingAccessory = { dropdownIcon }
166
+ migrateTextField
161
167
renderCustomModal = { this . renderDialog }
162
168
>
163
169
{ _ . map ( options , option => (
@@ -171,7 +177,7 @@ export default class PickerScreen extends Component {
171
177
) ) }
172
178
</ Picker >
173
179
174
- < Text marginB-10 text70 >
180
+ < Text marginB-10 text70 $textDefault >
175
181
Custom Picker:
176
182
</ Text >
177
183
< Picker
@@ -180,8 +186,12 @@ export default class PickerScreen extends Component {
180
186
renderPicker = { ( _value ?: any , label ?: string ) => {
181
187
return (
182
188
< View row >
183
- < Icon style = { { marginRight : 1 , height : 16 , resizeMode : 'contain' } } source = { tagIcon } />
184
- < Text grey10 text80 >
189
+ < Icon
190
+ style = { { marginRight : 1 , height : 16 , resizeMode : 'contain' } }
191
+ source = { tagIcon }
192
+ tintColor = { Colors . $iconDefault }
193
+ />
194
+ < Text $textDefault text80 >
185
195
{ label } Posts
186
196
</ Text >
187
197
</ View >
@@ -193,11 +203,11 @@ export default class PickerScreen extends Component {
193
203
) ) }
194
204
</ Picker >
195
205
196
- < Text text60 marginT-s5 >
206
+ < Text text60 marginT-s5 $textDefault >
197
207
Migrated Pickers
198
208
</ Text >
199
209
200
- < Text marginT-20 marginB-10 text70 >
210
+ < Text marginT-20 marginB-10 text70 $textDefault >
201
211
Custom Picker Items:
202
212
</ Text >
203
213
< Picker
@@ -214,12 +224,12 @@ export default class PickerScreen extends Component {
214
224
{ contact ? (
215
225
< >
216
226
< Avatar size = { 30 } source = { { uri : contact ?. thumbnail } } />
217
- < Text text70 marginL-10 >
227
+ < Text text70 marginL-10 $textDefault >
218
228
{ contact ?. name }
219
229
</ Text >
220
230
</ >
221
231
) : (
222
- < Text text70 grey30 >
232
+ < Text text70 $textNeutral >
223
233
Pick a contact
224
234
</ Text >
225
235
) }
@@ -239,7 +249,7 @@ export default class PickerScreen extends Component {
239
249
style = { {
240
250
height : 56 ,
241
251
borderBottomWidth : 1 ,
242
- borderColor : Colors . grey80
252
+ borderColor : Colors . $backgroundNeutral
243
253
} }
244
254
paddingH-15
245
255
row
@@ -248,11 +258,11 @@ export default class PickerScreen extends Component {
248
258
>
249
259
< View row centerV >
250
260
< Avatar size = { 35 } source = { { uri : contact ?. thumbnail } } />
251
- < Text marginL-10 text70 grey10 >
261
+ < Text marginL-10 text70 $textDefault >
252
262
{ contact ?. name }
253
263
</ Text >
254
264
</ View >
255
- { props . isSelected && < Icon source = { Assets . icons . check } /> }
265
+ { props . isSelected && < Icon source = { Assets . icons . check } tintColor = { Colors . $iconDefault } /> }
256
266
</ View >
257
267
) ;
258
268
} }
0 commit comments