<commit_before>import React from 'react';
import cx from 'classnames';

const ModalWrapper = React.createClass({

  propTypes: {
    children: React.PropTypes.node.isRequired,
    className: React.PropTypes.string,
    transitionStyles: React.PropTypes.shape({
      enter: React.PropTypes.object,
      enterActive: React.PropTypes.object,
      default: React.PropTypes.object,
      leave: React.PropTypes.object,
      leaveActive: React.PropTypes.object
    }).isRequired,
    transitionEnterTimeout: React.PropTypes.number.isRequired,
    transitionLeaveTimeout: React.PropTypes.number.isRequired,
    style: React.PropTypes.object.isRequired
  },

  startAnimation(anim, timeout, callback) {
    const { transitionStyles } = this.props;
    const initState = { animationStart: transitionStyles[anim] };
    const activeState = { animationEnd: transitionStyles[`${anim}Active`] };
    this.replaceState(initState);
    setTimeout(() => {
      this.setState(activeState);
      setTimeout(callback, timeout);
    }, 30); // if the render is too fast the animation fails... 30ms is an empiric value.
  },

  componentWillEnter(callback) {
    this.startAnimation('enter', this.props.transitionEnterTimeout, callback);
  },

  componentDidEnter() {
    this.replaceState({ defaultStyle: this.props.transitionStyles.default });
  },

  componentWillLeave(callback) {
    this.leaving = true;
    this.startAnimation('leave', this.props.transitionLeaveTimeout, callback);
  },

  getStyle() {
    const { style } = this.props;
    const { animationStart, animationEnd, defaultStyle } = this.state;
    const userTransform = (animationEnd || animationStart || defaultStyle).transform;

    return {
      ...style,
      ...defaultStyle,
      ...animationStart,
      ...animationEnd,
      transform: cx(userTransform, style.transform)
    };
  },

  render() {
    if (!this.state) {
      return null;
    }
    const { children, className } = this.props;
    return (
      <div className={className} style={this.getStyle()}>
        {children}
      </div>
    );
  }

});

export default ModalWrapper;<commit_msg>add support for appear; use FlexView to center modal in window;<commit_after>import React from 'react';
import cx from 'classnames';
import FlexView from '../flex/FlexView';

const ModalWrapper = React.createClass({

  propTypes: {
    children: React.PropTypes.node.isRequired,
    className: React.PropTypes.string,
    transitionStyles: React.PropTypes.shape({
      enter: React.PropTypes.object,
      enterActive: React.PropTypes.object,
      default: React.PropTypes.object,
      leave: React.PropTypes.object,
      leaveActive: React.PropTypes.object
    }).isRequired,
    transitionEnterTimeout: React.PropTypes.number.isRequired,
    transitionLeaveTimeout: React.PropTypes.number.isRequired,
    style: React.PropTypes.object.isRequired
  },

  startAnimation(anim, timeout, callback) {
    const { transitionStyles } = this.props;
    const initState = { animationStart: transitionStyles[anim] };
    const activeState = { animationEnd: transitionStyles[`${anim}Active`] };
    this.replaceState(initState);
    setTimeout(() => {
      this.setState(activeState);
      setTimeout(callback, timeout);
    }, 30); // if the render is too fast the animation fails... 30ms is an empiric value.
  },

  componentWillAppear(callback) {
    this.componentWillEnter(callback);
  },

  componentDidAppear(callback) {
    this.componentDidEnter(callback);
  },

  componentWillEnter(callback) {
    this.startAnimation('enter', this.props.transitionEnterTimeout, callback);
  },

  componentDidEnter() {
    this.replaceState({ defaultStyle: this.props.transitionStyles.default || {} });
  },

  componentWillLeave(callback) {
    this.leaving = true;
    this.startAnimation('leave', this.props.transitionLeaveTimeout, callback);
  },

  getStyle() {
    const { style } = this.props;
    const { animationStart, animationEnd, defaultStyle } = this.state;
    const userTransform = (animationEnd || animationStart || defaultStyle).transform;

    return {
      ...style,
      ...defaultStyle,
      ...animationStart,
      ...animationEnd,
      transform: cx(userTransform, style.transform)
    };
  },

  render() {
    if (!this.state) {
      return null;
    }
    const { children, className } = this.props;
    return (
      <FlexView className={className} style={this.getStyle()} vAlignContent='center' hAlignContent='center'>
        {children}
      </FlexView>
    );
  }

});

export default ModalWrapper;
{'fraction_non_alphanumeric': 0.12458800263678313, 'fraction_numerical': 0.0017578554163920018, 'mean_word_length': 3.4671246319921494, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, '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': '3608695', 'n_tokens_mistral': 1297, 'n_tokens_neox': 1278, 'n_words': 265}