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

package/src/components/CalendarPopup.js

@@ -1,111 +1,141 @@
-import moment from 'moment';
-import React, { Component } from 'react';
-import { Modal, View, TouchableOpacity, StyleSheet } from 'react-native';
-import { Calendar } from 'react-native-calendars';
-import { StatusBarHeight } from '../helper';
-import { Pl60Icon } from '../fonts';
-import { hexToRGBAstring, COLOUR_RED, TEXT_DARK } from '../colours';
+import moment from "moment";
+import React, { Component } from "react";
+import { Modal, View, TouchableOpacity, StyleSheet } from "react-native";
+import { Calendar } from "react-native-calendars";
+import { StatusBarHeight } from "../helper";
+import { FontAwesome } from "./Icon";
+import {
+	hexToRGBAstring,
+	COLOUR_RED,
+	TEXT_DARK,
+	COLOUR_GRAPEFRUIT,
+} from "../colours";
 
 class CalendarPopup extends Component {
-  constructor(props) {
-    super(props);
+	constructor(props) {
+		super(props);
 
-    this.state = {};
-  }
+		this.state = {};
+	}
 
-  onDayPress = date => {
-    const { onSelect } = this.props;
-    if (!onSelect) return;
+	onDayPress = (date) => {
+		const { onSelect } = this.props;
+		if (!onSelect) return;
 
-    // console.log('onDayPress', date);
-    onSelect(date.timestamp);
-  };
+		// console.log('onDayPress', date);
+		onSelect(date.timestamp);
+	};
 
-  renderClose() {
-    const { onClose } = this.props;
-    return (
-      <TouchableOpacity style={styles.menuIconContainer} onPress={onClose} activeOpacity={0.6}>
-        <Pl60Icon name="close" style={styles.menuIcon} />
-      </TouchableOpacity>
-    );
-  }
+	renderClose() {
+		const { onClose } = this.props;
+		return (
+			<TouchableOpacity
+				style={styles.menuIconContainer}
+				onPress={onClose}
+				activeOpacity={0.6}
+			>
+				<FontAwesome name="x" style={styles.menuIcon} />
+			</TouchableOpacity>
+		);
+	}
 
-  render() {
-    const {
-      visible,
-      animationType,
-      onClose,
-      backgroundStyle,
-      selectedDate,
-      minDate,
-      maxDate,
-      enabledDates,
-      selectedColor,
-      enabledColor,
-      disabledColor,
-      theme,
-    } = this.props;
+	render() {
+		const {
+			visible,
+			animationType,
+			onClose,
+			backgroundStyle,
+			selectedDate,
+			minDate,
+			maxDate,
+			enabledDates,
+			selectedColor,
+			enabledColor,
+			disabledColor,
+			theme,
+		} = this.props;
 
-    const initialDate = (selectedDate ? moment(selectedDate) : moment()).format('YYYY-MM-DD');
-    const min = minDate ? moment(minDate).format('YYYY-MM-DD') : undefined;
-    const max = maxDate ? moment(maxDate).format('YYYY-MM-DD') : undefined;
-    const dateMarkings = {};
-    (enabledDates || []).forEach(date => {
-      const { day, enabled } = date;
-      const key = moment(day).format('YYYY-MM-DD');
-      dateMarkings[key] = {
-        enabled,
-        disableTouchEvent: !enabled,
-        customStyles: { text: { color: enabled ? enabledColor || TEXT_DARK : disabledColor || COLOUR_RED } },
-      };
-    });
-    // console.log('CalendarPopup - enabled', JSON.stringify(dateMarkings, null, 2));
-    return (
-      <Modal transparent visible={visible || false} animationType={animationType || 'fade'} onRequestClose={onClose}>
-        <View style={[styles.popup, backgroundStyle || { backgroundColor: hexToRGBAstring('#fff', 1) }]}>
-          <Calendar
-            initialDate={initialDate}
-            minDate={min}
-            maxDate={max}
-            markingType={'custom'}
-            markedDates={{
-              ...dateMarkings,
-              [initialDate]: { selected: true, selectedColor: selectedColor || COLOUR_GRAPEFRUIT },
-            }}
-            onDayPress={this.onDayPress}
-            theme={theme}
-          />
-        </View>
-        {this.renderClose()}
-      </Modal>
-    );
-  }
+		const initialDate = (selectedDate ? moment(selectedDate) : moment()).format(
+			"YYYY-MM-DD",
+		);
+		const min = minDate ? moment(minDate).format("YYYY-MM-DD") : undefined;
+		const max = maxDate ? moment(maxDate).format("YYYY-MM-DD") : undefined;
+		const dateMarkings = {};
+		(enabledDates || []).forEach((date) => {
+			const { day, enabled } = date;
+			const key = moment(day).format("YYYY-MM-DD");
+			dateMarkings[key] = {
+				enabled,
+				disableTouchEvent: !enabled,
+				customStyles: {
+					text: {
+						color: enabled
+							? enabledColor || TEXT_DARK
+							: disabledColor || COLOUR_RED,
+					},
+				},
+			};
+		});
+		// console.log('CalendarPopup - enabled', JSON.stringify(dateMarkings, null, 2));
+		return (
+			<Modal
+				transparent
+				visible={visible || false}
+				animationType={animationType || "fade"}
+				onRequestClose={onClose}
+			>
+				<View
+					style={[
+						styles.popup,
+						backgroundStyle || { backgroundColor: hexToRGBAstring("#fff", 1) },
+					]}
+				>
+					<Calendar
+						initialDate={initialDate}
+						minDate={min}
+						maxDate={max}
+						markingType={"custom"}
+						markedDates={{
+							...dateMarkings,
+							[initialDate]: {
+								selected: true,
+								selectedColor: selectedColor || COLOUR_GRAPEFRUIT,
+							},
+						}}
+						onDayPress={this.onDayPress}
+						theme={theme}
+					/>
+				</View>
+				{this.renderClose()}
+			</Modal>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#000',
-  },
-  popup: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  menuIconContainer: {
-    position: 'absolute',
-    top: StatusBarHeight(0),
-    right: 0,
-    width: 55,
-    height: 55,
-    zIndex: 3,
-  },
-  menuIcon: {
-    fontSize: 30,
-    padding: 15,
-    width: 65,
-    textAlign: 'center',
-    color: '#000',
-    zIndex: 3,
-  },
+	container: {
+		backgroundColor: "#000",
+	},
+	popup: {
+		flex: 1,
+		justifyContent: "center",
+	},
+	menuIconContainer: {
+		position: "absolute",
+		top: StatusBarHeight(0),
+		right: 0,
+		width: 55,
+		height: 55,
+		zIndex: 3,
+	},
+	menuIcon: {
+		fontSize: 30,
+		padding: 15,
+		width: 65,
+		textAlign: "center",
+		color: "#000",
+		zIndex: 3,
+	},
 });
 
 export { CalendarPopup };

