1
1
import React , { Component } from 'react' ;
2
2
import { ScrollView , ActivityIndicator } from 'react-native' ;
3
3
import {
4
+ Assets ,
4
5
Colors ,
5
6
Spacings ,
6
7
View ,
@@ -11,12 +12,11 @@ import {
11
12
TextFieldRef ,
12
13
FieldContextType ,
13
14
TextFieldProps ,
14
- SegmentedControl
15
+ SegmentedControl ,
16
+ Icon
15
17
} from 'react-native-ui-lib' ;
16
- import Assets from '../../assets/Assets' ;
17
18
const { KeyboardAwareInsetsView} = Keyboard ;
18
19
const priceFormatter = Intl . NumberFormat ( 'en-US' ) ;
19
- const validationIcon = require ( '../../assets/icons/exclamationFillSmall.png' ) ;
20
20
21
21
export default class TextFieldScreen extends Component {
22
22
input = React . createRef < TextFieldRef > ( ) ;
@@ -167,7 +167,7 @@ export default class TextFieldScreen extends Component {
167
167
} ;
168
168
169
169
renderValidationExample ( ) {
170
- const { errorPosition} = this . state ;
170
+ const { errorPosition, preset } = this . state ;
171
171
172
172
return (
173
173
< >
@@ -178,7 +178,7 @@ export default class TextFieldScreen extends Component {
178
178
< SegmentedControl segments = { [ { label : 'Bottom' } , { label : 'Top' } ] } onChangeIndex = { this . onChangeIndexValidation } />
179
179
</ View >
180
180
</ View >
181
-
181
+
182
182
< TextField
183
183
value = { this . state . value }
184
184
onChangeText = { value => this . setState ( { value} ) }
@@ -204,7 +204,9 @@ export default class TextFieldScreen extends Component {
204
204
containerStyle = { { flex : 1 } }
205
205
validationMessagePosition = { errorPosition }
206
206
helperText = { 'Enter first and last name' }
207
- validationIcon = { { source : validationIcon , style : { marginTop : 1 } } }
207
+ validationIcon = { { source : Assets . icons . demo . exclamation , style : { marginTop : 1 } } }
208
+ topTrailingAccessory = { < Icon source = { Assets . icons . demo . info } size = { 16 } /> }
209
+ preset = { preset }
208
210
/>
209
211
< Button
210
212
outline
@@ -351,6 +353,26 @@ export default class TextFieldScreen extends Component {
351
353
) ;
352
354
}
353
355
356
+ renderClearButtonExample ( ) {
357
+ return (
358
+ < >
359
+ < Text h3 marginB-s3 >
360
+ Clear Button
361
+ </ Text >
362
+
363
+ < TextField
364
+ label = "Description"
365
+ placeholder = "Enter text..."
366
+ showClearButton
367
+ value = { this . state . value }
368
+ onChangeText = { value => this . setState ( { value} ) }
369
+ trailingAccessory = { < Icon source = { Assets . icons . demo . search } /> }
370
+ // multiline
371
+ />
372
+ </ >
373
+ ) ;
374
+ }
375
+
354
376
renderHintExample ( ) {
355
377
return (
356
378
< >
@@ -400,7 +422,16 @@ export default class TextFieldScreen extends Component {
400
422
</ Text >
401
423
402
424
< Text marginB-s1 $textPrimary > Centered:</ Text >
403
- < TextField label = "PIN" placeholder = "XXXX" centered />
425
+ < TextField
426
+ label = "PIN"
427
+ placeholder = "XXXX"
428
+ centered
429
+ topTrailingAccessory = { < Icon source = { Assets . icons . demo . info } size = { 16 } /> }
430
+ validate = { 'required' }
431
+ validationMessage = { 'This field is required' }
432
+ validateOnBlur
433
+ validationMessagePosition = { this . state . errorPosition }
434
+ />
404
435
405
436
< Text marginB-s1 $textPrimary > Inline:</ Text >
406
437
< View row >
@@ -414,15 +445,16 @@ export default class TextFieldScreen extends Component {
414
445
415
446
render ( ) {
416
447
return (
417
- < ScrollView keyboardShouldPersistTaps = "always" showsVerticalScrollIndicator = { false } >
418
- < View flex padding-page >
448
+ < ScrollView showsVerticalScrollIndicator = { false } keyboardShouldPersistTaps = "always" >
449
+ < View padding-page >
419
450
< Text h1 marginB-s4 > TextField</ Text >
420
451
421
452
{ this . renderDefaultExample ( ) }
422
453
{ this . renderPresetExample ( ) }
423
454
{ this . renderPlaceholdersExample ( ) }
424
455
{ this . renderValidationExample ( ) }
425
456
{ this . renderHintExample ( ) }
457
+ { this . renderClearButtonExample ( ) }
426
458
{ this . renderCherCounterExample ( ) }
427
459
{ this . renderAccessoriesExample ( ) }
428
460
{ this . renderStateColorsExample ( ) }
0 commit comments