@shakthillc/components/src/DropDownSearch/DropDownSearch.js

React generic components for shakthi products

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

class DropDownSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: this.props.selectedOption || "",
      isLoading: false,
      searchValue: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    //this.dropdownList = React.createRef();
    //this.debounce = this.debounce.bind(this);
  }
  static getDerivedStateFromProps(props, current_state) {
    if (
      props.selectedOption != null &&
      props.selectedOption != current_state.selectedOption
    ) {
      return { selectedOption: props.selectedOption };
    } else {
      return null;
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.options.length < this.props.options.length) {
      this.setState({ isLoading: false });
    }
  }
  handleChange(val) {
    let { onChange } = this.props;
    this.setState({ selectedOption: val, searchValue: "" });
    onChange && onChange(val);
  }
  handleScroll({ currentTarget }) {
    const { loadData } = this.props;

    // console.log(
    //   currentTarget.clientHeight,
    //   parseInt(currentTarget.scrollHeight-currentTarget.scrollTop)
    // );
    let percentValue = (currentTarget.clientHeight / 100) * 80;
    this.totaltableheight = currentTarget.scrollHeight;
    if (
      parseInt(currentTarget.scrollHeight - currentTarget.scrollTop) + 1 ==
      currentTarget.clientHeight
    ) {
      loadData && loadData();
    }
  }
  handleSearch(val) {
    const { onTextSearch } = this.props;
    this.setState({ searchValue: val }, () => {
      onTextSearch && onTextSearch(val);
    });
  }

  // debounce = (func, delay) => {

  //   let inDebounce
  //   return function() {
  //     const context = this
  //     const args = arguments
  //     clearTimeout(inDebounce)
  //     console.log("in",func)
  //     inDebounce = setTimeout(() => func(), delay)
  //   }
  // }
  render() {
    let {
      isPopupOpen,
      togglePopup,
      placeHolder = "Select any option",
      removeClose,
      emptyState = "No items found",
      disabled,
      help,
      isMandatory = false,
    } = this.props;
    let { options } = this.props;
    let borderStyle = isMandatory == true ? style["input-enableborder"] : "";

    const { selectedOption = "", searchValue } = this.state;
    let selectedLabel = null;
    let altered_options =
      searchValue.length > 0
        ? options.filter((m) =>
            m.label.toLowerCase().includes(searchValue.toLowerCase())
          )
        : options;

    let html = altered_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>
      );
    });
    html.push(
      <span
        style={{ display: altered_options.length != 0 ? "none" : "" }}
        className={style.dropdownList__noitems}
      >
        {emptyState}
      </span>
    );

    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 ? (
          <div
            ref="dropdownList"
            onScroll={this.handleScroll}
            className={style["dropdown__dropdown-list"]}
            style={this.props.style}
          >
            <div style={{ position: "relative" }} onClick={removeClose}>
              <InputText
                icon="search"
                value={searchValue}
                onKeyup={this.handleSearch}
                placeHolder="Enter text to search"
                style={this.props.style}
              />
            </div>
            {html}
          </div>
        ) : null}
      </div>
    );
  }
}

DropDownSearch.defaultProps = {
  options: [
    {
      value: "a",
      label: "Rick",
    },
    { value: "b", label: "Morty" },
    { value: "c", label: "Mrofessor" },
    { value: "d", label: "Micheal Scott" },
    { value: "e", label: "Mngela" },
    { value: "e", label: "Mevin mallone" },
    { value: "b", label: "Morty" },
    { value: "c", label: "Mrofessor" },
    { value: "d", label: "Micheal Scott" },
    { value: "e", label: "Mngela" },
    { value: "e", label: "Mevin mallone" },
    {
      value: "1",
      label: "Rick",
    },
    { value: "2", label: "Morty" },
    { value: "3", label: "Mrofessor" },
    { value: "4", label: "Micheal Scott" },
    { value: "5", label: "Mngela" },
    { value: "6", label: "Mevin mallone" },
    { value: "7", label: "Morty" },
    { value: "8", label: "Mrofessor" },
    { value: "9", label: "Micheal Scott" },
    { value: "10", label: "Mngela" },
    { value: "11", label: "Mevin mallone" },
  ],
  disabled: false,
  dataId: "dropdownComp",
};
DropDownSearch.propTypes = {
  dataId: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  selectedOption: PropTypes.string,
};

export default Popup(DropDownSearch);