Custom Input

[FDiskas]

Hi, thanks for the plugin.
How I can add material-ui element against simple input?

[FDiskas]

🎷 I managed like so

import React, { Component, PropTypes } from 'react';
import SearchInput, { createFilter } from 'react-search-input';
import { TextField } from 'material-ui';

const KEYS_TO_FILTERS = ['name', 'label'];

class FacetList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            searchTerm: props.searchTerm,
        };


        this.searchUpdated = this.searchUpdated.bind(this);
    }

    searchUpdated(event) {
        this.setState({ searchTerm: event.target.value });
    }

    render() {
        const filteredItems = this.props.items.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS));

        return (
            <div>
                <TextField hintText="Search..." {...SearchInput.getDefaultProps()} onChange={this.searchUpdated} />
                {
                    filteredItems
                        .map((item) => {
                            return (
                                <p key={item.id}>
                                    {item.label}
                                </p>
                            );
                        })
                }
            </div>
        );
    }
}

FacetList.propTypes = {
    items: PropTypes.array.isRequired,
    searchTerm: PropTypes.string,
};
FacetList.defaultProps = {
    searchTerm: '',
};

export default FacetList;

[arojunior]

Hi. A possible solution here: #144