@shakthillc/components/es/Filter/Filter.js

React generic components for shakthi products

import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
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, { Component } from "react";
import style from "./Filter.module.css";
import InputText from "./InputText";
import NewDropDown from "../NewDropDown/NewDropDown";
import Button from "../Button/Button";
import _ from "lodash";
import filterLogic from './filterLogic';
import PropTypes from "prop-types";

var Filter = function (_Component) {
  _inherits(Filter, _Component);

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

    var _this = _possibleConstructorReturn(this, (Filter.__proto__ || _Object$getPrototypeOf(Filter)).call(this, props));

    _this.state = {
      filterVal: [{ inputVal: "", dropDown1: "", dropDown2: "" }],
      more: false,
      counter: 0,
      flag: false,
      visibility: false
    };
    _this.handleInput = _this.handleInput.bind(_this);
    _this.handleDropdown = _this.handleDropdown.bind(_this);
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleClose = _this.handleClose.bind(_this);
    _this.setStatus = _this.setStatus.bind(_this);
    return _this;
  }

  _createClass(Filter, [{
    key: "handleInput",
    value: function handleInput(e, index) {
      var filterVal = [].concat(_toConsumableArray(this.state.filterVal));
      filterVal[index].inputVal = e.currentTarget.value;
      this.setState({ filterVal: filterVal, flag: false });
    }
  }, {
    key: "handleDropdown",
    value: function handleDropdown(val, index, ddown) {
      var dropDown = ddown === "d1" ? "dropDown1" : "dropDown2";
      var filterVal = [].concat(_toConsumableArray(this.state.filterVal));
      filterVal[index][dropDown] = val;
      this.setState({ filterVal: filterVal, flag: false });
    }
  }, {
    key: "handleClick",
    value: function handleClick() {
      var onFilter = this.props.onFilter;

      var tempRes = filterLogic(this.state.filterVal, this.props.dbData);
      onFilter && onFilter(tempRes);
    }
  }, {
    key: "handleClose",
    value: function handleClose() {
      this.setState({ visibility: true });
    }
  }, {
    key: "setStatus",
    value: function setStatus() {
      var filterVal = this.state.filterVal;

      filterVal.push({ inputVal: "", dropDown1: "", dropDown2: "" });
      this.setState({ filterVal: filterVal });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var options = ["contains", "is equal to", "not equal to"];
      var _state = this.state,
          more = _state.more,
          counter = _state.counter,
          filterVal = _state.filterVal,
          visibility = _state.visibility;

      return React.createElement(
        "div",
        { className: visibility === true ? style['filter--hidden'] : style['filter'] },
        filterVal.map(function (data, index) {
          return React.createElement(
            "div",
            { className: style['filter__inner'] },
            React.createElement(
              "div",
              { style: { width: "120px" } },
              React.createElement(NewDropDown, {
                options: _this2.props.options,
                onChange: function onChange(val) {
                  return _this2.handleDropdown(val, index, "d1");
                } })
            ),
            React.createElement(
              "div",
              { style: { width: "120px" } },
              React.createElement(NewDropDown, {
                options: [{ value: "c", label: "contains" }, { value: "dc", label: "doesn't_contain" }, { value: "s", label: "starts with" }, { value: "e", label: "ends with" }],
                onChange: function onChange(val) {
                  return _this2.handleDropdown(val, index, "d2");
                } })
            ),
            React.createElement(InputText, {
              onChange: function onChange(e) {
                return _this2.handleInput(e, index);
              },
              value: filterVal[index].inputVal
            }),
            React.createElement(
              "p",
              { onClick: _this2.setStatus, style: { fontSize: "28px", marginLeft: "5px", cursor: "pointer" } },
              "+"
            ),
            React.createElement(
              "p",
              { style: { fontSize: "28px", marginLeft: "8px", cursor: "pointer" } },
              "c"
            )
          );
        }),
        React.createElement(Button, { text: "Okay", onClick: this.handleClick }),
        React.createElement(Button, { text: "Close", onClick: this.handleClose })
      );
    }
  }]);

  return Filter;
}(Component);

export default Filter;

Filter.defaultProps = {};
Filter.propTypes = {
  options: PropTypes.array
};