muba-input-text 9.0.1 → 9.0.3

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 (4) hide show
  1. package/InputText.js +247 -254
  2. package/InputTextStyles.js +80 -80
  3. package/package.json +1 -1
  4. package/fonts/Poppins/Poppins-Regular.ttf +0 -0
package/InputText.js CHANGED
@@ -9,287 +9,280 @@ 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
+ addFontList([
34
+ {
35
+ name: 'InputTextFontAwesome',
36
+ source: require('./fonts/Font-Awesome.ttf')
37
+ }
38
+ ]);
59
39
 
60
- if (this.props.autoFocus) {
61
- setTimeout(() => this.input.focus(), 100);
62
- }
63
- }
40
+ this.state = {
41
+ fieldError: false,
42
+ requiredError: false,
43
+ onlyNumbersError: false,
44
+ minValueError: false,
45
+ maxValueError: false,
46
+ emailBadFormat: false,
47
+ urlAllowingError: false,
48
+ customizedError: false,
49
+ customizedErrorMessage: undefined,
50
+ inputFont: props.inputFont,
51
+ noteFont: props.noteFont
52
+ };
53
+ }
64
54
 
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
- });
55
+ async componentDidMount() {
56
+ if (this.props.autoFocus) {
57
+ setTimeout(() => this.input.focus(), 100);
58
+ }
59
+ }
75
60
 
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
- }
61
+ onSubmitValidate() {
62
+ this.setState({
63
+ fieldError: false,
64
+ requiredError: false,
65
+ onlyNumbersError: false,
66
+ minValueError: false,
67
+ maxValueError: false,
68
+ emailBadFormat: false,
69
+ urlAllowingError: false
70
+ });
81
71
 
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
- }
72
+ let result = true;
73
+ if (this.props.required && (this.props.value == null || this.props.value.toString().trim() === '')) {
74
+ if (this.props.scroll) {
75
+ this.props.scroll(this.inputTextView);
76
+ }
89
77
 
90
- return result;
91
- }
78
+ this.setState({ fieldError: true, requiredError: true });
79
+ result = false;
80
+ } else {
81
+ if (this.props.required || (this.props.value != null && this.props.value !== '')) {
82
+ result = this.validateType() && result;
83
+ }
84
+ }
92
85
 
93
- showError() {
94
- if (this.props.scroll) {
95
- this.props.scroll(this.inputTextView);
96
- }
86
+ return result;
87
+ }
97
88
 
98
- this.setState({ fieldError: true });
99
- }
89
+ showError() {
90
+ if (this.props.scroll) {
91
+ this.props.scroll(this.inputTextView);
92
+ }
100
93
 
101
- hideError() {
102
- this.setState({ fieldError: false });
103
- }
94
+ this.setState({ fieldError: true });
95
+ }
104
96
 
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
- }
97
+ hideError() {
98
+ this.setState({ fieldError: false });
99
+ }
118
100
 
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);
101
+ validateType() {
102
+ if (this.props.value != null && this.props.value !== this.props.value?.toString().trim()) {
103
+ this.onChangeText(this.props.value.toString().trim())
104
+ }
105
+ if (this.props.type === 'email') {
106
+ return this.isValidEmail();
107
+ } else if (this.props.type === 'number') {
108
+ return this.isValidNumber();
109
+ } else if (this.props.type === 'url') {
110
+ return this.isValidUrl();
111
+ }
112
+ return true;
113
+ }
136
114
 
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
- }
115
+ isValidEmail() {
116
+ const EMAIL_ALLOWED_LENGTH = 50;
117
+ if (this.props.value != null) {
118
+ if (!this.props.value.length) {
119
+ // It's empty
120
+ this.showError();
121
+ return false;
122
+ } else {
123
+ if (this.props.value.length > EMAIL_ALLOWED_LENGTH || this.props.value.split('@').length !== 2) {
124
+ // It's invalid
125
+ this.showError();
126
+ this.setState({ emailBadFormat: true });
127
+ return false;
128
+ } else {
129
+ 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');
130
+ const patternSpaces = new RegExp(/\s/);
131
+ const success = !!pattern.test(this.props.value) && !patternSpaces.test(this.props.value);
149
132
 
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
- }
133
+ if (!success) {
134
+ // It's invalid
135
+ this.showError();
136
+ this.setState({ emailBadFormat: true });
137
+ return false;
138
+ }
139
+ }
140
+ }
141
+ }
142
+ // It's valid
143
+ return true;
144
+ }
166
145
 
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
- }
146
+ isValidNumber() {
147
+ if (/\D/.test(this.props.value)) {
148
+ this.showError();
149
+ this.setState({ onlyNumbersError: true });
150
+ return false;
151
+ } else if (this.props.maxValue && parseInt(this.props.value) > this.props.maxValue) {
152
+ this.showError();
153
+ this.setState({ maxValueError: true });
154
+ return false;
155
+ } else if (this.props.minValue && parseInt(this.props.value) < this.props.minValue) {
156
+ this.showError();
157
+ this.setState({ minValueError: true });
158
+ return false;
159
+ }
160
+ return true;
161
+ }
176
162
 
