@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/FormCardSection.js

@@ -1,260 +1,311 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import { connect } from 'react-redux';
-import { Pl60Icon } from '../fonts';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import _ from "lodash";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { connect } from "react-redux";
 import {
-  TEXT_LIGHTER,
-  TEXT_DARK,
-  COLOUR_GREEN,
-  LINEGREY,
-  TEXT_LIGHT,
-  COLOUR_GRAPEFRUIT,
-  getMainBrandingColourFromState,
-  getDarkBrandingColourFromState,
-} from '../colours';
-import { getValueOrDefault } from '../helper';
+	TEXT_LIGHTER,
+	TEXT_DARK,
+	COLOUR_GREEN,
+	LINEGREY,
+	TEXT_LIGHT,
+	COLOUR_GRAPEFRUIT,
+	getMainBrandingColourFromState,
+	getDarkBrandingColourFromState,
+} from "../colours";
+import { getValueOrDefault } from "../helper";
+import { FontAwesome } from "./Icon";
 
 class FormCardSection extends Component {
-  constructor(props) {
-    super(props);
+	constructor(props) {
+		super(props);
 
-    this.state = {
-      height: getValueOrDefault(this.props.minHeight, 20),
-      focused: false,
-      isSecure: true,
-    };
-  }
+		this.state = {
+			height: getValueOrDefault(this.props.minHeight, 20),
+			focused: false,
+			isSecure: true,
+		};
+	}
 
-  onFocus() {
-    this.setState({ focused: true });
-    if (this.props.onFocus) {
-      this.props.onFocus();
-    }
-  }
+	onFocus() {
+		this.setState({ focused: true });
+		if (this.props.onFocus) {
+			this.props.onFocus();
+		}
+	}
 
-  onBlur() {
-    this.setState({ focused: false });
-    if (this.props.onBlur) {
-      this.props.onBlur();
-    }
-  }
+	onBlur() {
+		this.setState({ focused: false });
+		if (this.props.onBlur) {
+			this.props.onBlur();
+		}
+	}
 
-  onGrow(event) {
-    this.setState({
-      height: Math.max(event.nativeEvent.contentSize.height, this.props.minHeight),
-    });
-  }
+	onGrow(event) {
+		this.setState({
+			height: Math.max(
+				event.nativeEvent.contentSize.height,
+				this.props.minHeight,
+			),
+		});
+	}
 
-  toggleSecure() {
-    const current = this.state.isSecure;
-    this.setState({ isSecure: !current });
-  }
+	toggleSecure() {
+		const current = this.state.isSecure;
+		this.setState({ isSecure: !current });
+	}
 
-  showSecure() {
-    if (!_.isUndefined(this.props.secureTextToggle) && this.props.secureTextToggle) {
-      return this.state.isSecure;
-    }
-    return this.props.secureTextEntry;
-  }
+	showSecure() {
+		if (
+			!_.isUndefined(this.props.secureTextToggle) &&
+			this.props.secureTextToggle
+		) {
+			return this.state.isSecure;
+		}
+		return this.props.secureTextEntry;
+	}
 
-  isValid() {
-    if (this.props.required && _.isEmpty(this.props.textValue)) {
-      return false;
-    }
-    if (this.props.isValid && !this.props.isValid()) {
-      return false;
-    }
-    return true;
-  }
+	isValid() {
+		if (this.props.required && _.isEmpty(this.props.textValue)) {
+			return false;
+		}
+		if (this.props.isValid && !this.props.isValid()) {
+			return false;
+		}
+		return true;
+	}
 
-  renderErrorDot() {
-    if (this.props.required || this.props.hasError) {
-      return (
-        <View
-          style={[
-            styles.errorDot,
-            { backgroundColor: this.props.colourBrandingMain },
-            !this.isValid() && styles.errorError,
-            this.isValid() && styles.errorValid,
-            this.props.errorDotStyle,
-          ]}
-        />
-      );
-    }
-    return null;
-  }
+	renderErrorDot() {
+		if (this.props.required || this.props.hasError) {
+			return (
+				<View
+					style={[
+						styles.errorDot,
+						{ backgroundColor: this.props.colourBrandingMain },
+						!this.isValid() && styles.errorError,
+						this.isValid() && styles.errorValid,
+						this.props.errorDotStyle,
+					]}
+				/>
+			);
+		}
+		return null;
+	}
 
-  renderLabel() {
-    if (_.isEmpty(this.props.label)) {
-      return null;
-    }
-    return (
-      <View style={styles.labelContainer}>
-        <Text
-          style={[
-            styles.labelText,
-            this.state.focused && { color: this.props.colourBrandingMain },
-            !this.isValid() && !_.isEmpty(this.props.textValue) && styles.labelError,
-            this.props.labelStyle,
-          ]}
-        >
-          {this.props.label}
-        </Text>
-        {this.renderErrorDot()}
-      </View>
-    );
-  }
+	renderLabel() {
+		if (_.isEmpty(this.props.label)) {
+			return null;
+		}
+		return (
+			<View style={styles.labelContainer}>
+				<Text
+					style={[
+						styles.labelText,
+						this.state.focused && { color: this.props.colourBrandingMain },
+						!this.isValid() &&
+							!_.isEmpty(this.props.textValue) &&
+							styles.labelError,
+						this.props.labelStyle,
+					]}
+				>
+					{this.props.label}
+				</Text>
+				{this.renderErrorDot()}
+			</View>
+		);
+	}
 
-  renderInput() {
-    return (
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ flex: 1 }}>
-          <TextInput
-            value={this.props.textValue}
-            onChangeText={this.props.onChangeText}
-            keyboardType={this.props.keyboardType}
-            /* Main Styling Props */
-            selectionColor={this.props.colourBrandingDark}
-            placeholder={this.props.placeholder}
-            placeholderTextColor={this.props.placeholderTextColor || TEXT_LIGHTER}
-            style={[
-              styles.inputStyle,
-              {
-                textAlignVertical: this.props.autoGrow ? 'top' : 'center',
-                color: this.props.textColour || TEXT_DARK,
-                minHeight: this.props.minHeight || 20,
-              },
-              this.props.textStyle,
-            ]}
-            underlineColorAndroid={'rgba(0,0,0,0)'}
-            /* Other Props */
-            autoFocus={_.isUndefined(this.props.autoFocus) ? false : this.props.autoFocus}
-            editable={_.isUndefined(this.props.editable) ? true : this.props.editable}
-            secureTextEntry={_.isUndefined(this.props.secureTextEntry) ? false : this.showSecure()}
-            autoCorrect={_.isUndefined(this.props.autoCorrect) ? false : this.props.autoCorrect}
-            multiline={_.isUndefined(this.props.multiline) ? false : this.props.multiline}
-            autoGrow={_.isUndefined(this.props.autoGrow) ? false : this.props.autoGrow}
-            autoCapitalize={_.isUndefined(this.props.autoCapitalize) ? 'sentences' : this.props.autoCapitalize}
-            onContentSizeChange={this.onGrow.bind(this)}
-            /* Focus Props */
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-          />
-        </View>
-        {!_.isUndefined(this.props.secureTextToggle) && this.props.secureTextToggle && (
-          <TouchableOpacity onPress={this.toggleSecure.bind(this)}>
-            {/* <Icon
+	renderInput() {
+		return (
+			<View style={{ flexDirection: "row" }}>
+				<View style={{ flex: 1 }}>
+					<TextInput
+						maxFontSizeMultiplier={1.2}
+						value={this.props.textValue}
+						onChangeText={this.props.onChangeText}
+						keyboardType={this.props.keyboardType}
+						/* Main Styling Props */
+						selectionColor={this.props.colourBrandingDark}
+						placeholder={this.props.placeholder}
+						placeholderTextColor={
+							this.props.placeholderTextColor || TEXT_LIGHTER
+						}
+						style={[
+							styles.inputStyle,
+							{
+								textAlignVertical: this.props.autoGrow ? "top" : "center",
+								color: this.props.textColour || TEXT_DARK,
+								minHeight: this.props.minHeight || 20,
+							},
+							this.props.textStyle,
+						]}
+						underlineColorAndroid={"rgba(0,0,0,0)"}
+						/* Other Props */
+						autoFocus={
+							_.isUndefined(this.props.autoFocus) ? false : this.props.autoFocus
+						}
+						editable={
+							_.isUndefined(this.props.editable) ? true : this.props.editable
+						}
+						secureTextEntry={
+							_.isUndefined(this.props.secureTextEntry)
+								? false
+								: this.showSecure()
+						}
+						autoCorrect={
+							_.isUndefined(this.props.autoCorrect)
+								? false
+								: this.props.autoCorrect
+						}
+						multiline={
+							_.isUndefined(this.props.multiline) ? false : this.props.multiline
+						}
+						autoGrow={
+							_.isUndefined(this.props.autoGrow) ? false : this.props.autoGrow
+						}
+						autoCapitalize={
+							_.isUndefined(this.props.autoCapitalize)
+								? "sentences"
+								: this.props.autoCapitalize
+						}
+						onContentSizeChange={this.onGrow.bind(this)}
+						/* Focus Props */
+						onFocus={this.onFocus.bind(this)}
+						onBlur={this.onBlur.bind(this)}
+					/>
+				</View>
+				{!_.isUndefined(this.props.secureTextToggle) &&
+					this.props.secureTextToggle && (
+						<TouchableOpacity onPress={this.toggleSecure.bind(this)}>
+							{/* <Icon
                             name={this.state.isSecure ? 'eye' : 'eye-slash'}
                             type='font-awesome'
                             iconStyle={{ fontSize: 16, color: TEXT_MID, paddingLeft: 16 }}
                         /> */}
-            <Pl60Icon
-              name={this.state.isSecure ? 'show' : 'hide'}
-              style={{ fontSize: 21, lineHeight: 20, color: TEXT_LIGHT, paddingLeft: 16 }}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
+							<FontAwesome
+								name={this.state.isSecure ? "eye" : "eye-slash"}
+								style={{
+									fontSize: 21,
+									lineHeight: 20,
+									color: TEXT_LIGHT,
+									paddingLeft: 16,
+								}}
+							/>
+						</TouchableOpacity>
+					)}
+			</View>
+		);
+	}
 
-  renderContent() {
-    if (this.props.hasContent) {
-      return this.props.children;
-    }
-    if (this.props.pointerEvents) {
-      return <View pointerEvents={this.props.pointerEvents}>{this.renderInput()}</View>;
-    }
-    return this.renderInput();
-  }
+	renderContent() {
+		if (this.props.hasContent) {
+			return this.props.children;
+		}
+		if (this.props.pointerEvents) {
+			return (
+				<View pointerEvents={this.props.pointerEvents}>
+					{this.renderInput()}
+				</View>
+			);
+		}
+		return this.renderInput();
+	}
 
-  render() {
-    return (
-      <View>
-        <View
-          style={[
-            styles.sectionItem,
-            this.props.hasUnderline && styles.sectionItemUnderline,
-            this.state.focused && styles.inputFocus,
-            this.state.focused && { borderBottomColor: this.props.colourBrandingMain },
-            !this.isValid() && !_.isEmpty(this.props.textValue) && styles.inputError,
-            !_.isUndefined(this.props.showError) && this.props.showError === true && !this.isValid() && styles.inputError,
-            this.props.sectionStyle,
-          ]}
-        >
-          {this.renderLabel()}
-          <View>{this.renderContent()}</View>
-        </View>
-        {!_.isUndefined(this.props.showError) && this.props.showError === true && !this.isValid() && (
-          <Text style={styles.errorText}>{this.props.errorText}</Text>
-        )}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View>
+				<View
+					style={[
+						styles.sectionItem,
+						this.props.hasUnderline && styles.sectionItemUnderline,
+						this.state.focused && styles.inputFocus,
+						this.state.focused && {
+							borderBottomColor: this.props.colourBrandingMain,
+						},
+						!this.isValid() &&
+							!_.isEmpty(this.props.textValue) &&
+							styles.inputError,
+						!_.isUndefined(this.props.showError) &&
+							this.props.showError === true &&
+							!this.isValid() &&
+							styles.inputError,
+						this.props.sectionStyle,
+					]}
+				>
+					{this.renderLabel()}
+					<View>{this.renderContent()}</View>
+				</View>
+				{!_.isUndefined(this.props.showError) &&
+					this.props.showError === true &&
+					!this.isValid() && (
+						<Text style={styles.errorText}>{this.props.errorText}</Text>
+					)}
+			</View>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  sectionItem: {
-    paddingVertical: 16,
-    paddingHorizontal: 8,
-    borderBottomColor: LINEGREY,
-  },
-  sectionItemUnderline: {
-    borderBottomWidth: 1,
-  },
-  inputFocus: {
-    borderBottomWidth: 1,
-  },
-  inputError: {
-    borderBottomWidth: 1,
-    borderBottomColor: COLOUR_GRAPEFRUIT,
-  },
-  labelContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 6,
-  },
-  labelText: {
-    fontFamily: 'sf-regular',
-    fontSize: 13,
-    color: TEXT_LIGHT,
-  },
-  labelError: {
-    color: COLOUR_GRAPEFRUIT,
-  },
-  errorDot: {
-    height: 6,
-    width: 6,
-    borderRadius: 3,
-    marginLeft: 8,
-    marginBottom: 3,
-  },
-  errorError: {
-    backgroundColor: COLOUR_GRAPEFRUIT,
-  },
-  errorValid: {
-    backgroundColor: COLOUR_GREEN,
-  },
-  inputStyle: {
-    fontFamily: 'sf-regular',
-    fontSize: 17,
-    margin: 0,
-    padding: 0,
-  },
-  errorText: {
-    paddingTop: 8,
-    fontSize: 13,
-    fontFamily: 'sf-regular',
-    color: COLOUR_GRAPEFRUIT,
-  },
+	sectionItem: {
+		paddingVertical: 16,
+		paddingHorizontal: 8,
+		borderBottomColor: LINEGREY,
+	},
+	sectionItemUnderline: {
+		borderBottomWidth: 1,
+	},
+	inputFocus: {
+		borderBottomWidth: 1,
+	},
+	inputError: {
+		borderBottomWidth: 1,
+		borderBottomColor: COLOUR_GRAPEFRUIT,
+	},
+	labelContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginBottom: 6,
+	},
+	labelText: {
+		fontFamily: "sf-regular",
+		fontSize: 13,
+		color: TEXT_LIGHT,
+	},
+	labelError: {
+		color: COLOUR_GRAPEFRUIT,
+	},
+	errorDot: {
+		height: 6,
+		width: 6,
+		borderRadius: 3,
+		marginLeft: 8,
+		marginBottom: 3,
+	},
+	errorError: {
+		backgroundColor: COLOUR_GRAPEFRUIT,
+	},
+	errorValid: {
+		backgroundColor: COLOUR_GREEN,
+	},
+	inputStyle: {
+		fontFamily: "sf-regular",
+		fontSize: 17,
+		margin: 0,
+		padding: 0,
+	},
+	errorText: {
+		paddingTop: 8,
+		fontSize: 13,
+		fontFamily: "sf-regular",
+		color: COLOUR_GRAPEFRUIT,
+	},
 });
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-    colourBrandingDark: getDarkBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		colourBrandingDark: getDarkBrandingColourFromState(state),
+	};
 };
 
 const formCardSection = connect(mapStateToProps, {})(FormCardSection);