package/src/components/CategoryTabs.js

@@ -1,181 +1,226 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { Text, TouchableOpacity, View, ScrollView } from 'react-native';
-import { connect } from 'react-redux';
-import { TEXT_LIGHT, COLOUR_GREEN, getMainBrandingColourFromState } from '../colours';
-import { getSiteSettingFromState } from '../helper';
+import React, { Component } from "react";
+import _ from "lodash";
+import { TouchableOpacity, View, ScrollView } from "react-native";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import {
+	TEXT_LIGHT,
+	COLOUR_GREEN,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { getSiteSettingFromState } from "../helper";
 // import { HAS_GRADIENT_HEADER } from '../../config';
-import Config from '../config';
+import Config from "../config";
 
 class CategoryTabs extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      categoryKeys: [],
-      selectedCategory: this.props.initialCategory,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			categoryKeys: [],
+			selectedCategory: this.props.initialCategory,
+		};
+	}
 
-  UNSAFE_componentWillMount() {
-    this.setState({
-      selectedCategory:
-        !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory,
-      categoryKeys: this.props.categoryKeys,
-    });
-  }
+	UNSAFE_componentWillMount() {
+		this.setState({
+			selectedCategory:
+				!_.isUndefined(this.props.currentTab) &&
+				!_.isEmpty(this.props.currentTab)
+					? this.props.currentTab
+					: this.props.initialCategory,
+			categoryKeys: this.props.categoryKeys,
+		});
+	}
 
-  componentDidMount() {
-    this.setState({
-      selectedCategory:
-        !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory,
-    });
-  }
+	componentDidMount() {
+		this.setState({
+			selectedCategory:
+				!_.isUndefined(this.props.currentTab) &&
+				!_.isEmpty(this.props.currentTab)
+					? this.props.currentTab
+					: this.props.initialCategory,
+		});
+	}
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!_.isUndefined(nextProps.currentTab) && !_.isEmpty(nextProps.currentTab)) {
-      this.setState({ selectedCategory: nextProps.currentTab });
-    }
-  }
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		if (
+			!_.isUndefined(nextProps.currentTab) &&
+			!_.isEmpty(nextProps.currentTab)
+		) {
+			this.setState({ selectedCategory: nextProps.currentTab });
+		}
+	}
 
