muba-input-text 9.0.0 → 9.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/InputText.js +256 -254
  2. package/InputTextStyles.js +2 -1
  3. package/package.json +1 -1
package/InputText.js CHANGED
@@ -9,287 +9,289 @@ import fontelloConfig from './fonts/config.json';
9
9
  const FontAwesomeIcon = createIconSetFromFontello(fontelloConfig);
10
10
 
11
11
  const keyboardTypeMap = {
12
- default: 'default',
13
- email: 'email-address',
14
- number: 'numeric',
15
- phone: 'phone-pad'
12
+ default: 'default',
13
+ email: 'email-address',
14
+ number: 'numeric',
15
+ phone: 'phone-pad'
16
16
  };
17
17
 
18
18
  export default class InputText extends React.Component {
19
- constructor(props) {
20
- super(props);
19
+ constructor(props) {
20
+ super(props);
21
21
 
22
- loadLocaleData({
23
- ar: require('./locales/ar.json'),
24
- en: require('./locales/en.json'),
25
- es: require('./locales/es.json'),
26
- fr: require('./locales/fr.json'),
27
- it: require('./locales/it.json'),
28
- nl: require('./locales/nl.json')
29
- });
22
+ this.inputTextView = React.createRef();
30
23
 
31
- this.state = {
32
- fieldError: false,
33
- requiredError: false,
34
- onlyNumbersError: false,
35
- minValueError: false,
36
- maxValueError: false,
37
- emailBadFormat: false,
38
- urlAllowingError: false,
39
- customizedError: false,
40
- customizedErrorMessage: undefined,
41
- inputFont: props.inputFont,
42
- noteFont: props.noteFont,
43
- fontLoaded: false
44
- };
45
- }
24
+ loadLocaleData({
25
+ ar: require('./locales/ar.json'),
26
+ en: require('./locales/en.json'),
27
+ es: require('./locales/es.json'),
28
+ fr: require('./locales/fr.json'),
29
+ it: require('./locales/it.json'),
30
+ nl: require('./locales/nl.json')
31
+ });
46
32
 
47
- async componentDidMount() {
48
- await addFontList([
49
- {
50
- name: 'InputTextRegular',
51
- source: require('./fonts/Poppins/Poppins-Regular.ttf')
52
- },
53
- {
54
- name: 'InputTextFontAwesome',
55
- source: require('./fonts/Font-Awesome.ttf')
56
- }
57
- ]);
58
- this.setState({ fontLoaded: true });
33
+ this.state = {
34
+ fieldError: false,
35
+ requiredError: false,
36
+ onlyNumbersError: false,
37
+ minValueError: false,
38
+ maxValueError: false,
39
+ emailBadFormat: false,
40
+ urlAllowingError: false,
41
+ customizedError: false,
42
+ customizedErrorMessage: undefined,
43
+ inputFont: props.inputFont,
44
+ noteFont: props.noteFont,
45
+ fontLoaded: false
46
+ };
47
+ }
59
48
 
60
- if (this.props.autoFocus) {
61
- setTimeout(() => this.input.focus(), 100);
62
- }
63
- }
49
+ async componentDidMount() {
50
+ await addFontList([
51
+ {
52
+ name: 'InputTextRegular',
53
+ source: require('./fonts/Poppins/Poppins-Regular.ttf')
54
+ },
55
+ {
56
+ name: 'InputTextFontAwesome',
57
+ source: require('./fonts/Font-Awesome.ttf')
58
+ }
59
+ ]);
60
+ this.setState({ fontLoaded: true });
64
61
 
65
- onSubmitValidate() {
66
- this.setState({
67
- fieldError: false,
68
- requiredError: false,
69
- onlyNumbersError: false,
70
- minValueError: false,
71
- maxValueError: false,
72
- emailBadFormat: false,
73
- urlAllowingError: false
74
- });
62
+ if (this.props.autoFocus) {
63
+ setTimeout(() => this.input.focus(), 100);
64
+ }
65
+ }
75
66
 
76
- let result = true;
77
- if (this.props.required && (this.props.value == null || this.props.value.toString().trim() === '')) {
78
- if (this.props.scroll) {
79
- this.props.scroll(this.inputTextView);
80
- }
67
+ onSubmitValidate() {
68
+ this.setState({
69
+ fieldError: false,
70
+ requiredError: false,
71
+ onlyNumbersError: false,
72
+ minValueError: false,
73
+ maxValueError: false,
74
+ emailBadFormat: false,
75
+ urlAllowingError: false
76
+ });
81
77
 
82
- this.setState({ fieldError: true, requiredError: true });
83
- result = false;
84
- } else {
85
- if (this.props.required || (this.props.value != null && this.props.value !== '')) {
86
- result = this.validateType() && result;
87
- }
88
- }
78
+ let result = true;
79
+ if (this.props.required && (this.props.value == null || this.props.value.toString().trim() === '')) {
80
+ if (this.props.scroll) {
81
+ this.props.scroll(this.inputTextView);
82
+ }
89
83
 
90
- return result;
91
- }
84
+ this.setState({ fieldError: true, requiredError: true });
85
+ result = false;
86
+ } else {
87
+ if (this.props.required || (this.props.value != null && this.props.value !== '')) {
88
+ result = this.validateType() && result;
89
+ }
90
+ }
92
91
 
93
- showError() {
94
- if (this.props.scroll) {
95
- this.props.scroll(this.inputTextView);
96
- }
92
+ return result;
93
+ }
97
94
 
98
- this.setState({ fieldError: true });
99
- }
95
+ showError() {
96
+ if (this.props.scroll) {
97
+ this.props.scroll(this.inputTextView);
98
+ }
100
99
 
101
- hideError() {
102
- this.setState({ fieldError: false });
103
- }
100
+ this.setState({ fieldError: true });
101
+ }
104
102
 
105
- validateType() {
106
- if (this.props.value != null && this.props.value !== this.props.value?.toString().trim()) {
107
- this.onChangeText(this.props.value.toString().trim())
108
- }
109
- if (this.props.type === 'email') {
110
- return this.isValidEmail();
111
- } else if (this.props.type === 'number') {
112
- return this.isValidNumber();
113
- } else if (this.props.type === 'url') {
114
- return this.isValidUrl();
115
- }
116
- return true;
117
- }
103
+ hideError() {
104
+ this.setState({ fieldError: false });
105
+ }
118
106
 
119
- isValidEmail() {
120
- const EMAIL_ALLOWED_LENGTH = 50;
121
- if (this.props.value != null) {
122
- if (!this.props.value.length) {
123
- // It's empty
124
- this.showError();
125
- return false;
126
- } else {
127
- if (this.props.value.length > EMAIL_ALLOWED_LENGTH || this.props.value.split('@').length !== 2) {
128
- // It's invalid
129
- this.showError();
130
- this.setState({ emailBadFormat: true });
131
- return false;
132
- } else {
133
- const pattern = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])", 'i');
134
- const patternSpaces = new RegExp(/\s/);
135
- const success = !!pattern.test(this.props.value) && !patternSpaces.test(this.props.value);
107
+ validateType() {
108
+ if (this.props.value != null && this.props.value !== this.props.value?.toString().trim()) {
109
+ this.onChangeText(this.props.value.toString().trim())
110
+ }
111
+ if (this.props.type === 'email') {
112
+ return this.isValidEmail();
113
+ } else if (this.props.type === 'number') {
114
+ return this.isValidNumber();
115
+ } else if (this.props.type === 'url') {
116
+ return this.isValidUrl();
117
+ }
118
+ return true;
119
+ }
136
120
 
137
- if (!success) {
138
- // It's invalid
139
- this.showError();
140
- this.setState({ emailBadFormat: true });
141
- return false;
142
- }
143
- }
144
- }
145
- }
146
- // It's valid
147
- return true;
148
- }
121
+ isValidEmail() {
122
+ const EMAIL_ALLOWED_LENGTH = 50;
123
+ if (this.props.value != null) {
124
+ if (!this.props.value.length) {
125
+ // It's empty
126
+ this.showError();
127
+ return false;
128
+ } else {
129
+ if (this.props.value.length > EMAIL_ALLOWED_LENGTH || this.props.value.split('@').length !== 2) {
130
+ // It's invalid
131
+ this.showError();
132
+ this.setState({ emailBadFormat: true });
133
+ return false;
134
+ } else {
135
+ const pattern = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])", 'i');
136
+ const patternSpaces = new RegExp(/\s/);
137
+ const success = !!pattern.test(this.props.value) && !patternSpaces.test(this.props.value);
149
138
 
150
- isValidNumber() {
151
- if (/\D/.test(this.props.value)) {
152
- this.showError();
153
- this.setState({ onlyNumbersError: true });
154
- return false;
155
- } else if (this.props.maxValue && parseInt(this.props.value) > this.props.maxValue) {
156
- this.showError();
157
- this.setState({ maxValueError: true });
158
- return false;
159
- } else if (this.props.minValue && parseInt(this.props.value) < this.props.minValue) {
160
- this.showError();
161
- this.setState({ minValueError: true });
162
- return false;
163
- }
164
- return true;
165
- }
139
+ if (!success) {
140
+ // It's invalid
141
+ this.showError();
142
+ this.setState({ emailBadFormat: true });
143
+ return false;
144
+ }
145
+ }
146
+ }
147
+ }
148
+ // It's valid
149
+ return true;
150
+ }
166
151
 
