@plusscommunities/pluss-core-app 6.1.6-beta.1 → 6.1.6

package/src/components/CalendarPopup.js

@@ -0,0 +1,111 @@
+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';
+
+class CalendarPopup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  onDayPress = date => {
+    const { onSelect } = this.props;
+    if (!onSelect) return;
+
+    // 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>
+    );
+  }
+
+  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 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,
+  },
+});
+
+export { CalendarPopup };

package/src/components/GenericInputSection.js

@@ -78,11 +78,19 @@ class GenericInputSection extends PureComponent {
     return <GenericInput {...this.props} containerStyle={[styles.input, this.props.containerStyle]} />;
   }
 
+  renderError() {
+    if (this.props.showError === true && !this.props.isValid()) {
+      return <Text style={styles.errorText}>{this.props.errorText || 'Required'}</Text>;
+    }
+    return null;
+  }
+
   render() {
     return (
       <View style={[styles.container, this.props.sectionStyle]}>
         {this.renderLabel()}
         {this.renderInput()}
+        {this.renderError()}
       </View>
     );
   }
@@ -151,6 +159,12 @@ const styles = {
     fontFamily: 'sf-regular',
     fontSize: 16,
   },
+  errorText: {
+    paddingTop: 4,
+    fontSize: 13,
+    fontFamily: 'sf-regular',
+    color: COLOUR_GRAPEFRUIT,
+  },
 };
 
 const mapStateToProps = state => {

package/src/components/TickIcon.js

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import stylez from '../styles';
+import { Pl60Icon } from '../fonts';
+
+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>
+    );
+  }
+}
+
+export { TickIcon };

package/src/components/WarningPopup.js