-  selectCategory(key) {
-    this.setState({
-      selectedCategory: key,
-    });
-    this.props.onSelect(key);
-  }
+	selectCategory(key) {
+		this.setState({
+			selectedCategory: key,
+		});
+		this.props.onSelect(key);
+	}
 
-  renderCounter(key) {
-    if (
-      this.props.categoryCounter &&
-      this.props.categoryCounter[key] &&
-      this.props.categoryCounter[key] === true &&
-      this.props.counterValues &&
-      this.props.counterValues[key] > 0
-    ) {
-      return (
-        <View style={styles.counter}>
-          <Text style={styles.counterText}>{this.props.counterValues[key]}</Text>
-        </View>
-      );
-    }
-    return null;
-  }
+	renderCounter(key) {
+		if (
+			this.props.categoryCounter &&
+			this.props.categoryCounter[key] &&
+			this.props.categoryCounter[key] === true &&
+			this.props.counterValues &&
+			this.props.counterValues[key] > 0
+		) {
+			return (
+				<View style={styles.counter}>
+					<Text style={styles.counterText}>
+						{this.props.counterValues[key]}
+					</Text>
+				</View>
+			);
+		}
+		return null;
+	}
 
-  renderCategories(noScrollStyle) {
-    const getTextColour = key => {
-      if (this.state.selectedCategory === key) {
-        return this.props.headerType !== 'white' ? '#fff' : this.props.colourBrandingMain;
-      }
-      return this.props.headerType !== 'white' ? '#fff' : TEXT_LIGHT;
-    };
-    const getBottomBorderColour = key => {
-      if (this.state.selectedCategory === key) {
-        return this.props.headerType !== 'white' ? '#fff' : this.props.colourBrandingMain;
-      }
-      return this.props.headerType !== 'white' ? this.props.colourBrandingMain : '#fff';
-    };
-    return this.state.categoryKeys.map((key, index) => {
-      return (
-        <TouchableOpacity
-          key={index}
-          // style={[{ minHeight: this.props.height || 30, justifyContent: 'center' }, noScrollStyle && { flex: 1 }]}
-          style={[{ flex: 1, minHeight: this.props.height || 30, justifyContent: 'center' }, this.props.catWrapperStyle]}
-          onPress={this.selectCategory.bind(this, key)}
-        >
-          <View
-            style={[
-              {
-                borderBottomColor: getBottomBorderColour(key),
-                borderBottomWidth: noScrollStyle ? 0 : 2,
-                marginRight: noScrollStyle ? 0 : 16,
-                marginLeft: index === 0 && !noScrollStyle ? 16 : 0,
-                justifyContent: 'center',
-                alignContent: 'center',
-                minHeight: 30,
-                flexDirection: 'row',
-                backgroundColor: this.props.headerType !== 'white' ? this.props.colourBrandingMain : undefined,
-              },
-              this.props.style,
-            ]}
-          >
-            <View
-              style={[
-                noScrollStyle && styles.innerContainer,
-                {
-                  flex: 1,
-                  borderColor: getBottomBorderColour(key),
-                  justifyContent: 'center',
-                },
-                this.props.catStyle,
-              ]}
-            >
-              <Text
-                style={[
-                  {
-                    fontFamily: 'sf-semibold',
-                    fontSize: 15,
-                    color: getTextColour(key),
-                    textAlign: 'center',
-                    paddingVertical: 8,
-                    width: 'auto',
-                  },
-                  this.props.textStyle,
-                  this.props.colourBrandingHeader &&
-                    this.state.selectedCategory !== key && { color: this.props.colourBrandingMain, opacity: 0.5 },
-                ]}
-              >
-                {key}
-              </Text>
-              {this.renderCounter(key)}
-            </View>
-          </View>
-        </TouchableOpacity>
-      );
-    });
-  }
+	renderCategories(noScrollStyle) {
+		const getTextColour = (key) => {
+			if (this.state.selectedCategory === key) {
+				return this.props.headerType !== "white"
+					? "#fff"
+					: this.props.colourBrandingMain;
+			}
+			return this.props.headerType !== "white" ? "#fff" : TEXT_LIGHT;
+		};
+		const getBottomBorderColour = (key) => {
+			if (this.state.selectedCategory === key) {
+				return this.props.headerType !== "white"
+					? "#fff"
+					: this.props.colourBrandingMain;
+			}
+			return this.props.headerType !== "white"
+				? this.props.colourBrandingMain
+				: "#fff";
+		};
+		return this.state.categoryKeys.map((key, index) => {
+			return (
+				<TouchableOpacity
+					key={index}
+					// style={[{ minHeight: this.props.height || 30, justifyContent: 'center' }, noScrollStyle && { flex: 1 }]}
+					style={[
+						{
+							flex: 1,
+							minHeight: this.props.height || 30,
+							justifyContent: "center",
+						},
+						this.props.catWrapperStyle,
+					]}
+					onPress={this.selectCategory.bind(this, key)}
+				>
+					<View
+						style={[
+							{
+								borderBottomColor: getBottomBorderColour(key),
+								borderBottomWidth: noScrollStyle ? 0 : 2,
+								marginRight: noScrollStyle ? 0 : 16,
+								marginLeft: index === 0 && !noScrollStyle ? 16 : 0,
+								justifyContent: "center",
+								alignContent: "center",
+								minHeight: 30,
+								flexDirection: "row",
+								backgroundColor:
+									this.props.headerType !== "white"
+										? this.props.colourBrandingMain
+										: undefined,
+							},
+							this.props.style,
+						]}
+					>
+						<View
+							style={[
+								noScrollStyle && styles.innerContainer,
+								{
+									flex: 1,
+									borderColor: getBottomBorderColour(key),
+									justifyContent: "center",
+								},
+								this.props.catStyle,
+							]}
+						>
+							<Text
+								style={[
+									{
+										fontFamily: "sf-semibold",
+										fontSize: 15,
+										color: getTextColour(key),
+										textAlign: "center",
+										paddingVertical: 8,
+										width: "auto",
+									},
+									this.props.textStyle,
+									this.props.colourBrandingHeader &&
+										this.state.selectedCategory !== key && {
+											color: this.props.colourBrandingMain,
+											opacity: 0.5,
+										},
+								]}
+							>
+								{key}
+							</Text>
+							{this.renderCounter(key)}
+						</View>
+					</View>
+				</TouchableOpacity>
+			);
+		});
+	}
 
