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

package/src/components/PlussChatTime.js

@@ -1,63 +1,67 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./Text";
 
-import moment from 'moment';
+import moment from "moment";
 
 export default class PlussChatTime extends React.Component {
-  shouldRenderDay(curTime, prevTime) {
-    return !curTime.isSame(prevTime, 'd');
-  }
+	shouldRenderDay(curTime, prevTime) {
+		return !curTime.isSame(prevTime, "d");
+	}
 
-  shouldRenderTime(curTime, prevTime) {
-    return curTime.diff(prevTime, 'm') >= 10;
-  }
+	shouldRenderTime(curTime, prevTime) {
+		return curTime.diff(prevTime, "m") >= 10;
+	}
 
-  render() {
-    const curMesTime = moment(this.props.currentMessage.createdAt).local();
-    const prevTime = moment(this.props.previousMessage.createdAt).local();
-    const now = moment().local();
+	render() {
+		const curMesTime = moment(this.props.currentMessage.createdAt).local();
+		const prevTime = moment(this.props.previousMessage.createdAt).local();
+		const now = moment().local();
 
-    if (this.shouldRenderDay(curMesTime, prevTime) || this.shouldRenderTime(curMesTime, prevTime)) {
-      let timestamp = '';
-      if (!now.isSame(curMesTime, 'd')) {
-        timestamp += curMesTime.format('ddd, D MMM');
-        if (!now.isSame(curMesTime, 'y')) {
-          timestamp += ` ${curMesTime.format('YYYY')}`;
-        }
-        timestamp += ' • ';
-      }
-      timestamp += curMesTime.format('h:mma');
-      return (
-        <View style={[styles.container, this.props.containerStyle]}>
-          <View style={[styles.wrapper, this.props.wrapperStyle]}>
-            <Text style={[styles.text, this.props.textStyle]}>{timestamp}</Text>
-          </View>
-        </View>
-      );
-    }
-    return null;
-  }
+		if (
+			this.shouldRenderDay(curMesTime, prevTime) ||
+			this.shouldRenderTime(curMesTime, prevTime)
+		) {
+			let timestamp = "";
+			if (!now.isSame(curMesTime, "d")) {
+				timestamp += curMesTime.format("ddd, D MMM");
+				if (!now.isSame(curMesTime, "y")) {
+					timestamp += ` ${curMesTime.format("YYYY")}`;
+				}
+				timestamp += " • ";
+			}
+			timestamp += curMesTime.format("h:mma");
+			return (
+				<View style={[styles.container, this.props.containerStyle]}>
+					<View style={[styles.wrapper, this.props.wrapperStyle]}>
+						<Text style={[styles.text, this.props.textStyle]}>{timestamp}</Text>
+					</View>
+				</View>
+			);
+		}
+		return null;
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  wrapper: {
-    // backgroundColor: '#ccc',
-    // borderRadius: 10,
-    // paddingLeft: 10,
-    // paddingRight: 10,
-    // paddingTop: 5,
-    // paddingBottom: 5,
-  },
-  text: {
-    backgroundColor: 'transparent',
-    color: '#b2b2b2',
-    fontSize: 12,
-    fontWeight: '600',
-  },
+	container: {
+		alignItems: "center",
+		justifyContent: "center",
+		marginTop: 5,
+		marginBottom: 10,
+	},
+	wrapper: {
+		// backgroundColor: '#ccc',
+		// borderRadius: 10,
+		// paddingLeft: 10,
+		// paddingRight: 10,
+		// paddingTop: 5,
+		// paddingBottom: 5,
+	},
+	text: {
+		backgroundColor: "transparent",
+		color: "#b2b2b2",
+		fontSize: 12,
+		fontWeight: "600",
+	},
 });

package/src/components/Popup.js

