Skip to content

Commit 15b65cb

Browse files
ethansharethanshar
committed
use ExampleScreenPresenter in TextField example screen
1 parent e71beca commit 15b65cb

File tree

2 files changed

+50
-91
lines changed

2 files changed

+50
-91
lines changed

‎demo/src/screens/ExampleScreenPresenter.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {View, Text, Checkbox, RadioGroup, RadioButton, ColorPalette, Colors} from 'react-native-ui-lib';
2+
import {View, Text, Checkbox, RadioGroup, RadioButton, ColorPalette, Colors, Slider} from 'react-native-ui-lib';
33
import _ from 'lodash';
44

55
export function renderBooleanOption(title, key) {
@@ -45,3 +45,28 @@ export function renderColorOption(title,
4545
</View>
4646
);
4747
}
48+
49+
export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0}) {
50+
const value = this.state[key];
51+
return (
52+
<View marginV-s2>
53+
<Text marginB-s1 text70M>
54+
{title}
55+
</Text>
56+
<View row centerV>
57+
<Slider
58+
testID={key}
59+
value={initial}
60+
containerStyle={{flex: 1}}
61+
minimumValue={min}
62+
maximumValue={max}
63+
step={step}
64+
onValueChange={value => this.setState({[key]: value})}
65+
/>
66+
<Text marginL-s4 text70>
67+
text{value}
68+
</Text>
69+
</View>
70+
</View>
71+
);
72+
}

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

Lines changed: 24 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import React, {Component} from 'react';
22
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
3+
import {Colors, View, Text, TextField, Slider, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line
144
import {Navigation} from 'react-native-navigation';
15-
import _ from 'lodash';
5+
6+
import {
7+
renderBooleanOption,
8+
renderRadioGroup,
9+
renderSliderOption,
10+
renderColorOption
11+
} from '../../ExampleScreenPresenter';
1612

1713
const ERROR_STATES = {
1814
noError: 'No Error',
@@ -37,81 +33,14 @@ export default class BasicTextFieldScreen extends Component {
3733
disabled: false,
3834
centered: false,
3935
useHelperText: false,
40-
titleColor: Colors.blue30,
36+
titleColor: undefined,
4137
error: ERROR_STATES.noError,
4238
multiline: false,
4339
typography: 70,
4440
charCount: 0
4541
};
4642
}
4743

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-
11544
render() {
11645
const {
11746
hideUnderline,
@@ -158,16 +87,21 @@ export default class BasicTextFieldScreen extends Component {
15887
<Text text50M marginB-s4>
15988
Options
16089
</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)}
90+
{renderSliderOption.call(this, 'Typography (modifier)', 'typography', {
91+
min: 30,
92+
max: 100,
93+
step: 10,
94+
initial: 70
95+
})}
96+
{renderBooleanOption.call(this, 'Multiline', 'multiline')}
97+
{renderBooleanOption.call(this, 'Disabled', 'disabled')}
98+
{renderBooleanOption.call(this, 'Centered', 'centered')}
99+
{renderBooleanOption.call(this, 'Hide Underline', 'hideUnderline')}
100+
{renderColorOption.call(this, 'Underline Color', 'underlineColor')}
101+
{renderRadioGroup.call(this, 'Guiding Text', 'guidingText', GUIDING_TEXTS)}
102+
{renderColorOption.call(this, 'Title Color', 'titleColor')}
103+
{renderSliderOption.call(this, 'Character Counter', 'charCount', {min: 0, max: 150, step: 3})}
104+
{renderRadioGroup.call(this, 'Errors', 'error', ERROR_STATES)}
171105
</View>
172106
</ScrollView>
173107
</View>

0 commit comments

Comments
 (0)