<commit_before>import React from "react";
import ReactDOM from "react-dom";
import ShallowComponent from "robe-react-commons/lib/components/ShallowComponent";
import {Application} from "robe-react-commons";
import {Nav, NavItem, InputGroup, Overlay, Popover} from "react-bootstrap";
import DatePicker from "../inputs/datepicker/DatePicker"
import FaIcon from "../faicon/FaIcon"
import momentjs from "moment";
import "./DataFilter.css";

export default class DataFilter extends ShallowComponent {

    static propTypes = {
        /**
         * placeholder text
         */
        placeholder: React.PropTypes.string,

        /**
         * Is component visible or not
         */
        visible: React.PropTypes.bool,

        /**
         * Fired when filter is changed
         */
        onChange: React.PropTypes.func,

        /**
         * Fields to populate selection list
         */
        fields: React.PropTypes.array
    };

    static defaultProps = {
        placeholder: "Filter",
        visible: true
    };

    operators = ["= equal", "!= not equal", "< less", "<= less or equal", "> greater", ">= greater or equal", "~= like", "|= in (separator:|)"];
    phase = 0;
    filters = [];
    filter = {};
    inputRef;
    keyReset = false;

    constructor(props) {
        super(props);
        this.state = {
            displayValue: "",
            showSelect: false,
            showDatePicker: false,
            selectOffset: 10,
            nav: [],
            activeKey: 1
        };
    }

    render() {
        if (this.props.visible) {
            return (
                <div className="data-filter-multiple-select"
                     onClick={()=>{if(!this.state.showDatePicker) this.inputRef.focus()}}>
                    <span className="data-filter-close-all" onClick={this.__removeAllFilters}>
                        {this.state.displayValue || this.filters.length > 0 ?
                            <FaIcon code="fa-close" size="fa-sm" className="data-filter-close-all-fa"/> : ""}
                    </span>
                    {this.__renderFilters()}

                    <div className="data-filter-input-container">
                        <input
                            ref={(component) => { this.inputRef = component } }
                            onChange={this.__onChange}
                            value={this.state.displayValue}
                            placeholder={this.props.placeholder}
                            onFocus={this.__onFocus}
                            onKeyDown={this.__onKeyDown}
                            className="data-filter-input"
                        />
                        <div
                            ref="dataFilterMirror"
                            id="dataFilterMirror"
                            style={{position:"absolute",display:"block",zIndex:"-5000",opacity: 0,fontSize:"12px"}}
                        >
                        </div>
                        <Nav
                            ref="dataFilterSelect"
                            style={{marginLeft: this.state.selectOffset, display:this.state.showSelect?"block":"none"}}
                            role="tablist"
                            onSelect={this.__onSelectKey}
                            activeKey={this.state.activeKey}
                            className="data-filter-nav"
                        >
                            {this.state.nav}
                        </Nav>
                        <div className="data-filter-datepicker"
                             style={{marginLeft: this.state.selectOffset-20, display:this.state.showDatePicker?"block":"none"}}>
                            <DatePicker
                                onChange={this.__dateChange}
                                name="DatePicker"
                                maxWidth="200px"
                            />
                        </div>
                    </div>
                </div>
            );
        }
        return <span />;
    }

    __renderFilters = () => {
        let valueList = [];
        for (let i = 0; i < this.filters.length; i++) {
            let filter = this.filters[i];
            if (filter !== undefined) {
                valueList.push(
                    <div key={i} className="data-filter-select-item">
                        <span
                            className="data-filter-select-label"> {filter.subject.label + " " + filter.operator + " " + filter.filter}</span>
                        <span className="data-filter-select-icon"
                              onClick={this.__removeFilter.bind(undefined,i)}>x</span>
                    </div>
                );
            }
        }
        return valueList;
    }

    __dateChange(e) {
        this.filter.filter = momentjs(e.target.parsedValue).format("YYYY-MM-DD");
        this.setState({
            displayValue: this.__generateFilterValue() + this.filter.filter
        });
    }

