fk-react-ui-components/components/SimpleSearch/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} from "./styles/SimpleSearch";
import _ from "lodash"
export default class SimpleSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "",
            showUndo: false
        };
        this.initialValue = props.value;
        _.bindAll(this, 'searchOnClick', 'onChange', 'getUndoState', 'undoSearch');
    }
    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});
        }
    }
    _handleKeyPress(e) {
        let value = e.target.value;
        if (e.key === 'Enter' && value !== this.initialValue) {
            this.props.onSearchEnter && this.props.onSearchEnter(e.target.value);
        }
    }
    searchOnClick(event) {
        event.preventDefault();
        let searchText = ReactDOM.findDOMNode(this.searchInput).value;
        this.props.onSearchEnter && this.props.onSearchEnter(searchText);
    }
    onChange(e) {
        this.setState({value: e.target.value})
        this.props.onChange && this.props.onChange(e.target.value);
    }
    getUndoState(value) {
        if(!this.props.showUndo) {
            return false;
        }
        if((value && this.initialValue == value) || (!value && this.initialValue !== value)) {
            return true
        }
        return false;
    }
    undoSearch() {
        this.initialValue="";
        this.setState({value: ""})
        this.props.onSearchEnter && this.props.onSearchEnter("");
    }
    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.props.showActive && 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} onKeyPress={this._handleKeyPress.bind(this)}/>
                {!this.getUndoState(this.state.value) && <SimpleSearchIcon className={`fa fa-search ${this.state.value ? 'active-icon-color' : 'inprogress-icon-color'}`} onClick={this.searchOnClick} />}
                {this.getUndoState(this.state.value) && <SimpleSearchIcon className="fa fa-undo active-icon-color" onClick={this.undoSearch} />}
            </div>
        )
    }
}