<commit_before>var React = require("lib").React;
var ListMixin = require("./list-mixin.jsx").ListMixin;
var LoadingCircle = require("./loading-circle.jsx").LoadingCircle;

var Backbone = require("lib").Backbone;

var ListItem = React.createClass({

    render: function() {
        var Component = this.props.ItemComponent;
        return (
            <div onClick={this.select} className="filter-and-select-item collection-item">
                <Component {...this.props.contentProps} />
            </div>
        );
    },

    select: function() {
        this.props.parent.select(this.props.contentProps);
    }
});


var FilterAndSelectMixin = {

    _buildItemProps: function(object, index) {
        return {
            ItemComponent: this.props.ListItemComponent,
            contentProps: object,
            parent: this
        }
    },

    render: function() {

        var components = this.createList({
            ComponentClass: ListItem,
            collection: this.state.filteredCollection,
            buildProps: this._buildItemProps
        });

        return (
            <div>
                <input type="text"  onChange={this.handleInputChange} 
                                    onKeyUp={this.handleInputChange} 
                                    value={this.state.inputValue} />

                <div className="collection">
                    {components}
                </div>
            </div><commit_msg>Filter and Select Component: Fix formatting.<commit_after>var React = require("lib").React;
var ListMixin = require("./list-mixin.jsx").ListMixin;
var LoadingCircle = require("./loading-circle.jsx").LoadingCircle;

var Backbone = require("lib").Backbone;

var ListItem = React.createClass({

    render: function() {
        var Component = this.props.ItemComponent;
        return (
            <div onClick={this.select} className="filter-and-select-item collection-item">
                <Component {...this.props.contentProps} />
            </div>
        );
    },

    select: function() {
        this.props.parent.select(this.props.contentProps);
    }
});


var FilterAndSelectMixin = {

    _buildItemProps: function(object, index) {
        return {
            ItemComponent: this.props.ListItemComponent,
            contentProps: object,
            parent: this
        }
    },

    render: function() {

        var components = this.createList({
            ComponentClass: ListItem,
            collection: this.state.filteredCollection,
            buildProps: this._buildItemProps
        });

        return (
            <div>
                <input type="text"  onChange={this.handleInputChange} 
                                    onKeyUp={this.handleInputChange} 
                                    value={this.state.inputValue}
                                    placeholder="Search" />

                <div className="collection">
                    {components}
                </div>
            </div>
{'fraction_non_alphanumeric': 0.11546184738955824, 'fraction_numerical': 0.0, 'mean_word_length': 1.7321755027422303, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 5, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6029705', 'n_tokens_mistral': 783, 'n_tokens_neox': 746, 'n_words': 137}