@shakthillc/components/lib/Filter/Filter.js

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _FilterModule = require("./Filter.module.css");

var _FilterModule2 = _interopRequireDefault(_FilterModule);

var _InputText = require("./InputText");

var _InputText2 = _interopRequireDefault(_InputText);

var _NewDropDown = require("../NewDropDown/NewDropDown");

var _NewDropDown2 = _interopRequireDefault(_NewDropDown);

var _Button = require("../Button/Button");

var _Button2 = _interopRequireDefault(_Button);

var _lodash = require("lodash");

var _lodash2 = _interopRequireDefault(_lodash);

var _filterLogic = require("./filterLogic");

var _filterLogic2 = _interopRequireDefault(_filterLogic);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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 = (0, _filterLogic2.default)(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 _react2.default.createElement(
        "div",
        { className: visibility === true ? _FilterModule2.default['filter--hidden'] : _FilterModule2.default['filter'] },
        filterVal.map(function (data, index) {
          return _react2.default.createElement(
            "div",
            { className: _FilterModule2.default['filter__inner'] },
            _react2.default.createElement(
              "div",
              { style: { width: "120px" } },
              _react2.default.createElement(_NewDropDown2.default, {
                options: _this2.props.options,
                onChange: function onChange(val) {
                  return _this2.handleDropdown(val, index, "d1");
                } })
            ),
            _react2.default.createElement(
              "div",
              { style: { width: "120px" } },
              _react2.default.createElement(_NewDropDown2.default, {
                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");
                } })
            ),
            _react2.default.createElement(_InputText2.default, {
              onChange: function onChange(e) {
                return _this2.handleInput(e, index);
              },
              value: filterVal[index].inputVal
            }),
            _react2.default.createElement(
              "p",
              { onClick: _this2.setStatus, style: { fontSize: "28px", marginLeft: "5px", cursor: "pointer" } },
              "+"
            ),
            _react2.default.createElement(
              "p",
              { style: { fontSize: "28px", marginLeft: "8px", cursor: "pointer" } },
              "c"
            )
          );
        }),
        _react2.default.createElement(_Button2.default, { text: "Okay", onClick: this.handleClick }),
        _react2.default.createElement(_Button2.default, { text: "Close", onClick: this.handleClose })
      );
    }
  }]);

  return Filter;
}(_react.Component);

exports.default = Filter;


Filter.defaultProps = {};
Filter.propTypes = {
  options: _propTypes2.default.array
};