fk-react-ui-components/lib/FormElements/Dropdown/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

import React from 'react';
import cx from 'classnames';
import styled from 'styled-components';
import FormElement from '../FormElement';

const DropdownStyled = styled.div`
    .dropdown {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 999;
        height: 30px;
        border: 1px solid #e9e9e9;
        border-radius: 4px;
    }

    .dropdownHeader {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 10px;
    }

    .dropdown:focus {
        outline: none;
    }
    .dropdown:not(:empty) {
        transform: scaleY(1);
    }

    .dropdownBody {
        display: flex;
        width: 100%;
        position: absolute;
        top: 100%;
        margin-top: 8px;
        z-index: 999;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px,
            rgba(0, 0, 0, 0.23) 0px 3px 10px;
        background: #fff;
        transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        transform-origin: top;
        transform: scaleY(0);
        max-height: 250px;
        overflow: auto;
    }

    .selectBox {
        width: 100%;
        color: rgb(85, 85, 85);
        font-weight: 500;
        font-size: 13px;
    }

    .selectBox input {
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        font: inherit;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }

    .dropControl {
        display: flex;
        height: 100%;
        width: 15%;
        cursor: pointer;
    }

    .dropControl span {
        margin: auto;
    }

    .items {
        width: 100%;
        overflow: auto;
        font-size: 1em;
    }

    .item {
        padding: 16px;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        font-size: 14px;
        font-weight: inherit;
        color: rgb(85, 85, 85);
        line-height: 16px;
    }

    .item:hover {
        background: rgba(85, 85, 85, 0.1);
        cursor: pointer;
    }

    .showBody {
        transform: scaleY(1);
    }

    input {
        padding: 0;
        margin: 0;
        border: none;
        background: none;
    }

    input:focus {
        outline: none;
    }
`;

class Select extends FormElement {
    constructor(props) {
        super(props);
        const selectedValue = props.selectedValue || '';
        this.state = {
            selected: selectedValue,
            showBody: false
        };
        this.handleBlur = this.handleBlur.bind(this);
        this.showHideDropdown = this.showHideDropdown.bind(this);
        this.handleDropdownClick = this.handleDropdownClick.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedValue !== this.props.selectedValue) {
            this.setState({
                selected: nextProps.selectedValue.value
            });
        }
    }

    /*
      This will trigger when dropdwon is clicked and type is select
     */
    handleDropdownClick(event) {
        const item = event.currentTarget.dataset.value;
        this.showHideDropdown();
        this.setState({
            selected: item.value
        });
        super.handleChange(event);
    }

    /*
      This will show/hide the drop down
     */
    showHideDropdown() {
        this.setState({
            showBody: !this.state.showBody
        });
    }

    handleBlur() {
        if (this.state.showBody) {
            this.setState({
                showBody: false
            });
        }
        this.props.openCloseChange && this.props.openCloseChange();
    }

    render() {
        return React.createElement(
            DropdownStyled,
            null,
            React.createElement(
                'div',
                {
                    className: cx('dropdown', this.props.customDropdown),
                    onBlur: this.handleBlur,
                    tabIndex: 0
                },
                React.createElement(
                    'div',
                    {
                        className: 'dropdownHeader',
                        onClick: this.showHideDropdown,
                        style: this.props.style
                    },
                    React.createElement(
                        'div',
                        { className: 'selectBox' },
                        React.createElement('input', {
                            type: 'text',
                            placeholder: this.props.placeholder ? this.props.placeholder : 'Select',
                            value: this.state.selected,
                            disabled: true
                        })
                    ),
                    React.createElement(
                        'div',
                        { className: 'dropControl' },
                        React.createElement(
                            'span',
                            null,
                            '\u25BE'
                        )
                    )
                ),
                React.createElement(
                    'div',
                    {
                        className: cx('dropdownBody', this.state.showBody ? 'showBody' : null),
                        ref: ref => {
                            this.dropdownBody = ref;
                        }
                    },
                    React.createElement(
                        'div',
                        { className: 'items' },
                        this.props.dropdownData ? this.props.dropdownData.map(item => React.createElement(
                            'div',
                            {
                                className: 'item',
                                key: item.id,
                                'data-value': item.value,
                                onClick: this.handleDropdownClick
                            },
                            item.displayName ? item.displayName : item.value
                        )) : null
                    )
                )
            )
        );
    }
}

export default Select;
//# sourceMappingURL=index.js.map