<commit_before>import Autocomplete from "react-autocomplete";
import React from "react";
import Icon from "../Icon/Icon";
import Translate from "react-translate-component";
import cnames from "classnames";

export default class TypeAhead extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.defaultValue
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.value && nextProps.value != this.state.value) {
            this.setState({ value: nextProps.value });
        }
    }

    onClick = () => {
        // Timer is used to keep menu from popping back open due to order of blur then click event
        if (this.blockClick) {
            return;
        }
        const { isMenuShowing } = this.state || {};
        this.setState({ isMenuShowing: !isMenuShowing, filter: "" }, () => {
            const { autocomplete } = this.refs;
            autocomplete.refs.input.focus();
        });
    };

    onChange = e => {
        this.setState({ filter: e.target.value });
        if (this.props.onChange) {
            this.props.onChange(e.target.value);
        }
    };

    onSelect = value => {
        this.setState({ value, filter: "", isMenuShowing: false });
        if (this.props.onSelect) {
            this.props.onSelect(value);
        }
    };

    renderInput = props => {
        const { isMenuShowing } = this.state || {};
        return isMenuShowing ? (
            <input {...props} style={TypeAhead.inputStyle} />
        ) : null;
    };

    dropDown = () => {
        const { props, state } = this;
        const { filter = "", isMenuShowing } = state;
        let inputProps = props.inputProps || {};

        if (props.tabIndex) inputProps.tabIndex = props.tabIndex;
        return (
            <Autocomplete
                renderInput={this.renderInput}
                ref="autocomplete"
                items={
                    props.items || [
                        { id: "foo", label: "foo" },
                        { id: "bar", label: "bar" },
                        { id: "baz", label: "baz" }
                    ]
                }
                shouldItemRender={({ label }) =>
                    label.toLowerCase().indexOf(filter.toLowerCase()) > -1
                }
                getItemValue={this.getValueFromItem}
                renderItem={this.renderItem}
                value={filter}
                onChange={this.onChange}
                onSelect={this.onSelect}
                inputProps={{ ...inputProps, onBlur: this.onBlur }}
                menuStyle={TypeAhead.menuStyle}
                wrapperProps={{ className: isMenuShowing ? "typeahead__innerList" : "" }}
                open={isMenuShowing}
            />
        );
    };

    onBlur = () => {
        // Timer is used to keep menu from popping back open due to order of blur then click event
        this.timer && clearTimeout(this.timer);
        this.blockClick = true;
        this.setState({ isMenuShowing: true });
        this.timer = setTimeout(() => {
            this.blockClick = false;
        }, 300); // Magic number that seems fast and slow enough for events and render to complete
    };

    static inputStyle = {
        marginTop: 4
    };


    // Suggestion Menu List
    static menuStyle = {
        borderBottomRightRadius: 3,
        borderBottomLeftRadius: 3,
        boxShadow: "0 2px 12px rgba(0, 0, 0, 0.1)",
        paddingBottom: 0,
        marginTop: 5,
        marginLeft: 0,
        width: "100%",
        maxWidth: 436,
        fontSize: "90%",
        position: "",
        overflowX: "visible",
        overflowY: "scroll",
        maxHeight: "10rem",
        zIndex: 1
    };

    renderItem = (item, highlighted) => {
        const isDisabled = item.status && item.status > 1;

        return (
            <div
                key={item.id}
                className={cnames("typeahead__innerItem", highlighted ? " typeahead__innerItem_highlighted" : "")}
            >
                <span className={ isDisabled ? "typeahead__innerItem__disabled" : "" }>
                    {item.label}
                </span>
                <span style={{ float: "right" }}>
                    {item.status}
                </span>
            </div>
        );
    };

    getValueFromItem = item => item.label;

    selectedDisplay = () => {
        const { value } = this.state;
        return (
            <div
                onClick={this.onClick}
                className="typeahead__input"
            >
                {value}
            </div>
        );
    };

    render() {
        const { isMenuShowing } = this.state || {};
        return (
            <div className="typeahead"
                style={{paddingBottom: isMenuShowing ? "15px" : ""}} // Something is making the typeahead take less space when dropdown is open. Add extra padding for now...
            >
                {!!this.props.label ? (
                    <label className="left-label">
                        <Translate content={this.props.label} />
                    </label>
                ) : null}
                {this.selectedDisplay()}
                {this.dropDown()}
                <Icon
                    name="chevron-down"
                    style={{
                        position: "absolute",
                        right: 10,
                        top: !!this.props.label ? 35 : 7,
                        transform: isMenuShowing ? "rotate(180deg)" : null
                    }}
                />
            </div>
        );
    }
}
<commit_msg>Update TypeAhead.js<commit_after>import Autocomplete from "react-autocomplete";
import React from "react";
import Icon from "../Icon/Icon";
import Translate from "react-translate-component";
import cnames from "classnames";