177
- showCustomizedError(messageError) {
178
- this.setState({ fieldError: true, customizedError: true, customizedErrorMessage: messageError });
179
- }
163
+ isValidUrl() {
164
+ 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');
165
+ if (!pattern.test(this.props.value)) {
166
+ this.showError();
167
+ this.setState({ urlAllowingError: true });
168
+ return false;
169
+ }
170
+ return true;
171
+ }
180
172
 
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
- });
173
+ showCustomizedError(messageError) {
174
+ this.setState({ fieldError: true, customizedError: true, customizedErrorMessage: messageError });
175
+ }
196
176
 
197
- if (this.props.onChangeText) {
198
- this.props.onChangeText(text);
199
- }
200
- }
177
+ onChangeText(text) {
178
+ if (text === '') {
179
+ text = null;
180
+ }
181
+ this.setState({
182
+ fieldError: false,
183
+ requiredError: false,
184
+ onlyNumbersError: false,
185
+ minValueError: false,
186
+ maxValueError: false,
187
+ emailBadFormat: false,
188
+ urlAllowingError: false,
189
+ customizedError: false,
190
+ customizedErrorMessage: undefined
191
+ });
201
192
 
202
- onChange(event) {
203
- if (this.props.onChange) {
204
- this.props.onChange(event);
205
- }
206
- }
193
+ if (this.props.onChangeText) {
194
+ this.props.onChangeText(text);
195
+ }
196
+ }
207
197
 
208
- onSubmitEditing(event) {
209
- if (this.props.onSubmitEditing) {
210
- this.props.onSubmitEditing(event);
211
- }
212
- }
198
+ onChange(event) {
199
+ if (this.props.onChange) {
200
+ this.props.onChange(event);
201
+ }
202
+ }
213
203
 
214
- focus = async () => {
215
- this.input.focus();
216
- }
204
+ onSubmitEditing(event) {
205
+ if (this.props.onSubmitEditing) {
206
+ this.props.onSubmitEditing(event);
207
+ }
208
+ }
217
209
 
