Skip to content

Commit 1acf91a

Browse files
danielweinmanndanielweinmann
committed
Renames title to label
1 parent e4356a1 commit 1acf91a

File tree

2 files changed

+28
-28
lines changed

2 files changed

+28
-28
lines changed

‎README.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
It implements the most common pattern of mobile form user interaction by convension over configuration. You'll never have to worry again about scrolling and focusing form fields.
1414

15-
- It uses inline form fields with icons and titles
15+
- It uses inline form fields with icons and labels
1616
- It displays different icons for valid and invalid field values
1717
- It displays validation message inside the field
1818
- When a field receives focus, it displays a keyboard (\*)
@@ -82,10 +82,10 @@ class Form extends Component {
8282
backgroundColor: 'lightgray',
8383
}}>
8484
<InlineTextInput
85-
title='Name'
85+
label='Name'
8686
placeholder='Tell us your name'
8787
style={{ borderColor: 'gray' }}
88-
titleStyle={{ color: 'dimgray' }}
88+
labelStyle={{ color: 'dimgray' }}
8989
inputStyle={{ color: 'slategray' }}
9090
messageStyle={{ color: 'red' }}
9191
icon={ <Icon name={'account-circle'} size={18} color={'steelblue'} /> }
@@ -97,13 +97,13 @@ class Form extends Component {
9797
onChangeText={(text) => { this.setState({name: text}) }}
9898
/>
9999
<InlineTextInput
100-
title='Email'
100+
label='Email'
101101
placeholder='[email protected]'
102102
autoCorrect={false}
103103
autoCapitalize='none'
104104
keyboardType='email-address'
105105
style={{ borderColor: 'gray' }}
106-
titleStyle={{ color: 'dimgray' }}
106+
labelStyle={{ color: 'dimgray' }}
107107
inputStyle={{ color: 'slategray' }}
108108
messageStyle={{ color: 'red' }}
109109
icon={ <Icon name={'mail-outline'} size={18} color={'steelblue'} /> }
@@ -115,13 +115,13 @@ class Form extends Component {
115115
onChangeText={(text) => { this.setState({email: text}) }}
116116
/>
117117
<InlineTextInput
118-
title='Password'
118+
label='Password'
119119
placeholder='Create a password'
120120
autoCorrect={false}
121121
autoCapitalize='none'
122122
secureTextEntry={true}
123123
style={{ borderColor: 'gray' }}
124-
titleStyle={{ color: 'dimgray' }}
124+
labelStyle={{ color: 'dimgray' }}
125125
inputStyle={{ color: 'slategray' }}
126126
messageStyle={{ color: 'red' }}
127127
icon={ <Icon name={'vpn-key'} size={18} color={'steelblue'} /> }
@@ -164,7 +164,7 @@ class FormInput extends Component {
164164
<InlineTextInput
165165
ref='input' // This is necessary for focus() and blur() implementation to work
166166
style={{ borderColor: 'gray' }}
167-
titleStyle={{ color: 'dimgray' }}
167+
labelStyle={{ color: 'dimgray' }}
168168
inputStyle={{ color: 'slategray' }}
169169
messageStyle={{ color: 'red' }}
170170
icon={ <Icon name={iconName} size={18} color={'steelblue'} /> }
@@ -200,7 +200,7 @@ class Form extends Component {
200200
return (
201201
<StatelessForm style={{flex: 1, marginTop: 20, backgroundColor: 'lightgray'}}>
202202
<FormInput
203-
title='Name'
203+
label='Name'
204204
placeholder='Tell us your name'
205205
iconName='account-circle'
206206
value={name}
@@ -209,7 +209,7 @@ class Form extends Component {
209209
onChangeText={(text) => { this.setState({name: text}) }}
210210
/>
211211
<FormInput
212-
title='Email'
212+
label='Email'
213213
placeholder='[email protected]'
214214
autoCorrect={false}
215215
autoCapitalize='none'
@@ -221,7 +221,7 @@ class Form extends Component {
221221
onChangeText={(text) => { this.setState({email: text}) }}
222222
/>
223223
<FormInput
224-
title='Password'
224+
label='Password'
225225
placeholder='Create a password'
226226
autoCorrect={false}
227227
autoCapitalize='none'
@@ -295,7 +295,7 @@ class FormInput extends Component {
295295
<InlineTextInput
296296
ref='input'
297297
style={{ borderColor: 'gray' }}
298-
titleStyle={{ color: 'dimgray' }}
298+
labelStyle={{ color: 'dimgray' }}
299299
inputStyle={{ color: 'slategray' }}
300300
messageStyle={{ color: 'red' }}
301301
icon={ <Icon name={iconName} size={18} color={'steelblue'} /> }
@@ -330,15 +330,15 @@ class Form extends Component {
330330
<StatelessForm style={{flex: 1, marginTop: 20, backgroundColor: 'lightgray'}}>
331331
<FormInput
332332
name='name'
333-
title='Name'
333+
label='Name'
334334
placeholder='Tell us your name'
335335
iconName='account-circle'
336336
value={name}
337337
onChangeText={(text) => { this.setState({name: text}) }}
338338
/>
339339
<FormInput
340340
name='email'
341-
title='Email'
341+
label='Email'
342342
placeholder='[email protected]'
343343
autoCorrect={false}
344344
autoCapitalize='none'
@@ -349,7 +349,7 @@ class Form extends Component {
349349
/>
350350
<FormInput
351351
name='password'
352-
title='Password'
352+
label='Password'
353353
placeholder='Create a password'
354354
autoCorrect={false}
355355
autoCapitalize='none'
@@ -430,7 +430,7 @@ class FormInput extends Component {
430430
<InlineTextInput
431431
ref='input'
432432
style={{ borderColor: 'gray' }}
433-
titleStyle={{ color: 'dimgray' }}
433+
labelStyle={{ color: 'dimgray' }}
434434
inputStyle={{ color: 'slategray' }}
435435
messageStyle={{ color: 'red' }}
436436
icon={ <Icon name={iconName} size={18} color={'steelblue'} /> }
@@ -455,14 +455,14 @@ class Form extends Component {
455455
<StatelessForm style={{flex: 1, marginTop: 20, backgroundColor: 'lightgray'}}>
456456
<FormInput
457457
name='name'
458-
title='Name'
458+
label='Name'
459459
placeholder='Tell us your name'
460460
iconName='account-circle'
461461
{ ...name }
462462
/>
463463
<FormInput
464464
name='email'
465-
title='Email'
465+
label='Email'
466466
placeholder='[email protected]'
467467
autoCorrect={false}
468468
autoCapitalize='none'
@@ -472,7 +472,7 @@ class Form extends Component {
472472
/>
473473
<FormInput
474474
name='password'
475-
title='Password'
475+
label='Password'
476476
placeholder='Create a password'
477477
autoCorrect={false}
478478
autoCapitalize='none'
@@ -527,13 +527,13 @@ A wrapper that will manage auto-focusing and auto-scrolling for its children com
527527

528528
| Property | Type | Default | Description |
529529
|---------------|----------|--------------|----------------------------------------------------------------|
530-
| title | string | 'Use title prop' | Title for the text input |
530+
| label | string | 'Use label prop' | Label for the text input |
531531
| value | string | null | Value for the text input |
532532
| valid | boolean | false | Whether the value is valid or not |
533533
| message | string | null | Validation message to be shown |
534534
| style | style | {} | Style changes to the main ScrollView |
535535
| iconStyle | style | {} | Style changes to the icon View |
536-
| titleStyle | style | {} | Style changes to the title Text |
536+
| labelStyle | style | {} | Style changes to the label Text |
537537
| inputStyle | style | {} | Style changes to the TextInput |
538538
| messageStyle | style | {} | Style changes to the validation message Text |
539539
| icon | element | null | Any react component to be used as icon |

‎components/InlineTextInput.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default class InlineTextInput extends Component {
7676
}
7777

7878
render() {
79-
const { title, value, titleStyle, inputStyle, nextInput, onBlur, multiline } = this.props
79+
const { label, value, labelStyle, inputStyle, nextInput, onBlur, multiline } = this.props
8080
const style = StyleSheet.flatten(this.props.style)
8181
return (
8282
<View
@@ -102,9 +102,9 @@ export default class InlineTextInput extends Component {
102102
fontSize: 14,
103103
fontWeight: 'bold',
104104
marginLeft: 6,
105-
}, titleStyle]}
105+
}, labelStyle]}
106106
>
107-
{title}
107+
{label}
108108
</Text>
109109
<TextInput
110110
clearButtonMode='while-editing'
@@ -136,13 +136,13 @@ const stylePropType = PropTypes.oneOfType([
136136
])
137137

138138
InlineTextInput.propTypes = {
139-
title: PropTypes.string,
139+
label: PropTypes.string,
140140
value: PropTypes.string,
141141
valid: PropTypes.bool,
142142
message: PropTypes.string,
143143
style: stylePropType,
144144
iconStyle: stylePropType,
145-
titleStyle: stylePropType,
145+
labelStyle: stylePropType,
146146
inputStyle: stylePropType,
147147
messageStyle: stylePropType,
148148
icon: PropTypes.element,
@@ -151,13 +151,13 @@ InlineTextInput.propTypes = {
151151
}
152152

153153
InlineTextInput.defaultProps = {
154-
title: 'Use title prop',
154+
label: 'Use label prop',
155155
value: null,
156156
valid: false,
157157
message: null,
158158
style: {},
159159
iconStyle: {},
160-
titleStyle: {},
160+
labelStyle: {},
161161
inputStyle: {},
162162
messageStyle: {},
163163
icon: null,

0 commit comments

Comments
 (0)