muba-input-text 9.0.2 → 9.0.3

package/InputText.js

@@ -30,6 +30,13 @@ export default class InputText extends React.Component {
       nl: require('./locales/nl.json')
     });
 
+    addFontList([
+      {
+        name: 'InputTextFontAwesome',
+        source: require('./fonts/Font-Awesome.ttf')
+      }
+    ]);
+
     this.state = {
       fieldError: false,
       requiredError: false,
@@ -41,24 +48,11 @@ export default class InputText extends React.Component {
       customizedError: false,
       customizedErrorMessage: undefined,
       inputFont: props.inputFont,
-      noteFont: props.noteFont,
-      fontLoaded: false
+      noteFont: props.noteFont
     };
   }
 
   async componentDidMount() {
-    await addFontList([
-      {
-        name: 'InputTextRegular',
-        source: require('./fonts/Poppins/Poppins-Regular.ttf')
-      },
-      {
-        name: 'InputTextFontAwesome',
-        source: require('./fonts/Font-Awesome.ttf')
-      }
-    ]);
-    this.setState({ fontLoaded: true });
-
     if (this.props.autoFocus) {
       setTimeout(() => this.input.focus(), 100);
     }
@@ -225,73 +219,70 @@ export default class InputText extends React.Component {
 
   render() {
     return (
-      this.state.fontLoaded ?
-        <View
-          style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
-          ref={this.inputTextView}>
-          {this.props.label || ((this.props.showErrorText == null || this.props.showErrorText) && this.state.fieldError) ?
-            <View style={[this.props.label || this.state.fieldError ? { marginBottom: 10 } : '', this.props.inLineError ? inputTextStyles.row : '']}>
-              {this.props.label ?
-                <View style={inputTextStyles.row}>
-                  <OutputText style={[inputTextStyles.progressbarField, this.props.labelStyle]}>{this.props.label}</OutputText>
-                  {this.props.required ? <OutputText style={inputTextStyles.redText}> *</OutputText> : <OutputText />}
-                </View>
-                :
-                <View />
-              }
-              {this.state.requiredError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('requiredField')}</OutputText> : null}
-              {this.state.onlyNumbersError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('onlyNumbers')}</OutputText> : null}
-              {this.state.maxValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxValueError', { maxValue: this.props.maxValue })}</OutputText> : null}
-              {this.state.minValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('minValueError', { minValue: this.props.minValue })}</OutputText> : null}
-              {this.state.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</OutputText> : null}
-              {this.state.urlAllowingError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('urlAllowingError')}</OutputText> : null}
-              {this.state.maxCharacters && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxCharacters', { maxCharacters: this.props.maxCharacters })}</OutputText> : null}
-              {this.state.customizedError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {this.state.customizedErrorMessage}</OutputText> : null}
-            </View>
-            :
-            <View style={{ marginTop: 10 }} />
-          }
-
-          <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}>
-            <TextInput
-              ref={(input) => { this.input = input; }}
-              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 } : '']}
-              underlineColorAndroid='transparent'
-              keyboardType={this.props.keyboardType ? this.props.keyboardType : keyboardTypeMap[this.props.type ? this.props.type : 'default']}
-              onChangeText={(text) => this.onChangeText(text)}
-              onChange={(event) => this.onChange(event)}
-              editable={this.props.disabled ? false : this.props.editable}
-              value={this.props.value != null ? this.props.value.toString() : this.props.value}
-              placeholder={this.props.placeholder ? (this.props.required && this.props.turnRequiredSign && isRTL() ? '* ' : '') + this.props.placeholder + (this.props.required && !this.props.turnRequiredSign ? ' *' : '') : ''}
-              placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : inputTextStyles.placeholderTextColor.color}
-              returnKeyType={this.props.returnKeyType}
-              onSubmitEditing={() => { this.onSubmitEditing() }}
-              autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : null}
-              secureTextEntry={this.props.secureTextEntry ? this.props.secureTextEntry : false}
-              multiline={this.props.multiline}
-              autoComplete={this.props.autoComplete}
-              selection={this.props.selection}
-              selectionColor={this.props.selectionColor}
-              numberOfLines={this.props.numberOfLines}
-              maxLength={this.props.maxLength}
-              onFocus={this.props.onFocus}
-              onBlur={this.props.onBlur} />
-            {this.props.children}
-
-            {this.props.value != null && !this.props.hideCancel ?
-              this.props.disabled ?
-                <View />
-                :
-                <TouchableOpacity style={[inputTextStyles.deleteTextInput, inputTextStyles.justifyCenter, this.props.iconContainerStyle]} onPress={() => { this.onChangeText('') }}>
-                  <FontAwesomeIcon style={[inputTextStyles.deleteTextIcon, this.props.iconStyle]} name='input-text-cancel' />
-                </TouchableOpacity>
+      <View
+        style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
+        ref={this.inputTextView}>
+        {this.props.label || ((this.props.showErrorText == null || this.props.showErrorText) && this.state.fieldError) ?
+          <View style={[this.props.label || this.state.fieldError ? { marginBottom: 10 } : '', this.props.inLineError ? inputTextStyles.row : '']}>
+            {this.props.label ?
+              <View style={inputTextStyles.row}>
+                <OutputText style={[inputTextStyles.progressbarField, this.props.labelStyle]}>{this.props.label}</OutputText>
+                {this.props.required ? <OutputText style={inputTextStyles.redText}> *</OutputText> : <OutputText />}
+              </View>
               :
               <View />
             }
+            {this.state.requiredError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('requiredField')}</OutputText> : null}
+            {this.state.onlyNumbersError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('onlyNumbers')}</OutputText> : null}
+            {this.state.maxValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxValueError', { maxValue: this.props.maxValue })}</OutputText> : null}
+            {this.state.minValueError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('minValueError', { minValue: this.props.minValue })}</OutputText> : null}
+            {this.state.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</OutputText> : null}
+            {this.state.urlAllowingError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('urlAllowingError')}</OutputText> : null}
+            {this.state.maxCharacters && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('maxCharacters', { maxCharacters: this.props.maxCharacters })}</OutputText> : null}
+            {this.state.customizedError && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {this.state.customizedErrorMessage}</OutputText> : null}
           </View>