@@ -1,129 +1,151 @@
-import React, { Component } from 'react';
-import { View, Text, TouchableWithoutFeedback, Modal } from 'react-native';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { LINEGREY, TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';
-import { InlineButton } from './InlineButton';
+import React, { Component } from "react";
+import { View, TouchableWithoutFeedback, Modal } from "react-native";
+import { Text } from "./Text";
+import _ from "lodash";
+import { connect } from "react-redux";
+import {
+	LINEGREY,
+	TEXT_DARK,
+	TEXT_LIGHT,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { InlineButton } from "./InlineButton";
 
 class Popup extends Component {
-  renderOptions() {
-    if (!this.props.options) {
-      return null;
-    }
-    return (
-      <View style={styles.bottom}>
-        {_.map(this.props.options, (option, index) => {
-          return (
-            <InlineButton
-              key={index}
-              onPress={option.action}
-              color="#fff"
-              textStyle={[styles.optionText, { color: this.props.colourBrandingMain }, option.bold && styles.optionTextBold]}
-            >
-              {option.text}
-            </InlineButton>
-          );
-        })}
-      </View>
-    );
-  }
+	renderOptions() {
+		if (!this.props.options) {
+			return null;
+		}
+		return (
+			<View style={styles.bottom}>
+				{_.map(this.props.options, (option, index) => {
+					return (
+						<InlineButton
+							key={index}
+							onPress={option.action}
+							color="#fff"
+							textStyle={[
+								styles.optionText,
+								{ color: this.props.colourBrandingMain },
+								option.bold && styles.optionTextBold,
+							]}
+						>
+							{option.text}
+						</InlineButton>
+					);
+				})}
+			</View>
+		);
+	}
 
-  renderTitle() {
-    if (!this.props.title) {
-      return null;
-    }
-    return <Text style={[styles.title, { color: this.props.colourBrandingMain }]}>{this.props.title}</Text>;
-  }
+	renderTitle() {
+		if (!this.props.title) {
+			return null;
+		}
+		return (
+			<Text style={[styles.title, { color: this.props.colourBrandingMain }]}>
+				{this.props.title}
+			</Text>
+		);
+	}
 
-  renderContent() {
-    if (this.props.content) {
-      return this.props.content;
-    }
-    if (!this.props.text) {
-      return null;
-    }
-    return <Text style={styles.text}>{this.props.text}</Text>;
-  }
+	renderContent() {
+		if (this.props.content) {
+			return this.props.content;
+		}
+		if (!this.props.text) {
+			return null;
+		}
+		return <Text style={styles.text}>{this.props.text}</Text>;
+	}
 
-  render() {
-    return (
-      <Modal visible transparent animationType="fade" onRequestClose={this.props.onClose}>
-        <TouchableWithoutFeedback style={styles.container} onPress={this.props.onClose}>
-          <View style={styles.container}>
-            <View style={[styles.menu, this.props.containerStyle]}>
-              <View style={styles.top}>
-                {this.renderTitle()}
-                {this.renderContent()}
-                {this.props.children}
-              </View>
-              {this.renderOptions()}
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      </Modal>
-    );
-  }
+	render() {
+		return (
+			<Modal
+				visible
+				transparent
+				animationType="fade"
+				onRequestClose={this.props.onClose}
+			>
+				<TouchableWithoutFeedback
+					style={styles.container}
+					onPress={this.props.onClose}
+				>
+					<View style={styles.container}>
+						<View style={[styles.menu, this.props.containerStyle]}>
+							<View style={styles.top}>
+								{this.renderTitle()}
+								{this.renderContent()}
+								{this.props.children}
+							</View>
+							{this.renderOptions()}
+						</View>
+					</View>
+				</TouchableWithoutFeedback>
+			</Modal>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    zIndex: 1000,
-    paddingHorizontal: 16,
-    paddingVertical: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-  },
-  menu: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-  },
-  top: {
-    padding: 24,
-  },
-  title: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    lineHeight: 24,
-    color: TEXT_DARK,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  text: {
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-    lineHeight: 22,
-    color: TEXT_LIGHT,
-    textAlign: 'center',
-  },
-  bottom: {
-    borderTopColor: LINEGREY,
-    borderTopWidth: 1,
-    flexDirection: 'row-reverse',
-    padding: 8,
-  },
-  option: {
-    marginRight: 16,
-  },
-  optionText: {
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-  },
-  optionTextBold: {
-    fontFamily: 'sf-semibold',
-  },
+	container: {
+		position: "absolute",
+		bottom: 0,
+		left: 0,
+		right: 0,
+		top: 0,
+		backgroundColor: "rgba(0,0,0,0.5)",
+		zIndex: 1000,
+		paddingHorizontal: 16,
+		paddingVertical: 32,
+		justifyContent: "center",
+		alignItems: "center",
+		width: "100%",
+	},
+	menu: {
+		backgroundColor: "#fff",
+		borderRadius: 12,
+	},
+	top: {
+		padding: 24,
+	},
+	title: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 24,
+		color: TEXT_DARK,
+		textAlign: "center",
+		marginBottom: 16,
+	},
+	text: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		lineHeight: 22,
+		color: TEXT_LIGHT,
+		textAlign: "center",
+	},
+	bottom: {
+		borderTopColor: LINEGREY,
+		borderTopWidth: 1,
+		flexDirection: "row-reverse",
+		padding: 8,
+	},
+	option: {
+		marginRight: 16,
+	},
+	optionText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+	},
+	optionTextBold: {
+		fontFamily: "sf-semibold",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const popup = connect(mapStateToProps, {})(Popup);

package/src/components/PopupMenu.js

@@ -1,124 +1,154 @@
-import React, { Component } from 'react';
-import { View, Text, TouchableWithoutFeedback, TouchableOpacity, Modal } from 'react-native';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import { getMainBrandingColourFromState, LINEGREY, TEXT_DARK } from '../colours';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	View,
+	TouchableWithoutFeedback,
+	TouchableOpacity,
+	Modal,
+} from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import {
+	getMainBrandingColourFromState,
+	LINEGREY,
+	TEXT_DARK,
+} from "../colours";
 
 class PopupMenu extends Component {
-  renderOption(item, index) {
-    return (
-      <TouchableOpacity key={index} onPress={item.onPress}>
-        <View style={[styles.option, index === 0 && styles.firstOption]}>
-          {_.isEmpty(item.text) && item.content ? item.content : <Text style={styles.optionText}>{item.text}</Text>}
-        </View>
-      </TouchableOpacity>
-    );
-  }
+	renderOption(item, index) {
+		return (
+			<TouchableOpacity key={index} onPress={item.onPress}>
+				<View style={[styles.option, index === 0 && styles.firstOption]}>
+					{_.isEmpty(item.text) && item.content ? (
+						item.content
+					) : (
+						<Text style={styles.optionText}>{item.text}</Text>
+					)}
+				</View>
+			</TouchableOpacity>
+		);
+	}
 
-  renderOptions() {
-    return (
-      <View style={styles.optionsContainer}>
-        {_.map(this.props.options, (item, index) => {
-          return this.renderOption(item, index);
-        })}
-      </View>
-    );
-  }
+	renderOptions() {
+		return (
+			<View style={styles.optionsContainer}>
+				{_.map(this.props.options, (item, index) => {
+					return this.renderOption(item, index);
+				})}
+			</View>
+		);
+	}
 
-  renderTitle() {
-    return (
-      <View style={styles.titleContainer}>
-        <Text style={styles.titleText}>{this.props.title}</Text>
-      </View>
-    );
-  }
+	renderTitle() {
+		return (
+			<View style={styles.titleContainer}>
+				<Text style={styles.titleText}>{this.props.title}</Text>
+			</View>
+		);
+	}
 
-  renderCancel() {
-    return (
-      <TouchableOpacity onPress={this.props.onClose}>
-        <View style={[styles.option, styles.cancelOption]}>
-          <Text style={[styles.optionText, styles.cancelText, { color: this.props.colourBrandingMain }]}>{this.props.cancelText}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
+	renderCancel() {
+		return (
+			<TouchableOpacity onPress={this.props.onClose}>
+				<View style={[styles.option, styles.cancelOption]}>
+					<Text
+						style={[
+							styles.optionText,
+							styles.cancelText,
+							{ color: this.props.colourBrandingMain },
+						]}
+					>
+						{this.props.cancelText}
+					</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
 
-  render() {
-    return (
-      <Modal visible transparent animationType="slide" onRequestClose={this.props.onClose}>
-        <TouchableWithoutFeedback style={styles.container} onPress={this.props.onClose}>
-          <View style={styles.container}>
-            <View style={styles.menu}>
-              {this.renderTitle()}
-              {this.renderOptions()}
-              {this.renderCancel()}
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      </Modal>
-    );
-  }
+	render() {
+		return (
+			<Modal
+				visible
+				transparent
+				animationType="slide"
+				onRequestClose={this.props.onClose}
+			>
+				<TouchableWithoutFeedback
+					style={styles.container}
+					onPress={this.props.onClose}
+				>
+					<View style={styles.container}>
+						<View style={styles.menu}>
+							{this.renderTitle()}
+							{this.renderOptions()}
+							{this.renderCancel()}
+						</View>
+					</View>
+				</TouchableWithoutFeedback>
+			</Modal>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    zIndex: 1000,
-  },
-  menu: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: '#fff',
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
-  },
-  optionsContainer: {
-    paddingHorizontal: 16,
-  },
-  option: {
-    paddingVertical: 16,
-    borderColor: LINEGREY,
-    borderTopWidth: 1,
-  },
-  cancelOption: {
-    paddingHorizontal: 16,
-  },
-  firstOption: {
-    borderTopWidth: 0,
-  },
-  optionText: {
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-    textAlign: 'center',
-    color: TEXT_DARK,
-  },
-  cancelText: {
-    fontFamily: 'sf-medium',
-  },
-  titleContainer: {
-    padding: 16,
-    borderColor: LINEGREY,
-    borderBottomWidth: 1,
-  },
-  titleText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    textAlign: 'center',
-    color: TEXT_DARK,
-  },
+	container: {
+		position: "absolute",
+		bottom: 0,
+		left: 0,
+		right: 0,
+		top: 0,
+		backgroundColor: "rgba(0,0,0,0.5)",
+		zIndex: 1000,
+	},
+	menu: {
+		position: "absolute",
+		bottom: 0,
+		left: 0,
+		right: 0,
+		backgroundColor: "#fff",
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+	},
+	optionsContainer: {
+		paddingHorizontal: 16,
+	},
+	option: {
+		paddingVertical: 16,
+		borderColor: LINEGREY,
+		borderTopWidth: 1,
+	},
+	cancelOption: {
+		paddingHorizontal: 16,
+	},
+	firstOption: {
+		borderTopWidth: 0,
+	},
+	optionText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		textAlign: "center",
+		color: TEXT_DARK,
+	},
+	cancelText: {
+		fontFamily: "sf-medium",
+	},
+	titleContainer: {
+		padding: 16,
+		borderColor: LINEGREY,
+		borderBottomWidth: 1,
+	},
+	titleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		textAlign: "center",
+		color: TEXT_DARK,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const popupMenu = connect(mapStateToProps, {})(PopupMenu);