<commit_before>var React = require('react/addons');
var StyleMixin = require('./defaultStyleMixin');
var PureRenderMixin = React.addons.PureRenderMixin;

var LEFT_KEYCODE = 37;
var RIGHT_KEYCODE = 39;

var Theatre = React.createClass({

	mixins: [ PureRenderMixin, StyleMixin ],

	propTypes: {
		closeHandler: React.PropTypes.func.isRequired,
		showProgress: React.PropTypes.bool,
		openItemIndex: React.PropTypes.number,
	},

	getDefaultProps: function() {
		return {
			showProgress: true,
			openItemIndex: 0,
		};
	},

	getInitialState: function() {
		return {
			currentItem: 0,
		};
	},

	// METHODS

	_getProgress: function() {
		return (this.state.currentItem/this.props.entries.length) * 100;
	},

	// EVENT HANDLERS

	_bindKeys: function(event) {
		var offset = 0;
		switch (event.keyCode) {
			case LEFT_KEYCODE:
				--offset;
				break;
			case RIGHT_KEYCODE:
				++offset;
				break;
		}

		this.setState({
			currentItem: Math.min(Math.max(this.state.currentItem+offset, 0), this.props.entries.length-1),
		});
	},

	// LIFECYCLE

	componentWillMount: function() {
		if (this.props.openItemIndex) {
			this.setState({
				currentItem: this.props.openItemIndex,
			});
		}
		document.addEventListener('keydown', this._bindKeys);
		document.getElementsByTagName('body')[0].style.overflow = 'hidden';
	},

	componentDidMount: function() {
	},

	componentWillUnmount: function() {
		document.removeEventListener('keydown', this._bindKeys);
		document.getElementsByTagName('body')[0].style.overflow = 'auto';
	},


	// RENDER

	_renderProgressBar: function() {
		if (this.props.showProgress) {
			return <div className="progress" style={this._progressStyle(this._getProgress())} />;
		}
	},

	render: function() {
		return(
			<div className="theatre" style={this._theatreStyle()}>
				{this._renderProgressBar()}
				<div className="theatre-bodyWrapper" style={this._theatreBodyWrapperStyle()}>
					<div className="theatre-header" style={this._theatreHeaderStyle()}>
						<div className="theatre-select" style={this._theatreSelectStyle()}></div>
						<div className="theatre-close" style={this._theatreCloseStyle()} onClick={this.props.closeHandler}>x</div>
					</div>
					<div className="theatre-content" style={this._theatreContentStyle()}>
						{this.props.entries[this.state.currentItem]}
					</div>
				</div>
			</div>
		);
	},<commit_msg>Pass the currentIndex to the closeHandler and add the required entries propType.<commit_after>var React = require('react/addons');
var StyleMixin = require('./defaultStyleMixin');
var PureRenderMixin = React.addons.PureRenderMixin;

var LEFT_KEYCODE = 37;
var RIGHT_KEYCODE = 39;

var Theatre = React.createClass({

	mixins: [ PureRenderMixin, StyleMixin ],

	propTypes: {
		entries: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
		closeHandler: React.PropTypes.func.isRequired,
		showProgress: React.PropTypes.bool,
		openItemIndex: React.PropTypes.number,
	},

	getDefaultProps: function() {
		return {
			showProgress: true,
			openItemIndex: 0,
		};
	},

	getInitialState: function() {
		return {
			currentItem: 0,
		};
	},

	// METHODS

	_getProgress: function() {
		return (this.state.currentItem/this.props.entries.length) * 100;
	},

	_close: function(event) {
		this.props.closeHandler(this.state.currentIndex);
	},

	// EVENT HANDLERS

	_bindKeys: function(event) {
		var offset = 0;
		switch (event.keyCode) {
			case LEFT_KEYCODE:
				--offset;
				break;
			case RIGHT_KEYCODE:
				++offset;
				break;
		}

		this.setState({
			currentItem: Math.min(Math.max(this.state.currentItem+offset, 0), this.props.entries.length-1),
		});
	},

	// LIFECYCLE

	componentWillMount: function() {
		if (this.props.openItemIndex) {
			this.setState({
				currentItem: this.props.openItemIndex,
			});
		}
		document.addEventListener('keydown', this._bindKeys);
		document.getElementsByTagName('body')[0].style.overflow = 'hidden';
	},

	componentDidMount: function() {
	},

	componentWillUnmount: function() {
		document.removeEventListener('keydown', this._bindKeys);
		document.getElementsByTagName('body')[0].style.overflow = 'auto';
	},


	// RENDER

	_renderProgressBar: function() {
		if (this.props.showProgress) {
			return <div className="progress" style={this._progressStyle(this._getProgress())} />;
		}
	},

	render: function() {
		return(
			<div className="theatre" style={this._theatreStyle()}>
				{this._renderProgressBar()}
				<div className="theatre-bodyWrapper" style={this._theatreBodyWrapperStyle()}>
					<div className="theatre-header" style={this._theatreHeaderStyle()}>
						<div className="theatre-select" style={this._theatreSelectStyle()}></div>
						<div className="theatre-close" style={this._theatreCloseStyle()} onClick={this._close}>x</div>
					</div>
					<div className="theatre-content" style={this._theatreContentStyle()}>
						{this.props.entries[this.state.currentItem]}
					</div>
				</div>
			</div>
		);
	},
{'fraction_non_alphanumeric': 0.15278622087132726, 'fraction_numerical': 0.005673758865248227, 'mean_word_length': 4.279144385026738, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '56223', 'n_tokens_mistral': 1886, 'n_tokens_neox': 1619, 'n_words': 266}