167
- isValidUrl() {
168
- const pattern = new RegExp('^(https?://)?(www\\.)?([-a-z0-9À-ú]{1,63}\\.)*?[a-z0-9À-ú][-a-z0-9À-ú]{0,61}[a-z0-9À-ú]\\.[a-zÀ-ú]{2,6}', 'i');
169
- if (!pattern.test(this.props.value)) {
170
- this.showError();
171
- this.setState({ urlAllowingError: true });
172
- return false;
173
- }
174
- return true;
175
- }
152
+ isValidNumber() {
153
+ if (/\D/.test(this.props.value)) {
154
+ this.showError();
155
+ this.setState({ onlyNumbersError: true });
156
+ return false;
157
+ } else if (this.props.maxValue && parseInt(this.props.value) > this.props.maxValue) {
158
+ this.showError();
159
+ this.setState({ maxValueError: true });
160
+ return false;
161
+ } else if (this.props.minValue && parseInt(this.props.value) < this.props.minValue) {
162
+ this.showError();
163
+ this.setState({ minValueError: true });
164
+ return false;
165
+ }
166
+ return true;
167
+ }
176
168
 
177
- showCustomizedError(messageError) {
178
- this.setState({ fieldError: true, customizedError: true, customizedErrorMessage: messageError });
179
- }
169
+ isValidUrl() {
170
+ const pattern = new RegExp('^(https?://)?(www\\.)?([-a-z0-9À-ú]{1,63}\\.)*?[a-z0-9À-ú][-a-z0-9À-ú]{0,61}[a-z0-9À-ú]\\.[a-zÀ-ú]{2,6}', 'i');
171
+ if (!pattern.test(this.props.value)) {
172
+ this.showError();
173
+ this.setState({ urlAllowingError: true });
174
+ return false;
175
+ }
176
+ return true;
177
+ }
180
178
 
