application/components/container/container-toolbar.js

import React from 'react';
import BaseView from './../base-view';

import Paper from 'material-ui/Paper';
import FontIcon from 'material-ui/FontIcon';

import {connect} from 'react-redux';

import ReduxPaginator from './../common/redux-paginator';
import {Row, Col} from './../flexbox';

import {ENTER_KEY} from './../../util/key-codes';

import {
    containersFetch
} from './../../redux/actions/container-actions';

class ContainerToolbar extends BaseView {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false
        };
    }

    handleKeyDown(e) {
        const val = e.target.value;
        const {dispatch} = this.props;
        if (e.keyCode !== ENTER_KEY) {
            return;
        }

        dispatch(containersFetch({
            'keywords': val,
            'page': 1,
            'type': [
                'automatic',
                'manual'
            ]
        }));
    }

    handleSearchReset() {
        const {dispatch} = this.props;
        this.quickSearch.value = '';
        dispatch(containersFetch({
            'keywords': '',
            'page': 1,
            'type': [
                'automatic',
                'manual'
            ]
        }));
    }


    render() {

        return (
            <Paper className='toolbar'>
                <Row middle='xs'>
                    <Col xs={3} autoBox={false}>
                        <div className="box toolbar-search-wrap">
                            <FontIcon className='mui-icons'>search</FontIcon>
                            <input
                                ref={quickSearch => this.quickSearch = quickSearch}
                                className="search"
                                type="text"
                                placeholder="Quick Search"
                                onKeyDown={this.handleKeyDown.bind(this)}
                                />
                            <FontIcon className='mui-icons clear-search' onClick={this.handleSearchReset.bind(this)}>close</FontIcon>
                        </div>
                    </Col>
                    <Col xs={9} end='xs'>
                        {<ReduxPaginator
                            pagination={this.props.containers.pagination}
                            onPaginate={this.props.onPaginate}
                            />}
                    </Col>
                </Row>
            </Paper>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        containers: state.containers
    };
}

export default connect(mapStateToProps)(ContainerToolbar);