@plusscommunities/pluss-maintenance-app 8.0.6 → 8.0.7-beta.0

package/src/screens/MaintenanceUserPicker.js

@@ -1,107 +1,131 @@
-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';
+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,
-  };
+	state = {
+		currentUser: null,
+	};
 
-  UNSAFE_componentWillMount() {
-    this.setState({ currentUser: this.props.currentUser });
-  }
+	UNSAFE_componentWillMount() {
+		this.setState({ currentUser: this.props.currentUser });
+	}
 
-  onPressBack() {
-    Services.navigation.goBack();
-  }
+	onPressBack() {
+		Services.navigation.goBack();
+	}
 
-  onUserPress(user) {
-    this.props.onSelectUser(user);
-    this.setState({ currentUser: user });
-    setTimeout(() => {
-      this.onPressBack();
-    }, 200);
-  }
+	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>
-      );
-    }
+	renderMain() {
+		if (_.isEmpty(this.props.users)) {
+			return (
+				<View style={{ marginTop: 16 }}>
+					<Components.Spinner />
+				</View>
+			);
+		}
 
-    return <Components.FormCard style={{ marginTop: 16 }}>{this.renderOptions()}</Components.FormCard>;
-  }
+		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>
-      );
-    });
-  }
+	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>
-    );
-  }
+	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,
-  },
+	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);