<commit_before>var React = require('react');
var Transition = React.addons.CSSTransitionGroup;
var blacklist = require('blacklist');
var classNames = require('classnames');
var utils = require('../utils.js');

var CurrentListStore = require('../stores/CurrentListStore');

var HeightDetector = require('./HeightDetector');
var ListFiltersAddForm = require('./ListFiltersAddForm');

var { Button, InputGroup } = require('elemental');

var ListFiltersAdd = React.createClass({

	displayName: 'ListFiltersAdd',

	getDefaultProps () {
		return {
			maxHeight: 360
		};
	},

	getInitialState () {
		return {
			isOpen: false,
			selectedField: false,
			innerHeight: 0
		};
	},

	openPopout () {
		this.setState({ isOpen: true });
	},

	closePopout () {
		this.setState({ isOpen: false, selectedField: false, innerHeight: 0 });
	},

	setPopoutHeight (height) {
		this.setState({ innerHeight: Math.min(this.props.maxHeight, height) });
	},

	navigateBack () {
		this.setState({
			selectedField: false
		});
	},

	selectField (field) {
		this.setState({
			selectedField: field
		});
	},

	applyFilter (value) {
		console.info('Applying filter:', this.state.selectedField.path, value);
		CurrentListStore.addFilter({
			field: this.state.selectedField,
			value: value
		});
		this.closePopout();
	},

	getListUIElements () {
		return Keystone.list.uiElements.map((el) => {
			return el.type === 'field' ? {
				type: 'field',
				field: Keystone.list.fields[el.field]
			} : el;
		});
	},

	renderButton () {
		return (
			<Button onClick={this.state.isOpen ? this.closePopout : this.openPopout}>
				Filters
				<span className="disclosure-arrow" />
			</Button>
		);
	},

	renderList () {
		var popoutList = this.getListUIElements().map((el, i) => {
			if (el.type === 'heading') {
				return <div key={'item-' + i} className="popout__list__header">{el.content}</div>
			}
			var filterIsActive = false; // TODO: Actually track filter values
			var itemClass = classNames('popout__list__item', {
				'is-selected': filterIsActive
			});
			var iconClass = classNames('popout__list__item__icon octicon',
				filterIsActive ? 'octicon-check' : 'octicon-chevron-right'
			);
			return (
				<button type="button" key={'item-' + el.field.path} onClick={() => { this.selectField(el.field) }} title={el.field.label} className={itemClass}>
					<span className={iconClass} />
					{el.field.label}
				</button>
			);
		});

		return (
			<HeightDetector onLayout={this.setPopoutHeight} key="list" className="popout-pane" component="div">
				<div className="popout__body">
					{popoutList}
				</div>
			</HeightDetector>
		);<commit_msg>show active filters in ListFiltersAdd popout<commit_after>var React = require('react');
var Transition = React.addons.CSSTransitionGroup;
var blacklist = require('blacklist');
var classNames = require('classnames');
var utils = require('../utils.js');

var CurrentListStore = require('../stores/CurrentListStore');

var HeightDetector = require('./HeightDetector');
var ListFiltersAddForm = require('./ListFiltersAddForm');

var { Button, InputGroup } = require('elemental');

function pluck(arr, key) {
	return arr.map(obj => obj[key]);
}

var ListFiltersAdd = React.createClass({

	displayName: 'ListFiltersAdd',

	getDefaultProps () {
		return {
			maxHeight: 360
		};
	},

	getInitialState () {
		return this.getStateFromStore();
	},
	
	getStateFromStore () {
		return {
			activeFilters: CurrentListStore.getActiveFilters(),
			innerHeight: 0,
			isOpen: false,
			selectedField: false,
		};
	},

	openPopout () {
		this.setState({ isOpen: true });
	},

	closePopout () {
		this.setState({ isOpen: false, selectedField: false, innerHeight: 0 });
	},

	setPopoutHeight (height) {
		this.setState({ innerHeight: Math.min(this.props.maxHeight, height) });
	},

	navigateBack () {
		this.setState({
			selectedField: false
		});
	},

	selectField (field) {
		this.setState({
			selectedField: field
		});
	},

	applyFilter (value) {
		console.info('Applying filter:', this.state.selectedField.path, value);
		CurrentListStore.addFilter({
			field: this.state.selectedField,
			value: value
		});
		this.closePopout();
	},

	getListUIElements () {
		return Keystone.list.uiElements.map((el) => {
			return el.type === 'field' ? {
				type: 'field',
				field: Keystone.list.fields[el.field]
			} : el;
		});
	},

	renderButton () {
		return (
			<Button onClick={this.state.isOpen ? this.closePopout : this.openPopout}>
				Filters
				<span className="disclosure-arrow" />
			</Button>
		);
	},

	renderList () {
		let activeFilterFields = pluck(this.state.activeFilters, 'field');
		let activeFilterPaths = pluck(activeFilterFields, 'path');
		
		var popoutList = this.getListUIElements().map((el, i) => {
			if (el.type === 'heading') {
				return <div key={'item-' + i} className="popout__list__header">{el.content}</div>
			}
			var filterIsActive = activeFilterPaths.length && (activeFilterPaths.indexOf(el.field.path) > -1);
			var itemClass = classNames('popout__list__item', {
				'is-selected': filterIsActive
			});
			var iconClass = classNames('popout__list__item__icon octicon',
				filterIsActive ? 'octicon-check' : 'octicon-chevron-right'
			);
			return (
				<button type="button" key={'item-' + el.field.path} onClick={() => { this.selectField(el.field) }} title={el.field.label} className={itemClass}>
					<span className={iconClass} />
					{el.field.label}
				</button>
			);
		});

		return (
			<HeightDetector onLayout={this.setPopoutHeight} key="list" className="popout-pane" component="div">
				<div className="popout__body">
					{popoutList}
				</div>
			</HeightDetector>
		);
{'fraction_non_alphanumeric': 0.16255982981740827, 'fraction_numerical': 0.001950008863676653, 'mean_word_length': 3.997342781222321, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, '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': '5435013', 'n_tokens_mistral': 2115, 'n_tokens_neox': 1862, 'n_words': 345}