-  render() {
-    if (this.props.noScroll) {
-      // return (<View style={{ flexDirection: 'row', paddingLeft: 16, paddingRight: 16 }}>
-      return <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>{this.renderCategories(true)}</View>;
-    }
-    return <ScrollView horizontal>{this.renderCategories(false)}</ScrollView>;
-  }
+	render() {
+		if (this.props.noScroll) {
+			// return (<View style={{ flexDirection: 'row', paddingLeft: 16, paddingRight: 16 }}>
+			return (
+				<View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
+					{this.renderCategories(true)}
+				</View>
+			);
+		}
+		return <ScrollView horizontal>{this.renderCategories(false)}</ScrollView>;
+	}
 }
 
 const styles = {
-  counter: {
-    backgroundColor: COLOUR_GREEN,
-    height: 16,
-    minWidth: 16,
-    borderRadius: 8,
-    marginLeft: 4,
-    marginTop: 4,
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
-  counterText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontSize: 12,
-    fontFamily: 'sf-semibold',
-  },
-  innerContainer: {
-    borderBottomWidth: 2,
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-  },
+	counter: {
+		backgroundColor: COLOUR_GREEN,
+		height: 16,
+		minWidth: 16,
+		borderRadius: 8,
+		marginLeft: 4,
+		marginTop: 4,
+		justifyContent: "center",
+		alignContent: "center",
+	},
+	counterText: {
+		color: "#fff",
+		textAlign: "center",
+		fontSize: 12,
+		fontFamily: "sf-semibold",
+	},
+	innerContainer: {
+		borderBottomWidth: 2,
+		flexDirection: "row",
+		paddingHorizontal: 8,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-    headerType: getSiteSettingFromState(
-      state,
-      'HeaderType',
-      getSiteSettingFromState(state, 'UseGradientHeader', Config.env.hasGradientHeader) ? 'gradient' : 'white',
-    ),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		headerType: getSiteSettingFromState(
+			state,
+			"HeaderType",
+			getSiteSettingFromState(
+				state,
+				"UseGradientHeader",
+				Config.env.hasGradientHeader,
+			)
+				? "gradient"
+				: "white",
+		),
+	};
 };
 
 const categoryTabs = connect(mapStateToProps, {})(CategoryTabs);