<commit_before>const {AutocompleteSelect} = FocusComponents.components.input;

const keyResolver = key => {
    return new Promise((resolve, reject) => {
        setTimeout(resolve.bind(this, 'Resolved value'), 300);
    });
}
const resources = {
    dev: {
        translation: {
            autocomplete: {
                error: {
                    badInput: '__value__ is not a valid entry.'
                }
            }
        }
    }
};

i18n.init({resStore: resources});

const querySearcher = query => {
    const data = [
        {
            key: 'NY',
            label: 'New York'
        },
        {
            key: 'PAR',
            label: 'Paris'
        },
        {
            key: 'TOY',
            label: 'Tokyo'
        },
        {
            key: 'BEI',
            label: 'Pékin'
        },
        {
            key: 'LON',
            label: 'Londres'
        },
        {
            key: 'BER',
            label: 'Berlin'
        }
    ].filter(({key, label}) => label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                data,
                totalCount: 40
            });
        }, 200);
    });
}

class Sample extends React.Component {
    state = {isEdit: true};

    componentDidMount() {
        setTimeout(() => {
            this.setState({delayedValue: 'test'}, this.forceUpdate);
        }, 3000);
    }



    render() {
        const {delayedValue, isEdit} = this.state;
        return (
            <div>
                <AutocompleteSelect
                    isEdit={isEdit}
                    keyResolver={keyResolver}
                    querySearcher={querySearcher}
                    ref='first'
                    value='lol'
                    />
                <br />
                <AutocompleteSelect
                    isEdit={isEdit}
                    keyResolver={keyResolver}
                    querySearcher={querySearcher}
                    value={delayedValue}
                /> <br />
                <button className='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' onClick={() => {this.setState({isEdit: !this.state.isEdit})}}>Toggle edit</button><commit_msg>Updating the Autocomplete Select Example<commit_after>const {AutocompleteSelect} = FocusComponents.components.input;

const data = [
    {
        key: 'NY',
        label: 'New York'
    },
    {
        key: 'PAR',
        label: 'Paris'
    },
    {
        key: 'TOY',
        label: 'Tokyo'
    },
    {
        key: 'BEI',
        label: 'Pékin'
    },
    {
        key: 'LON',
        label: 'Londres'
    },
    {
        key: 'BER',
        label: 'Berlin'
    }
];

const querySearcher = query => {
    const value = data.filter(({key, label}) => label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                data: value,
                totalCount: value.length
            });
        }, 200);
    });
};

const keyResolver = key => {
    return new Promise((resolve, reject) => {
        data.forEach(element => {
            if(element.key === key) {
                setTimeout(resolve.bind(this, element.label), 10);
            }
        });
    });
}

const resources = {
    dev: {
        translation: {
            autocomplete: {
                error: {
                    badInput: '__value__ is not a valid entry.'
                }
            }
        }
    }
};

i18n.init({resStore: resources});

class Sample extends React.Component {
    state = {isEdit: true};

    componentDidMount() {
        setTimeout(() => {
            this.setState({delayedValue: 'test'}, this.forceUpdate);
        }, 3000);
    }

    render() {
        const {delayedValue, isEdit} = this.state;
        return (
            <div>
                <AutocompleteSelect
                    isEdit={isEdit}
                    keyResolver={keyResolver}
                    querySearcher={querySearcher}
                    ref='first'
                    value='lol'
                    />
                <br />
                <AutocompleteSelect
                    isEdit={isEdit}
                    keyResolver={keyResolver}
                    querySearcher={querySearcher}
                    value={delayedValue}
                /> <br />
                <button className='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' onClick={() => {this.setState({isEdit: !this.state.isEdit})}}>Toggle edit</button>
{'fraction_non_alphanumeric': 0.13275675675675674, 'fraction_numerical': 0.0058378378378378375, 'mean_word_length': 1.3246231155778894, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 34, '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': '3388100', 'n_tokens_mistral': 1307, 'n_tokens_neox': 1253, 'n_words': 238}