@plusscommunities/pluss-maintenance-app 6.0.21-beta.0 → 6.0.22-beta.0

package/src/screens/MaintenanceUserPicker.js

@@ -1,6 +1,12 @@
 import React, { Component } from "react";
 import _ from "lodash";
-import { TouchableOpacity, View, ScrollView, Text, TextInput } from "react-native";
+import {
+	TouchableOpacity,
+	View,
+	ScrollView,
+	Text,
+	TextInput,
+} from "react-native";
 import { connect } from "react-redux";
 import { Icon } from "react-native-elements";
 import { Services } from "../feature.config";
@@ -9,26 +15,29 @@ import { Components, Colours, Fonts } from "../core.config";
 class MaintenanceUserPicker extends Component {
 	state = {
 		currentUser: null,
-		searchText: '',
-		filteredUsers: []
+		searchText: "",
+		filteredUsers: [],
 	};
 
 	UNSAFE_componentWillMount() {
 		this.setState({
 			currentUser: this.props.currentUser,
-			filteredUsers: this.props.users || []
+			filteredUsers: this.props.users || [],
 		});
 	}
 
 	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (nextProps.users !== this.props.users) {
 			this.setState({
-				filteredUsers: this.getFilteredUsers(this.state.searchText, nextProps.users)
+				filteredUsers: this.getFilteredUsers(
+					this.state.searchText,
+					nextProps.users,
+				),
 			});
 		}
 		if (nextProps.currentUser !== this.props.currentUser) {
 			this.setState({
-				currentUser: nextProps.currentUser
+				currentUser: nextProps.currentUser,
 			});
 		}
 	}
@@ -48,9 +57,9 @@ class MaintenanceUserPicker extends Component {
 	onChangeSearch = (text) => {
 		this.setState({
 			searchText: text,
-			filteredUsers: this.getFilteredUsers(text)
+			filteredUsers: this.getFilteredUsers(text),
 		});
-	}
+	};
 
 	getFilteredUsers = (searchText, users) => {
 		const usersList = users || this.props.users || [];
@@ -63,33 +72,35 @@ class MaintenanceUserPicker extends Component {
 			return [];
 		}
 
-		return usersList.filter(user => {
-			const displayName = user.displayName || '';
-			const unit = user.unit || '';
+		return usersList.filter((user) => {
+			const displayName = user.displayName || "";
+			const unit = user.unit || "";
 			const searchLower = searchText.toLowerCase();
 
-			return displayName.toLowerCase().includes(searchLower) ||
-				unit.toLowerCase().includes(searchLower);
+			return (
+				displayName.toLowerCase().includes(searchLower) ||
+				unit.toLowerCase().includes(searchLower)
+			);
 		});
-	}
+	};
 
 	renderSearch = () => {
 		return (
 			<View style={styles.searchContainer}>
 				<Fonts.PlIcon name="nav-search" style={styles.searchIcon} />
 				<TextInput
-					placeholder='Search by name or unit'
+					placeholder="Search by name or unit"
 					autoCorrect={false}
-					placeholderTextColor={'rgba(60, 60, 80, .1)'}
+					placeholderTextColor={"rgba(60, 60, 80, .1)"}
 					onChangeText={this.onChangeSearch}
 					value={this.state.searchText}
 					style={styles.searchText}
-					underlineColorAndroid={'rgba(0,0,0,0)'}
+					underlineColorAndroid={"rgba(0,0,0,0)"}
 					returnKeyType="search"
 				/>
 				{this.state.searchText.length > 0 && (
 					<TouchableOpacity
-						onPress={() => this.onChangeSearch('')}
+						onPress={() => this.onChangeSearch("")}
 						style={styles.clearButton}
 					>
 						<Icon
@@ -101,7 +112,7 @@ class MaintenanceUserPicker extends Component {
 				)}
 			</View>
 		);
-	}
+	};
 
 	renderMain() {
 		if (_.isEmpty(this.props.users)) {
@@ -216,44 +227,44 @@ const styles = {
 		marginLeft: 8,
 	},
 	searchContainer: {
-		flexDirection: 'row',
-		alignItems: 'center',
+		flexDirection: "row",
+		alignItems: "center",
 		paddingHorizontal: 16,
 		paddingVertical: 12,
-		backgroundColor: '#fff',
+		backgroundColor: "#fff",
 		borderBottomWidth: 1,
-		borderBottomColor: '#f0f0f5'
+		borderBottomColor: "#f0f0f5",
 	},
 	searchIcon: {
 		fontSize: 20,
 		marginRight: 10,
-		color: 'rgba(90, 90, 110, .5)'
+		color: "rgba(90, 90, 110, .5)",
 	},
 	searchText: {
 		flex: 1,
 		fontSize: 16,
-		fontFamily: 'sf-regular',
-		color: Colours.TEXT_DARK
+		fontFamily: "sf-regular",
+		color: Colours.TEXT_DARK,
 	},
 	clearButton: {
-		padding: 8
+		padding: 8,
 	},
 	clearIcon: {
 		fontSize: 18,
-		color: 'rgba(90, 90, 110, .5)'
+		color: "rgba(90, 90, 110, .5)",
 	},
 	noResultsContainer: {
 		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-		paddingVertical: 40
+		alignItems: "center",
+		justifyContent: "center",
+		paddingVertical: 40,
 	},
 	noResultsText: {
 		fontSize: 16,
-		fontFamily: 'sf-regular',
+		fontFamily: "sf-regular",
 		color: Colours.TEXT_LIGHT,
-		textAlign: 'center'
-	}
+		textAlign: "center",
+	},
 };
 
 export default connect(null, {})(MaintenanceUserPicker);