@plusscommunities/pluss-circles-app-groups 1.2.2-beta.0

package/dist/module/components/groups/NewGroup.js

@@ -0,0 +1,703 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { Dimensions, ImageBackground, Text, ScrollView, TouchableOpacity, View, KeyboardAvoidingView, Platform } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { ProfilePic, FormCard, FormCardSection, Header, Input, Spinner, ImageUploader, InlineButton, StickyFooter, Toggle } from '../common';
+import { TEXT_DARK, LINEGREY, COLOUR_TEAL, getMainBrandingColourFromState } from '../../js/Colors';
+import stylez from '../../js/Styles';
+import NavigationService from '../../js/NavigationService';
+import { COLOUR_PURPLE, COLOUR_TANGERINE, TEXT_LIGHT, getSite, getSiteSettingFromState } from '../../js/index';
+import { createGroup } from '../../actions';
+import EventInvitePopup from '../events/EventInvitePopup';
+import { circleActions } from '../../webapi';
+import { values } from '../../values.config';
+const PHOTO_WIDTH = Dimensions.get('window').width - 48;
+const PHOTO_HEIGHT = Dimensions.get('window').width > 600 ? PHOTO_WIDTH * 0.6 : PHOTO_WIDTH * 0.8;
+
+class NewGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onUploadStarted", () => {
+      this.setState({
+        uploadingImage: true
+      });
+    });
+
+    _defineProperty(this, "onUploadSuccess", uri => {
+      this.setState({
+        uploadingImage: false,
+        groupImage: uri.replace('/general/', '/general1400/')
+      });
+    });
+
+    _defineProperty(this, "onUploadFailed", () => {
+      this.setState({
+        uploadingImage: false,
+        groupImage: null
+      });
+    });
+
+    this.state = {
+      title: '',
+      submittingGroup: false,
+      groupImage: null,
+      selected: [],
+      visibility: 'private',
+      inviteOpen: false,
+      page: 2
+    };
+    this.visibilityOptions = [{
+      text: `Public ${values.entityName}`,
+      val: 'public'
+    }, {
+      text: `Private ${values.entityName}`,
+      val: 'private'
+    }];
+  }
+
+  onPressBack() {
+    NavigationService.goBack();
+  }
+
+  onSubmitSend() {
+    if (!this.props.connected) {
+      return;
+    }
+
+    if (this.state.submittingGroup) {
+      return;
+    }
+
+    this.setState({
+      submittingGroup: true
+    });
+    const audience = [{
+      userId: this.props.user.uid,
+      profilePic: this.props.user.profilePic,
+      displayName: this.props.user.displayName
+    }];
+
+    if (this.state.selected.length > 0) {
+      this.state.selected.forEach(user => {
+        audience.push({
+          userId: user.userId,
+          displayName: user.displayName,
+          profilePic: user.profilePic
+        });
+      });
+    }
+
+    circleActions.add(getSite(this.props.user.site), this.state.title, this.state.groupImage, audience, this.state.visibility === 'public').then(res => {
+      if (this.props.onSubmissionSuccess) this.props.onSubmissionSuccess(res.data);
+      this.props.createGroup(res.data);
+      NavigationService.navigate(values.screenCircleChat, {
+        chat: res.data,
+        new: true,
+        back: values.screenCircleChatList
+      });
+    }).catch(err => {
+      console.log('Circle creation error');
+      console.log(err);
+      this.setState({
+        submittingGroup: false
+      });
+    });
+  }
+
+  onPressToggle(option) {
+    this.setState({
+      visibility: option.val
+    });
+  }
+
+  onChangeTitle(value) {
+    this.setState({
+      title: value
+    });
+  }
+
+  addToAudience(user) {
+    const newSelected = [...this.state.selected];
+    newSelected.push(user);
+    this.setState({
+      selected: newSelected
+    });
+  }
+
+  removeFromAudience(user) {
+    let newSelected = [...this.state.selected];
+    newSelected = _.filter(newSelected, item => {
+      return item.userId !== user.userId;
+    });
+    this.setState({
+      selected: newSelected
+    });
+  }
+
+  closeInvitePopup() {
+    this.setState({
+      inviteOpen: false
+    });
+  }
+
+  openInvite() {
+    this.setState({
+      inviteOpen: true
+    });
+  }
+
+  nextPage() {
+    this.setState({
+      page: 2,
+      title: this.state.title
+    });
+  }
+
+  clickCreate() {
+    if (this.state.title.length < 1) {
+      return;
+    }
+
+    if (this.state.uploadingImage) {
+      return;
+    }
+
+    this.onSubmitSend();
+  }
+
+  showUploadMenu() {
+    if (this.state.uploadingImage || this.state.submittingGroup) {
+      return;
+    }
+
+    this.imageUploader.showUploadMenu();
+  }
+
+  renderInvitePopup() {
+    return /*#__PURE__*/React.createElement(EventInvitePopup, {
+      isNewEvent: true,
+      onNewEventInvite: this.addToAudience.bind(this),
+      onNewEventRemove: this.removeFromAudience.bind(this),
+      isSearchable: true,
+      invited: this.state.selected,
+      visible: this.state.inviteOpen,
+      onClose: this.closeInvitePopup.bind(this),
+      inviteText: "Add",
+      invitedText: "Remove"
+    });
+  }
+
+  renderUploadMenu() {
+    return /*#__PURE__*/React.createElement(ImageUploader, {
+      ref: ref => this.imageUploader = ref,
+      onUploadStarted: this.onUploadStarted,
+      onUploadSuccess: this.onUploadSuccess,
+      onUploadFailed: this.onUploadFailed,
+      onLibrarySelected: this.onUploadSuccess,
+      size: {
+        width: 700
+      },
+      quality: 0.8,
+      fileName: "groupImage",
+      popupTitle: `Add ${_.capitalize(values.entityName)} Cover Image`
+    });
+  }
+
+  renderInnerImage() {
+    if (!this.state.uploadingImage && this.state.groupImage === null) {
+      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "camera",
+        type: "font-awesome",
+        iconStyle: {
+          color: TEXT_LIGHT,
+          fontSize: 20,
+          marginBottom: 13
+        }
+      }), /*#__PURE__*/React.createElement(Text, {
+        style: {
+          fontSize: 13,
+          fontFamily: 'sf-regular',
+          color: TEXT_LIGHT
+        }
+      }, "Upload ", values.entityName, " image"));
+    }
+
+    return this.renderImage();
+  }
+
+  renderImage() {
+    if (this.state.uploadingImage) {
+      return /*#__PURE__*/React.createElement(Spinner, null);
+    }
+
+    if (this.state.groupImage) {
+      return /*#__PURE__*/React.createElement(ImageBackground, {
+        style: {
+          flex: 1,
+          height: '100%',
+          width: '100%',
+          borderRadius: 4,
+          justifyContent: 'center',
+          alignContent: 'center'
+        },
+        imageStyle: {
+          borderRadius: 4
+        },
+        source: {
+          uri: this.state.groupImage
+        }
+      }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "camera",
+        type: "font-awesome",
+        iconStyle: {
+          color: '#fff',
+          fontSize: 20,
+          marginBottom: 13
+        }
+      }), /*#__PURE__*/React.createElement(Text, {
+        style: {
+          fontSize: 13,
+          fontFamily: 'sf-regular',
+          color: '#fff',
+          textAlign: 'center'
+        }
+      }, "Upload ", values.entityName, " image")));
+    }
+
+    return null;
+  }
+
+  renderPage() {
+    return this.renderForm();
+  }
+
+  renderVisibilityToggle() {
+    if (!this.props.circleAllowPublicCircles) {
+      return null;
+    }
+
+    if (this.props.user.category === 'family') {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.toggleContainer
+    }, /*#__PURE__*/React.createElement(Toggle, {
+      options: this.visibilityOptions,
+      onPress: this.onPressToggle.bind(this),
+      activeVal: this.state.visibility
+    }));
+  }
+
+  renderTitleEntry() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(ScrollView, {
+      style: styles.container,
+      keyboardShouldPersistTaps: "handled"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingHorizontal: 24,
+        paddingBottom: 10,
+        paddingTop: 20
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      autoFocus: true,
+      label: this.state.title.length > 0 ? `${_.capitalize(values.entityName)} name` : ' ',
+      labelStyle: {
+        fontSize: 13,
+        color: '#fff'
+      },
+      placeholder: `${_.capitalize(values.entityName)} name`,
+      placeholderTextColor: "rgba(255,255,255,0.5)",
+      value: this.state.title,
+      onChangeText: value => {
+        this.onChangeTitle(value);
+      },
+      textStyle: {
+        marginTop: 10,
+        fontSize: 28,
+        color: '#fff',
+        fontFamily: 'sf-semibold'
+      }
+    }))), this.state.title.length > 0 && /*#__PURE__*/React.createElement(View, {
+      style: [styles.footer, {
+        paddingBottom: 16
+      }]
+    }, /*#__PURE__*/React.createElement(InlineButton, {
+      color: "#fff",
+      textStyle: {
+        color: this.props.colourBrandingMain
+      },
+      onPress: this.nextPage.bind(this),
+      touchableStyle: styles.footerButton,
+      style: {
+        height: 50
+      },
+      fillTouchable: true,
+      large: true
+    }, "Create ", values.entityName)));
+  }
+
+  renderForm() {
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      style: [styles.container, styles.greyContainer],
+      keyboardShouldPersistTaps: "handled"
+    }, this.state.submittingGroup && /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    })), this.renderVisibilityToggle(), /*#__PURE__*/React.createElement(FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(FormCardSection, {
+      label: `${_.capitalize(values.entityName)} name`,
+      placeholder: `${_.capitalize(values.entityName)} name`,
+      textValue: this.state.title,
+      onChangeText: value => {
+        this.onChangeTitle(value);
+      },
+      editable: this.state.submittingGroup === false,
+      isValid: () => {
+        return this.state.title.length > 1;
+      },
+      required: true
+    })), /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 24
+      }
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      activeOpacity: 0.8,
+      onPress: this.showUploadMenu.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.imageContainer
+    }, this.renderInnerImage()))));
+  }
+
+  renderPreviewAtts() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.attendeePreviews
+    }, this.state.selected.map((user, index) => {
+      if (index < 3) {
+        return /*#__PURE__*/React.createElement(ProfilePic, {
+          ProfilePic: user.profilePic,
+          Diameter: 36,
+          style: [styles.profilePic, {
+            left: index * -20
+          }],
+          key: user.userId
+        });
+      }
+
+      return null;
+    }));
+  }
+
+  renderInviteButton() {
+    if (this.state.selected.length === 0) {
+      return /*#__PURE__*/React.createElement(InlineButton, {
+        color: this.props.colourBrandingMain,
+        onPress: this.openInvite.bind(this),
+        touchableStyle: styles.footerButton,
+        fillTouchable: true,
+        large: true
+      }, "Select members");
+    }
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, this.renderPreviewAtts(), /*#__PURE__*/React.createElement(View, {
+      style: styles.fill
+    }, /*#__PURE__*/React.createElement(InlineButton, {
+      onPress: this.openInvite.bind(this),
+      style: styles.inviteButton,
+      color: this.props.colourBrandingMain,
+      large: true
+    }, "Select members"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.tix
+    }, /*#__PURE__*/React.createElement(Text, null, this.state.selected.length), ' selected')));
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' && 'padding',
+      style: styles.viewContainer
+    }, this.renderUploadMenu(), /*#__PURE__*/React.createElement(View, {
+      style: [stylez.genericPageContainer, this.state.page === 1 && {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Header, {
+      leftIcon: "close",
+      leftIconType: "pluss",
+      leftText: this.state.page !== 1 && 'Cancel',
+      leftIconStyle: this.state.page !== 1 && {
+        color: this.props.colourBrandingMain
+      },
+      onPressLeft: this.onPressBack.bind(this),
+      rightText: this.state.page !== 1 && 'Done',
+      onPressRight: this.clickCreate.bind(this),
+      optionalRightStyle: this.state.submittingGroup && {
+        opacity: 0.2
+      },
+      text: this.state.page === 1 ? `Create a ${values.entityName}` : this.state.title.length > 1 ? this.state.title : ' ',
+      style: this.state.page === 1 && {
+        backgroundColor: this.props.colourBrandingMain,
+        ...styles.page1Header
+      },
+      textColour: this.state.page === 1 && '#fff'
+    }), this.renderPage(), this.state.page === 2 && /*#__PURE__*/React.createElement(StickyFooter, {
+      style: styles.footer
+    }, this.renderInviteButton())), this.renderInvitePopup());
+  }
+
+}
+
+const styles = {
+  footer: {
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  footerButton: {
+    flex: 1
+  },
+  inviteButton: {
+    height: 36,
+    width: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+    marginLeft: 10
+  },
+  inviteButtonText: {
+    color: '#fff',
+    fontFamily: 'sf-semibold',
+    fontSize: 15
+  },
+  profilePic: {
+    borderWidth: 1,
+    borderColor: '#fff'
+  },
+  fill: {
+    flex: 1,
+    flexDirection: 'row-reverse'
+  },
+  attendeePreviews: {
+    width: 90,
+    height: 36,
+    flexDirection: 'row'
+  },
+  viewContainer: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  container: {
+    flex: 1,
+    position: 'relative'
+  },
+  greyContainer: {
+    backgroundColor: '#f0f0f5'
+  },
+  section: {
+    backgroundColor: '#fff',
+    marginTop: 16,
+    paddingHorizontal: 24,
+    elevation: 1
+  },
+  sectionItem: {
+    paddingVertical: 16
+  },
+  sectionItemUnderline: {
+    borderBottomWidth: 1,
+    borderBottomColor: LINEGREY
+  },
+  errorDot: {
+    height: 5,
+    width: 5,
+    borderRadius: 3,
+    backgroundColor: COLOUR_TEAL,
+    alignSelf: 'center'
+  },
+  inputView: {
+    width: '100%',
+    marginBottom: 5
+  },
+  labelStyle: {
+    fontSize: 15,
+    backgroundColor: 'transparent',
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARK
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontFamily: 'sf-bold',
+    fontSize: 17,
+    color: 'white',
+    borderRadius: 5
+  },
+  uploadButton: {
+    width: '100%',
+    //height: 150,
+    alignContent: 'center',
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    top: 65
+  },
+  uploadText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    textAlign: 'center',
+    paddingVertical: 7,
+    backgroundColor: 'transparent',
+    paddingHorizontal: 20,
+    color: TEXT_DARK
+  },
+  pageErrorText: {
+    backgroundColor: 'transparent',
+    color: COLOUR_TANGERINE,
+    fontSize: 18,
+    fontFamily: 'sf-regular',
+    marginTop: 0,
+    textAlign: 'center'
+  },
+  userPopupContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+    ...Platform.select({
+      ios: {
+        paddingTop: 20
+      }
+    })
+  },
+  closeContainer: {
+    paddingRight: 20,
+    paddingTop: 10,
+    paddingLeft: 10,
+    paddingBottom: 10,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    borderRadius: 5,
+    zIndex: 2,
+    ...Platform.select({
+      ios: {
+        paddingTop: 30
+      }
+    })
+  },
+  close: {
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: {
+      width: 2,
+      height: 1
+    },
+    textShadowRadius: 1
+  },
+  listItem: {
+    paddingBottom: 10,
+    paddingHorizontal: 0,
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    position: 'relative'
+  },
+  listItemTextContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    paddingLeft: 10
+  },
+  searchingContactsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingTop: 20
+  },
+  searchingContactsInnerContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1
+  },
+  searchingContacts: {
+    flex: 1,
+    fontSize: 16,
+    fontFamily: 'sf-regular',
+    minWidth: 100
+  },
+  emptySearchingContacts: {
+    opacity: 0.5
+  },
+  toText: {
+    fontFamily: 'sf-regular',
+    fontSize: 12,
+    color: TEXT_DARK,
+    opacity: 0.5,
+    marginRight: 10
+  },
+  selectedContact: {
+    paddingTop: 10,
+    paddingRight: 5,
+    fontFamily: 'sf-bold',
+    fontSize: 16,
+    color: COLOUR_PURPLE
+  },
+  page1Header: {
+    shadowColor: 'transparent',
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  imageContainer: {
+    width: PHOTO_WIDTH,
+    height: PHOTO_HEIGHT,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: LINEGREY,
+    borderRadius: 4
+  },
+  tix: {
+    fontFamily: 'sf-semibold',
+    color: TEXT_LIGHT,
+    fontSize: 14,
+    textAlign: 'center',
+    flex: 1,
+    alignSelf: 'center'
+  },
+  toggleContainer: {
+    paddingHorizontal: 16,
+    marginTop: 16
+  }
+};
+
+const mapStateToProps = state => {
+  return {
+    connected: state.connection.connected,
+    user: state.user,
+    blockedUserKeys: state[values.reducerKeyChats].blockedUsers,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    circleAllowPublicCircles: getSiteSettingFromState(state, values.allowPublicKey)
+  };
+};
+
+export default connect(mapStateToProps, {
+  createGroup
+})(NewGroup);
+//# sourceMappingURL=NewGroup.js.map