<commit_before>import * as React from "react";
import "../styles/index.scss";

import {
	SearchkitManager,
	SearchkitComponent,
	FacetAccessor,
	FastClick,
	SearchkitComponentProps,
	ReactComponentType
} from "../../../../../core"

import {FilterItemComponent} from "../../filter-item/src/FilterItem";

const defaults = require("lodash/defaults")
const map = require("lodash/map")

export interface MenuFilterProps extends SearchkitComponentProps {
	field:string
	title:string
	id:string
	size?:number
	filterItemComponent?:ReactComponentType<FilterItemComponent>
}

export class MenuFilter extends SearchkitComponent<MenuFilterProps, any> {
	accessor:FacetAccessor

	static propTypes = defaults({
		field:React.PropTypes.string.isRequired,
		title:React.PropTypes.string.isRequired,
		id:React.PropTypes.string.isRequired,
		size:React.PropTypes.number
	}, SearchkitComponent.propTypes)

	static defaultProps = {
		filterItemComponent:FilterItemComponent
	}

	constructor(props) {
		super(props)
		this.translate = this.translate.bind(this)
	}

	defineBEMBlocks() {
		var blockName = this.props.mod || "menu-list"
		return {
			container: blockName,
			option: `${blockName}-option`
		}
	}

	defineAccessor() {
		return new FacetAccessor(
			this.props.field,
			{id:this.props.id, operator:"OR", title:this.props.title, size:this.props.size || 50}
		)
	}

	addFilter(option) {
		if (option === "All" || this.accessor.state.contains(option)) {
			this.accessor.state = this.accessor.state.clear();
		} else {
			this.accessor.state = this.accessor.state.setValue([option]);
		}
		this.searchkit.performSearch()
	}

	renderOption(key, count, isSelected) {

		return (
			React.createElement(this.props.filterItemComponent, {
				toggleFilter:this.addFilter.bind(this, key),
				bemBlocks: this.bemBlocks,
				label:this.translate(key),
				docCount:count,
				selected:isSelected,
				translate:this.translate
			})
		)
	}

	createOption(option) {
		const isChecked = this.accessor.state.contains(option.key)
		return this.renderOption(option.key, option.doc_count, isChecked);
	}

	render() {
		var block = this.bemBlocks.container
		var className = block().mix(`filter--${this.props.id}`)
		let isAllChecked = () => {
			return !this.accessor.state.getValue() || this.accessor.state.getValue().length == 0
		}

		return (
			<div className={className}>
				<div className={block("header")}>{this.props.title}</div>
				<div className={block("options")}>
				{this.renderOption("All", null, isAllChecked())}
				{map(this.accessor.getBuckets(), this.createOption.bind(this))}
				</div>
			</div>
		);
	}
}
<commit_msg>rename prop filterItemComponent to itemComponent<commit_after>import * as React from "react";
import "../styles/index.scss";

import {
	SearchkitManager,
	SearchkitComponent,
	FacetAccessor,
	FastClick,
	SearchkitComponentProps,
	ReactComponentType
} from "../../../../../core"

import {FilterItemComponent} from "../../filter-item/src/FilterItem";

const defaults = require("lodash/defaults")
const map = require("lodash/map")

export interface MenuFilterProps extends SearchkitComponentProps {
	field:string
	title:string
	id:string
	size?:number
	itemComponent?:ReactComponentType<FilterItemComponent>
}

export class MenuFilter extends SearchkitComponent<MenuFilterProps, any> {
	accessor:FacetAccessor

	static propTypes = defaults({
		field:React.PropTypes.string.isRequired,
		title:React.PropTypes.string.isRequired,
		id:React.PropTypes.string.isRequired,
		size:React.PropTypes.number
	}, SearchkitComponent.propTypes)

	static defaultProps = {
		itemComponent:FilterItemComponent
	}

	constructor(props) {
		super(props)
		this.translate = this.translate.bind(this)
	}

	defineBEMBlocks() {
		var blockName = this.props.mod || "menu-list"
		return {
			container: blockName,
			option: `${blockName}-option`
		}
	}

	defineAccessor() {
		return new FacetAccessor(
			this.props.field,
			{id:this.props.id, operator:"OR", title:this.props.title, size:this.props.size || 50}
		)
	}

	addFilter(option) {
		if (option === "All" || this.accessor.state.contains(option)) {
			this.accessor.state = this.accessor.state.clear();
		} else {
			this.accessor.state = this.accessor.state.setValue([option]);
		}
		this.searchkit.performSearch()
	}

	renderOption(key, count, isSelected) {

		return (
			React.createElement(this.props.itemComponent, {
				toggleFilter:this.addFilter.bind(this, key),
				bemBlocks: this.bemBlocks,
				label:this.translate(key),
				docCount:count,
				selected:isSelected,
				translate:this.translate
			})
		)
	}

	createOption(option) {
		const isChecked = this.accessor.state.contains(option.key)
		return this.renderOption(option.key, option.doc_count, isChecked);
	}

	render() {
		var block = this.bemBlocks.container
		var className = block().mix(`filter--${this.props.id}`)
		let isAllChecked = () => {
			return !this.accessor.state.getValue() || this.accessor.state.getValue().length == 0
		}

		return (
			<div className={className}>
				<div className={block("header")}>{this.props.title}</div>
				<div className={block("options")}>
				{this.renderOption("All", null, isAllChecked())}
				{map(this.accessor.getBuckets(), this.createOption.bind(this))}
				</div>
			</div>
		);
	}
}

{'fraction_non_alphanumeric': 0.1460909263838691, 'fraction_numerical': 0.0011413353623739774, 'mean_word_length': 4.4150360453141095, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, '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': '6985748', 'n_tokens_mistral': 1881, 'n_tokens_neox': 1707, 'n_words': 278}