181
- onChangeText(text) {
182
- if (text === '') {
183
- text = null;
184
- }
185
- this.setState({
186
- fieldError: false,
187
- requiredError: false,
188
- onlyNumbersError: false,
189
- minValueError: false,
190
- maxValueError: false,
191
- emailBadFormat: false,
192
- urlAllowingError: false,
193
- customizedError: false,
194
- customizedErrorMessage: undefined
195
- });
179
+ showCustomizedError(messageError) {
180
+ this.setState({ fieldError: true, customizedError: true, customizedErrorMessage: messageError });
181
+ }
196
182
 
197
- if (this.props.onChangeText) {
198
- this.props.onChangeText(text);
199
- }
200
- }
183
+ onChangeText(text) {
184
+ if (text === '') {
185
+ text = null;
186
+ }
187
+ this.setState({
188
+ fieldError: false,
189
+ requiredError: false,
190
+ onlyNumbersError: false,
191
+ minValueError: false,
192
+ maxValueError: false,
193
+ emailBadFormat: false,
194
+ urlAllowingError: false,
195
+ customizedError: false,
196
+ customizedErrorMessage: undefined
197
+ });
201
198
 
202
- onChange(event) {
203
- if (this.props.onChange) {
204
- this.props.onChange(event);
205
- }
206
- }
199
+ if (this.props.onChangeText) {
200
+ this.props.onChangeText(text);
201
+ }
202
+ }
207
203
 
