fk-react-ui-components/components/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 (
            <DropdownStyled>
                <div
                    className={cx('dropdown', this.props.customDropdown)}
                    onBlur={this.handleBlur}
                    tabIndex={0}
                >
                    <div
                        className="dropdownHeader"
                        onClick={this.showHideDropdown}
                        style={this.props.style}
                    >
                        <div className="selectBox">
                            <input
                                type="text"
                                placeholder={
                                    this.props.placeholder
                                        ? this.props.placeholder
                                        : 'Select'
                                }
                                value={this.state.selected}
                                disabled
                            />
                        </div>
                        <div className="dropControl">
                            <span>&#9662;</span>
                        </div>
                    </div>
                    <div
                        className={cx(
                            'dropdownBody',
                            this.state.showBody ? 'showBody' : null
                        )}
                        ref={ref => {
                            this.dropdownBody = ref;
                        }}
                    >
                        <div className="items">
                            {this.props.dropdownData
                                ? this.props.dropdownData.map(item => (
                                    <div
                                        className='item'
                                        key={item.id}
                                        data-value={item.value}
                                        onClick={this.handleDropdownClick}
                                    >
                                        {item.displayName
                                            ? item.displayName
                                            : item.value}
                                    </div>
                                ))
                                : null}
                        </div>
                    </div>
                </div>
            </DropdownStyled>
        );
    }
}

export default Select;