Skip to content

Commit 965e089

Browse files
ethansharethanshar
committed
create a kitchen sink example screen for TextField
1 parent b340577 commit 965e089

File tree

2 files changed

+183
-3
lines changed

2 files changed

+183
-3
lines changed

‎demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import React, {Component} from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {
4+
Colors,
5+
View,
6+
Text,
7+
TextField,
8+
RadioGroup,
9+
RadioButton,
10+
Checkbox,
11+
Slider,
12+
ColorPalette
13+
} from 'react-native-ui-lib'; //eslint-disable-line
14+
import {Navigation} from 'react-native-navigation';
15+
import _ from 'lodash';
16+
17+
const ERROR_STATES = {
18+
noError: 'No Error',
19+
bottomError: 'Bottom Error',
20+
topError: 'Top Error'
21+
};
22+
23+
const GUIDING_TEXTS = {
24+
none: 'None',
25+
useTitle: 'Title',
26+
floatingPlaceholder: 'Floating Placeholder'
27+
};
28+
29+
export default class BasicTextFieldScreen extends Component {
30+
constructor(props) {
31+
super(props);
32+
33+
this.state = {
34+
hideUnderline: false,
35+
underlineColor: undefined,
36+
guidingText: GUIDING_TEXTS.none,
37+
disabled: false,
38+
centered: false,
39+
useHelperText: false,
40+
titleColor: Colors.blue30,
41+
error: ERROR_STATES.noError,
42+
multiline: false,
43+
typography: 70,
44+
charCount: 0
45+
};
46+
}
47+
48+
renderColorOption(title, key) {
49+
const value = this.state[key];
50+
return (
51+
<View marginV-s2>
52+
<Text text70M>{title}</Text>
53+
<ColorPalette
54+
value={value}
55+
colors={['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]}
56+
onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})}
57+
/>
58+
</View>
59+
);
60+
}
61+
62+
renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0}) {
63+
const value = this.state[key];
64+
return (
65+
<View marginV-s2>
66+
<Text marginB-s1 text70M>
67+
{title}
68+
</Text>
69+
<View row centerV>
70+
<Slider
71+
testID={key}
72+
value={initial}
73+
containerStyle={{flex: 1}}
74+
minimumValue={min}
75+
maximumValue={max}
76+
step={step}
77+
onValueChange={value => this.setState({[key]: value})}
78+
/>
79+
<Text marginL-s4 text70>
80+
text{value}
81+
</Text>
82+
</View>
83+
</View>
84+
);
85+
}
86+
87+
renderRadioGroup(title, key, options) {
88+
const value = this.state[key];
89+
return (
90+
<View marginB-s2>
91+
<Text text70M marginB-s2>
92+
{title}
93+
</Text>
94+
<RadioGroup initialValue={value} onValueChange={value => this.setState({[key]: value})}>
95+
{_.map(options, (value, key) => {
96+
return <RadioButton testID={key} key={key} marginB-s2 label={value} value={options[key]}/>;
97+
})}
98+
</RadioGroup>
99+
</View>
100+
);
101+
}
102+
103+
renderBooleanOption(title, key) {
104+
const value = this.state[key];
105+
return (
106+
<View row centerV spread marginB-s4>
107+
<Text text70M style={{flex: 1}}>
108+
{title}
109+
</Text>
110+
<Checkbox textID={key} value={value} onValueChange={value => this.setState({[key]: value})}/>
111+
</View>
112+
);
113+
}
114+
115+
render() {
116+
const {
117+
hideUnderline,
118+
underlineColor,
119+
guidingText,
120+
titleColor,
121+
disabled,
122+
centered,
123+
useHelperText,
124+
multiline,
125+
charCount,
126+
typography,
127+
error
128+
} = this.state;
129+
130+
return (
131+
<View flex>
132+
<View padding-20>
133+
<Text marginB-20 text40>
134+
TextField
135+
</Text>
136+
<TextField
137+
key={centered ? 'centered' : 'not-centered'}
138+
{...{[`text${typography}`]: true}}
139+
placeholder={disabled ? 'Disabled' : 'Placeholder'}
140+
hideUnderline={hideUnderline}
141+
underlineColor={underlineColor}
142+
title={guidingText === GUIDING_TEXTS.useTitle ? 'Title' : undefined}
143+
titleColor={titleColor}
144+
floatingPlaceholder={guidingText === GUIDING_TEXTS.floatingPlaceholder}
145+
helperText={useHelperText ? 'Helper Text' : undefined}
146+
editable={!disabled}
147+
centered={centered}
148+
multiline={multiline}
149+
maxLength={charCount > 0 ? charCount : undefined}
150+
showCharacterCounter={charCount > 0}
151+
error={error !== ERROR_STATES.noError ? 'Custom error message' : undefined}
152+
useTopErrors={error === ERROR_STATES.topError}
153+
/>
154+
</View>
155+
<View paddingT-s1 bg-grey50/>
156+
<ScrollView keyboardShouldPersistTaps="always">
157+
<View padding-20>
158+
<Text text50M marginB-s4>
159+
Options
160+
</Text>
161+
{this.renderSliderOption('Typography (modifier)', 'typography', {min: 30, max: 100, step: 10, initial: 70})}
162+
{this.renderBooleanOption('Multiline', 'multiline')}
163+
{this.renderBooleanOption('Disabled', 'disabled')}
164+
{this.renderBooleanOption('Centered', 'centered')}
165+
{this.renderBooleanOption('Hide Underline', 'hideUnderline')}
166+
{this.renderColorOption('Underline Color', 'underlineColor')}
167+
{this.renderRadioGroup('Guiding Text', 'guidingText', GUIDING_TEXTS)}
168+
{this.renderColorOption('Title Color', 'titleColor')}
169+
{this.renderSliderOption('Character Counter', 'charCount', {min: 0, max: 150, step: 3})}
170+
{this.renderRadioGroup('Errors', 'error', ERROR_STATES)}
171+
</View>
172+
</ScrollView>
173+
</View>
174+
);
175+
}
176+
}
177+
178+
Navigation.registerComponent('unicorn.components.BasicTextFieldScreen', () => BasicTextFieldScreen);

‎demo/src/screens/componentScreens/TextFieldScreen/index.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import React, {Component} from 'react';
22
import {Colors, TouchableOpacity, Typography, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
33
import {pushScreen} from '../../../navigation';
44

5-
import './InputsScreen';
5+
import './BasicTextFieldScreen';
66
import './InputValidationsScreen';
77
import './CustomInputsScreen';
8+
import './InputsScreen';
89

910
const SCREENS = [
10-
{title: 'Inputs', name: 'unicorn.components.InputsScreen'},
11+
{title: 'TextField Kitchen-Sink', name: 'unicorn.components.BasicTextFieldScreen'},
1112
{title: 'Custom Inputs', name: 'unicorn.components.CustomInputsScreen'},
12-
{title: 'Validations', name: 'unicorn.components.InputValidationsScreen'}
13+
{title: 'Validations', name: 'unicorn.components.InputValidationsScreen'},
14+
{title: 'Inputs Variations', name: 'unicorn.components.InputsScreen'}
1315
];
1416

1517
class TextFieldScreen extends Component {

0 commit comments

Comments
 (0)