Closed olya-sidorchenko closed 2 years ago
`class AutofillTag extends Component {
constructor(...args) { super(...args); this.handleChange = ::this.handleChange; this.autocompleteRenderInput = ::this.autocompleteRenderInput; this.defaultRenderLayout = ::this.defaultRenderLayout; this.state = {tags: []}; } handleChange(tags) { this.setState({tags}); } autocompleteRenderInput({addTag, ...props}) { const handleOnChange = (e, {method}) => { if (method === 'enter') { e.preventDefault(); } else { props.onChange(e); } }; const inputValue = (props.value && props.value.trim().toLowerCase()) || ''; const inputLength = inputValue.length; const suggestions = states.filter(state => { return state.name.toLowerCase().slice(0, inputLength) === inputValue; }); return ( <Autosuggest ref={props.ref} suggestions={suggestions} shouldRenderSuggestions={value => value && value.trim().length > 0} getSuggestionValue={suggestion => suggestion.name} renderSuggestion={suggestion => <span>{suggestion.name}</span>} inputProps={{...props, onChange: handleOnChange}} onSuggestionSelected={(e, {suggestion}) => { addTag(suggestion.name); }} onSuggestionsClearRequested={() => {}} onSuggestionsFetchRequested={() => {}} theme={theme} highlightFirstSuggestion /> ); } defaultRenderLayout () { return ( <span> <textarea/> </span> ) } render() { const tagProps = {className: styles.tags, classNameRemove: styles.tags_remove}; const inputProps = {className: styles.inputTag, placeholder: ''}; return ( <div id="app" className={styles.root}> <h4>AutoFillTag</h4> <TagsInput value={this.state.tags} onChange={this.handleChange} tagProps={tagProps} inputProps={inputProps} className={styles.tags_container} focusedClassName={styles.focused} renderInput={this.autocompleteRenderInput} /> </div> ); }
}
export default AutofillTag; `
`class AutofillTag extends Component {
}
export default AutofillTag; `