@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/src/components/Input.js

@@ -1,15 +1,16 @@
-import React, { Component } from 'react';
-import { TextInput, View, Text, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import { TextInput, View, TouchableOpacity } from "react-native";
+import { Text } from ".";
+import { connect } from "react-redux";
 import {
-  COLOUR_TEAL,
-  COLOUR_TANGERINE,
-  TEXT_DARK,
-  TEXT_LIGHT,
-  TEXT_MID,
-  getMainBrandingColourFromState,
-  getDarkBrandingColourFromState,
-} from '../colours';
+	COLOUR_TEAL,
+	COLOUR_TANGERINE,
+	TEXT_DARK,
+	TEXT_LIGHT,
+	TEXT_MID,
+	getMainBrandingColourFromState,
+	getDarkBrandingColourFromState,
+} from "../colours";
 
 /*
 Class Breakdown ------ 
@@ -27,160 +28,193 @@ Class Breakdown ------
 */
 
 class Input extends Component {
-  state = {
-    height: 'auto',
-  };
+	state = {
+		height: "auto",
+	};
 
-  renderInputChage() {
-    if (this.props.toggleInput != null) {
-      return (
-        <View>
-          <TouchableOpacity activeOpacity={0.9} onPress={this.props.toggleInput.bind(this)}>
-            <Text
-              style={[
-                {
-                  fontFamily: 'sf-regular',
-                  color: COLOUR_TEAL,
-                  textAlign: 'right',
-                  backgroundColor: 'transparent',
-                  textDecorationLine: 'underline',
-                },
-                this.props.toggleInputStyle,
-              ]}
-            >
-              {this.props.toggleInputText}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      );
-    }
-    return null;
-  }
+	renderInputChage() {
+		if (this.props.toggleInput != null) {
+			return (
+				<View>
+					<TouchableOpacity
+						activeOpacity={0.9}
+						onPress={this.props.toggleInput.bind(this)}
+					>
+						<Text
+							style={[
+								{
+									fontFamily: "sf-regular",
+									color: COLOUR_TEAL,
+									textAlign: "right",
+									backgroundColor: "transparent",
+									textDecorationLine: "underline",
+								},
+								this.props.toggleInputStyle,
+							]}
+						>
+							{this.props.toggleInputText}
+						</Text>
+					</TouchableOpacity>
+				</View>
+			);
+		}
+		return null;
+	}
 
-  renderLabel() {
-    if (this.props.label) {
-      return (
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Text
-            style={[
-              styles.labelStyle,
-              this.props.labelStyle,
-              this.props.hasLabelError && this.props.labelError && { color: this.props.colourBrandingMain },
-            ]}
-          >
-            {this.props.label}
-          </Text>
-          {this.props.hasLabelError && (
-            <View
-              style={[
-                {
-                  height: 5,
-                  width: 5,
-                  borderRadius: 3,
-                  backgroundColor: COLOUR_TEAL,
-                  alignSelf: 'center',
-                },
-                this.props.labelError && { backgroundColor: this.props.colourBrandingMain },
-              ]}
-            />
-          )}
-        </View>
-      );
-    }
-    return null;
-  }
+	renderLabel() {
+		if (this.props.label) {
+			return (
+				<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+					<Text
+						style={[
+							styles.labelStyle,
+							this.props.labelStyle,
+							this.props.hasLabelError &&
+								this.props.labelError && {
+									color: this.props.colourBrandingMain,
+								},
+						]}
+					>
+						{this.props.label}
+					</Text>
+					{this.props.hasLabelError && (
+						<View
+							style={[
+								{
+									height: 5,
+									width: 5,
+									borderRadius: 3,
+									backgroundColor: COLOUR_TEAL,
+									alignSelf: "center",
+								},
+								this.props.labelError && {
+									backgroundColor: this.props.colourBrandingMain,
+								},
+							]}
+						/>
+					)}
+				</View>
+			);
+		}
+		return null;
+	}
 
-  renderErrorField() {
-    if (this.props.hasError) {
-      return (
-        <View style={[{ justifyContent: 'center' }, this.props.errorStyle && this.props.errorText !== ' ' && this.props.errorStyle]}>
-          <Text style={[styles.errorText]}>{this.props.errorText}</Text>
-        </View>
-      );
-    }
-    return null;
-  }
+	renderErrorField() {
+		if (this.props.hasError) {
+			return (
+				<View
+					style={[
+						{ justifyContent: "center" },
+						this.props.errorStyle &&
+							this.props.errorText !== " " &&
+							this.props.errorStyle,
+					]}
+				>
+					<Text style={[styles.errorText]}>{this.props.errorText}</Text>
+				</View>
+			);
+		}
+		return null;
+	}
 
-  render() {
-    return (
-      <View style={[styles.containerStyle, this.props.containerStyle]}>
-        {this.renderLabel()}
-        <TextInput
-          secureTextEntry={this.props.secureTextEntry}
-          placeholder={this.props.placeholder}
-          placeholderTextColor={this.props.placeholderTextColor}
-          autoCorrect={this.props.autoCorrect != null ? this.props.autoCorrect : false}
-          multiline={this.props.multiline != null ? this.props.multiline : false}
-          autoGrow={this.props.autoGrow != null ? this.props.autoGrow : false}
-          style={[
-            styles.inputStyle,
-            {
-              textAlignVertical: this.props.autoGrow != null ? 'top' : 'center',
-              color: this.props.textColour,
-              borderBottomColor:
-                this.props.borderBottomColour != null
-                  ? this.props.value.length > 0 || this.props.errorText !== ' ' || this.props.forceBottomBorder
-                    ? this.props.borderBottomColour
-                    : TEXT_MID
-                  : 'rgba(0,0,0,0)',
-              borderBottomWidth: this.props.borderBottomColour != null ? 1 : 0,
-              height: this.props.autoGrow != null ? Math.max(30, this.state.height) : 'auto',
-            },
-            this.props.textStyle,
-          ]}
-          value={this.props.value}
-          onChangeText={this.props.onChangeText}
-          keyboardType={this.props.keyboardType}
-          selectionColor={this.props.colourBrandingDark}
-          underlineColorAndroid={this.props.underlineColorAndroid != null ? this.props.underlineColorAndroid : 'rgba(0,0,0,0)'}
-          editable={this.props.editable != null ? this.props.editable : true}
-          autoCapitalize={this.props.autoCapitalize != null ? this.props.autoCapitalize : 'sentences'}
-          autoFocus={this.props.autoFocus}
-          onContentSizeChange={event => {
-            this.setState({ height: event.nativeEvent.contentSize.height });
-          }}
-        />
-        {this.renderInputChage()}
-        {this.renderErrorField()}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View style={[styles.containerStyle, this.props.containerStyle]}>
+				{this.renderLabel()}
+				<TextInput
+					maxFontSizeMultiplier={1.2}
+					secureTextEntry={this.props.secureTextEntry}
+					placeholder={this.props.placeholder}
+					placeholderTextColor={this.props.placeholderTextColor}
+					autoCorrect={
+						this.props.autoCorrect != null ? this.props.autoCorrect : false
+					}
+					multiline={
+						this.props.multiline != null ? this.props.multiline : false
+					}
+					autoGrow={this.props.autoGrow != null ? this.props.autoGrow : false}
+					style={[
+						styles.inputStyle,
+						{
+							textAlignVertical: this.props.autoGrow != null ? "top" : "center",
+							color: this.props.textColour,
+							borderBottomColor:
+								this.props.borderBottomColour != null
+									? this.props.value.length > 0 ||
+										this.props.errorText !== " " ||
+										this.props.forceBottomBorder
+										? this.props.borderBottomColour
+										: TEXT_MID
+									: "rgba(0,0,0,0)",
+							borderBottomWidth: this.props.borderBottomColour != null ? 1 : 0,
+							height:
+								this.props.autoGrow != null
+									? Math.max(30, this.state.height)
+									: "auto",
+						},
+						this.props.textStyle,
+					]}
+					value={this.props.value}
+					onChangeText={this.props.onChangeText}
+					keyboardType={this.props.keyboardType}
+					selectionColor={this.props.colourBrandingDark}
+					underlineColorAndroid={
+						this.props.underlineColorAndroid != null
+							? this.props.underlineColorAndroid
+							: "rgba(0,0,0,0)"
+					}
+					editable={this.props.editable != null ? this.props.editable : true}
+					autoCapitalize={
+						this.props.autoCapitalize != null
+							? this.props.autoCapitalize
+							: "sentences"
+					}
+					autoFocus={this.props.autoFocus}
+					onContentSizeChange={(event) => {
+						this.setState({ height: event.nativeEvent.contentSize.height });
+					}}
+				/>
+				{this.renderInputChage()}
+				{this.renderErrorField()}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  labelStyle: {
-    fontSize: 15,
-    backgroundColor: 'transparent',
-    fontFamily: 'sf-semibold',
-    color: TEXT_DARK,
-  },
-  inputStyle: {
-    flex: 1,
-    marginBottom: 2,
-    paddingTop: 0,
-    fontSize: 18,
-    color: TEXT_DARK,
-    fontFamily: 'sf-regular',
-    borderBottomColor: TEXT_LIGHT,
-  },
-  containerStyle: {
-    width: '100%',
-    flexDirection: 'column',
-  },
-  errorText: {
-    backgroundColor: 'transparent',
-    color: COLOUR_TANGERINE,
-    fontSize: 13,
-    fontFamily: 'sf-semibold',
-    marginTop: 0,
-  },
+	labelStyle: {
+		fontSize: 15,
+		backgroundColor: "transparent",
+		fontFamily: "sf-semibold",
+		color: TEXT_DARK,
+	},
+	inputStyle: {
+		flex: 1,
+		marginBottom: 2,
+		paddingTop: 0,
+		fontSize: 18,
+		color: TEXT_DARK,
+		fontFamily: "sf-regular",
+		borderBottomColor: TEXT_LIGHT,
+	},
+	containerStyle: {
+		width: "100%",
+		flexDirection: "column",
+	},
+	errorText: {
+		backgroundColor: "transparent",
+		color: COLOUR_TANGERINE,
+		fontSize: 13,
+		fontFamily: "sf-semibold",
+		marginTop: 0,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-    colourBrandingDark: getDarkBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		colourBrandingDark: getDarkBrandingColourFromState(state),
+	};
 };
 
 const input = connect(mapStateToProps, {})(Input);