@plusscommunities/pluss-maintenance-app-forms 7.0.21 → 7.0.23-beta.0

package/src/screens/MaintenanceUserPicker.js

@@ -1,270 +1,107 @@
-import React, { Component } from "react";
-import _ from "lodash";
-import {
-	TouchableOpacity,
-	View,
-	ScrollView,
-	Text,
-	TextInput,
-} from "react-native";
-import { connect } from "react-redux";
-import { Icon } from "@rneui/themed";
-import { Services } from "../feature.config";
-import { Components, Colours, Fonts } from "../core.config";
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { TouchableOpacity, View, ScrollView, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { Icon } from '@rneui/themed';
+import { Services } from '../feature.config';
+import { Components, Colours } from '../core.config';
 
 class MaintenanceUserPicker extends Component {
-	state = {
-		currentUser: null,
-		searchText: "",
-		filteredUsers: [],
-	};
-
-	UNSAFE_componentWillMount() {
-		this.setState({
-			currentUser: this.props.currentUser,
-			filteredUsers: this.props.users || [],
-		});
-	}
-
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		if (nextProps.users !== this.props.users) {
-			this.setState({
-				filteredUsers: this.getFilteredUsers(
-					this.state.searchText,
-					nextProps.users,
-				),
-			});
-		}
-		if (nextProps.currentUser !== this.props.currentUser) {
-			this.setState({
-				currentUser: nextProps.currentUser,
-			});
-		}
-	}
-
-	onPressBack() {
-		Services.navigation.goBack();
-	}
-
-	onUserPress(user) {
-		this.props.onSelectUser(user);
-		this.setState({ currentUser: user });
-		setTimeout(() => {
-			this.onPressBack();
-		}, 200);
-	}
-
-	onChangeSearch = (text) => {
-		this.setState({
-			searchText: text,
-			filteredUsers: this.getFilteredUsers(text),
-		});
-	};
-
-	getFilteredUsers = (searchText, users) => {
-		const usersList = users || this.props.users || [];
-
-		if (!searchText || searchText.length === 0) {
-			return usersList;
-		}
-
-		if (!usersList || usersList.length === 0) {
-			return [];
-		}
-
-		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)
-			);
-		});
-	};
-
-	renderSearch = () => {
-		return (
-			<View style={styles.searchContainer}>
-				<Fonts.PlIcon name="nav-search" style={styles.searchIcon} />
-				<TextInput
-					placeholder="Search by name or unit"
-					autoCorrect={false}
-					placeholderTextColor={"rgba(60, 60, 80, .1)"}
-					onChangeText={this.onChangeSearch}
-					value={this.state.searchText}
-					style={styles.searchText}
-					underlineColorAndroid={"rgba(0,0,0,0)"}
-					returnKeyType="search"
-				/>
-				{this.state.searchText.length > 0 && (
-					<TouchableOpacity
-						onPress={() => this.onChangeSearch("")}
-						style={styles.clearButton}
-					>
-						<Icon
-							name="times-circle"
-							type="font-awesome"
-							iconStyle={styles.clearIcon}
-						/>
-					</TouchableOpacity>
-				)}
-			</View>
-		);
-	};
-
-	renderMain() {
-		if (_.isEmpty(this.props.users)) {
-			return (
-				<View style={{ marginTop: 16 }}>
-					<Components.Spinner />
-				</View>
-			);
-		}
-
-		return (
-			<Components.FormCard style={{ marginTop: 16 }}>
-				{this.renderOptions()}
-			</Components.FormCard>
-		);
-	}
-
-	renderOptions() {
-		const users = this.state.filteredUsers;
-
-		if (users.length === 0 && this.state.searchText.length > 0) {
-			return (
-				<View style={styles.noResultsContainer}>
-					<Text style={styles.noResultsText}>
-						No users found matching "{this.state.searchText}"
-					</Text>
-				</View>
-			);
-		}
-
-		return users.map((user, index) => {
-			return (
-				<TouchableOpacity
-					key={index}
-					onPress={this.onUserPress.bind(this, user)}
-				>
-					<Components.FormCardSection
-						label={user.displayName}
-						labelStyle={{ height: 0, margin: 0 }}
-						hasUnderline
-						hasContent
-					>
-						<View style={styles.rowContainer}>
-							<View style={styles.userContainer}>
-								<Components.ProfilePic
-									ProfilePic={user.profilePic}
-									Diameter={30}
-								/>
-								<Text style={styles.labelText}>{user.displayName}</Text>
-							</View>
-							<Icon
-								name="check-circle"
-								type="font-awesome"
-								iconStyle={[
-									{ color: "#d5d9e0", fontSize: 20 },
-									_.isEqual(user, this.state.currentUser) && {
-										color: Colours.COLOUR_GREEN,
-									},
-								]}
-							/>
-						</View>
-					</Components.FormCardSection>
-				</TouchableOpacity>
-			);
-		});
-	}
-
-	render() {
-		return (
-			<View style={styles.container}>
-				<Components.Header
-					leftIcon="angle-left"
-					onPressLeft={this.onPressBack.bind(this)}
-					text="Select user"
-				/>
-				{this.renderSearch()}
-				<ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
-			</View>
-		);
-	}
+  state = {
+    currentUser: null,
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState({ currentUser: this.props.currentUser });
+  }
+
+  onPressBack() {
+    Services.navigation.goBack();
+  }
+
+  onUserPress(user) {
+    this.props.onSelectUser(user);
+    this.setState({ currentUser: user });
+    setTimeout(() => {
+      this.onPressBack();
+    }, 200);
+  }
+
+  renderMain() {
+    if (_.isEmpty(this.props.users)) {
+      return (
+        <View style={{ marginTop: 16 }}>
+          <Components.Spinner />
+        </View>
+      );
+    }
+
+    return <Components.FormCard style={{ marginTop: 16 }}>{this.renderOptions()}</Components.FormCard>;
+  }
+
+  renderOptions() {
+    return this.props.users.map((user, index) => {
+      return (
+        <TouchableOpacity key={index} onPress={this.onUserPress.bind(this, user)}>
+          <Components.FormCardSection label={user.displayName} labelStyle={{ height: 0, margin: 0 }} hasUnderline hasContent>
+            <View style={styles.rowContainer}>
+              <View style={styles.userContainer}>
+                <Components.ProfilePic ProfilePic={user.profilePic} Diameter={30} />
+                <Text style={styles.labelText}>{user.displayName}</Text>
+              </View>
+              <Icon
+                name="check-circle"
+                type="font-awesome"
+                iconStyle={[{ color: '#d5d9e0', fontSize: 20 }, _.isEqual(user, this.state.currentUser) && { color: Colours.COLOUR_GREEN }]}
+              />
+            </View>
+          </Components.FormCardSection>
+        </TouchableOpacity>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack.bind(this)} text="Select user" />
+        <ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
+      </View>
+    );
+  }
 }
 
 const styles = {
-	container: {
-		flex: 1,
-		position: "relative",
-		backgroundColor: "#f0f0f5",
-	},
-	row: {
-		flexDirection: "row",
-		alignItems: "center",
-		minHeight: 22,
-	},
-	text: {
-		flex: 1,
-		fontFamily: "sf-regular",
-		fontSize: 14,
-		color: Colours.TEXT_DARK,
-	},
-	rowContainer: {
-		flexDirection: "row",
-		justifyContent: "space-between",
-	},
-	userContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-	},
-	labelText: {
-		fontFamily: "sf-medium",
-		fontSize: 16,
-		color: Colours.TEXT_DARK,
-		marginLeft: 8,
-	},
-	searchContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		paddingHorizontal: 16,
-		paddingVertical: 12,
-		backgroundColor: "#fff",
-		borderBottomWidth: 1,
-		borderBottomColor: "#f0f0f5",
-	},
-	searchIcon: {
-		fontSize: 20,
-		marginRight: 10,
-		color: "rgba(90, 90, 110, .5)",
-	},
-	searchText: {
-		flex: 1,
-		fontSize: 16,
-		fontFamily: "sf-regular",
-		color: Colours.TEXT_DARK,
-	},
-	clearButton: {
-		padding: 8,
-	},
-	clearIcon: {
-		fontSize: 18,
-		color: "rgba(90, 90, 110, .5)",
-	},
-	noResultsContainer: {
-		flex: 1,
-		alignItems: "center",
-		justifyContent: "center",
-		paddingVertical: 40,
-	},
-	noResultsText: {
-		fontSize: 16,
-		fontFamily: "sf-regular",
-		color: Colours.TEXT_LIGHT,
-		textAlign: "center",
-	},
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#f0f0f5',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 22,
+  },
+  text: {
+    flex: 1,
+    fontFamily: 'sf-regular',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  userContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  labelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    color: Colours.TEXT_DARK,
+    marginLeft: 8,
+  },
 };
 
 export default connect(null, {})(MaintenanceUserPicker);