<commit_before>import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {Link} from 'react-router';
import Lifespan from 'lifespan';
import LocalClient from '~/stores/local-client.stores.jsx';

import CheckBoxWithImg from '../checkbox-with-img.components.jsx';

class TopBarMenu extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	render() {
		if (process.env.__SHOW_RENDER__) {
			console.log('[RENDER] TopBarMenu');
		}
		const headers = _.without(this.props.children, false).map((child, index) => {
			const classes = Classnames({
				'top-bar-menu-item': true,
				'is-aligned-right': child.props.alignRight,
				'is-action': child.props.action,
				'is-icon-menu': !!child.props.img,
				'img-dark-background': child.props.imgDarkBackground,
			});

			return (
				<TopBarMenuItem
					className={classes}
					key={child.props.name || child.props.img}
					id={child.props.id}
					count={index}
					onMouseEnter={child.props.enter}
					onMouseLeave={child.props.leave}>
					{child.type.getHeader(child.props)}
					{child}
				</TopBarMenuItem>
			);
		});

		return (
			<ul className="top-bar-menu">
				{headers}
			</ul>
		);
	}
}

class TopBarMenuItem extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			topbarItemDisplayed: undefined,
		};
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

		// function binding
		this.toggleDisplay = this.toggleDisplay.bind(this);
	}

	async componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		const {head} = await this.client.fetch('/prototypoStore');

		this.setState({
			topbarItemDisplayed: head.toJS().topbarItemDisplayed,
		});

		this.client.getStore('/prototypoStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					topbarItemDisplayed: head.toJS().topbarItemDisplayed,
				});
			})
			.onDelete(() => {
				this.setState({
					topbarItemDisplayed: undefined,
				});
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	toggleDisplay() {
		if (this.state.topbarItemDisplayed === this.props.count) {
			this.client.dispatchAction('/store-value', {
				topbarItemDisplayed: undefined,
			});
		}
		else {
			this.client.dispatchAction('/store-value', {
				topbarItemDisplayed: this.props.count,
			});

			const selector = '.toolbar, #workboard';
			const outsideClick = () => {
				this.client.dispatchAction('/store-value', {
					topbarItemDisplayed: undefined,
				});
				document.querySelectorAll(selector).forEach((item) => {
					item.removeEventListener('click', outsideClick);
				});
			};

			document.querySelectorAll(selector).forEach((item) => {
				item.addEventListener('click', outsideClick);
			});
		}
	}

	render() {
		const classes = Classnames(this.props.className, {
			'topbaritem-displayed': this.state.topbarItemDisplayed === this.props.count,
		});

		return (
			<li
				className={classes}
				id={`topbar-menu-item-${this.props.count}`}<commit_msg>corrected a typo in classNames<commit_after>import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {Link} from 'react-router';
import Lifespan from 'lifespan';
import LocalClient from '~/stores/local-client.stores.jsx';

import CheckBoxWithImg from '../checkbox-with-img.components.jsx';

class TopBarMenu extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	render() {
		if (process.env.__SHOW_RENDER__) {
			console.log('[RENDER] TopBarMenu');
		}
		const headers = _.without(this.props.children, false).map((child, index) => {
			const classes = classNames({
				'top-bar-menu-item': true,
				'is-aligned-right': child.props.alignRight,
				'is-action': child.props.action,
				'is-icon-menu': !!child.props.img,
				'img-dark-background': child.props.imgDarkBackground,
			});

			return (
				<TopBarMenuItem
					className={classes}
					key={child.props.name || child.props.img}
					id={child.props.id}
					count={index}
					onMouseEnter={child.props.enter}
					onMouseLeave={child.props.leave}>
					{child.type.getHeader(child.props)}
					{child}
				</TopBarMenuItem>
			);
		});

		return (
			<ul className="top-bar-menu">
				{headers}
			</ul>
		);
	}
}

class TopBarMenuItem extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			topbarItemDisplayed: undefined,
		};
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

		// function binding
		this.toggleDisplay = this.toggleDisplay.bind(this);
	}

	async componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		const {head} = await this.client.fetch('/prototypoStore');

		this.setState({
			topbarItemDisplayed: head.toJS().topbarItemDisplayed,
		});

		this.client.getStore('/prototypoStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					topbarItemDisplayed: head.toJS().topbarItemDisplayed,
				});
			})
			.onDelete(() => {
				this.setState({
					topbarItemDisplayed: undefined,
				});
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	toggleDisplay() {
		if (this.state.topbarItemDisplayed === this.props.count) {
			this.client.dispatchAction('/store-value', {
				topbarItemDisplayed: undefined,
			});
		}
		else {
			this.client.dispatchAction('/store-value', {
				topbarItemDisplayed: this.props.count,
			});

			const selector = '.toolbar, #workboard';
			const outsideClick = () => {
				this.client.dispatchAction('/store-value', {
					topbarItemDisplayed: undefined,
				});
				document.querySelectorAll(selector).forEach((item) => {
					item.removeEventListener('click', outsideClick);
				});
			};

			document.querySelectorAll(selector).forEach((item) => {
				item.addEventListener('click', outsideClick);
			});
		}
	}

	render() {
		const classes = classNames(this.props.className, {
			'topbaritem-displayed': this.state.topbarItemDisplayed === this.props.count,
		});

		return (
			<li
				className={classes}
				id={`topbar-menu-item-${this.props.count}`}
{'fraction_non_alphanumeric': 0.15508274231678487, 'fraction_numerical': 0.0, 'mean_word_length': 3.7750188111361926, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, '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': '7484429', 'n_tokens_mistral': 2459, 'n_tokens_neox': 2047, 'n_words': 311}