-        </View >
-        :
-        <View />
+          :
+          <View style={{ marginTop: 10 }} />
+        }
+
+        <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}>
+          <TextInput
+            ref={(input) => { this.input = input; }}
+            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 } : '']}
+            underlineColorAndroid='transparent'
+            keyboardType={this.props.keyboardType ? this.props.keyboardType : keyboardTypeMap[this.props.type ? this.props.type : 'default']}
+            onChangeText={(text) => this.onChangeText(text)}
+            onChange={(event) => this.onChange(event)}
+            editable={this.props.disabled ? false : this.props.editable}
+            value={this.props.value != null ? this.props.value.toString() : this.props.value}
+            placeholder={this.props.placeholder ? (this.props.required && this.props.turnRequiredSign && isRTL() ? '* ' : '') + this.props.placeholder + (this.props.required && !this.props.turnRequiredSign ? ' *' : '') : ''}
+            placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : inputTextStyles.placeholderTextColor.color}
+            returnKeyType={this.props.returnKeyType}
+            onSubmitEditing={() => { this.onSubmitEditing() }}
+            autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : null}
+            secureTextEntry={this.props.secureTextEntry ? this.props.secureTextEntry : false}
+            multiline={this.props.multiline}
+            autoComplete={this.props.autoComplete}
+            selection={this.props.selection}
+            selectionColor={this.props.selectionColor}
+            numberOfLines={this.props.numberOfLines}
+            maxLength={this.props.maxLength}
+            onFocus={this.props.onFocus}
+            onBlur={this.props.onBlur} />
+          {this.props.children}
+
+          {this.props.value != null && !this.props.hideCancel ?
+            this.props.disabled ?
+              <View />
+              :
+              <TouchableOpacity style={[inputTextStyles.deleteTextInput, inputTextStyles.justifyCenter, this.props.iconContainerStyle]} onPress={() => { this.onChangeText('') }}>
+                <FontAwesomeIcon style={[inputTextStyles.deleteTextIcon, this.props.iconStyle]} name='input-text-cancel' />
+              </TouchableOpacity>
+            :
+            <View />
+          }
+        </View>
+      </View >
     )
   }
 }

