[NEP-12629] Fix filters default value.

Author: Sergei Aksiutin

dist/react-filterbar.js

@@ -18224,7 +18224,8 @@ var FilterGroup = /*#__PURE__*/function (_React$Component) {
           style: {
             marginTop: 'auto',
             marginBottom: 'auto',
-            padding: '10px'
+            padding: '10px',
+            minWidth: '150px'
           },
           key: Math.random()
         }, /*#__PURE__*/React.createElement(_FilterInput.FilterInput, {
@@ -19385,10 +19386,10 @@ var RelativeDateInput = /*#__PURE__*/function (_React$Component) {
       var newValue = {
         value: selectedOption.val()
       };
-      this.state = {
+      this.setState({
         value: newValue
-      };
-      this.updateFilter(this.state.value);
+      });
+      this.updateFilter(newValue);
     }
   }, {
     key: "onDatePickerChange",
@@ -19455,6 +19456,7 @@ var RelativeDateInput = /*#__PURE__*/function (_React$Component) {
       this.setState({
         value: newValue
       });
+      this.updateFilter(this.state.value);
     }
   }, {
     key: "onBlur",
@@ -22077,6 +22079,12 @@ var _SearchClient = require("../clients/SearchClient");
 
 function _typeof(obj) { "@babel/helpers - typeof"; 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -22105,7 +22113,7 @@ var FilterBarStore = /*#__PURE__*/function () {
     this.exportResultsUrl = configuration.exportResultsUrl;
     this.exportPageLimit = configuration.exportPageLimit;
     this.exportPageLimitExceededMessage = configuration.exportPageLimitExceededMessage;
-    this.filters = configuration.filters;
+    this.filters = configuration.filters || {};
     this.activeFilters = configuration.activeFilters || [];
     this.quickFilters = configuration.quickFilters || {};
 
@@ -22480,13 +22488,13 @@ var FilterBarStore = /*#__PURE__*/function () {
   }, {
     key: "addGroupFilter",
     value: function addGroupFilter(filterUid, groupKey, value) {
-      var filter = this.filters[filterUid];
+      var filterTemplate = this.filters[filterUid];
+
+      var filter = _objectSpread({}, filterTemplate);
+
       filter.filterUid = filterUid;
       filter.uid = filterUid;
-
-      if (value) {
-        filter.value = value;
-      }
+      filter.value = value;
 
       if (groupKey == undefined) {
         this.activeFilters.push([filter]);

dist/react-filterbar.min.js

@@ -1,5 +1,4 @@
-React Components Structure
---------------------------
+### React Components Structure
 
 FilterBar
   -> FilterList
@@ -8,22 +7,52 @@ FilterBar
   -> ClearFiltersButton
   -> SaveFiltersButton
   -> SavedSearchesList
-  -> ConfigurationButton *
-  -> ExportResultsButton *
+  -> ConfigurationButton
+  -> ExportResultsButton
   -> BatchActionsList
   -> FilterDisplay
       -> FilterGroup
-          -> FilterItem
-          -> FilterButton
-      -> FilterButton
+          -> FilterInput
+          -> FilterButton ("ADD" button)
+              -> FilterListOption
+      -> FilterButton ("ADD FILTER" or "OR" button)
+          -> FilterListOption
 
 
-{} - available filters
-[] - default filters
-[
-  [filter1] -> when adding new add new filter1
+
+### Filters Structure
+Class _FilterBarStore_ has the following varables:
+```(javascript)
+activeFilters = [] // as array of active groups with filters
+filters = {} // as initial hash with available filters
+```
+
+#### Examples:
+##### Case 1
+Filter1
+
+```(javascript)
+activeFilters = [
+  [Filter1]
+]
+
+```
+##### Case 2
+Filter1 and Filter2
+
+```(javascript)
+activeFilters = [
+  [Filter1, Filter2]
 ]
 
-[
-  [filter1, filter2] -> when adding "ADD" button and add new filter2
+```
+##### Case 3
+(Filter1 and Filter 2) or Filter2
+
+```(javascript)
+activeFilters = [
+  [Filter1, Filter2],
+  [Filter3]
 ]
+
+```

docs/react-components-structure.md

@@ -39,7 +39,7 @@ export class FilterGroup extends React.Component {
       filters.push(
         (
         <div
-          style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }
+          style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px', minWidth: '150px'} }
           key={ Math.random() }
         >
           <FilterInput

example/public/js/react-filterbar.js

@@ -20,10 +20,10 @@ export class RelativeDateInput extends React.Component {
   }
 
   onRelativeChange(event) {
-    var selectedOption = $(event.target.childNodes[event.target.selectedIndex]);
-    var newValue = { value: selectedOption.val() };
-    this.state = { value: newValue }
-    this.updateFilter(this.state.value);
+    var selectedOption = $(event.target.childNodes[event.target.selectedIndex])
+    var newValue = { value: selectedOption.val() }
+    this.setState({ value: newValue })
+    this.updateFilter(newValue)
   }
 
   onDatePickerChange(event) {
@@ -80,6 +80,7 @@ export class RelativeDateInput extends React.Component {
     var newValue = this.state.value
     newValue[input] = event.target.value
     this.setState({ value: newValue })
+    this.updateFilter(this.state.value)
   }
 
   onBlur() {

src/components/FilterBar/FilterDisplay/FilterGroup.react.js

@@ -16,7 +16,7 @@ export class FilterBarStore {
     this.exportResultsUrl = configuration.exportResultsUrl;
     this.exportPageLimit = configuration.exportPageLimit;
     this.exportPageLimitExceededMessage = configuration.exportPageLimitExceededMessage;
-    this.filters = configuration.filters;
+    this.filters = configuration.filters || {};
     this.activeFilters = configuration.activeFilters || [];
     this.quickFilters = configuration.quickFilters || {};
 
@@ -212,13 +212,12 @@ export class FilterBarStore {
   }
 
   addGroupFilter(filterUid, groupKey, value) {
-    const filter = this.filters[filterUid];
+    const filterTemplate = this.filters[filterUid];
+    const filter = { ...filterTemplate };
+
     filter.filterUid = filterUid;
     filter.uid = filterUid;
-
-    if (value) {
-      filter.value = value
-    }
+    filter.value = value;
 
     if (groupKey == undefined) {
       this.activeFilters.push([filter])