@shakthillc/components/es/DropDownSearch/DropDownSearch.js

React generic components for shakthi products

import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
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";

var DropDownSearch = function (_React$Component) {
  _inherits(DropDownSearch, _React$Component);

  function DropDownSearch(props) {
    _classCallCheck(this, DropDownSearch);

    var _this = _possibleConstructorReturn(this, (DropDownSearch.__proto__ || _Object$getPrototypeOf(DropDownSearch)).call(this, 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);
    return _this;
  }

  _createClass(DropDownSearch, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (prevProps.options.length < this.props.options.length) {
        this.setState({ isLoading: false });
      }
    }
  }, {
    key: "handleChange",
    value: function handleChange(val) {
      var onChange = this.props.onChange;

      this.setState({ selectedOption: val, searchValue: "" });
      onChange && onChange(val);
    }
  }, {
    key: "handleScroll",
    value: function handleScroll(_ref) {
      var currentTarget = _ref.currentTarget;
      var loadData = this.props.loadData;

      // console.log(
      //   currentTarget.clientHeight,
      //   parseInt(currentTarget.scrollHeight-currentTarget.scrollTop)
      // );

      var percentValue = currentTarget.clientHeight / 100 * 80;
      this.totaltableheight = currentTarget.scrollHeight;
      if (parseInt(currentTarget.scrollHeight - currentTarget.scrollTop) + 1 == currentTarget.clientHeight) {
        loadData && loadData();
      }
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(val) {
      var onTextSearch = this.props.onTextSearch;

      this.setState({ searchValue: val }, function () {
        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)
    //   }
    // }

  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          isPopupOpen = _props.isPopupOpen,
          togglePopup = _props.togglePopup,
          _props$placeHolder = _props.placeHolder,
          placeHolder = _props$placeHolder === undefined ? "Select any option" : _props$placeHolder,
          removeClose = _props.removeClose,
          _props$emptyState = _props.emptyState,
          emptyState = _props$emptyState === undefined ? "No items found" : _props$emptyState,
          disabled = _props.disabled,
          help = _props.help,
          _props$isMandatory = _props.isMandatory,
          isMandatory = _props$isMandatory === undefined ? false : _props$isMandatory;
      var options = this.props.options;

      var borderStyle = isMandatory == true ? style["input-enableborder"] : "";

      var _state = this.state,
          _state$selectedOption = _state.selectedOption,
          selectedOption = _state$selectedOption === undefined ? "" : _state$selectedOption,
          searchValue = _state.searchValue;

      var selectedLabel = null;
      var altered_options = searchValue.length > 0 ? options.filter(function (m) {
        return m.label.toLowerCase().includes(searchValue.toLowerCase());
      }) : options;

      var html = altered_options.map(function (obj, i) {
        if (selectedOption === obj.value && selectedLabel === null) {
          selectedLabel = obj.label;
        }
        return React.createElement(
          "p",
          {
            key: i,
            className: style["dropdown-list__item"],
            onClick: _this2.handleChange.bind(_this2, obj.value)
          },
          obj.label
        );
      });
      html.push(React.createElement(
        "span",
        {
          style: { display: altered_options.length != 0 ? "none" : "" },
          className: style.dropdownList__noitems
        },
        emptyState
      ));

      return React.createElement(
        "div",
        { className: style["dropdown"] },
        React.createElement(
          "div",
          {
            style: this.props.style,
            className: disabled ? style["dropdown__sub--disabled"] : isPopupOpen ? style["dropdown__sub--open"] + " " + borderStyle : style["dropdown__sub"] + " " + borderStyle,
            onClick: !disabled && togglePopup
          },
          React.createElement(
            "div",
            { className: style["dropdown__textcontainer"] },
            React.createElement(
              "span",
              { className: style["textcontainer__selected-text"] },
              selectedLabel === null ? React.createElement(
                "span",
                { style: { color: "#777777" } },
                placeHolder
              ) : selectedLabel
            )
          ),
          React.createElement(
            "div",
            { className: style["textcontainer__arrow"] },
            React.createElement(
              Icon,
              { style: { color: "#777777", fontSize: 20 } },
              "arrow_drop_down"
            )
          )
        ),
        help && React.createElement(
          "p",
          {
            className: isMandatory === true ? style["input-holder__helper--red"] : style["input-holder__helper"]
          },
          help
        ),
        isPopupOpen ? React.createElement(
          "div",
          {
            ref: "dropdownList",
            onScroll: this.handleScroll,
            className: style["dropdown__dropdown-list"],
            style: this.props.style
          },
          React.createElement(
            "div",
            { style: { position: "relative" }, onClick: removeClose },
            React.createElement(InputText, {
              icon: "search",
              value: searchValue,
              onKeyup: this.handleSearch,
              placeHolder: "Enter text to search",
              style: this.props.style
            })
          ),
          html
        ) : null
      );
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, current_state) {
      if (props.selectedOption != null && props.selectedOption != current_state.selectedOption) {
        return { selectedOption: props.selectedOption };
      } else {
        return null;
      }
    }
  }]);

  return DropDownSearch;
}(React.Component);

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);