fk-react-ui-components/components/SearchWithOptions/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by manoraj.k on 17/08/17.
 */
import React from "react";
import ReactDOM from 'react-dom';
import styled from "styled-components";
import {SearchInput} from "../Fields";
import {colors} from "../colorCodes";
import {SimpleSearchIcon, SearchTypeList} from "./styles/SearchWithOptions";
import enhanceWithClickOutside from "react-click-outside";
import _ from "lodash";

class SearchWithOptions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "",
            showSearchList: false,
            showUndo: false
        };
        this.initialValue = props.value;
        _.bindAll(this, 'onFocus', 'onChange', 'onKeyUp', 'undoSearch', 'getUndoState');
    }
    componentWillMount() {
        if(this.props.value) {
            this.setState({value: this.props.value})
        }
    }
    componentWillReceiveProps(nextProps) {
        if(this.props.value !== nextProps.value) {
            this.initialValue = nextProps.value;
            this.setState({value: nextProps.value})
        }
    }

    onChange(e) {
        let value = e.target.value;
        this.setState({value})
    }
    getUndoState(value) {
        if((value && this.initialValue == value) || (!value && this.initialValue !== value)) {
            return true
        }
        return false;
    }
    onFocus() {
        if(this.state.value.length > 0) {
            this.setState({showSearchList: true})
        }
    }
    onKeyUp() {
        if(this.state.value.length > 0) {
            this.setState({showSearchList: true})
        } else {
            this.setState({showSearchList: false})
        }
    }

    searchTypeClick(option) {
        this.setState({showSearchList: false});
        this.props.onOptionSearch && this.props.onOptionSearch(option, this.state.value)
    }

    undoSearch() {
        this.setState({showSearchList: false, value: ""})
        this.props.onOptionSearch && this.props.onOptionSearch({}, "")
    }

    handleClickOutside() {
        this.setState({showSearchList: false})
    }

    render() {
        return (
            <div style={{"position":"relative"}} className={this.props.className || ""}>
                <SearchInput width={this.props.width} height={this.props.height}
                             padding={this.props.padding}
                             className={`simple-search-input ${this.state.value ? "active" : ""}`}
                             boxShadow={this.props.boxShadow || undefined}
                             border={this.props.border || undefined}
                             ref={(input) => { this.searchInput = input; }}
                             backgroundColor={this.props.backgroundColor || undefined}
                             value={this.state.value} type="text" onChange={this.onChange} placeholder={this.props.placeholder} onFocus={this.onFocus} onKeyUp={this.onKeyUp}/>
                {!this.getUndoState(this.state.value) && (<SimpleSearchIcon className={`fa fa-search ${this.state.value ? 'active-icon-color' : 'inprogress-icon-color'}`} />)}
                {this.getUndoState(this.state.value) && (
                    <SimpleSearchIcon className="fa fa-undo active-icon-color" onClick={this.undoSearch} />
                )}
                {this.state.showSearchList && this.props.searchOptions && this.props.searchOptions.length && (
                    <SearchTypeList className={this.props.listClassName || ""}>
                        {
                            this.props.searchOptions.map((option, index) => {
                                return <li key={index} className="search-type-list-item" onClick={this.searchTypeClick.bind(this, option)}>
                                    <span>
                                        <span className="id-type">{option.label}: </span>
                                        <strong className="search-value">{this.state.value}</strong>
                                    </span>
                                </li>
                            })
                        }
                    </SearchTypeList>
                )}
            </div>
        )
    }
}

export default enhanceWithClickOutside(SearchWithOptions)