208
- onSubmitEditing(event) {
209
- if (this.props.onSubmitEditing) {
210
- this.props.onSubmitEditing(event);
211
- }
212
- }
204
+ onChange(event) {
205
+ if (this.props.onChange) {
206
+ this.props.onChange(event);
207
+ }
208
+ }
213
209
 
214
- focus = async () => {
215
- this.input.focus();
216
- }
210
+ onSubmitEditing(event) {
211
+ if (this.props.onSubmitEditing) {
212
+ this.props.onSubmitEditing(event);
213
+ }
214
+ }
217
215
 
218
- checkText = () => {
219
- if (this.props.value !== this.props.value?.trim()) {
220
- this.onChangeText(this.props.value.trim())
221
- }
222
- }
216
+ focus = async () => {
217
+ this.input.focus();
218
+ }
223
219
 
224
- render() {
225
- return (
226
- this.state.fontLoaded ?
227
- <View
228
- style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
229
- ref={(element) => this.inputTextView = element}>
230
- {this.props.label || ((this.props.showErrorText == null || this.props.showErrorText) && this.state.fieldError) ?
231
- <View style={[this.props.label || this.state.fieldError ? { marginBottom: 10 } : '', this.props.inLineError ? inputTextStyles.row : '']}>
232
- {this.props.label ?
233
- <View style={inputTextStyles.row}>
234
- <OutputText style={[inputTextStyles.progressbarField, this.props.labelStyle]}>{this.props.label}</OutputText>
235
- {this.props.required ? <OutputText style={inputTextStyles.redText}> *</OutputText> : <OutputText />}
236
- </View>
237
- :
238
- <View />
239
- }
240
- {this.state.requiredError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('requiredField')}</OutputText> : null}
241
- {this.state.onlyNumbersError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('onlyNumbers')}</OutputText> : null}
242
- {this.state.maxValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxValueError', { maxValue: this.props.maxValue })}</OutputText> : null}
243
- {this.state.minValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('minValueError', { minValue: this.props.minValue })}</OutputText> : null}
244
- {this.state.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</OutputText> : null}
245
- {this.state.urlAllowingError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('urlAllowingError')}</OutputText> : null}
246
- {this.state.maxCharacters && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxCharacters', { maxCharacters: this.props.maxCharacters })}</OutputText> : null}
247
- {this.state.customizedError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {this.state.customizedErrorMessage}</OutputText> : null}
248
- </View>
249
- :
250
- <View style={{ marginTop: 10 }} />
251
- }
220
+ checkText = () => {
221
+ if (this.props.value !== this.props.value?.trim()) {
222
+ this.onChangeText(this.props.value.trim())
223
+ }
224
+ }
252
225
 
