@shakthillc/components/src/NewDropDown/NewDropDown.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./NewDropDown.module.css";
import Popup from "./../Popup/Popup";
import Icon from "@material-ui/core/Icon";

class NewDropDown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: this.props.selectedOption || "",
    };
    this.handleChange = this.handleChange.bind(this);
  }
  static getDerivedStateFromProps(props, current_state) {
    if (
      props.selectedOption != null &&
      props.selectedOption != current_state.selectedOption
    ) {
      return { selectedOption: props.selectedOption };
    } else {
      return null;
    }
  }
  handleChange(val) {
    let { onChange } = this.props;
    this.setState({ selectedOption: val }, () => {
      onChange && onChange(val);
    });
  }

  render() {
    let {
      isPopupOpen,
      togglePopup,
      placeHolder = "Select any option",
      disabled = true,
      isMandatory,
      help = "",
      emptyState = "No items found",
      removeClose,
      singleClickClose,
    } = this.props;
    let { options = [] } = this.props;
    const { selectedOption } = this.state;
    let selectedLabel = null;
    let borderStyle = isMandatory == true ? style["input-enableborder"] : "";
    let html = options.map((obj, i) => {
      if (selectedOption === obj.value && selectedLabel === null) {
        selectedLabel = obj.label;
      }
      return (
        <p
          key={i}
          className={style["dropdown-list__item"]}
          onClick={this.handleChange.bind(this, obj.value)}
        >
          {obj.label}
        </p>
      );
    });
    if (html.length < 1) {
      html.push(
        <div className={style.emptystate}>
          {" "}
          <Icon style={{ color: "#777777", fontSize: 20, marginRight: "4px" }}>
            error_outline
          </Icon>{" "}
          {emptyState}
        </div>
      );
    }

    return (
      <div className={style["dropdown"]}>
        <div
          style={this.props.style}
          className={
            disabled
              ? style["dropdown__sub--disabled"]
              : isPopupOpen
              ? style["dropdown__sub--open"] + " " + borderStyle
              : style["dropdown__sub"] + " " + borderStyle
          }
          onClick={!disabled && togglePopup}
        >
          <div className={style["dropdown__textcontainer"]}>
            <span className={style["textcontainer__selected-text"]}>
              {selectedLabel === null ? (
                <span style={{ color: "#777777" }}>{placeHolder}</span>
              ) : (
                selectedLabel
              )}
            </span>
          </div>
          <div className={style["textcontainer__arrow"]}>
            <Icon style={{ color: "#777777", fontSize: 20 }}>
              arrow_drop_down
            </Icon>
          </div>
        </div>
        {help && (
          <p
            className={
              isMandatory === true
                ? style["input-holder__helper--red"]
                : style["input-holder__helper"]
            }
          >
            {help}
          </p>
        )}
        {isPopupOpen && !disabled ? (
          <div
            onClick={!singleClickClose && removeClose}
            style={this.props.style}
            className={style["dropdown__dropdown-list"]}
          >
            {html}
          </div>
        ) : null}
      </div>
    );
  }
}

NewDropDown.defaultProps = {
  options: [
    {
      value: "a",
      label: "Apple",
    },
    { value: "b", label: "Orange" },
    {
      value: "c",
      label: "Watermelon",
    },
    { value: "d", label: "Banana" },
    { value: "e", label: "Berry" },
    { value: "f", label: "Cake" },
  ],
  disabled: false,
  singleClickClose: true,
};
NewDropDown.propTypes = {
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  selectedOption: PropTypes.string,
};

export default Popup(NewDropDown);