export default class TypeAhead extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.defaultValue
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.value && nextProps.value != this.state.value) {
            this.setState({ value: nextProps.value });
        }
    }

    onClick = () => {
        // Timer is used to keep menu from popping back open due to order of blur then click event
        if (this.blockClick) {
            return;
        }
        const { isMenuShowing } = this.state || {};
        this.setState({ isMenuShowing: !isMenuShowing, filter: "" }, () => {
            const { autocomplete } = this.refs;
            autocomplete.refs.input.focus();
        });
    };

    onChange = e => {
        this.setState({ filter: e.target.value });
        if (this.props.onChange) {
            this.props.onChange(e.target.value);
        }
    };

    onSelect = value => {
        this.setState({ value, filter: "", isMenuShowing: false });
        if (this.props.onSelect) {
            this.props.onSelect(value);
        }
    };

    renderInput = props => {
        const { isMenuShowing } = this.state || {};
        return isMenuShowing ? (
            <input {...props} style={TypeAhead.inputStyle} />
        ) : null;
    };

    dropDown = () => {
        const { props, state } = this;
        const { filter = "", isMenuShowing } = state;
        let inputProps = props.inputProps || {};

        if (props.tabIndex) inputProps.tabIndex = props.tabIndex;
        return (
            <Autocomplete
                renderInput={this.renderInput}
                ref="autocomplete"
                items={
                    props.items || [
                        { id: "foo", label: "foo" },
                        { id: "bar", label: "bar" },
                        { id: "baz", label: "baz" }
                    ]
                }
                shouldItemRender={({ label }) =>
                    label.toLowerCase().indexOf(filter.toLowerCase()) > -1
                }
                getItemValue={this.getValueFromItem}
                renderItem={this.renderItem}
                value={filter}
                onChange={this.onChange}
                onSelect={this.onSelect}
                inputProps={{ ...inputProps, onBlur: this.onBlur }}
                menuStyle={TypeAhead.menuStyle}
                wrapperProps={{ className: isMenuShowing ? "typeahead__innerList" : "" }}
                open={isMenuShowing}
            />
        );
    };

    onBlur = () => {
        // Timer is used to keep menu from popping back open due to order of blur then click event
        this.timer && clearTimeout(this.timer);
        this.blockClick = true;
        this.setState({ isMenuShowing: false });
        this.timer = setTimeout(() => {
            this.blockClick = false;
        }, 300); // Magic number that seems fast and slow enough for events and render to complete
    };

    static inputStyle = {
        marginTop: 4
    };


    // Suggestion Menu List
    static menuStyle = {
        borderBottomRightRadius: 3,
        borderBottomLeftRadius: 3,
        boxShadow: "0 2px 12px rgba(0, 0, 0, 0.1)",
        paddingBottom: 0,
        marginTop: 5,
        marginLeft: 0,
        width: "100%",
        maxWidth: 436,
        fontSize: "90%",
        position: "",
        overflowX: "visible",
        overflowY: "scroll",
        maxHeight: "10rem",
        zIndex: 1
    };

    renderItem = (item, highlighted) => {
        const isDisabled = item.status && item.status > 1;

        return (
            <div
                key={item.id}
                className={cnames("typeahead__innerItem", highlighted ? " typeahead__innerItem_highlighted" : "")}
            >
                <span className={ isDisabled ? "typeahead__innerItem__disabled" : "" }>
                    {item.label}
                </span>
                <span style={{ float: "right" }}>
                    {item.status}
                </span>
            </div>
        );
    };

    getValueFromItem = item => item.label;

    selectedDisplay = () => {
        const { value } = this.state;
        return (
            <div
                onClick={this.onClick}
                className="typeahead__input"
            >
                {value}
            </div>
        );
    };

    render() {
        const { isMenuShowing } = this.state || {};
        return (
            <div className="typeahead"
                style={{paddingBottom: isMenuShowing ? "15px" : ""}} // Something is making the typeahead take less space when dropdown is open. Add extra padding for now...
            >
                {!!this.props.label ? (
                    <label className="left-label">
                        <Translate content={this.props.label} />
                    </label>
                ) : null}
                {this.selectedDisplay()}
                {this.dropDown()}
                <Icon
                    name="chevron-down"
                    style={{
                        position: "absolute",
                        right: 10,
                        top: !!this.props.label ? 35 : 7,
                        transform: isMenuShowing ? "rotate(180deg)" : null
                    }}
                />
            </div>
        );
    }
}

{'fraction_non_alphanumeric': 0.12250863672601647, 'fraction_numerical': 0.00726370803436974, 'mean_word_length': 1.4170413187754227, 'pattern_counts': {'":': 0, '<': 35, '<?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': '4804940', 'n_tokens_mistral': 3130, 'n_tokens_neox': 2921, 'n_words': 667}