muba-input-text 3.0.2

package/InputText.js

@@ -0,0 +1,250 @@
+import React from 'react';
+import { TextInput, View, TouchableOpacity } from 'react-native';
+import { inputTextStyles } from './InputTextStyles';
+import OutputText from 'muba-output-text';
+import { strings, isRTL, loadLocaleData } from 'muba-i18n';
+import { addFontList } from 'muba-font';
+import { createIconSetFromFontello } from 'react-native-vector-icons';
+import fontelloConfig from './fonts/config.json';
+const FontAwesomeIcon = createIconSetFromFontello(fontelloConfig);
+
+const keyboardTypeMap = {
+	default: 'default',
+	email: 'email-address',
+	number: 'numeric',
+	phone: 'phone-pad'
+};
+
+export default class InputText extends React.Component {
+	constructor(props) {
+		super(props);
+
+		loadLocaleData({
+			ar: require('./locales/ar.json'),
+			en: require('./locales/en.json'),
+			es: require('./locales/es.json'),
+			fr: require('./locales/fr.json'),
+			it: require('./locales/it.json'),
+			nl: require('./locales/nl.json')
+		});
+
+		this.state = {
+			fieldError: false,
+			requiredError: false,
+			onlyNumbersError: false,
+			maxValueError: false,
+			emailBadFormat: false,
+			customizedError: false,
+			customizedErrorMessage: undefined,
+			inputFont: props.inputFont,
+			noteFont: props.noteFont,
+			fontLoaded: false
+		};
+	}
+
+	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 });
+	}
+
+	onSubmitValidate() {
+		this.setState({
+			fieldError: false,
+			requiredError: false,
+			onlyNumbersError: false,
+			maxValueError: false,
+			emailBadFormat: false
+		});
+
+		if (this.props.required && (this.props.value == null || this.props.value.toString().trim() === '')) {
+			if (this.props.scroll) {
+				this.props.scroll(this.inputTextView);
+			}
+
+			this.setState({ fieldError: true, requiredError: true });
+			return false;
+		}
+		return this.validateType();
+	}
+
+	showError() {
+		if (this.props.scroll) {
+			this.props.scroll(this.inputTextView);
+		}
+
+		this.setState({ fieldError: true });
+	}
+
+	hideError() {
+		this.setState({ fieldError: false });
+	}
+
+	validateType() {
+		if (this.props.type === 'email') {
+			return this.isValidEmail();
+		} else if (this.props.type === 'number') {
+			return this.isValidNumber();
+		}
+		return true;
+	}
+
+	isValidEmail() {
+		const EMAIL_ALLOWED_LENGTH = 50;
+		if (this.props.value != null) {
+			if (!this.props.value.length) {
+				// It's empty
+				this.showError();
+				return false;
+			} else {
+				if (this.props.value.length > EMAIL_ALLOWED_LENGTH || this.props.value.split('@').length !== 2) {
+					// It's invalid
+					this.showError();
+					this.setState({ emailBadFormat: true });
+					return false;
+				} else {
+					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');
+					const success = !!pattern.test(this.props.value);
+
+					if (!success) {
+						// It's invalid
+						this.showError();
+						this.setState({ emailBadFormat: true });
+						return false;
+					}
+				}
+			}
+		}
+		// It's valid
+		return true;
+	}
+
+	isValidNumber() {
+		if (/\D/.test(this.props.value)) {
+			this.showError();
+			this.setState({ onlyNumbersError: true });
+			return false;
+		} else if (this.props.maxValue && parseInt(this.props.value) > this.props.maxValue) {
+			this.showError();
+			this.setState({ maxValueError: true });
+			return false;
+		}
+		return true;
+	}
+
+	showCustomizedError(messageError) {
+		this.setState({ fieldError: true, customizedError: true, customizedErrorMessage: messageError });
+	}
+
+	onChangeText(text) {
+		if (text === '') {
+			text = null;
+		}
+		this.setState({
+			fieldError: false,
+			requiredError: false,
+			onlyNumbersError: false,
+			maxValueError: false,
+			emailBadFormat: false,
+			customizedError: false,
+			customizedErrorMessage: undefined
+		});
+
+		if (this.props.onChangeText) {
+			this.props.onChangeText(text);
+		}
+	}
+
+	onChange(event) {
+		if (this.props.onChange) {
+			this.props.onChange(event);
+		}
+	}
+
+	onSubmitEditing(event) {
+		if (this.props.onSubmitEditing) {
+			this.props.onSubmitEditing(event);
+		}
+	}
+
+	focus = async () => {
+		this.input.focus();
+	}
+
+	render() {
+		return (
+			this.state.fontLoaded ?
+				<View
+					style={[this.state.fieldError && this.props.label ? inputTextStyles.fieldErrorView : '', this.props.textContainerStyle]}
+					ref={(element) => this.inputTextView = element}>
+					{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.emailBadFormat && (this.props.showErrorText == null || this.props.showErrorText) ? <OutputText style={[inputTextStyles.subNote, inputTextStyles.redText]}> {strings('emailBadFormat')}</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={inputTextStyles.row} collapsable={false}>
+						<TextInput
+							ref={(input) => { this.input = input; }}
+							style={[inputTextStyles.textInputField, inputTextStyles.textField, this.props.style, { textAlign: isRTL() || 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}
+							autoFocus={this.props.autoFocus} />
+						{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 >
+				:
+				<View />
+		)
+	}
+}

package/InputTextStyles.js

@@ -0,0 +1,85 @@
+import { StyleSheet } from 'react-native';
+
+const Fonts = {
+	Input: 'InputTextRegular',
+	Note: 'InputTextRegular',
+}
+
+export const inputTextStyles = StyleSheet.create({
+
+	row: {
+		flexDirection: 'row'
+	},
+
+	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
+	},
+
+	textInputField: {
+		paddingRight: 25,
+	}
+});
+
+export default inputTextStyles

package/fonts/config.json

@@ -0,0 +1,16 @@
+{
+	"name": "InputTextFontAwesome",
+	"css_prefix_text": "icon-",
+	"css_use_suffix": false,
+	"hinting": true,
+	"units_per_em": 1000,
+	"ascent": 850,
+	"glyphs": [
+		{
+			"uid": "5211af474d3a9848f67f945e2ccaf143",
+			"css": "input-text-cancel",
+			"code": 59409,
+			"src": "fontawesome"
+		}
+	]
+}

package/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="muba" />
+
+declare module "muba-input-text" {
+    export { default as InputText } from './InputText';
+}

package/locales/ar.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "الحقول المطلوبة",
+	"onlyNumbers": "استخدم الأرقام فقط",
+	"maxValueError": "الحد الأقصى للقيمة المسموح بها هو {{maxValue}}",
+	"emailBadFormat": "رجاء قم بإدخال بريد إكتروني صحيح",
+	"maxCharacters": "الحد الأقصى للحروف {{maxCharacters}}"
+}

package/locales/en.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "Required field",
+	"onlyNumbers": "Use numbers only",
+	"maxValueError": "The maximum value allowed is {{maxValue}}",
+	"emailBadFormat": "Please enter a valid email address",
+	"maxCharacters": "{{maxCharacters}} characters max."
+}

