<commit_before>/*
 * Copyright (C) 2015 Actor LLC. <https://actor.im>
 */

import React, { Component } from 'react';
import { Container } from 'flux/utils';
import Modal from 'react-modal';
import ReactMixin from 'react-mixin';
import { IntlMixin } from 'react-intl';
import { Styles, TextField } from 'material-ui';
import ActorTheme from 'constants/ActorTheme';

import { KeyCodes } from 'constants/ActorAppConstants';

import EditGroupStore from 'stores/EditGroupStore';
import CropAvatarStore from 'stores/CropAvatarStore';

import EditGroupActionCreators from 'actions/EditGroupActionCreators';
import CropAvatarActionCreators from 'actions/CropAvatarActionCreators';

import AvatarItem from 'components/common/AvatarItem.react';
import CropAvatarModal from './CropAvatar.react.js';

const ThemeManager = new Styles.ThemeManager();

@ReactMixin.decorate(IntlMixin)
class EditGroup extends Component {
  static childContextTypes = {
    muiTheme: React.PropTypes.object
  };

  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }

  static getStores = () => [EditGroupStore, CropAvatarStore];

  static calculateState() {
    return {
      isOpen: EditGroupStore.isOpen(),
      group: EditGroupStore.getGroup(),
      title: EditGroupStore.getTitle(),
      about: EditGroupStore.getAbout(),
      isCropModalOpen: CropAvatarStore.isOpen()
    }
  }

  componentWillMount() {
    ThemeManager.setTheme(ActorTheme);
    ThemeManager.setComponentThemes({
      textField: {
        textColor: 'rgba(0,0,0,.87)',
        focusColor: '#68a3e7',
        backgroundColor: 'transparent',
        borderColor: '#68a3e7',
        disabledTextColor: 'rgba(0,0,0,.4)'
      }
    });
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.isOpen && !this.state.isOpen) {
      document.addEventListener('keydown', this.onKeyDown, false);
    } else if (!nextState.isOpen && this.state.isOpen) {
      document.removeEventListener('keydown', this.onKeyDown, false);
    }
  }

  onClose = () => EditGroupActionCreators.hide();
  onTitleChange = event => this.setState({title: event.target.value});
  onAboutChange = event => this.setState({about: event.target.value});

  onKeyDown = event => {
    if (event.keyCode === KeyCodes.ESC) {
      event.preventDefault();
      this.onClose();
    }
  };

  onSave = () => {
    const { group, title, about } = this.state;
    EditGroupActionCreators.editGroupTitle(group.id, title);
    EditGroupActionCreators.editGroupAbout(group.id, about);
    this.onClose();
  };

  onProfilePictureInputChange = () => {
    const imageInput = React.findDOMNode(this.refs.imageInput);
    const imageForm = React.findDOMNode(this.refs.imageForm);
    const file = imageInput.files[0];

    let reader = new FileReader();
    reader.onload = (event) => {
      CropAvatarActionCreators.show(event.target.result);
      imageForm.reset();<commit_msg>fix(web): fix edit group modal closing<commit_after>/*
 * Copyright (C) 2015 Actor LLC. <https://actor.im>
 */

import React, { Component } from 'react';
import { Container } from 'flux/utils';
import Modal from 'react-modal';
import ReactMixin from 'react-mixin';
import { IntlMixin } from 'react-intl';
import { Styles, TextField } from 'material-ui';
import ActorTheme from 'constants/ActorTheme';

import { KeyCodes } from 'constants/ActorAppConstants';

import EditGroupStore from 'stores/EditGroupStore';
import CropAvatarStore from 'stores/CropAvatarStore';

import EditGroupActionCreators from 'actions/EditGroupActionCreators';
import CropAvatarActionCreators from 'actions/CropAvatarActionCreators';

import AvatarItem from 'components/common/AvatarItem.react';
import CropAvatarModal from './CropAvatar.react.js';

const ThemeManager = new Styles.ThemeManager();

@ReactMixin.decorate(IntlMixin)
class EditGroup extends Component {
  static childContextTypes = {
    muiTheme: React.PropTypes.object
  };

  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }

  static getStores = () => [EditGroupStore, CropAvatarStore];

  static calculateState() {
    return {
      isOpen: EditGroupStore.isOpen(),
      group: EditGroupStore.getGroup(),
      title: EditGroupStore.getTitle(),
      about: EditGroupStore.getAbout(),
      isCropModalOpen: CropAvatarStore.isOpen()
    }
  }

  componentWillMount() {
    ThemeManager.setTheme(ActorTheme);
    ThemeManager.setComponentThemes({
      textField: {
        textColor: 'rgba(0,0,0,.87)',
        focusColor: '#68a3e7',
        backgroundColor: 'transparent',
        borderColor: '#68a3e7',
        disabledTextColor: 'rgba(0,0,0,.4)'
      }
    });
    this.setListeners();
  }

  componentWillUnmount() {
    this.removeListeners();
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.isOpen) {
      if (nextState.isCropModalOpen) {
        this.removeListeners();
      } else {
        this.setListeners();
      }
    }
  }

  setListeners = () => document.addEventListener('keydown', this.onKeyDown, false);
  removeListeners = () => document.removeEventListener('keydown', this.onKeyDown, false);

  onClose = () => EditGroupActionCreators.hide();
  onTitleChange = event => this.setState({title: event.target.value});
  onAboutChange = event => this.setState({about: event.target.value});

  onKeyDown = event => {
    if (event.keyCode === KeyCodes.ESC) {
      event.preventDefault();
      this.onClose();
    }
  };

  onSave = () => {
    const { group, title, about } = this.state;
    EditGroupActionCreators.editGroupTitle(group.id, title);
    EditGroupActionCreators.editGroupAbout(group.id, about);
    this.onClose();
  };

  onProfilePictureInputChange = () => {
    const imageInput = React.findDOMNode(this.refs.imageInput);
    const imageForm = React.findDOMNode(this.refs.imageForm);
    const file = imageInput.files[0];

    let reader = new FileReader();
    reader.onload = (event) => {
      CropAvatarActionCreators.show(event.target.result);
      imageForm.reset();
{'fraction_non_alphanumeric': 0.13037012557832123, 'fraction_numerical': 0.007270323859881031, 'mean_word_length': 3.877518130539887, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 23, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5759647', 'n_tokens_mistral': 1906, 'n_tokens_neox': 1879, 'n_words': 357}