fe-fabric-react 0.0.1-security → 2.864.3

package/lib/fe-filter/FeFilter.js

@@ -0,0 +1,1312 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toNumber = _interopRequireDefault(require("lodash/toNumber"));
+
+var _feFilter = _interopRequireDefault(require("../core/utils/fe-filter"));
+
+var _utils = require("../core/utils");
+
+var _helper = require("../core/utils/helper");
+
+var _core = require("../core");
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a 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);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var FeFilter =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FeFilter, _Component);
+
+  function FeFilter(props) {
+    var _this;
+
+    _classCallCheck(this, FeFilter);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeFilter).call(this, props));
+    _this.state = {
+      isOpen: false,
+      list: [],
+      editIndex: null,
+      appliedFilterOptionEdit: null,
+      appliedFilterTextEdit: null,
+      appliedFilterNode: null,
+      textHighlight: null,
+      listType: 'filters',
+      isPanelClear: true,
+      listStyle: null,
+      activeKey: null,
+      appliedFilters: null,
+      recentFilters: null
+    };
+    _this.onPanelFocus = _this.onPanelFocus.bind(_assertThisInitialized(_this));
+    _this.onPanelKeyUp = _this.onPanelKeyUp.bind(_assertThisInitialized(_this));
+    _this.onEditInputKeyUp = _this.onEditInputKeyUp.bind(_assertThisInitialized(_this));
+    _this.saveEditedTextInput = _this.saveEditedTextInput.bind(_assertThisInitialized(_this));
+    _this.hideSuggestionList = _this.hideSuggestionList.bind(_assertThisInitialized(_this));
+    _this.onPillboxClick = _this.onPillboxClick.bind(_assertThisInitialized(_this));
+    _this.onClearAll = _this.onClearAll.bind(_assertThisInitialized(_this));
+    _this.onToggleSuggestionList = _this.onToggleSuggestionList.bind(_assertThisInitialized(_this));
+    _this.onSuggestionListItemClick = _this.onSuggestionListItemClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FeFilter, [{
+    key: "onPanelFocus",
+    value: function onPanelFocus(event) {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          activeKey = _this$state.activeKey,
+          textHighlight = _this$state.textHighlight,
+          editIndex = _this$state.editIndex,
+          appliedFilterOptionEdit = _this$state.appliedFilterOptionEdit,
+          appliedFilterTextEdit = _this$state.appliedFilterTextEdit,
+          appliedFilterNode = _this$state.appliedFilterNode;
+      var listStyle = {
+        position: 'absolute',
+        left: "".concat(event.currentTarget.offsetLeft, "px"),
+        top: "".concat(event.currentTarget.offsetTop + event.currentTarget.clientHeight / 2, "px")
+      };
+      var list = [],
+          listType,
+          isOpen = true;
+      var isEmptyValue = (0, _utils.isEmpty)(event.currentTarget.value);
+
+      if (activeKey && !appliedFilterTextEdit) {
+        if (activeKey.options && activeKey.options.length) {
+          list = this.filterSuggestionList(event.currentTarget.value, activeKey.options);
+          textHighlight = event.currentTarget.value;
+          listType = 'filterValue';
+        } else {
+          list = [];
+          isOpen = false;
+          textHighlight = null;
+        }
+      } else {
+        var filters = [];
+
+        if (this.props.withRecent && this.state.recentFilters) {
+          filters.push({
+            label: this.props.labelRecent,
+            list: this.state.recentFilters
+          });
+        }
+
+        if (this.props.savedFilters) {
+          var savedFilters = Object.assign([], this.props.savedFilters);
+          savedFilters.forEach(function (filter) {
+            if (filter.canRemove) {
+              delete filter.canRemove;
+              filter['iconRight'] = "".concat(_this2.props.iconRemove, " text-danger");
+            }
+          });
+          filters.push({
+            label: this.props.labelSaved,
+            list: savedFilters
+          });
+        }
+
+        if (this.props.config) {
+          filters.push({
+            label: this.props.labelFields,
+            list: this.props.config
+          });
+        }
+
+        list = this.filterSuggestionList(event.currentTarget.value, filters);
+        textHighlight = event.currentTarget.value;
+        listType = 'filters';
+        editIndex = null;
+        activeKey = null;
+        appliedFilterOptionEdit = null;
+        appliedFilterTextEdit = null;
+        appliedFilterNode = null;
+      }
+
+      this.setState({
+        isOpen: isOpen,
+        isPanelClear: isEmptyValue,
+        editIndex: editIndex,
+        activeKey: activeKey,
+        appliedFilterOptionEdit: appliedFilterOptionEdit,
+        appliedFilterTextEdit: appliedFilterTextEdit,
+        appliedFilterNode: appliedFilterNode,
+        list: list,
+        textHighlight: textHighlight,
+        listType: listType,
+        listStyle: listStyle
+      });
+    }
+  }, {
+    key: "onPanelKeyUp",
+    value: function onPanelKeyUp(event) {
+      var isEmptyValue = (0, _utils.isEmpty)(event.currentTarget.value);
+      var _this$state2 = this.state,
+          isOpen = _this$state2.isOpen,
+          activeKey = _this$state2.activeKey,
+          editIndex = _this$state2.editIndex,
+          appliedFilters = _this$state2.appliedFilters,
+          isPanelClear = _this$state2.isPanelClear,
+          listType = _this$state2.listType,
+          recentFilters = _this$state2.recentFilters;
+      var filters = Object.assign([], appliedFilters);
+
+      if (isEmptyValue && event.keyCode === 8) {
+        //BackSpace
+        if (activeKey && this.state.isPanelClear) {
+          activeKey = null;
+          editIndex = null;
+          listType = 'filters';
+          isOpen = false;
+          this.setState({
+            isOpen: isOpen,
+            activeKey: activeKey,
+            editIndex: editIndex,
+            listType: listType
+          });
+        } else if (appliedFilters && this.state.isPanelClear) {
+          //delete pillbox
+          appliedFilters.splice(appliedFilters.length - 1, 1);
+
+          if ((0, _utils.isEmpty)(appliedFilters)) {
+            appliedFilters = null;
+          }
+
+          this.setState({
+            isOpen: false,
+            appliedFilters: appliedFilters
+          });
+
+          if (this.props.onFilterChange) {
+            this.props.onFilterChange({
+              appliedFilters: appliedFilters,
+              recentFilters: recentFilters
+            });
+          }
+        } else {
+          this.onPanelFocus(event);
+        }
+      } else if (activeKey && event.currentTarget.value.trim() && event.keyCode === 13 && !this.state.isPanelClear) {
+        //Enter
+        if (activeKey.options && activeKey.options.length) {
+          // TODO: Inform user to choose from list only
+          isOpen = true;
+        } else {
+          var value = event.currentTarget.value.trim();
+          var isValid = this.isValid(activeKey.regx, value);
+
+          if (isValid) {
+            filters = this.updateFilter(activeKey.name, value);
+            recentFilters = this.updateRecentFilters(activeKey, value);
+            activeKey = null;
+            editIndex = null;
+            isOpen = false;
+            listType = 'filters';
+            isPanelClear = true;
+            this.clearInputPanel();
+
+            if (this.props.onFilterChange) {
+              this.props.onFilterChange({
+                appliedFilters: filters,
+                recentFilters: recentFilters
+              });
+            }
+          } else {// TODO: Show error for wrong input
+          }
+        }
+
+        this.setState({
+          isOpen: isOpen,
+          activeKey: activeKey,
+          editIndex: editIndex,
+          listType: listType,
+          isPanelClear: isPanelClear,
+          appliedFilters: filters,
+          recentFilters: recentFilters
+        });
+      } else if (this.props.allowAsSearch && !activeKey && event.currentTarget.value.trim() && event.keyCode === 13 && !this.state.isPanelClear) {
+        //Normal string entered
+        var _value = event.currentTarget.value.trim();
+
+        var _isValid = this.isValid(this.props.searchConfig.regx, _value);
+
+        if (_isValid) {
+          filters = this.updateFilter(this.props.searchConfig.name, _value);
+          recentFilters = this.updateRecentFilters(this.props.searchConfig, _value);
+          activeKey = null;
+          editIndex = null;
+          isOpen = false;
+          listType = 'filters';
+          isPanelClear = true;
+          this.clearInputPanel();
+
+          if (this.props.onFilterChange) {
+            this.props.onFilterChange({
+              appliedFilters: filters,
+              recentFilters: recentFilters
+            });
+          }
+        } else {// TODO: Show error for wrong input
+        }
+
+        this.setState({
+          isOpen: isOpen,
+          activeKey: activeKey,
+          editIndex: editIndex,
+          listType: listType,
+          isPanelClear: isPanelClear,
+          appliedFilters: filters,
+          recentFilters: recentFilters
+        });
+      } else {
+        this.onPanelFocus(event);
+      }
+    }
+  }, {
+    key: "onEditInputKeyUp",
+    value: function onEditInputKeyUp(event) {
+      if (event.keyCode === 13) {
+        //Enter pressed
+        this.saveEditedTextInput(event);
+      } else {
+        var appliedFilterTextEdit = this.state.appliedFilterTextEdit;
+        var options = Object.assign({}, appliedFilterTextEdit);
+        options['value'] = event.currentTarget.value;
+        this.setState({
+          appliedFilterTextEdit: options
+        });
+      }
+    }
+  }, {
+    key: "saveEditedTextInput",
+    value: function saveEditedTextInput(event) {
+      (0, _helper.stopPropagation)(event);
+      var _this$state3 = this.state,
+          isOpen = _this$state3.isOpen,
+          activeKey = _this$state3.activeKey,
+          editIndex = _this$state3.editIndex,
+          appliedFilterNode = _this$state3.appliedFilterNode,
+          appliedFilters = _this$state3.appliedFilters,
+          appliedFilterTextEdit = _this$state3.appliedFilterTextEdit,
+          isPanelClear = _this$state3.isPanelClear,
+          listType = _this$state3.listType,
+          recentFilters = _this$state3.recentFilters;
+      var filters = Object.assign([], appliedFilters);
+      var value = appliedFilterTextEdit.value.trim();
+      var previousValue = filters[editIndex].value;
+
+      if (previousValue === value) {
+        //value isn't changed
+        this.hideSuggestionList(event);
+        return false;
+      }
+
+      if (value) {
+        var isValid = this.isValid(activeKey.regx, value);
+
+        if (isValid) {
+          filters = this.updateFilter(activeKey.name, value);
+          recentFilters = this.updateRecentFilters(activeKey, value);
+          activeKey = null;
+          editIndex = null;
+          appliedFilterTextEdit = null;
+          appliedFilterNode = null;
+          isOpen = false;
+          listType = 'filters';
+          isPanelClear = true;
+          this.clearInputPanel();
+
+          if (this.props.onFilterChange) {
+            this.props.onFilterChange({
+              appliedFilters: filters,
+              recentFilters: recentFilters
+            });
+          }
+        } else {// TODO: Show error for wrong input
+        }
+
+        this.setState({
+          isOpen: isOpen,
+          activeKey: activeKey,
+          editIndex: editIndex,
+          listType: listType,
+          isPanelClear: isPanelClear,
+          appliedFilterTextEdit: appliedFilterTextEdit,
+          appliedFilterNode: appliedFilterNode,
+          appliedFilters: filters,
+          recentFilters: recentFilters
+        });
+      } else {
+        //DELETE filter
+        this.onPillboxClear(editIndex);
+      }
+    }
+  }, {
+    key: "onSuggestionListItemClick",
+    value: function onSuggestionListItemClick(event) {
+      var _this$state4 = this.state,
+          listType = _this$state4.listType,
+          activeKey = _this$state4.activeKey,
+          appliedFilters = _this$state4.appliedFilters,
+          isPanelClear = _this$state4.isPanelClear,
+          appliedFilterNode = _this$state4.appliedFilterNode,
+          appliedFilterOptionEdit = _this$state4.appliedFilterOptionEdit,
+          appliedFilterTextEdit = _this$state4.appliedFilterTextEdit,
+          recentFilters = _this$state4.recentFilters;
+      var isOpen = false;
+      var currentTarget = event.originalEvent.currentTarget;
+      var id = currentTarget.id,
+          name = currentTarget.name,
+          value = currentTarget.value,
+          dataset = currentTarget.dataset;
+
+      if (listType === 'filters') {
+        if (name && dataset && dataset.type === 'recent') {
+          //Recent filters
+          var filterKeyObject;
+
+          if (this.props.allowAsSearch && name === this.props.searchConfig.name) {
+            filterKeyObject = (0, _utils.find)(this.state.recentFilters, {
+              name: name,
+              value: value
+            });
+          } else {
+            filterKeyObject = (0, _utils.find)(this.state.recentFilters, {
+              name: name
+            });
+          }
+
+          appliedFilters = this.updateFilter(filterKeyObject.name, filterKeyObject.value);
+          isPanelClear = true;
+          this.clearInputPanel();
+
+          if (this.props.onFilterChange) {
+            this.props.onFilterChange({
+              appliedFilters: appliedFilters,
+              recentFilters: recentFilters
+            });
+          }
+        } else if (name && !value) {
+          //fields
+          var _filterKeyObject = (0, _utils.find)(this.props.config, {
+            name: name
+          });
+
+          var appliedFilter = (0, _utils.find)(this.state.appliedFilters, {
+            name: name
+          });
+          activeKey = _filterKeyObject;
+
+          if (appliedFilter && !activeKey.options) {
+            this.inputPanelNode.value = appliedFilter['value'];
+          } else {
+            isPanelClear = true;
+            this.clearInputPanel();
+          }
+        } else if (id && !name && !value) {
+          //Saved filters
+          appliedFilters = (0, _utils.find)(this.props.savedFilters, {
+            id: id
+          });
+          appliedFilters = appliedFilters ? Object.assign([], appliedFilters['filters']) : null;
+          isPanelClear = true;
+          this.clearInputPanel();
+
+          if (this.props.onFilterChange) {
+            this.props.onFilterChange({
+              appliedFilters: appliedFilters,
+              recentFilters: recentFilters
+            });
+          }
+        }
+      } else if (listType === 'filterValue') {
+        //field value
+        var activeId = event.activeId,
+            activeIds = event.activeIds;
+
+        var _value2 = activeId || activeIds;
+
+        var activeFilter = appliedFilterOptionEdit || activeKey;
+        appliedFilters = this.updateFilter(activeFilter.name, _value2);
+        recentFilters = this.updateRecentFilters(activeFilter, _value2);
+        appliedFilterOptionEdit = null;
+        appliedFilterTextEdit = null;
+        appliedFilterNode = null;
+        activeKey = null;
+        isPanelClear = true;
+        listType = 'filters';
+        this.clearInputPanel();
+        this.restoreFocus();
+
+        if (this.props.onFilterChange) {
+          this.props.onFilterChange({
+            appliedFilters: appliedFilters,
+            recentFilters: recentFilters
+          });
+        }
+      }
+
+      this.setState({
+        isOpen: isOpen,
+        activeKey: activeKey,
+        editIndex: null,
+        appliedFilterNode: appliedFilterNode,
+        appliedFilterOptionEdit: appliedFilterOptionEdit,
+        appliedFilterTextEdit: appliedFilterTextEdit,
+        isPanelClear: isPanelClear,
+        appliedFilters: appliedFilters,
+        recentFilters: recentFilters,
+        listType: listType
+      });
+    }
+  }, {
+    key: "restoreFocus",
+    value: function restoreFocus(event) {
+      var element = document.getElementById("".concat(this.props.id, "Input"));
+      setTimeout(function () {
+        element && element.focus();
+      }, 200);
+    }
+  }, {
+    key: "onPillboxClick",
+    value: function onPillboxClick(event) {
+      if (event.iconClick) {
+        this.onPillboxClear(event.props.index);
+      } else {
+        this.onPillboxEdit(event);
+      }
+    }
+  }, {
+    key: "onPillboxClear",
+    value: function onPillboxClear(index) {
+      var _this$state5 = this.state,
+          activeKey = _this$state5.activeKey,
+          appliedFilterTextEdit = _this$state5.appliedFilterTextEdit,
+          appliedFilters = _this$state5.appliedFilters,
+          recentFilters = _this$state5.recentFilters;
+      appliedFilters.splice(index, 1);
+
+      if ((0, _utils.isEmpty)(appliedFilters)) {
+        appliedFilters = null;
+      }
+
+      if (this.props.onFilterChange) {
+        this.props.onFilterChange({
+          appliedFilters: appliedFilters,
+          recentFilters: recentFilters
+        });
+      }
+
+      this.setState({
+        isOpen: false,
+        appliedFilters: appliedFilters,
+        appliedFilterOptionEdit: null,
+        appliedFilterTextEdit: null,
+        appliedFilterNode: null,
+        activeKey: appliedFilterTextEdit ? null : activeKey,
+        editIndex: null,
+        listType: 'filters'
+      });
+    }
+  }, {
+    key: "onPillboxEdit",
+    value: function onPillboxEdit(event) {
+      var _this$state6 = this.state,
+          listStyle = _this$state6.listStyle,
+          isOpen = _this$state6.isOpen,
+          activeKey = _this$state6.activeKey,
+          editIndex = _this$state6.editIndex,
+          list = _this$state6.list,
+          appliedFilterOptionEdit = _this$state6.appliedFilterOptionEdit,
+          appliedFilterTextEdit = _this$state6.appliedFilterTextEdit,
+          listType = _this$state6.listType,
+          appliedFilterNode = _this$state6.appliedFilterNode;
+      var filterKeyObject = (0, _utils.find)(this.props.config, {
+        name: event.props.name
+      });
+      isOpen = true;
+      listStyle = {
+        position: 'absolute',
+        left: "".concat(event.originalEvent.currentTarget.offsetLeft, "px"),
+        top: "".concat(event.originalEvent.currentTarget.offsetTop + event.originalEvent.currentTarget.clientHeight / 2, "px")
+      }; // Reset panel
+
+      list = [];
+      appliedFilterNode = event.originalEvent.currentTarget;
+      listType = 'filters';
+      appliedFilterOptionEdit = null;
+      appliedFilterTextEdit = null;
+      activeKey = null;
+      editIndex = null;
+      this.clearInputPanel();
+
+      if (filterKeyObject && filterKeyObject.options) {
+        //predefined options
+        list = filterKeyObject.options;
+        appliedFilterOptionEdit = filterKeyObject;
+        listType = 'filterValue';
+      } else if (filterKeyObject) {
+        // predefined text
+        editIndex = event.props.index;
+        appliedFilterTextEdit = Object.assign({}, filterKeyObject);
+        appliedFilterTextEdit['value'] = this.state.appliedFilters[event.props.index]['value'];
+        activeKey = filterKeyObject;
+      } else {
+        // string search
+        editIndex = event.props.index;
+        activeKey = this.props.searchConfig;
+        appliedFilterTextEdit = Object.assign({}, this.props.searchConfig);
+        appliedFilterTextEdit['value'] = this.state.appliedFilters[event.props.index]['value'];
+      }
+
+      this.setState({
+        isOpen: isOpen,
+        listStyle: listStyle,
+        appliedFilterOptionEdit: appliedFilterOptionEdit,
+        appliedFilterTextEdit: appliedFilterTextEdit,
+        appliedFilterNode: appliedFilterNode,
+        listType: listType,
+        editIndex: editIndex,
+        list: list,
+        activeKey: activeKey
+      });
+    }
+  }, {
+    key: "onToggleSuggestionList",
+    value: function onToggleSuggestionList(event) {
+      if (event.originalEvent && (event.originalEvent.target === this.inputPanelNode && event.originalEvent.keyCode !== 9 || this.state.appliedFilterNode && this.state.appliedFilterNode.contains(event.originalEvent.target))) {
+        return false;
+      }
+
+      if (!event.isOpen) {
+        this.hideSuggestionList();
+      }
+    }
+  }, {
+    key: "updateFilter",
+    value: function updateFilter(feKey, feValue) {
+      var _this3 = this;
+
+      var _this$state7 = this.state,
+          appliedFilters = _this$state7.appliedFilters,
+          editIndex = _this$state7.editIndex;
+      var filters = Object.assign([], appliedFilters);
+
+      if (editIndex) {
+        //update filter
+        var index = (0, _utils.findIndex)(appliedFilters, {
+          name: feKey,
+          value: feValue
+        });
+
+        if (index > -1 && index !== (0, _toNumber.default)(editIndex)) {
+          filters.splice(index, 1);
+        }
+
+        filters[editIndex] = {
+          name: feKey,
+          value: feValue
+        };
+      } else if (feKey === this.props.searchConfig.name) {
+        var _index = (0, _utils.findIndex)(appliedFilters, function (item) {
+          if (item.name === feKey) {
+            return _this3.props.searchConfig.isCaseSensitive ? feValue === item.value : feValue.toLocaleLowerCase() === item.value.toLocaleLowerCase();
+          }
+
+          return false;
+        });
+
+        if (_index > -1) {
+          filters.splice(_index, 1);
+        }
+
+        filters.push({
+          name: feKey,
+          value: feValue
+        });
+      } else {
+        var _index2 = (0, _utils.findIndex)(appliedFilters, {
+          name: feKey
+        });
+
+        if (feValue !== null && feValue !== undefined) {
+          if (_index2 > -1) {
+            filters[_index2] = {
+              name: feKey,
+              value: feValue
+            };
+          } else {
+            filters.push({
+              name: feKey,
+              value: feValue
+            });
+          }
+        } else {
+          filters.splice(_index2, 1);
+        }
+      }
+
+      return filters;
+    }
+  }, {
+    key: "updateRecentFilters",
+    value: function updateRecentFilters(activeKey, feValue) {
+      if (!this.props.withRecent) {
+        return null;
+      }
+
+      if (feValue === null) {
+        return this.state.recentFilters;
+      }
+
+      var _this$state8 = this.state,
+          appliedFilters = _this$state8.appliedFilters,
+          recentFilters = _this$state8.recentFilters,
+          editIndex = _this$state8.editIndex;
+      var filters = Object.assign([], recentFilters);
+      var label = this.props.searchConfig && activeKey.name === this.props.searchConfig.name ? "".concat(this.getFeValue(activeKey, feValue)) : "".concat(activeKey.label || activeKey.name, ": ").concat(this.getFeValue(activeKey, feValue));
+      var filter = {
+        name: activeKey.name,
+        value: feValue,
+        label: label,
+        'data-type': 'recent'
+      };
+      var index = -1;
+
+      if (editIndex) {
+        index = (0, _utils.findIndex)(filters, filter);
+
+        if (index < 0) {
+          index = (0, _utils.findIndex)(filters, appliedFilters[editIndex]);
+        }
+      } else if (this.props.searchConfig && filter.name === this.props.searchConfig.name) {
+        index = (0, _utils.findIndex)(filters, filter);
+      } else {
+        index = (0, _utils.findIndex)(filters, {
+          name: filter.name
+        });
+      }
+
+      if (index > -1) {
+        filters.splice(index, 1);
+      }
+
+      filters.push(filter);
+
+      if (filters.length > 5) {
+        filters.splice(0, 1);
+      }
+
+      return filters;
+    }
+  }, {
+    key: "filterSuggestionList",
+    value: function filterSuggestionList(subStr, list) {
+      var config = {
+        queryAt: 'label'
+      };
+
+      if (this.state.listType === 'filters') {
+        config['isMultiLevel'] = true;
+        config['multiLevelKey'] = 'list';
+      }
+
+      var filteredList = _feFilter.default.filter(subStr, list, config);
+
+      if (filteredList.length === 0 && !(this.props.allowAsSearch && this.state.listType !== 'filterValue')) {
+        filteredList = [{
+          label: 'No results found',
+          disabled: true
+        }];
+      }
+
+      return filteredList;
+    }
+  }, {
+    key: "getFeValue",
+    value: function getFeValue(filter, value) {
+      var feValue;
+
+      if (Array.isArray(value)) {
+        var valueLabels = [];
+        value.forEach(function (val) {
+          valueLabels.push(filter.options.find(function (opt) {
+            return opt.value === val;
+          })['label']);
+        });
+        feValue = valueLabels.join(',');
+      } else if (filter.options && filter.options.length) {
+        feValue = filter.options.find(function (opt) {
+          return opt.value === value;
+        })['label'];
+      } else {
+        feValue = value;
+      }
+
+      return feValue;
+    }
+  }, {
+    key: "isValid",
+    value: function isValid(regExp, value) {
+      var inputs = value.split('|');
+
+      if (regExp) {
+        var matched = true;
+
+        for (var i = 0; i < inputs.length; i++) {
+          var regx = new RegExp(regExp, 'g');
+          matched = regx.test(inputs[i]);
+
+          if (!matched) {
+            break;
+          }
+        }
+
+        return matched;
+      } else {
+        return true;
+      }
+    }
+  }, {
+    key: "onClearAll",
+    value: function onClearAll(event) {
+      var recentFilters = this.state.recentFilters;
+      this.clearInputPanel();
+      this.setState({
+        activeKey: null,
+        appliedFilters: null,
+        isPanelClear: true,
+        editIndex: null,
+        appliedFilterOptionEdit: null,
+        appliedFilterTextEdit: null,
+        listType: 'filters'
+      });
+
+      if (this.props.onFilterChange) {
+        this.props.onFilterChange({
+          appliedFilters: null,
+          recentFilters: recentFilters
+        });
+      }
+    }
+  }, {
+    key: "clearInputPanel",
+    value: function clearInputPanel() {
+      this.inputPanelNode.value = '';
+    }
+  }, {
+    key: "hideSuggestionList",
+    value: function hideSuggestionList() {
+      this.setState({
+        isOpen: false,
+        editIndex: null,
+        activeKey: null,
+        appliedFilterOptionEdit: null,
+        appliedFilterTextEdit: null,
+        appliedFilterNode: null,
+        listType: 'filters'
+      });
+    }
+  }, {
+    key: "getSuggestionBox",
+    value: function getSuggestionBox() {
+      var _this4 = this;
+
+      var attributes = {};
+      var activeFilter = this.state.appliedFilterOptionEdit || this.state.activeKey;
+
+      if (this.state.listType === 'filters') {
+        attributes = {
+          feStyle: 'sectioned',
+          onIconRighClick: this.props.onFilterRemove
+        };
+      }
+
+      if (this.state.listType === 'filterValue') {
+        attributes = {
+          feType: activeFilter.type === 'checkbox' ? 'multi-select' : 'single-select',
+          idAttribute: 'value'
+        };
+        var value;
+        var filter = (0, _utils.find)(this.state.appliedFilters, {
+          name: activeFilter.name
+        });
+
+        if (this.state.appliedFilters && activeFilter && filter) {
+          value = filter.value;
+        }
+
+        if (value && activeFilter.type === 'checkbox') {
+          attributes['activeIds'] = Object.assign([], value);
+        } else if (value && !(activeFilter.type === 'checkbox')) {
+          attributes['activeId'] = value;
+        }
+      }
+
+      return _react.default.createElement("div", {
+        style: this.state.listStyle,
+        ref: function ref(node) {
+          return _this4.listNode = node;
+        }
+      }, _react.default.createElement(_core.FeDropdown, _extends({}, attributes, {
+        referId: "".concat(this.props.id, "Input"),
+        isOpen: this.state.isOpen,
+        list: this.state.list,
+        textHighlight: this.state.textHighlight,
+        onToggleDropdown: this.onToggleSuggestionList,
+        onItemClick: this.onSuggestionListItemClick
+      }), this.state.appliedFilterTextEdit ? _react.default.createElement("div", {
+        className: "padding-left-16 padding-right-16 padding-top-8",
+        style: {
+          width: '214px'
+        }
+      }, _react.default.createElement(_core.FeSelfContainedInput, {
+        id: "".concat(this.props.id, "-editInput"),
+        feBackground: "light",
+        label: this.state.appliedFilterTextEdit.label || this.state.appliedFilterTextEdit.name,
+        value: this.state.appliedFilterTextEdit.value,
+        onChange: this.onEditInputKeyUp,
+        onKeyUp: this.onEditInputKeyUp
+      }), _react.default.createElement("div", {
+        className: "pull-right margin-top-8"
+      }, _react.default.createElement(_core.FeButton, {
+        feBackground: "light",
+        feStyle: "link-secondary",
+        size: "xs",
+        onClick: this.hideSuggestionList
+      }, "Cancel"), _react.default.createElement(_core.FeButton, {
+        className: "margin-left-16",
+        feStyle: "link",
+        size: "xs",
+        onClick: this.saveEditedTextInput
+      }, "Save"))) : null));
+    }
+  }, {
+    key: "getInputPanel",
+    value: function getInputPanel() {
+      var _this5 = this;
+
+      var placeholder = !this.state.activeKey && (0, _utils.isEmpty)(this.state.appliedFilters) ? this.props.placeholder : null;
+      return _react.default.createElement("input", {
+        ref: function ref(node) {
+          return _this5.inputPanelNode = node;
+        },
+        id: "".concat(this.props.id, "Input"),
+        placeholder: placeholder,
+        type: "text",
+        "aria-label": "filter_panel",
+        autoComplete: "off",
+        className: "fe-filters__input",
+        onClick: this.onPanelFocus,
+        onFocus: this.onPanelFocus,
+        onKeyUp: this.onPanelKeyUp
+      });
+    }
+  }, {
+    key: "getFilters",
+    value: function getFilters() {
+      var _this6 = this;
+
+      if (!this.state.appliedFilters) {
+        return null;
+      }
+
+      return _react.default.createElement(_react.Fragment, null, this.state.appliedFilters.map(function (item, index) {
+        var value = item['value'];
+        var filter = (0, _utils.find)(_this6.props.config, {
+          name: item['name']
+        });
+        var feValue;
+
+        if (filter) {
+          feValue = _this6.getFeValue(filter, value);
+          return _react.default.createElement(_core.FePillBox, {
+            key: index,
+            index: "".concat(index),
+            name: filter.name,
+            feKey: "".concat(filter.label),
+            feValue: "".concat(feValue),
+            feType: "clear",
+            onClick: _this6.onPillboxClick
+          });
+        } else if (_this6.props.searchConfig && item.name === _this6.props.searchConfig.name) {
+          return _react.default.createElement(_core.FePillBox, {
+            key: index,
+            index: "".concat(index),
+            name: item.name,
+            label: "".concat(value),
+            feType: "clear",
+            onClick: _this6.onPillboxClick
+          });
+        } else {
+          return _react.default.createElement(_core.FePillBox, {
+            key: index,
+            index: "".concat(index),
+            name: item.name,
+            feKey: item.name,
+            feValue: "".concat(item.value),
+            feType: "clear",
+            onClick: _this6.onPillboxClick
+          });
+        }
+      }));
+    }
+  }, {
+    key: "getActiveKey",
+    value: function getActiveKey() {
+      return _react.default.createElement("span", null, "".concat(this.state.activeKey.label || this.state.activeKey.name, ": "));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /** Minimum condition required to render*/
+
+      /** Rendering of component */
+      var className = (0, _classnames.default)('fe-filters', this.props.className);
+      var suggestionBox = this.getSuggestionBox();
+      var inputPanel = this.getInputPanel();
+      var filters = this.getFilters();
+      var activeKey = this.state.activeKey && !this.state.appliedFilterTextEdit && this.getActiveKey();
+      var isClearAllDisabled = this.state.appliedFilters === null && this.state.activeKey === null;
+      return _react.default.createElement("div", {
+        className: "fe-filters-container"
+      }, _react.default.createElement("div", {
+        className: className,
+        id: this.props.id
+      }, _react.default.createElement("div", {
+        className: "fe-filters__icon"
+      }, _react.default.createElement(_core.FeIcon, {
+        family: "solid",
+        icon: "filter"
+      })), _react.default.createElement("div", {
+        className: "fe-filters__box"
+      }, filters, activeKey, inputPanel), this.props.withClearAll || this.props.optionalComponent ? _react.default.createElement("div", {
+        className: "fe-filters__btns"
+      }, this.props.withClearAll ? _react.default.createElement(_core.FeButton, {
+        feStyle: "link-danger",
+        onClick: this.onClearAll,
+        disabled: isClearAllDisabled
+      }, "CLEAR ALL") : null, this.props.optionalComponent) : null), suggestionBox);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.appliedFilters !== null) {
+        return {
+          appliedFilters: props.appliedFilters,
+          recentFilters: props.recentFilters
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  return FeFilter;
+}(_react.Component);
+
+FeFilter.defaultProps = {
+  id: null,
+  placeholder: null,
+  config: null,
+  withRecent: false,
+  withClearAll: true,
+  allowAsSearch: true,
+  searchConfig: {
+    label: 'Key word',
+    name: 'key_word'
+  },
+  iconRemove: 'fas fa-trash',
+  labelRecent: 'Recent Filters',
+  labelSaved: 'Saved Filter Sets',
+  labelFields: 'All Fields',
+  savedFilters: null,
+  appliedFilters: null,
+  recentFilters: null,
+  onFilterChange: null,
+  onFilterRemove: null,
+  optionalComponent: null
+};
+FeFilter.propTypes = {
+  /** Provide id for filter component*/
+  id: _propTypes.default.string.isRequired,
+
+  /** Provide placeholder for filter input*/
+  placeholder: _propTypes.default.string,
+
+  /** Provide all filter fields
+  [{
+    name: 'severity',
+    label: 'Severity',
+    options: [{
+      label: 'None',
+      value: 'none'
+    },{
+      label: 'Minor',
+      value: '0,2'
+    },{
+      label: 'Major',
+      value: '3,6'
+    },
+    {
+      label: 'Critical',
+      value: '7,10'
+    }],
+    type: 'checkbox'
+  },
+  {
+    name: 'risk',
+    label: 'Risk',
+    options: [{
+      label: 'High',
+      value: 'high'
+    },{
+      label: 'Low',
+      value: 'low'
+    }]
+  },
+  {
+    label: 'Sender',
+    name: 'sender'
+  }]
+  */
+  config: _propTypes.default.array,
+
+  /** Set true/false to get recently applied filters in suggestion list*/
+  withRecent: _propTypes.default.bool,
+
+  /** Set true/false to get 'Clear All' action*/
+  withClearAll: _propTypes.default.bool,
+
+  /** Set true/false to allow simple string*/
+  allowAsSearch: _propTypes.default.bool,
+
+  /** Provide config for string search
+  searchConfig: {
+                        label: 'Key word',
+                        name: 'key_word'
+                      },
+  */
+  searchConfig: _propTypes.default.object,
+
+  /** Provide icon class */
+  iconFilter: _propTypes.default.string,
+
+  /** Provide icon class */
+  iconRemove: _propTypes.default.string,
+
+  /** Provide label for Recent section*/
+  labelRecent: _propTypes.default.string,
+
+  /** Provide label for saved section*/
+  labelSaved: _propTypes.default.string,
+
+  /** Provide label for fields section*/
+  labelFields: _propTypes.default.string,
+
+  /** Provide Saved filter sets
+  [
+    {
+      id: 'myFilter1',
+      label: 'my filter 1',
+      filters: [
+        {
+          'name': 'file_type',
+          'value': 'zip'
+        },
+        {
+          'name': 'sender',
+          'value': 'bob@gmail.com'
+        }
+      ],
+      canRemove: true
+    }
+  ]
+  */
+  savedFilters: _propTypes.default.array,
+
+  /** Provide currently active filters
+  [
+    {
+      'name': 'file_type',
+      'value': 'zip'
+    },
+    {
+      'name': 'sender',
+      'value': 'bob@gmail.com'
+    }
+  ]
+  */
+  appliedFilters: _propTypes.default.array,
+
+  /** Provide recently applied filters
+  [
+    {
+      'name': 'file_type',
+      'value': 'zip',
+      'label': 'File type: zip',
+      'data-type': 'recent'
+    },
+    {
+      'name': 'sender',
+      'value': 'bob@gmail.com',
+      'label': 'Sender: bob@gmail.com',
+      'data-type': 'recent'
+    }
+  ]
+  */
+  recentFilters: _propTypes.default.array,
+
+  /** Provide handler for active-filter change*/
+  onFilterChange: _propTypes.default.func,
+
+  /** Provide handler for removeing saved filter*/
+  onFilterRemove: _propTypes.default.func,
+
+  /** Provide optional 'FeButton' or 'FeDropdown' component*/
+  optionalComponent: _propTypes.default.element
+};
+FeFilter.displayName = 'FeFilter';
+var _default = FeFilter;
+exports.default = _default;