package/InputTextStyles.js

@@ -1,90 +1,90 @@
 import { StyleSheet } from 'react-native';
 
 const Fonts = {
-	Input: 'InputTextRegular',
-	Note: 'InputTextRegular',
+  Input: 'Regular',
+  Note: 'Regular',
 }
 
 export const inputTextStyles = StyleSheet.create({
 
-	row: {
-		flexDirection: 'row'
-	},
-
-	rowReverse: {
-		flexDirection: 'row-reverse'
-	},
-
-	progressbarField: {
-		fontFamily: Fonts.Note,
-		fontSize: 12,
-		color: '#333',
-	},
-
-	redText: {
-		color: '#cf1b1b'
-	},
-
-	subNote: {
-		fontSize: 11,
-		color: '#858585',
-		fontFamily: Fonts.Note,
-		textAlign: 'left'
-	},
-
-	fieldErrorView: {
-		borderWidth: 2,
-		borderColor: '#f1d8d8',
-		borderRadius: 5,
-		backgroundColor: '#f1d8d8'
-	},
-
-	fieldError: {
-		borderWidth: 1,
-		borderColor: '#ff0000'
-	},
-
-	disabled: {
-		opacity: 0.4
-	},
-
-	placeholderTextColor: {
-		color: '#bbbbbb'
-	},
-
-	deleteTextInput: {
-		position: 'absolute',
-		paddingRight: 10,
-		paddingLeft: 10,
-		right: 0,
-		top: 8
-	},
-
-	deleteTextIcon: {
-		fontSize: 16,
-		color: '#858585'
-	},
-
-	justifyCenter: {
-		justifyContent: 'center'
-	},
-
-	textField: {
-		fontSize: 14,
-		fontFamily: Fonts.Input,
-		width: '100%',
-		display: 'flex',
-		height: 35,
-		backgroundColor: '#eff0f1',
-		color: '#333',
-		paddingLeft: 15,
-		borderRadius: 5,
-		padding: 0
-	},
-
-	textInputField: {
-		paddingRight: 25,
-	}
+  row: {
+    flexDirection: 'row'
+  },
+
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+
+  progressbarField: {
+    fontFamily: Fonts.Note,
+    fontSize: 12,
+    color: '#333',
+  },
+
+  redText: {
+    color: '#cf1b1b'
+  },
+
+  subNote: {
+    fontSize: 11,
+    color: '#858585',
+    fontFamily: Fonts.Note,
+    textAlign: 'left'
+  },
+
+  fieldErrorView: {
+    borderWidth: 2,
+    borderColor: '#f1d8d8',
+    borderRadius: 5,
+    backgroundColor: '#f1d8d8'
+  },
+
+  fieldError: {
+    borderWidth: 1,
+    borderColor: '#ff0000'
+  },
+
+  disabled: {
+    opacity: 0.4
+  },
+
+  placeholderTextColor: {
+    color: '#bbbbbb'
+  },
+
+  deleteTextInput: {
+    position: 'absolute',
+    paddingRight: 10,
+    paddingLeft: 10,
+    right: 0,
+    top: 8
+  },
+
+  deleteTextIcon: {
+    fontSize: 16,
+    color: '#858585'
+  },
+
+  justifyCenter: {
+    justifyContent: 'center'
+  },
+
+  textField: {
+    fontSize: 14,
+    fontFamily: Fonts.Input,
+    width: '100%',
+    display: 'flex',
+    height: 35,
+    backgroundColor: '#eff0f1',
+    color: '#333',
+    paddingLeft: 15,
+    borderRadius: 5,
+    padding: 0
+  },
+
+  textInputField: {
+    paddingRight: 25,
+  }
 });
 
 export default inputTextStyles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muba-input-text",
-  "version": "9.0.2",
+  "version": "9.0.3",
   "description": "Input text",
   "main": "InputText.js",
   "scripts": {