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

package/src/components/GenericInput.js

@@ -1,149 +1,181 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { TextInput, View, TouchableWithoutFeedback } from 'react-native';
-import { Icon } from '@rneui/themed';
-import { TEXT_LIGHT, TEXT_DARK, TEXT_DARKEST } from '../colours';
-import { Pl60Icon } from '../fonts';
+import React, { Component } from "react";
+import _ from "lodash";
+import { TextInput, View, TouchableWithoutFeedback } from "react-native";
+import { Text } from ".";
+import { Icon } from "@rneui/themed";
+import { TEXT_LIGHT, TEXT_DARK, TEXT_DARKEST } from "../colours";
+import { FontAwesome } from "./Icon";
 
 class GenericInput extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showSecureText: false,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			showSecureText: false,
+		};
+		this.inputRef = React.createRef();
+	}
 
-  blur() {
-    this.refs.input.blur();
-  }
+	blur() {
+		this.inputRef.current.blur();
+	}
 
-  toggleSecureText() {
-    this.setState({
-      showSecureText: !this.state.showSecureText,
-    });
-  }
+	toggleSecureText() {
+		this.setState({
+			showSecureText: !this.state.showSecureText,
+		});
+	}
 
-  renderLeftIcon() {
-    if (!this.props.icon) {
-      return null;
-    }
-    if (this.props.iconType && this.props.iconType === 'pl60') {
-      return <Pl60Icon name={this.props.icon} style={styles.searchIcon} />;
-    }
-    return <Icon type="font-awesome" name={this.props.icon} iconStyle={styles.searchIcon} />;
-  }
+	renderLeftIcon() {
+		if (!this.props.icon) {
+			return null;
+		}
+		if (this.props.iconType && this.props.iconType === "pl60") {
+			return <FontAwesome name={this.props.icon} style={styles.searchIcon} />;
+		}
+		return (
+			<Icon
+				type="font-awesome"
+				name={this.props.icon}
+				iconStyle={styles.searchIcon}
+			/>
+		);
+	}
 
-  renderRightIcon() {
-    if (this.props.secureTextEntry) {
-      return (
-        <TouchableWithoutFeedback onPress={this.toggleSecureText.bind(this)}>
-          <Pl60Icon name={this.state.showSecureText ? 'hide' : 'show'} style={[styles.clearIcon, styles.secureIcon]} />
-        </TouchableWithoutFeedback>
-      );
-    }
-    if (this.props.rightIcon) {
-      if (this.props.rightIconAction) {
-        return (
-          <TouchableWithoutFeedback onPress={this.props.rightIconAction}>
-            <Icon type="font-awesome" name={this.props.rightIcon} iconStyle={styles.clearIcon} />
-          </TouchableWithoutFeedback>
-        );
-      }
-      return <Icon type="font-awesome" name={this.props.rightIcon} iconStyle={styles.clearIcon} />;
-    }
-    if (this.props.hasClear && !_.isEmpty(this.props.value)) {
-      return (
-        <TouchableWithoutFeedback
-          onPress={() => {
-            this.props.onChangeText('');
-          }}
-        >
-          <Pl60Icon name="clear" style={styles.clearIcon} />
-        </TouchableWithoutFeedback>
-      );
-    }
-    return null;
-  }
+	renderRightIcon() {
+		if (this.props.secureTextEntry) {
+			return (
+				<TouchableWithoutFeedback onPress={this.toggleSecureText.bind(this)}>
+					<FontAwesome
+						name={this.state.showSecureText ? "eye-slash" : "eye"}
+						style={[styles.clearIcon, styles.secureIcon]}
+					/>
+				</TouchableWithoutFeedback>
+			);
+		}
+		if (this.props.rightIcon) {
+			if (this.props.rightIconAction) {
+				return (
+					<TouchableWithoutFeedback onPress={this.props.rightIconAction}>
+						<Icon
+							type="font-awesome"
+							name={this.props.rightIcon}
+							iconStyle={styles.clearIcon}
+						/>
+					</TouchableWithoutFeedback>
+				);
+			}
+			return (
+				<Icon
+					type="font-awesome"
+					name={this.props.rightIcon}
+					iconStyle={styles.clearIcon}
+				/>
+			);
+		}
+		if (this.props.hasClear && !_.isEmpty(this.props.value)) {
+			return (
+				<TouchableWithoutFeedback
+					onPress={() => {
+						this.props.onChangeText("");
+					}}
+				>
+					<FontAwesome name="circle-x" style={styles.clearIcon} />
+				</TouchableWithoutFeedback>
+			);
+		}
+		return null;
+	}
 
