<commit_before>var classnames = require('classnames');

var React = require('react/addons');
var Tappable = require('react-tappable');

module.exports = React.createClass({
	displayName: 'Modal',
	propTypes: {
		className: React.PropTypes.string,
		showModal: React.PropTypes.bool,
		loading: React.PropTypes.bool,
		mini: React.PropTypes.bool,
		iconKey: React.PropTypes.string,
		iconType: React.PropTypes.string,
		header: React.PropTypes.string,
		text: React.PropTypes.string,
		primaryActionText: React.PropTypes.string,
		primaryActionFn: React.PropTypes.func,
		secondaryActionText: React.PropTypes.string,
		secondaryActionFn: React.PropTypes.func
	},

	getDefaultProps: function() {
		return {
			showModal: false
		};
	},

	getInitialState: function() {
		return {
			showModal: this.props.showModal
		};
	},

	// TODO: use ReactTransitionGroup to handle fade in/out
	componentDidMount: function() {
		var self = this;

		setTimeout(function() {
			if (!self.isMounted()) return

			self.setState({ showModal: true });
		}, 1);
	},

	render: function() {
		// Set classnames
		var dialogClassName = classnames({
			'Modal-dialog': true,
			'Modal-mini': this.props.mini,
			'Modal-loading': this.props.loading
		}, this.props.className);
		var modalClassName = classnames('Modal', {
			'enter': this.state.showModal
		});

		// Set dynamic content
		var icon = this.props.iconKey ? <div className={'Modal-icon ' + this.props.iconKey + ' ' + this.props.iconType} /> : null;
		var header = this.props.header ? <div className="Modal-header">{this.props.header}</div> : null;
		var text = this.props.text ? <div className="Modal-text" dangerouslySetInnerHTML={{__html: this.props.text}} /> : null;
		var primaryAction = this.props.primaryActionText ? <Tappable onTap={this.props.primaryActionFn} className="Modal-action Modal-action-primary">{this.props.primaryActionText}</Tappable> : null;
		var secondaryAction = this.props.secondaryActionText ? <Tappable onTap={this.props.secondaryActionFn} className="Modal-action Modal-action-secondary">{this.props.secondaryActionText}</Tappable> : null;

		var actions = primaryAction ? ( <div className="Modal-actions">
			{secondaryAction}
			{primaryAction}
		</div> ) : null;

		return (
			<div className={modalClassName}>
				<div className={dialogClassName}>
					{icon}
					{header}
					{text}
					{actions}
				</div>
				<div className="Modal-backdrop" />
			</div>
		);
	}
});
<commit_msg>modal: use classnames, don't build manually<commit_after>var classnames = require('classnames');

var React = require('react/addons');
var Tappable = require('react-tappable');

module.exports = React.createClass({
	displayName: 'Modal',
	propTypes: {
		className: React.PropTypes.string,
		showModal: React.PropTypes.bool,
		loading: React.PropTypes.bool,
		mini: React.PropTypes.bool,
		iconKey: React.PropTypes.string,
		iconType: React.PropTypes.string,
		header: React.PropTypes.string,
		text: React.PropTypes.string,
		primaryActionText: React.PropTypes.string,
		primaryActionFn: React.PropTypes.func,
		secondaryActionText: React.PropTypes.string,
		secondaryActionFn: React.PropTypes.func
	},

	getDefaultProps: function() {
		return {
			showModal: false
		};
	},

	getInitialState: function() {
		return {
			showModal: this.props.showModal
		};
	},

	// TODO: use ReactTransitionGroup to handle fade in/out
	componentDidMount: function() {
		var self = this;

		setTimeout(function() {
			if (!self.isMounted()) return

			self.setState({ showModal: true });
		}, 1);
	},

	render: function() {
		// Set classnames
		var dialogClassName = classnames('Modal-dialog', this.props.className, {
			'Modal-mini': this.props.mini,
			'Modal-loading': this.props.loading
		});
		var modalClassName = classnames('Modal', { enter: this.state.showModal });
		var iconClassName = classnames('Modal-icon', this.props.iconKey, this.props.iconType)

		// Set dynamic content
		var icon = this.props.iconKey ? <div className={iconClassName} /> : null;
		var header = this.props.header ? <div className="Modal-header">{this.props.header}</div> : null;
		var text = this.props.text ? <div className="Modal-text" dangerouslySetInnerHTML={{__html: this.props.text}} /> : null;

		// actions
		var primaryAction = this.props.primaryActionText ? <Tappable onTap={this.props.primaryActionFn} className="Modal-action Modal-action-primary">{this.props.primaryActionText}</Tappable> : null;
		var secondaryAction = this.props.secondaryActionText ? <Tappable onTap={this.props.secondaryActionFn} className="Modal-action Modal-action-secondary">{this.props.secondaryActionText}</Tappable> : null;
		var actions = primaryAction ? ( <div className="Modal-actions">{secondaryAction} {primaryAction}</div> ) : null;

		return (
			<div className={modalClassName}>
				<div className={dialogClassName}>
					{icon}
					{header}
					{text}
					{actions}
				</div>
				<div className="Modal-backdrop" />
			</div>
		);
	}
});

{'fraction_non_alphanumeric': 0.14556451612903226, 'fraction_numerical': 0.0004032258064516129, 'mean_word_length': 4.351672060409925, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, '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': '6151645', 'n_tokens_mistral': 1733, 'n_tokens_neox': 1554, 'n_words': 305}