    __onChange(e) {
        if (!e.target.value.startsWith(this.__generateFilterValue())) return false;
        if (this.phase == 0) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value);
        } else if (this.phase == 1) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value.replace(this.__generateFilterValue(), ""));
        } else if (this.phase == 2) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value.replace(this.__generateFilterValue(), ""));
        }
        return false;
    }

    __onKeyDown = (e) => {
        let code = e.keyCode || e.which;
        //console.log(code)
        if (code == 8) { //backspace
            if (this.phase == 0) {
                if (this.filters.length > 0 && this.state.displayValue.replace(this.__generateFilterValue(), "") == "") {
                    this.filter = {};
                    this.filter = this.filters[this.filters.length - 1];
                    this.filters.pop();
                    this.__filterChange();<commit_msg>Test run error bugfix for DataFilter<commit_after>import React from "react";
import ReactDOM from "react-dom";
import ShallowComponent from "robe-react-commons/lib/components/ShallowComponent";
import {Application} from "robe-react-commons";
import {Nav, NavItem, InputGroup, Overlay, Popover} from "react-bootstrap";
import DatePicker from "../inputs/datepicker/DatePicker"
import FaIcon from "../faicon/FaIcon"
import momentjs from "moment";
import "./DataFilter.css";

export default class DataFilter extends ShallowComponent {

    static propTypes = {
        /**
         * placeholder text
         */
        placeholder: React.PropTypes.string,

        /**
         * Is component visible or not
         */
        visible: React.PropTypes.bool,

        /**
         * Fired when filter is changed
         */
        onChange: React.PropTypes.func,

        /**
         * Fields to populate selection list
         */
        fields: React.PropTypes.array
    };

    static defaultProps = {
        placeholder: "Filter",
        visible: true
    };

    operators = ["= equal", "!= not equal", "< less", "<= less or equal", "> greater", ">= greater or equal", "~= like", "|= in (separator:|)"];
    phase = 0;
    filters = [];
    filter = {};
    inputRef;
    keyReset = false;

    constructor(props) {
        super(props);
        this.state = {
            displayValue: "",
            showSelect: false,
            showDatePicker: false,
            selectOffset: 10,
            nav: [],
            activeKey: 1
        };
    }

    render() {
        if (this.props.visible) {
            return (
                <div className="data-filter-multiple-select"
                     onClick={()=>{if(!this.state.showDatePicker) this.inputRef.focus()}}>
                    <span className="data-filter-close-all" onClick={this.__removeAllFilters}>
                        {this.state.displayValue || this.filters.length > 0 ?
                            <FaIcon code="fa-close" size="fa-sm" className="data-filter-close-all-fa"/> : ""}
                    </span>
                    {this.__renderFilters()}

                    <div className="data-filter-input-container">
                        <input
                            ref={(component) => { this.inputRef = component } }
                            onChange={this.__onChange}
                            value={this.state.displayValue}
                            placeholder={this.props.placeholder}
                            onFocus={this.__onFocus}
                            onKeyDown={this.__onKeyDown}
                            className="data-filter-input"
                        />
                        <div
                            ref="dataFilterMirror"
                            id="dataFilterMirror"
                            style={{position:"absolute",display:"block",zIndex:"-5000",opacity: 0,fontSize:"12px"}}
                        >
                        </div>
                        <Nav
                            ref="dataFilterSelect"
                            style={{marginLeft: this.state.selectOffset, display:this.state.showSelect?"block":"none"}}
                            role="tablist"
                            onSelect={this.__onSelectKey}
                            activeKey={this.state.activeKey}
                            className="data-filter-nav"
                        >
                            {this.state.nav}
                        </Nav>
                        <div className="data-filter-datepicker"
                             style={{marginLeft: this.state.selectOffset-20, display:this.state.showDatePicker?"block":"none"}}>
                            <DatePicker
                                onChange={this.__dateChange}
                                name="DatePicker"
                                maxWidth="200px"
                            />
                        </div>
                    </div>
                </div>
            );
        }
        return <span />;
    }

    __renderFilters = () => {
        let valueList = [];
        for (let i = 0; i < this.filters.length; i++) {
            let filter = this.filters[i];
            if (filter !== undefined) {
                valueList.push(
                    <div key={i} className="data-filter-select-item">
                        <span
                            className="data-filter-select-label"> {filter.subject.label + " " + filter.operator + " " + filter.filter}</span>
                        <span className="data-filter-select-icon"
                              onClick={this.__removeFilter.bind(undefined,i)}>x</span>
                    </div>
                );
            }
        }
        return valueList;
    }

    __dateChange(e) {
        this.filter.filter = momentjs(e.target.parsedValue).format("YYYY-MM-DD");
        this.setState({
            displayValue: this.__generateFilterValue() + this.filter.filter
        });
    }

    __onChange(e) {
        if (!e.target.value.match("^"+this.__generateFilterValue())) return false;
        if (this.phase == 0) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value);
        } else if (this.phase == 1) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value.replace(this.__generateFilterValue(), ""));
        } else if (this.phase == 2) {
            this.setState({
                displayValue: e.target.value
            });
            this.__makeSelect(e.target.value.replace(this.__generateFilterValue(), ""));
        }
        return false;
    }

    __onKeyDown = (e) => {
        let code = e.keyCode || e.which;
        //console.log(code)
        if (code == 8) { //backspace
            if (this.phase == 0) {
                if (this.filters.length > 0 && this.state.displayValue.replace(this.__generateFilterValue(), "") == "") {
                    this.filter = {};
                    this.filter = this.filters[this.filters.length - 1];
                    this.filters.pop();
                    this.__filterChange();
{'fraction_non_alphanumeric': 0.12425845759179092, 'fraction_numerical': 0.004008337341670675, 'mean_word_length': 1.3110411263430901, 'pattern_counts': {'":': 4, '<': 53, '<?xml version=': 0, '>': 63, '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': '750955', 'n_tokens_mistral': 3167, 'n_tokens_neox': 3043, 'n_words': 538}