-  render() {
-    return (
-      <View
-        style={[
-          styles.searchInputContainer,
-          this.props.squaredCorners && styles.squaredSearchInputContainer,
-          this.props.autoGrow ? { paddingVertical: 8, minHeight: 40 } : { height: 36 },
-          this.props.containerStyle,
-        ]}
-      >
-        {this.renderLeftIcon()}
-        <TextInput
-          ref="input"
-          placeholder={this.props.placeholder}
-          placeholderTextColor={TEXT_LIGHT}
-          autoCorrect={this.props.autoCorrect != null ? this.props.autoCorrect : false}
-          autoFocus={this.props.autoFocus != null ? this.props.autoFocus : false}
-          autoGrow={this.props.autoGrow != null ? this.props.autoGrow : false}
-          multiline={this.props.multiline != null ? this.props.multiline : false}
-          style={[
-            styles.searchText,
-            this.props.style,
-            { textAlignVertical: this.props.multiline ? 'top' : 'center' },
-            this.props.minHeight && { minHeight: this.props.minHeight },
-          ]}
-          value={this.props.value}
-          onChangeText={this.props.onChangeText}
-          keyboardType={this.props.keyboardType}
-          returnKeyType={this.props.returnKeyType}
-          selectionColor={TEXT_DARK}
-          underlineColorAndroid="rgba(0,0,0,0)"
-          editable={this.props.editable != null ? this.props.editable : true}
-          autoCapitalize={this.props.autoCapitalize || 'none'}
-          onKeyPress={this.props.onKeyPress}
-          onSubmitEditing={this.props.onSubmitEditing}
-          onFocus={this.props.onFocus}
-          onBlur={this.props.onBlur}
-          secureTextEntry={this.props.secureTextEntry && !this.state.showSecureText}
-        />
-        {this.renderRightIcon()}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View
+				style={[
+					styles.searchInputContainer,
+					this.props.squaredCorners && styles.squaredSearchInputContainer,
+					this.props.autoGrow
+						? { paddingVertical: 8, minHeight: 40 }
+						: { height: 36 },
+					this.props.containerStyle,
+				]}
+			>
+				{this.renderLeftIcon()}
+				<TextInput
+					maxFontSizeMultiplier={1.2}
+					ref={this.inputRef}
+					placeholder={this.props.placeholder}
+					placeholderTextColor={TEXT_LIGHT}
+					autoCorrect={
+						this.props.autoCorrect != null ? this.props.autoCorrect : false
+					}
+					autoFocus={
+						this.props.autoFocus != null ? this.props.autoFocus : false
+					}
+					autoGrow={this.props.autoGrow != null ? this.props.autoGrow : false}
+					multiline={
+						this.props.multiline != null ? this.props.multiline : false
+					}
+					style={[
+						styles.searchText,
+						this.props.style,
+						{ textAlignVertical: this.props.multiline ? "top" : "center" },
+						this.props.minHeight && { minHeight: this.props.minHeight },
+					]}
+					value={this.props.value}
+					onChangeText={this.props.onChangeText}
+					keyboardType={this.props.keyboardType}
+					returnKeyType={this.props.returnKeyType}
+					selectionColor={TEXT_DARK}
+					underlineColorAndroid="rgba(0,0,0,0)"
+					editable={this.props.editable != null ? this.props.editable : true}
+					autoCapitalize={this.props.autoCapitalize || "none"}
+					onKeyPress={this.props.onKeyPress}
+					onSubmitEditing={this.props.onSubmitEditing}
+					onFocus={this.props.onFocus}
+					onBlur={this.props.onBlur}
+					secureTextEntry={
+						this.props.secureTextEntry && !this.state.showSecureText
+					}
+				/>
+				{this.renderRightIcon()}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  searchInputContainer: {
-    flex: 1,
-    borderRadius: 25,
-    backgroundColor: '#ebeff2',
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-  },
-  squaredSearchInputContainer: {
-    borderRadius: 5,
-    paddingHorizontal: 8,
-  },
-  searchIcon: {
-    fontSize: 14,
-    color: TEXT_LIGHT,
-    marginRight: 8,
-  },
-  clearIcon: {
-    fontSize: 14,
-    color: TEXT_LIGHT,
-    marginLeft: 8,
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  secureIcon: {
-    fontSize: 20,
-  },
-  searchText: {
-    color: TEXT_DARKEST,
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-    flex: 1,
-  },
+	searchInputContainer: {
+		flex: 1,
+		borderRadius: 25,
+		backgroundColor: "#ebeff2",
+		alignItems: "center",
+		flexDirection: "row",
+		paddingHorizontal: 16,
+	},
+	squaredSearchInputContainer: {
+		borderRadius: 5,
+		paddingHorizontal: 8,
+	},
+	searchIcon: {
+		fontSize: 14,
+		color: TEXT_LIGHT,
+		marginRight: 8,
+	},
+	clearIcon: {
+		fontSize: 14,
+		color: TEXT_LIGHT,
+		marginLeft: 8,
+		marginTop: 8,
+		marginBottom: 8,
+	},
+	secureIcon: {
+		fontSize: 20,
+	},
+	searchText: {
+		color: TEXT_DARKEST,
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		flex: 1,
+	},
 };
 
 export { GenericInput };