<commit_before>var React = require('React');

var Tags = React.createClass({
    componentDidMount: function() {
        this.refs.input.getDOMNode().focus();
    },
    getInitialState: function() {
        return {
            tags: this.props.tags
        }
    },
    handleInput: function(e) {
        var tags = this.state.tags;
        if (e.key === "Enter" && e.target.value.trim() != "") {
            tags.push(e.target.value);
            this.refs.input.getDOMNode().value = "";
        }
        this.setState({
            tags: tags
        });
    },
    handleDelete: function(i, e) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({
            tags: tags
        });
    },
    handleKeyDown: function(e) {
        // TODO: might be wrong
        var tags = this.state.tags;
        var text = this.refs.input.getDOMNode().value;
        if (e.keyCode === 8 && text == "") {
            this.handleDelete(tags.length - 1);
        }
    },
    render: function() {
        var tagItems = this.state.tags.map(function(item, i) {
            return (
                <span key={i} className="tag">{item}
                   <a className="remove" 
                       onClick={this.handleDelete.bind(this, i)}>x</a>
                </span>
            )
        }.bind(this));
        return ( 
            <div className="tagInput"> {tagItems} 
                <input ref="input" 
                    type="text" 
                    placeholder="Add new tag"
                    onKeyPress={this.handleInput} 
                    onKeyDown={this.handleKeyDown}/>
            </div>
        )
    }
});

module.exports = Tags;<commit_msg>Added a partially working suggestions box to the input. In progress #15<commit_after>var React = require('React');

var Tags = React.createClass({
    componentDidMount: function() {
        this.refs.input.getDOMNode().focus();
    },
    getInitialState: function() {
        return {
            tags: this.props.tags,
            suggestions: this.props.suggestions,
            query: "",
            selectedIndex: 1
        }
    },
    handleDelete: function(i, e) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({
            tags: tags,
            query: ""
        });
    },
    handleChange: function(e) {
        this.setState({
            query: e.target.value
        })
    },
    handleKeyDown: function(e) {
        var tags = this.state.tags;
        var input = this.refs.input.getDOMNode();
        var query = this.state.query;
        var selectedIndex = this.state.selectedIndex;

        // when enter is pressed add query to tass
        if (e.keyCode === 13 && query != "") {
            tags.push(query);
            input.value = "";
            this.setState({ tags: tags, query: ""});
        }

        // when backspace key is pressed and query is blank, delete tag
        if (e.keyCode === 8 && query == "") { //
            this.handleDelete(tags.length - 1);
        }

        // up arrow
        if (e.keyCode === 38) {
            e.preventDefault();
        }

        // down arrow
        if (e.keyCode === 40) {
            e.preventDefault();
        }
    },
    render: function() {
        var tagItems = this.state.tags.map(function(item, i) {
            return (
                <span key={i} className="tag">{item}
                   <a className="remove" 
                       onClick={this.handleDelete.bind(this, i)}>x</a>
                </span>
            )
        }.bind(this));


        // get the suggestions for the given query
        var query = this.state.query;
        var selectedIndex = this.state.selectedIndex;

        if (query.trim().length > 1) {
            var suggestions = this.props.suggestions
                .filter(function(item) {
                    return (item.toLowerCase()).search(query) !== -1;
                })
                .map(function(item, i) {
                    return (
                        <li key={i} className={i == selectedIndex ? "active" : ""}>{item}</li>
                    )
                });
        }

        return ( 
            <div className="tags">
                <div className="tagInput"> {tagItems} 
                    <input ref="input" 
                        type="text" 
                        placeholder="Add new tag"
                        onChange={this.handleChange}
                        onKeyDown={this.handleKeyDown}/>
                </div>
                <div className="suggestions">
                    <ul> {suggestions} </ul>
                </div>
            </div>
        )
    }
});

/*
React.render(
    <Tags tags={tags} 
        suggestions={fruits} />, 
    document.getElementById("app")
);
*/

module.exports = Tags;
{'fraction_non_alphanumeric': 0.13702321724709784, 'fraction_numerical': 0.0035240464344941957, 'mean_word_length': 1.3651960784313726, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 27, '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': '6405518', 'n_tokens_mistral': 1372, 'n_tokens_neox': 1309, 'n_words': 272}