218
- checkText = () => {
219
- if (this.props.value !== this.props.value?.trim()) {
220
- this.onChangeText(this.props.value.trim())
221
- }
222
- }
210
+ focus = async () => {
211
+ this.input.focus();
212
+ }
223
213
 
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
- }
214
+ checkText = () => {
215
+ if (this.props.value !== this.props.value?.trim()) {
216
+ this.onChangeText(this.props.value.trim())
217
+ }
218
+ }
252
219
 
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}
220
+ render() {
221
+ return (
222
+ <View
223
+ style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
224
+ ref={this.inputTextView}>
225
+ {this.props.label || ((this.props.showErrorText == null || this.props.showErrorText) && this.state.fieldError) ?
226
+ <View style={[this.props.label || this.state.fieldError ? { marginBottom: 10 } : '', this.props.inLineError ? inputTextStyles.row : '']}>
227
+ {this.props.label ?
228
+ <View style={inputTextStyles.row}>
229
+ <OutputText style={[inputTextStyles.progressbarField, this.props.labelStyle]}>{this.props.label}</OutputText>
230
+ {this.props.required ? <OutputText style={inputTextStyles.redText}> *</OutputText> : <OutputText />}
231
+ </View>
232
+ :
233
+ <View />
234
+ }
235
+ {this.state.requiredError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('requiredField')}</OutputText> : null}
236
+ {this.state.onlyNumbersError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('onlyNumbers')}</OutputText> : null}
237
+ {this.state.maxValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxValueError', { maxValue: this.props.maxValue })}</OutputText> : null}
238
+ {this.state.minValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('minValueError', { minValue: this.props.minValue })}</OutputText> : null}
239
+ {this.state.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</OutputText> : null}
240
+ {this.state.urlAllowingError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('urlAllowingError')}</OutputText> : null}
241
+ {this.state.maxCharacters && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxCharacters', { maxCharacters: this.props.maxCharacters })}</OutputText> : null}
242
+ {this.state.customizedError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {this.state.customizedErrorMessage}</OutputText> : null}
243
+ </View>
244
+ :
245
+ <View style={{ marginTop: 10 }} />
246
+ }
278
247
 
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
- }
248
+ <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}>
249
+ <TextInput
250
+ ref={(input) => { this.input = input; }}
251
+ 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 } : '']}
252
+ underlineColorAndroid='transparent'
253
+ keyboardType={this.props.keyboardType ? this.props.keyboardType : keyboardTypeMap[this.props.type ? this.props.type : 'default']}
254
+ onChangeText={(text) => this.onChangeText(text)}
255
+ onChange={(event) => this.onChange(event)}
256
+ editable={this.props.disabled ? false : this.props.editable}
257
+ value={this.props.value != null ? this.props.value.toString() : this.props.value}
258
+ placeholder={this.props.placeholder ? (this.props.required && this.props.turnRequiredSign && isRTL() ? '* ' : '') + this.props.placeholder + (this.props.required && !this.props.turnRequiredSign ? ' *' : '') : ''}
259
+ placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : inputTextStyles.placeholderTextColor.color}
260
+ returnKeyType={this.props.returnKeyType}
261
+ onSubmitEditing={() => { this.onSubmitEditing() }}
262
+ autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : null}
263
+ secureTextEntry={this.props.secureTextEntry ? this.props.secureTextEntry : false}
264
+ multiline={this.props.multiline}
265
+ autoComplete={this.props.autoComplete}
266
+ selection={this.props.selection}
267
+ selectionColor={this.props.selectionColor}
268
+ numberOfLines={this.props.numberOfLines}
269
+ maxLength={this.props.maxLength}
270
+ onFocus={this.props.onFocus}
271
+ onBlur={this.props.onBlur} />
272
+ {this.props.children}
273
+
274
+ {this.props.value != null && !this.props.hideCancel ?
275
+ this.props.disabled ?
276
+ <View />
277
+ :
278
+ <TouchableOpacity style={[inputTextStyles.deleteTextInput, inputTextStyles.justifyCenter, this.props.iconContainerStyle]} onPress={() => { this.onChangeText('') }}>
279
+ <FontAwesomeIcon style={[inputTextStyles.deleteTextIcon, this.props.iconStyle]} name='input-text-cancel' />
280
+ </TouchableOpacity>
281
+ :
282
+ <View />
283
+ }
284
+ </View>
285
+ </View >
286
+ )
287
+ }
295
288
  }
package/InputTextStyles.js CHANGED
@@ -1,90 +1,90 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
3
  const Fonts = {
4
- Input: 'InputTextRegular',
5
- Note: 'InputTextRegular',
4
+ Input: 'Regular',
5
+ Note: 'Regular',
6
6
  }
7
7
 
