canner/lib/components/toolbar/filter/index.js

Build CMS in few lines of code for different data sources

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/icon/style");

var _icon = _interopRequireDefault(require("antd/lib/icon"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var React = _interopRequireWildcard(require("react"));

var _select = _interopRequireDefault(require("./select"));

var _number = _interopRequireDefault(require("./number"));

var _text = _interopRequireDefault(require("./text"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _antd = require("antd");

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  transition: 200ms;\n  maxWidth: 220px;\n  position: relative;\n  display: inline-block;\n  text-align: left;\n  margin: 8px 16px;\n  &:hover {\n    opacity: .8;\n  }\n  i.filter-cross {\n    transition: all 200ms;\n    left: 8px;\n    position: relative;\n    font-size: 18px;\n    cursor: pointer;\n  }\n  h5 {\n    margin-bottom: 0;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var FilterWrapper = _styledComponents.default.div(_templateObject());

var FilterGroup =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(FilterGroup, _React$Component);

  function FilterGroup() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, FilterGroup);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(FilterGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onChange", function (cond) {
      var _this$props = _this.props,
          where = _this$props.where,
          changeFilter = _this$props.changeFilter;

      if ((0, _isEmpty.default)(cond)) {
        changeFilter({});
      } else {
        Object.keys(cond).forEach(function (key) {
          var newCond = cond[key];

          if (newCond === undefined) {
            delete where[key];
          } else {
            where[key] = cond[key];
          }
        });
        changeFilter(where);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "deleteFilter", function (index) {
      var _this$props2 = _this.props,
          deleteFilter = _this$props2.deleteFilter,
          filters = _this$props2.filters;
      var filter = filters[index];

      if (filter.type === 'select') {
        var allField = filter.options.reduce(function (result, option) {
          Object.keys(option.condition).forEach(function (key) {
            if (!(key in result)) {
              result[key] = undefined;
            }
          });
          return result;
        }, {});

        _this.onChange(allField);
      } else {
        _this.onChange((0, _defineProperty2.default)({}, filter.field, undefined));
      }

      deleteFilter(index);
    });
    return _this;
  }

  (0, _createClass2.default)(FilterGroup, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props3 = this.props,
          _this$props3$filters = _this$props3.filters,
          filters = _this$props3$filters === void 0 ? [] : _this$props3$filters,
          displayedFilters = _this$props3.displayedFilters,
          where = _this$props3.where;

      if (!filters || !filters.length) {
        return null;
      }

      var debounceChange = (0, _debounce.default)(this.onChange, 500);

      var renderFilter = function renderFilter(filter, index) {
        switch (filter.type) {
          case 'select':
            return React.createElement(_select.default, {
              index: index,
              onChange: debounceChange,
              options: filter.options,
              where: where
            });

          case 'number':
            return React.createElement(_number.default, {
              index: index,
              onChange: debounceChange,
              name: filter.field,
              where: where
            });

          /*
          case 'dateRange':
            return <DateRangeFilter onChange={debounceChange} schema={{[filter.field]: filter}}/>
          */

          case 'text':
            return React.createElement(_text.default, {
              index: index,
              onChange: debounceChange,
              name: filter.field,
              where: where
            });

          default:
            return null;
        }
      };

      return React.createElement(React.Fragment, null, displayedFilters.map(function (index) {
        return React.createElement(FilterWrapper, {
          key: index
        }, React.createElement("h5", null, filters[index].label), renderFilter(filters[index], index), !filters[index].alwaysDisplay && React.createElement(_icon.default, {
          "data-testid": "filter-".concat(index, "-delete-icon"),
          className: "filter-cross",
          type: "close-circle",
          onClick: function onClick() {
            return _this2.deleteFilter(index);
          }
        }));
      }));
    }
  }]);
  return FilterGroup;
}(React.Component);

exports.default = FilterGroup;