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

package/src/components/GenericInputSection.js

@@ -1,176 +1,224 @@
-import React, { PureComponent } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
-import { Icon } from 'react-native-elements';
-import { connect } from 'react-redux';
-import { GenericInput } from './GenericInput';
-import { TEXT_DARKEST, COLOUR_GREEN, COLOUR_GRAPEFRUIT, getMainBrandingColourFromState } from '../colours';
-import { RadioButton } from './RadioButton';
+import React, { PureComponent } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Text } from "./Text";
+import { Icon } from "@rneui/themed";
+import { connect } from "react-redux";
+import { GenericInput } from "./GenericInput";
+import {
+	TEXT_DARKEST,
+	COLOUR_GREEN,
+	COLOUR_GRAPEFRUIT,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { RadioButton } from "./RadioButton";
 
 class GenericInputSection extends PureComponent {
-  renderValidationDot() {
-    if (!this.props.required) {
-      return null;
-    }
-    return <View style={[styles.validatorDot, this.props.isValid() ? styles.validatorTrue : styles.validatorFalse]} />;
-  }
+	renderValidationDot() {
+		if (!this.props.required) {
+			return null;
+		}
+		return (
+			<View
+				style={[
+					styles.validatorDot,
+					this.props.isValid() ? styles.validatorTrue : styles.validatorFalse,
+				]}
+			/>
+		);
+	}
 
-  renderLabel() {
-    if (!this.props.label) {
-      return null;
-    }
-    return (
-      <View style={styles.labelContainer}>
-        <Text style={[styles.labelText, this.props.labelStyle]}>{this.props.label}</Text>
-        {this.renderValidationDot()}
-      </View>
-    );
-  }
+	renderLabel() {
+		if (!this.props.label) {
+			return null;
+		}
+		return (
+			<View style={styles.labelContainer}>
+				<Text style={[styles.labelText, this.props.labelStyle]}>
+					{this.props.label}
+				</Text>
+				{this.renderValidationDot()}
+			</View>
+		);
+	}
 
-  renderRadioOption(label, value, isActive, onChange, style) {
-    return (
-      <TouchableOpacity
-        onPress={() => onChange(value)}
-        key={label}
-        style={[styles.radioOption, style]}
-        hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
-      >
-        <RadioButton onPress={() => onChange(value)} isActive={isActive} iconSize={22} style={styles.radioOptionButton} />
-        <Text style={styles.radioOptionText}>{label}</Text>
-      </TouchableOpacity>
-    );
-  }
+	renderRadioOption(label, value, isActive, onChange, style) {
+		return (
+			<TouchableOpacity
+				onPress={() => onChange(value)}
+				key={label}
+				style={[styles.radioOption, style]}
+				hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
+			>
+				<RadioButton
+					onPress={() => onChange(value)}
+					isActive={isActive}
+					iconSize={22}
+					style={styles.radioOptionButton}
+				/>
+				<Text style={styles.radioOptionText}>{label}</Text>
+			</TouchableOpacity>
+		);
+	}
 
-  renderInput() {
-    if (this.props.children) {
-      return this.props.children;
-    }
-    if (this.props.inputType === 'toggle') {
-      return (
-        <View style={styles.radioOptionsContainer}>
-          {this.renderRadioOption('Yes', true, this.props.value === true, this.props.onChange)}
-          {this.renderRadioOption('No', false, this.props.value === false, this.props.onChange)}
-        </View>
-      );
-    }
-    if (this.props.inputType === 'radio') {
-      return (
-        <View>
-          {this.props.options.map(o => {
-            return this.renderRadioOption(o.Label, o.Value, this.props.value === o.Value, this.props.onChange, styles.radioOptionVertical);
-          })}
-        </View>
-      );
-    }
-    if (this.props.inputType === 'optionSelector') {
-      return (
-        <TouchableOpacity onPress={this.props.onPress}>
-          <View style={styles.optionSelector}>
-            <Text style={styles.optionSelectorText}>{this.props.value}</Text>
-            <Icon
-              name="angle-right"
-              type="font-awesome"
-              iconStyle={[styles.optionSelectorIcon, { color: this.props.colourBrandingMain }]}
-            />
-          </View>
-        </TouchableOpacity>
-      );
-    }
-    return <GenericInput {...this.props} containerStyle={[styles.input, this.props.containerStyle]} />;
-  }
+	renderInput() {
+		if (this.props.children) {
+			return this.props.children;
+		}
+		if (this.props.inputType === "toggle") {
+			return (
+				<View style={styles.radioOptionsContainer}>
+					{this.renderRadioOption(
+						"Yes",
+						true,
+						this.props.value === true,
+						this.props.onChange,
+					)}
+					{this.renderRadioOption(
+						"No",
+						false,
+						this.props.value === false,
+						this.props.onChange,
+					)}
+				</View>
+			);
+		}
+		if (this.props.inputType === "radio") {
+			return (
+				<View>
+					{this.props.options.map((o) => {
+						return this.renderRadioOption(
+							o.Label,
+							o.Value,
+							this.props.value === o.Value,
+							this.props.onChange,
+							styles.radioOptionVertical,
+						);
+					})}
+				</View>
+			);
+		}
+		if (this.props.inputType === "optionSelector") {
+			return (
+				<TouchableOpacity onPress={this.props.onPress}>
+					<View style={styles.optionSelector}>
+						<Text style={styles.optionSelectorText}>{this.props.value}</Text>
+						<Icon
+							name="angle-right"
+							type="font-awesome"
+							iconStyle={[
+								styles.optionSelectorIcon,
+								{ color: this.props.colourBrandingMain },
+							]}
+						/>
+					</View>
+				</TouchableOpacity>
+			);
+		}
+		return (
+			<GenericInput
+				{...this.props}
+				containerStyle={[styles.input, this.props.containerStyle]}
+			/>
+		);
+	}
 
-  renderError() {
-    if (this.props.showError === true && !this.props.isValid()) {
-      return <Text style={styles.errorText}>{this.props.errorText || 'Required'}</Text>;
-    }
-    return null;
-  }
+	renderError() {
+		if (this.props.showError === true && !this.props.isValid()) {
+			return (
+				<Text style={styles.errorText}>
+					{this.props.errorText || "Required"}
+				</Text>
+			);
+		}
+		return null;
+	}
 
-  render() {
-    return (
-      <View style={[styles.container, this.props.sectionStyle]}>
-        {this.renderLabel()}
-        {this.renderInput()}
-        {this.renderError()}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View style={[styles.container, this.props.sectionStyle]}>
+				{this.renderLabel()}
+				{this.renderInput()}
+				{this.renderError()}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {},
-  labelContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  labelText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    color: TEXT_DARKEST,
-  },
-  input: {
-    marginTop: 8,
-  },
-  validatorDot: {
-    height: 6,
-    width: 6,
-    borderRadius: 3,
-    marginLeft: 8,
-  },
-  validatorTrue: {
-    backgroundColor: COLOUR_GREEN,
-  },
-  validatorFalse: {
-    backgroundColor: COLOUR_GRAPEFRUIT,
-  },
-  radioOptionsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  radioOptionVertical: {
-    marginTop: 16,
-  },
-  radioOption: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 24,
-  },
-  radioOptionButton: {
-    marginRight: 8,
-  },
-  radioOptionText: {
-    fontFamily: 'sf-medium',
-    fontSize: 14,
-    color: TEXT_DARKEST,
-  },
-  optionSelector: {
-    marginTop: 8,
-    flex: 1,
-    height: 36,
-    backgroundColor: '#ebeff2',
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    borderRadius: 5,
-    paddingHorizontal: 8,
-  },
-  optionSelectorText: {
-    color: TEXT_DARKEST,
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-  },
-  errorText: {
-    paddingTop: 4,
-    fontSize: 13,
-    fontFamily: 'sf-regular',
-    color: COLOUR_GRAPEFRUIT,
-  },
+	container: {},
+	labelContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	labelText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: TEXT_DARKEST,
+	},
+	input: {
+		marginTop: 8,
+	},
+	validatorDot: {
+		height: 6,
+		width: 6,
+		borderRadius: 3,
+		marginLeft: 8,
+	},
+	validatorTrue: {
+		backgroundColor: COLOUR_GREEN,
+	},
+	validatorFalse: {
+		backgroundColor: COLOUR_GRAPEFRUIT,
+	},
+	radioOptionsContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginTop: 8,
+	},
+	radioOptionVertical: {
+		marginTop: 16,
+	},
+	radioOption: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginRight: 24,
+	},
+	radioOptionButton: {
+		marginRight: 8,
+	},
+	radioOptionText: {
+		fontFamily: "sf-medium",
+		fontSize: 14,
+		color: TEXT_DARKEST,
+	},
+	optionSelector: {
+		marginTop: 8,
+		flex: 1,
+		height: 36,
+		backgroundColor: "#ebeff2",
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		borderRadius: 5,
+		paddingHorizontal: 8,
+	},
+	optionSelectorText: {
+		color: TEXT_DARKEST,
+		fontFamily: "sf-regular",
+		fontSize: 16,
+	},
+	errorText: {
+		paddingTop: 4,
+		fontSize: 13,
+		fontFamily: "sf-regular",
+		color: COLOUR_GRAPEFRUIT,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const genericInputSection = connect(mapStateToProps, {})(GenericInputSection);