fk-react-ui-components/lib/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 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.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) && React.createElement(SimpleSearchIcon, { className: `fa fa-search ${this.state.value ? 'active-icon-color' : 'inprogress-icon-color'}` }),
            this.getUndoState(this.state.value) && React.createElement(SimpleSearchIcon, { className: "fa fa-undo active-icon-color", onClick: this.undoSearch }),
            this.state.showSearchList && this.props.searchOptions && this.props.searchOptions.length && React.createElement(
                SearchTypeList,
                { className: this.props.listClassName || "" },
                this.props.searchOptions.map((option, index) => {
                    return React.createElement(
                        "li",
                        { key: index, className: "search-type-list-item", onClick: this.searchTypeClick.bind(this, option) },
                        React.createElement(
                            "span",
                            null,
                            React.createElement(
                                "span",
                                { className: "id-type" },
                                option.label,
                                ": "
                            ),
                            React.createElement(
                                "strong",
                                { className: "search-value" },
                                this.state.value
                            )
                        )
                    );
                })
            )
        );
    }
}

export default enhanceWithClickOutside(SearchWithOptions);
//# sourceMappingURL=index.js.map