package/locales/es.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "Campo obligatorio",
+	"onlyNumbers": "Utiliza sólo números",
+	"maxValueError": "El valor máximo permitido es {{maxValue}}",
+	"emailBadFormat": "Por favor, introduce una dirección de correo electrónico válida",
+	"maxCharacters": "{{maxCharacters}} caracteres máx."
+}

package/locales/fr.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "Champs requis",
+	"onlyNumbers": "Utiliser des chiffres seulement",
+	"maxValueError": "La valeur maximale autorisée est {{maxValue}}",
+	"emailBadFormat": "S'il vous plaît, mettez une adresse email valide",
+	"maxCharacters": "{{maxCharacters}} caractères max."
+}

package/locales/it.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "Campo obbligatorio",
+	"onlyNumbers": "Usa solo numeri",
+	"maxValueError": "Il valore massimo permesso è {{maxValue}}",
+	"emailBadFormat": "Inserisci un indirizzo e-mail valido",
+	"maxCharacters": "{{maxCharacters}} caratteri massimi"
+}

package/locales/nl.json

@@ -0,0 +1,7 @@
+{
+	"requiredField": "Verplicht veld",
+	"onlyNumbers": "Gebruik alleen cijfers",
+	"maxValueError": "De maximale toegestane waarde is {maxValue}}",
+	"emailBadFormat": "Voer een geldig e-mailadres in",
+	"maxCharacters": "Maximaal {{maxCharacters} tekens"
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "muba-input-text",
+  "version": "3.0.2",
+  "description": "Input text",
+  "main": "InputText.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mubawab/muba-input-text.git"
+  },
+  "author": "Mubawab",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Mubawab/muba-input-text/issues"
+  },
+  "homepage": "https://github.com/Mubawab/muba-input-text#readme",
+  "dependencies": {
+    "muba-font": "3",
+    "muba-i18n": "3",
+    "muba-output-text": "3"
+  }
+}