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

package/src/components/TickIcon.js

@@ -1,25 +1,25 @@
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
-import stylez from '../styles';
-import { Pl60Icon } from '../fonts';
+import React, { PureComponent } from "react";
+import { View } from "react-native";
+import stylez from "../styles";
+import { FontAwesome } from "./Icon";
 
 class TickIcon extends PureComponent {
-  render() {
-    const size = this.props.diameter || 20;
-    const radius = size / 2;
-    return (
-      <View
-        style={[
-          stylez.tickBox,
-          { height: size, width: size, borderRadius: radius },
-          this.props.color && { backgroundColor: this.props.color },
-          this.props.style,
-        ]}
-      >
-        <Pl60Icon name="tick" style={stylez.tickIcon} />
-      </View>
-    );
-  }
+	render() {
+		const size = this.props.diameter || 20;
+		const radius = size / 2;
+		return (
+			<View
+				style={[
+					stylez.tickBox,
+					{ height: size, width: size, borderRadius: radius },
+					this.props.color && { backgroundColor: this.props.color },
+					this.props.style,
+				]}
+			>
+				<FontAwesome name="check" style={stylez.tickIcon} />
+			</View>
+		);
+	}
 }
 
 export { TickIcon };

package/src/components/Toggle.js

@@ -1,83 +1,84 @@
-import React, { PureComponent } from 'react';
-import { Text, View, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
-import { getMainBrandingColourFromState } from '../colours';
+import React, { PureComponent } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import { getMainBrandingColourFromState } from "../colours";
 
 class Toggle extends PureComponent {
-  render() {
-    return (
-      <View style={[styles.container, this.props.style]}>
-        {this.props.options.map((option, index) => {
-          return (
-            <TouchableOpacity
-              onPress={() => {
-                this.props.onPress(option);
-              }}
-              style={[
-                styles.tag,
-                { borderColor: this.props.colourBrandingMain },
-                option.val === this.props.activeVal && {
-                  borderColor: this.props.colourBrandingMain,
-                  backgroundColor: this.props.colourBrandingMain,
-                },
-                index === 0 && styles.firstTag,
-                index === this.props.options.length - 1 && styles.lastTag,
-                this.props.tagStyle,
-              ]}
-              key={option.val}
-            >
-              <Text
-                style={[
-                  styles.text,
-                  { color: this.props.colourBrandingMain },
-                  option.val === this.props.activeVal && styles.activeText,
-                  this.props.textStyle,
-                ]}
-              >
-                {option.text}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View style={[styles.container, this.props.style]}>
+				{this.props.options.map((option, index) => {
+					return (
+						<TouchableOpacity
+							onPress={() => {
+								this.props.onPress(option);
+							}}
+							style={[
+								styles.tag,
+								{ borderColor: this.props.colourBrandingMain },
+								option.val === this.props.activeVal && {
+									borderColor: this.props.colourBrandingMain,
+									backgroundColor: this.props.colourBrandingMain,
+								},
+								index === 0 && styles.firstTag,
+								index === this.props.options.length - 1 && styles.lastTag,
+								this.props.tagStyle,
+							]}
+							key={option.val}
+						>
+							<Text
+								style={[
+									styles.text,
+									{ color: this.props.colourBrandingMain },
+									option.val === this.props.activeVal && styles.activeText,
+									this.props.textStyle,
+								]}
+							>
+								{option.text}
+							</Text>
+						</TouchableOpacity>
+					);
+				})}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    flexDirection: 'row',
-  },
-  text: {
-    fontFamily: 'sf-semibold',
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  activeText: {
-    color: '#fff',
-  },
-  tag: {
-    flex: 1,
-    height: 34,
-    borderWidth: 1,
-    borderLeftWidth: 0,
-    justifyContent: 'center',
-  },
-  firstTag: {
-    borderLeftWidth: 1,
-    borderTopLeftRadius: 4,
-    borderBottomLeftRadius: 4,
-  },
-  lastTag: {
-    borderTopRightRadius: 4,
-    borderBottomRightRadius: 4,
-  },
+	container: {
+		flexDirection: "row",
+	},
+	text: {
+		fontFamily: "sf-semibold",
+		fontSize: 14,
+		textAlign: "center",
+	},
+	activeText: {
+		color: "#fff",
+	},
+	tag: {
+		flex: 1,
+		height: 34,
+		borderWidth: 1,
+		borderLeftWidth: 0,
+		justifyContent: "center",
+	},
+	firstTag: {
+		borderLeftWidth: 1,
+		borderTopLeftRadius: 4,
+		borderBottomLeftRadius: 4,
+	},
+	lastTag: {
+		borderTopRightRadius: 4,
+		borderBottomRightRadius: 4,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const toggle = connect(mapStateToProps, {})(Toggle);

package/src/components/TouchableSearchBar.js

@@ -1,61 +1,79 @@
-import React, { Component } from 'react';
-import { View, TouchableWithoutFeedback, Text } from 'react-native';
-import { connect } from 'react-redux';
-import { getSiteSettingFromState } from '../helper';
-import { TEXT_LIGHT, BOXGREY } from '../colours';
-import { Pl60Icon } from '../fonts';
-import Config, { Services } from '../config';
+import React, { Component } from "react";
+import { View, TouchableWithoutFeedback } from "react-native";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import { getSiteSettingFromState } from "../helper";
+import { TEXT_LIGHT, BOXGREY } from "../colours";
+import { FontAwesome } from "./Icon";
+import Config, { Services } from "../config";
 
 class TouchableSearchBar extends Component {
-  onPressSearch = () => {
-    Services.navigation.navigate('search', { priorityType: this.props.priorityType, searchName: this.props.searchName });
-  };
+	onPressSearch = () => {
+		Services.navigation.navigate("search", {
+			priorityType: this.props.priorityType,
+			searchName: this.props.searchName,
+		});
+	};
 
-  render() {
-    return (
-      <TouchableWithoutFeedback onPress={this.onPressSearch}>
-        <View style={[styles.searchInputContainer, this.props.headerType !== 'white' && { backgroundColor: '#fff' }, this.props.style]}>
-          <Pl60Icon name="Ellipse" style={styles.searchIcon} />
-          <Text style={styles.searchText}>{`Search ${this.props.searchName}`}</Text>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
+	render() {
+		return (
+			<TouchableWithoutFeedback onPress={this.onPressSearch}>
+				<View
+					style={[
+						styles.searchInputContainer,
+						this.props.headerType !== "white" && { backgroundColor: "#fff" },
+						this.props.style,
+					]}
+				>
+					<FontAwesome name="magnifying-glass" style={styles.searchIcon} />
+					<Text
+						style={styles.searchText}
+					>{`Search ${this.props.searchName}`}</Text>
+				</View>
+			</TouchableWithoutFeedback>
+		);
+	}
 }
 
 const styles = {
-  searchInputContainer: {
-    flex: 1,
-    height: 36,
-    marginHorizontal: 16,
-    marginVertical: 17,
-    borderRadius: 25,
-    backgroundColor: BOXGREY,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-  },
-  searchIcon: {
-    fontSize: 14,
-    color: TEXT_LIGHT,
-    marginRight: 8,
-  },
-  searchText: {
-    fontSize: 14,
-    color: TEXT_LIGHT,
-    fontFamily: 'sf-medium',
-  },
+	searchInputContainer: {
+		flex: 1,
+		height: 36,
+		marginHorizontal: 16,
+		marginVertical: 17,
+		borderRadius: 25,
+		backgroundColor: BOXGREY,
+		alignItems: "center",
+		justifyContent: "center",
+		flexDirection: "row",
+		paddingHorizontal: 16,
+	},
+	searchIcon: {
+		fontSize: 14,
+		color: TEXT_LIGHT,
+		marginRight: 8,
+	},
+	searchText: {
+		fontSize: 14,
+		color: TEXT_LIGHT,
+		fontFamily: "sf-medium",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    headerType: getSiteSettingFromState(
-      state,
-      'HeaderType',
-      getSiteSettingFromState(state, 'UseGradientHeader', Config.env.hasGradientHeader) ? 'gradient' : 'white',
-    ),
-  };
+const mapStateToProps = (state) => {
+	return {
+		headerType: getSiteSettingFromState(
+			state,
+			"HeaderType",
+			getSiteSettingFromState(
+				state,
+				"UseGradientHeader",
+				Config.env.hasGradientHeader,
+			)
+				? "gradient"
+				: "white",
+		),
+	};
 };
 
 const touchableSearchBar = connect(mapStateToProps, {})(TouchableSearchBar);

package/src/components/UserListPopup.js

@@ -1,139 +1,176 @@
-import React, { Component } from 'react';
-import { Text, View, Dimensions, Modal, ScrollView, TouchableWithoutFeedback, Platform } from 'react-native';
-import { connect } from 'react-redux';
-import { TEXT_DARK, LINEGREY, getMainBrandingColourFromState } from '../colours';
-import UserListing from './UserListing';
-import { InlineButton } from './InlineButton';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	View,
+	Dimensions,
+	Modal,
+	ScrollView,
+	TouchableWithoutFeedback,
+	Platform,
+} from "react-native";
+import { connect } from "react-redux";
+import {
+	TEXT_DARK,
+	LINEGREY,
+	getMainBrandingColourFromState,
+} from "../colours";
+import UserListing from "./UserListing";
+import { InlineButton } from "./InlineButton";
 
-const SCREEN_HEIGHT = Dimensions.get('window').height;
+const SCREEN_HEIGHT = Dimensions.get("window").height;
 
 class UserListPopup extends Component {
-  getRenderKey(user, userKey) {
-    if (user.id) {
-      return `${user.id}${userKey}`;
-    }
-    if (user.userId) {
-      return `${user.userId}${userKey}`;
-    }
-    return userKey;
-  }
+	getRenderKey(user, userKey) {
+		if (user.id) {
+			return `${user.id}${userKey}`;
+		}
+		if (user.userId) {
+			return `${user.userId}${userKey}`;
+		}
+		return userKey;
+	}
 
-  renderHeader() {
-    return (
-      <View style={styles.titleContainer}>
-        <View style={styles.titleContent}>
-          <Text style={styles.title}>{this.props.title}</Text>
-        </View>
-      </View>
-    );
-  }
+	renderHeader() {
+		return (
+			<View style={styles.titleContainer}>
+				<View style={styles.titleContent}>
+					<Text style={styles.title}>{this.props.title}</Text>
+				</View>
+			</View>
+		);
+	}
 
-  renderScrollContainer() {
-    return (
-      <ScrollView style={styles.optionsContainer} keyboardShouldPersistTaps="handled">
-        {this.props.users.map((user, userIndex) => {
-          return <UserListing user={user} key={this.getRenderKey(user, userIndex)} index={userIndex} />;
-        })}
-        <View style={styles.scrollFooterSpace} />
-      </ScrollView>
-    );
-  }
+	renderScrollContainer() {
+		return (
+			<ScrollView
+				style={styles.optionsContainer}
+				keyboardShouldPersistTaps="handled"
+			>
+				{this.props.users.map((user, userIndex) => {
+					return (
+						<UserListing
+							user={user}
+							key={this.getRenderKey(user, userIndex)}
+							index={userIndex}
+						/>
+					);
+				})}
+				<View style={styles.scrollFooterSpace} />
+			</ScrollView>
+		);
+	}
 
-  renderFooter() {
-    return (
-      <View style={styles.footer}>
-        <InlineButton onPress={this.props.onClose.bind(this)} color={this.props.colourBrandingMain} style={[styles.footerButton]}>
-          Done
-        </InlineButton>
-      </View>
-    );
-  }
+	renderFooter() {
+		return (
+			<View style={styles.footer}>
+				<InlineButton
+					onPress={this.props.onClose.bind(this)}
+					color={this.props.colourBrandingMain}
+					style={[styles.footerButton]}
+				>
+					Done
+				</InlineButton>
+			</View>
+		);
+	}
 
-  render() {
-    return (
-      <Modal visible={this.props.visible} transparent animationType="slide" onRequestClose={this.props.onClose}>
-        <ScrollView keyboardShouldPersistTaps="always">
-          <View style={styles.popup}>
-            <TouchableWithoutFeedback onPress={this.props.onClose}>
-              <View style={styles.popupOverlay} />
-            </TouchableWithoutFeedback>
-            <View
-              style={[
-                styles.popupContent,
-                { minHeight: SCREEN_HEIGHT - (Platform.OS === 'android' ? 175 : 150) },
-                { marginTop: 60, minHeight: SCREEN_HEIGHT - (Platform.OS === 'android' ? 85 : 60) },
-              ]}
-            >
-              {this.renderHeader()}
-              {this.renderScrollContainer()}
-              {this.renderFooter()}
-            </View>
-          </View>
-        </ScrollView>
-      </Modal>
-    );
-  }
+	render() {
+		return (
+			<Modal
+				visible={this.props.visible}
+				transparent
+				animationType="slide"
+				onRequestClose={this.props.onClose}
+			>
+				<ScrollView keyboardShouldPersistTaps="always">
+					<View style={styles.popup}>
+						<TouchableWithoutFeedback onPress={this.props.onClose}>
+							<View style={styles.popupOverlay} />
+						</TouchableWithoutFeedback>
+						<View
+							style={[
+								styles.popupContent,
+								{
+									minHeight:
+										SCREEN_HEIGHT - (Platform.OS === "android" ? 175 : 150),
+								},
+								{
+									marginTop: 60,
+									minHeight:
+										SCREEN_HEIGHT - (Platform.OS === "android" ? 85 : 60),
+								},
+							]}
+						>
+							{this.renderHeader()}
+							{this.renderScrollContainer()}
+							{this.renderFooter()}
+						</View>
+					</View>
+				</ScrollView>
+			</Modal>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  popupOverlay: {
-    position: 'absolute',
-    backgroundColor: 'rgba(19, 19, 26, .25)',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  popupContent: {
-    borderRadius: 3,
-    marginTop: 150,
-    backgroundColor: '#fff',
-    flex: 1,
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15,
-  },
-  footer: {
-    padding: 8,
-    borderTopWidth: 1,
-    borderColor: LINEGREY,
-    backgroundColor: '#fff',
-  },
-  footerButton: {
-    width: '100%',
-    height: 40,
-  },
-  titleContainer: {
-    alignSelf: 'stretch',
-    padding: 24,
-    paddingTop: 16,
-    paddingBottom: 0,
-  },
-  titleContent: {
-    borderColor: LINEGREY,
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 15,
-    fontFamily: 'sf-semibold',
-    color: TEXT_DARK,
-  },
-  optionsContainer: {
-    flex: 1,
-    paddingVertical: 8,
-  },
+	popup: {
+		flex: 1,
+		justifyContent: "center",
+	},
+	popupOverlay: {
+		position: "absolute",
+		backgroundColor: "rgba(19, 19, 26, .25)",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+	},
+	popupContent: {
+		borderRadius: 3,
+		marginTop: 150,
+		backgroundColor: "#fff",
+		flex: 1,
+		borderTopLeftRadius: 15,
+		borderTopRightRadius: 15,
+	},
+	footer: {
+		padding: 8,
+		borderTopWidth: 1,
+		borderColor: LINEGREY,
+		backgroundColor: "#fff",
+	},
+	footerButton: {
+		width: "100%",
+		height: 40,
+	},
+	titleContainer: {
+		alignSelf: "stretch",
+		padding: 24,
+		paddingTop: 16,
+		paddingBottom: 0,
+	},
+	titleContent: {
+		borderColor: LINEGREY,
+		borderBottomWidth: 1,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		paddingBottom: 15,
+	},
+	title: {
+		fontSize: 15,
+		fontFamily: "sf-semibold",
+		color: TEXT_DARK,
+	},
+	optionsContainer: {
+		flex: 1,
+		paddingVertical: 8,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const userListPopup = connect(mapStateToProps, {})(UserListPopup);