fk-react-ui-components/lib/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 React.createElement(
            "div",
            { style: { "position": "relative" }, className: this.props.className || "" },
            React.createElement(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) && React.createElement(SimpleSearchIcon, { className: `fa fa-search ${this.state.value ? 'active-icon-color' : 'inprogress-icon-color'}`, onClick: this.searchOnClick }),
            this.getUndoState(this.state.value) && React.createElement(SimpleSearchIcon, { className: "fa fa-undo active-icon-color", onClick: this.undoSearch })
        );
    }
}
//# sourceMappingURL=index.js.map