8
8
  export const inputTextStyles = StyleSheet.create({
9
9
 
10
- row: {
11
- flexDirection: 'row'
12
- },
13
-
14
- rowReverse: {
15
- flexDirection: 'row-reverse'
16
- },
17
-
18
- progressbarField: {
19
- fontFamily: Fonts.Note,
20
- fontSize: 12,
21
- color: '#333',
22
- },
23
-
24
- redText: {
25
- color: '#cf1b1b'
26
- },
27
-
28
- subNote: {
29
- fontSize: 11,
30
- color: '#858585',
31
- fontFamily: Fonts.Note,
32
- textAlign: 'left'
33
- },
34
-
35
- fieldErrorView: {
36
- borderWidth: 2,
37
- borderColor: '#f1d8d8',
38
- borderRadius: 5,
39
- backgroundColor: '#f1d8d8'
40
- },
41
-
42
- fieldError: {
43
- borderWidth: 1,
44
- borderColor: '#ff0000'
45
- },
46
-
47
- disabled: {
48
- opacity: 0.4
49
- },
50
-
51
- placeholderTextColor: {
52
- color: '#bbbbbb'
53
- },
54
-
55
- deleteTextInput: {
56
- position: 'absolute',
57
- paddingRight: 10,
58
- paddingLeft: 10,
59
- right: 0,
60
- top: 8
61
- },
62
-
63
- deleteTextIcon: {
64
- fontSize: 16,
65
- color: '#858585'
66
- },
67
-
68
- justifyCenter: {
69
- justifyContent: 'center'
70
- },
71
-
72
- textField: {
73
- fontSize: 14,
74
- fontFamily: Fonts.Input,
75
- width: '100%',
76
- display: 'flex',
77
- height: 35,
78
- backgroundColor: '#eff0f1',
79
- color: '#333',
80
- paddingLeft: 15,
81
- borderRadius: 5,
82
- padding: 0
83
- },
84
-
85
- textInputField: {
86
- paddingRight: 25,
87
- }
10
+ row: {
11
+ flexDirection: 'row'
12
+ },
13
+
14
+ rowReverse: {
15
+ flexDirection: 'row-reverse'
16
+ },
17
+
18
+ progressbarField: {
19
+ fontFamily: Fonts.Note,
20
+ fontSize: 12,
21
+ color: '#333',
22
+ },
23
+
24
+ redText: {
25
+ color: '#cf1b1b'
26
+ },
27
+
28
+ subNote: {
29
+ fontSize: 11,
30
+ color: '#858585',
31
+ fontFamily: Fonts.Note,
32
+ textAlign: 'left'
33
+ },
34
+
35
+ fieldErrorView: {
36
+ borderWidth: 2,
37
+ borderColor: '#f1d8d8',
38
+ borderRadius: 5,
39
+ backgroundColor: '#f1d8d8'
40
+ },
41
+
42
+ fieldError: {
43
+ borderWidth: 1,
44
+ borderColor: '#ff0000'
45
+ },
46
+
47
+ disabled: {
48
+ opacity: 0.4
49
+ },
50
+
51
+ placeholderTextColor: {
52
+ color: '#bbbbbb'
53
+ },
54
+
55
+ deleteTextInput: {
56
+ position: 'absolute',
57
+ paddingRight: 10,
58
+ paddingLeft: 10,
59
+ right: 0,
60
+ top: 8
61
+ },
62
+
63
+ deleteTextIcon: {
64
+ fontSize: 16,
65
+ color: '#858585'
66
+ },
67
+
68
+ justifyCenter: {
69
+ justifyContent: 'center'
70
+ },
71
+
72
+ textField: {
73
+ fontSize: 14,
74
+ fontFamily: Fonts.Input,
75
+ width: '100%',
76
+ display: 'flex',
77
+ height: 35,
78
+ backgroundColor: '#eff0f1',
79
+ color: '#333',
80
+ paddingLeft: 15,
81
+ borderRadius: 5,
82
+ padding: 0
83
+ },
84
+
85
+ textInputField: {
86
+ paddingRight: 25,
87
+ }
88
88
  });
89
89
 
90
90
  export default inputTextStyles
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "muba-input-text",
3
- "version": "9.0.1",
3
+ "version": "9.0.3",
4
4
  "description": "Input text",
5
5
  "main": "InputText.js",
6
6
  "scripts": {
package/fonts/Poppins/Poppins-Regular.ttf DELETED
Binary file