253
- <View style={(isRTL() && (this.props.language == null || this.props.language == 'AR')) || (!isRTL() && (this.props.language == null || this.props.language != 'AR')) ? inputTextStyles.row : inputTextStyles.rowReverse} collapsable={false}>
254
- <TextInput
255
- ref={(input) => { this.input = input; }}
256
- style={[inputTextStyles.textInputField, inputTextStyles.textField, this.props.style, { textAlign: (isRTL() && (this.props.language == null || this.props.language == 'AR')) || this.props.language == 'AR' ? 'right' : 'left' }, this.state.fieldError && !this.props.label ? inputTextStyles.fieldError : '', this.props.disabled ? inputTextStyles.disabled : '', this.props.multiline ? { paddingTop: 5 } : '']}
257
- underlineColorAndroid='transparent'
258
- keyboardType={this.props.keyboardType ? this.props.keyboardType : keyboardTypeMap[this.props.type ? this.props.type : 'default']}
259
- onChangeText={(text) => this.onChangeText(text)}
260
- onChange={(event) => this.onChange(event)}
261
- editable={this.props.disabled ? false : this.props.editable}
262
- value={this.props.value != null ? this.props.value.toString() : this.props.value}
263
- placeholder={this.props.placeholder ? (this.props.required && this.props.turnRequiredSign && isRTL() ? '* ' : '') + this.props.placeholder + (this.props.required && !this.props.turnRequiredSign ? ' *' : '') : ''}
264
- placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : inputTextStyles.placeholderTextColor.color}
265
- returnKeyType={this.props.returnKeyType}
266
- onSubmitEditing={() => { this.onSubmitEditing() }}
267
- autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : null}
268
- secureTextEntry={this.props.secureTextEntry ? this.props.secureTextEntry : false}
269
- multiline={this.props.multiline}
270
- autoComplete={this.props.autoComplete}
271
- selection={this.props.selection}
272
- selectionColor={this.props.selectionColor}
273
- numberOfLines={this.props.numberOfLines}
274
- maxLength={this.props.maxLength}
275
- onFocus={this.props.onFocus}
276
- onBlur={this.props.onBlur} />
277
- {this.props.children}
226
+ render() {
227
+ return (
228
+ this.state.fontLoaded ?
229
+ <View
230
+ style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
231
+ ref={this.inputTextView}>
232
+ {this.props.label || ((this.props.showErrorText == null || this.props.showErrorText) && this.state.fieldError) ?
233
+ <View style={[this.props.label || this.state.fieldError ? { marginBottom: 10 } : '', this.props.inLineError ? inputTextStyles.row : '']}>
234
+ {this.props.label ?
235
+ <View style={inputTextStyles.row}>
236
+ <OutputText style={[inputTextStyles.progressbarField, this.props.labelStyle]}>{this.props.label}</OutputText>
237
+ {this.props.required ? <OutputText style={inputTextStyles.redText}> *</OutputText> : <OutputText />}
238
+ </View>
239
+ :
240
+ <View />
241
+ }
242
+ {this.state.requiredError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('requiredField')}</OutputText> : null}
243
+ {this.state.onlyNumbersError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('onlyNumbers')}</OutputText> : null}
244
+ {this.state.maxValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxValueError', { maxValue: this.props.maxValue })}</OutputText> : null}
245
+ {this.state.minValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('minValueError', { minValue: this.props.minValue })}</OutputText> : null}
246
+ {this.state.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</OutputText> : null}
247
+ {this.state.urlAllowingError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('urlAllowingError')}</OutputText> : null}
248
+ {this.state.maxCharacters && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxCharacters', { maxCharacters: this.props.maxCharacters })}</OutputText> : null}
249
+ {this.state.customizedError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {this.state.customizedErrorMessage}</OutputText> : null}
250
+ </View>
251
+ :
252
+ <View style={{ marginTop: 10 }} />
253
+ }
278
254
 