@@ -12,7 +12,11 @@ const SCREEN_WIDTH = Dimensions.get('window').width;
 class WarningPopup extends PureComponent {
   render() {
     return (
-      <MiddlePopup visible={this.props.visible} onClose={this.props.onClose} style={styles.popup}>
+      <MiddlePopup
+        visible={this.props.visible}
+        onClose={this.props.onClose}
+        style={[styles.popup, this.props.padHorizontal && { paddingHorizontal: 16 }]}
+      >
         {this.props.isSuccess && <Pl60Icon style={styles.icon} name="circleoutlined" />}
         <Text style={styles.text}>{this.props.confirmText}</Text>
         <View style={{ marginTop: 16, paddingHorizontal: 24 }}>

package/src/components/index.js

@@ -24,6 +24,7 @@ export * from './GenericInput';
 export * from './RadioButton';
 export * from './PDFPopup';
 export * from './TextStyle';
+export * from './TickIcon';
 export * from './Toggle';
 export * from './Input';
 export * from './StickyFooter';
@@ -39,6 +40,7 @@ export * from './FontScaleButton';
 export * from './UserListPopup';
 export * from './Reactions';
 export * from './AudienceSelectorLauncher';
+export * from './CalendarPopup';
 export { default as EmptyStateWidget } from './EmptyStateWidget';
 export { default as EmptyStateMain } from './EmptyStateMain';
 export { default as LoadingStateWidget } from './LoadingStateWidget';

package/src/helper.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import { Platform, StatusBar, Dimensions } from 'react-native';
+import React from 'react';
+import { Platform, StatusBar, Dimensions, Text } from 'react-native';
 import Constants from 'expo-constants';
 import Config from './config';
 import { LINEGREY } from './colours';
@@ -256,6 +257,18 @@ const getPluralOptions = (count, singular, plural) => {
   return plural;
 };
 
+const isEmail = email => {
+  if (_.isEmpty(email)) {
+    return false;
+  }
+  const atpos = email.indexOf('@');
+  const dotpos = email.lastIndexOf('.');
+  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
+    return false;
+  }
+  return true;
+};
+
 const randomString = (name = '') => {
   return `xxxxxxxx4xxxyxxxxxxxxxxxxx${name}`.replace(/[xy]/g, c => {
     // eslint-disable-next-line
@@ -448,6 +461,20 @@ const allowComments = canComment => {
   return Config.env.defaultAllowComments;
 };
 
+const toParagraphed = (text, style) => {
+  if (!text) {
+    return text;
+  }
+  const textSplit = text.split('\n');
+  return _.map(textSplit, (t, i) => {
+    return (
+      <Text key={`paragraph_${i}`} style={style}>
+        {t}
+      </Text>
+    );
+  });
+};
+
 export {
   TIMESTAMP_FORMAT,
   DATE_FORMAT,
@@ -469,6 +496,7 @@ export {
   imageExists,
   getPluralS,
   getPluralOptions,
+  isEmail,
   formatTime,
   minutesToString,
   randomString,
@@ -487,6 +515,7 @@ export {
   getValidUrl,
   getUserPreview,
   allowComments,
+  toParagraphed,
   isVideoUrl,
   detectFaces,
   findLandmarkRange,

package/dist/module/apis/settingActions.js

@@ -1,22 +0,0 @@
-import { authedFunction } from '../session';
-import { getUrl } from '../helper';
-export const settingActions = {
-  getSetting: (site, key) => {
-    return authedFunction({
-      method: 'GET',
-      url: getUrl('utility', `getSetting/${site}_${key}`)
-    });
-  },
-  setSetting: (site, key, value) => {
-    return authedFunction({
-      method: 'POST',
-      url: getUrl('utility', 'setSetting'),
-      data: {
-        site,
-        key,
-        value
-      }
-    });
-  }
-};
-//# sourceMappingURL=settingActions.js.map

package/dist/module/apis/settingActions.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["authedFunction","getUrl","settingActions","getSetting","site","key","method","url","setSetting","value","data"],"sources":["settingActions.js"],"sourcesContent":["import { authedFunction } from '../session';\nimport { getUrl } from '../helper';\n\nexport const settingActions = {\n  getSetting: (site, key) => {\n    return authedFunction({\n      method: 'GET',\n      url: getUrl('utility', `getSetting/${site}_${key}`),\n    });\n  },\n  setSetting: (site, key, value) => {\n    return authedFunction({\n      method: 'POST',\n      url: getUrl('utility', 'setSetting'),\n      data: { site, key, value },\n    });\n  },\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,MAAMC,cAAc,GAAG;EAC5BC,UAAU,EAAEA,CAACC,IAAI,EAAEC,GAAG,KAAK;IACzB,OAAOL,cAAc,CAAC;MACpBM,MAAM,EAAE,KAAK;MACbC,GAAG,EAAEN,MAAM,CAAC,SAAS,EAAG,cAAaG,IAAK,IAAGC,GAAI,EAAC;IACpD,CAAC,CAAC;EACJ,CAAC;EACDG,UAAU,EAAEA,CAACJ,IAAI,EAAEC,GAAG,EAAEI,KAAK,KAAK;IAChC,OAAOT,cAAc,CAAC;MACpBM,MAAM,EAAE,MAAM;MACdC,GAAG,EAAEN,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC;MACpCS,IAAI,EAAE;QAAEN,IAAI;QAAEC,GAAG;QAAEI;MAAM;IAC3B,CAAC,CAAC;EACJ;AACF,CAAC"}

package/src/apis/settingActions.js

@@ -1,18 +0,0 @@
-import { authedFunction } from '../session';
-import { getUrl } from '../helper';
-
-export const settingActions = {
-  getSetting: (site, key) => {
-    return authedFunction({
-      method: 'GET',
-      url: getUrl('utility', `getSetting/${site}_${key}`),
-    });
-  },
-  setSetting: (site, key, value) => {
-    return authedFunction({
-      method: 'POST',
-      url: getUrl('utility', 'setSetting'),
-      data: { site, key, value },
-    });
-  },
-};