279
- {this.props.value != null && !this.props.hideCancel ?
280
- this.props.disabled ?
281
- <View />
282
- :
283
- <TouchableOpacity style={[inputTextStyles.deleteTextInput, inputTextStyles.justifyCenter, this.props.iconContainerStyle]} onPress={() => { this.onChangeText('') }}>
284
- <FontAwesomeIcon style={[inputTextStyles.deleteTextIcon, this.props.iconStyle]} name='input-text-cancel' />
285
- </TouchableOpacity>
286
- :
287
- <View />
288
- }
289
- </View>
290
- </View >
291
- :
292
- <View />
293
- )
294
- }
255
+ <View style={(isRTL() && (this.props.language == null || this.props.language == 'AR')) || (!isRTL() && (this.props.language == null || this.props.language != 'AR')) ? inputTextStyles.row : inputTextStyles.rowReverse} collapsable={false}>
256
+ <TextInput
257
+ ref={(input) => { this.input = input; }}
258
+ style={[inputTextStyles.textInputField, inputTextStyles.textField, this.props.style, { textAlign: (isRTL() && (this.props.language == null || this.props.language == 'AR')) || this.props.language == 'AR' ? 'right' : 'left' }, this.state.fieldError && !this.props.label ? inputTextStyles.fieldError : '', this.props.disabled ? inputTextStyles.disabled : '', this.props.multiline ? { paddingTop: 5 } : '']}
259
+ underlineColorAndroid='transparent'
260
+ keyboardType={this.props.keyboardType ? this.props.keyboardType : keyboardTypeMap[this.props.type ? this.props.type : 'default']}
261
+ onChangeText={(text) => this.onChangeText(text)}
262
+ onChange={(event) => this.onChange(event)}
263
+ editable={this.props.disabled ? false : this.props.editable}
264
+ value={this.props.value != null ? this.props.value.toString() : this.props.value}
265
+ placeholder={this.props.placeholder ? (this.props.required && this.props.turnRequiredSign && isRTL() ? '* ' : '') + this.props.placeholder + (this.props.required && !this.props.turnRequiredSign ? ' *' : '') : ''}
266
+ placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : inputTextStyles.placeholderTextColor.color}
267
+ returnKeyType={this.props.returnKeyType}
268
+ onSubmitEditing={() => { this.onSubmitEditing() }}
269
+ autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : null}
270
+ secureTextEntry={this.props.secureTextEntry ? this.props.secureTextEntry : false}
271
+ multiline={this.props.multiline}
272
+ autoComplete={this.props.autoComplete}
273
+ selection={this.props.selection}
274
+ selectionColor={this.props.selectionColor}
275
+ numberOfLines={this.props.numberOfLines}
276
+ maxLength={this.props.maxLength}
277
+ onFocus={this.props.onFocus}
278
+ onBlur={this.props.onBlur} />
279
+ {this.props.children}
280
+
281
+ {this.props.value != null && !this.props.hideCancel ?
282
+ this.props.disabled ?
283
+ <View />
284
+ :
285
+ <TouchableOpacity style={[inputTextStyles.deleteTextInput, inputTextStyles.justifyCenter, this.props.iconContainerStyle]} onPress={() => { this.onChangeText('') }}>
286
+ <FontAwesomeIcon style={[inputTextStyles.deleteTextIcon, this.props.iconStyle]} name='input-text-cancel' />
287
+ </TouchableOpacity>
288
+ :
289
+ <View />
290
+ }
291
+ </View>
292
+ </View >
293
+ :
294
+ <View />
295
+ )
296
+ }
295
297
  }
package/InputTextStyles.js CHANGED
@@ -78,7 +78,8 @@ export const inputTextStyles = StyleSheet.create({
78
78
  backgroundColor: '#eff0f1',
79
79
  color: '#333',
80
80
  paddingLeft: 15,
81
- borderRadius: 5
81
+ borderRadius: 5,
82
+ padding: 0
82
83
  },
83
84
 
84
85
  textInputField: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "muba-input-text",
3
- "version": "9.0.0",
3
+ "version": "9.0.2",
4
4
  "description": "Input text",
5
5
  "main": "InputText.js",
6
6
  "scripts": {