@bento-core/query-bar 1.0.1-icdc.0 → 1.0.1-icdc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/CheckboxFilter.js +27 -6
  2. package/dist/generators/QueryBarGenerator.js +40 -6
  3. package/dist/generators/config.js +6 -1
  4. package/dist/generators/styles.js +10 -0
  5. package/package.json +1 -1
  6. package/src/components/CheckboxFilter.js +39 -5
  7. package/src/generators/QueryBarGenerator.js +62 -7
  8. package/src/generators/config.js +5 -0
  9. package/src/generators/styles.js +10 -0
package/dist/components/CheckboxFilter.js CHANGED
@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _clsx = _interopRequireDefault(require("clsx"));
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
12
  var _default = _ref => {
11
13
  let {
12
14
  index,
@@ -14,26 +16,45 @@ var _default = _ref => {
14
16
  classes,
15
17
  maxItems,
16
18
  onSectionClick,
17
- onItemClick
19
+ onItemClick,
20
+ displayAllActiveFilters
18
21
  } = _ref;
19
22
  const {
20
23
  items,
21
24
  section
22
25
  } = data;
26
+ const [expand, setExpand] = (0, _react.useState)(false);
27
+ const noOfItems = expand ? items.length : maxItems;
28
+ (0, _react.useEffect)(() => {
29
+ if (items.length <= maxItems && expand) {
30
+ setExpand(!expand);
31
+ }
32
+ }, [items]);
33
+ const clsName = function clsName() {
34
+ let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
35
+ let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
36
+ return "facetSection".concat(text.replace(/\s+/g, '')).concat(attr);
37
+ };
23
38
  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, ' ', index !== 0 ? /*#__PURE__*/_react.default.createElement("span", {
24
39
  className: classes.operators
25
40
  }, " AND ") : '', /*#__PURE__*/_react.default.createElement("span", {
26
- className: (0, _clsx.default)(classes.filterName, classes["facetSection".concat(section, "Background")]),
41
+ className: (0, _clsx.default)(classes.filterName, classes["".concat(clsName(section, 'Background'))]),
27
42
  onClick: () => onSectionClick(data)
28
43
  }, data.label), ' '), /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
29
44
  className: classes.operators
30
45
  }, items.length === 1 ? 'IS ' : 'IN '), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
31
46
  className: classes.bracketsOpen
32
- }, "("), items.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
33
- className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
47
+ }, "("), items.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
48
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
34
49
  key: idx,
35
50
  onClick: () => onItemClick(data, d)
36
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && '...', items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
51
+ }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
52
+ className: classes.expandBtn,
53
+ onClick: () => setExpand(!expand)
54
+ }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
55
+ className: classes.collapseBtn,
56
+ onClick: () => setExpand(!expand)
57
+ }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
37
58
  className: classes.bracketsClose
38
59
  }, ")")));
39
60
  };
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.QueryBarGenerator = void 0;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _core = require("@material-ui/core");
9
9
  var _facetFilter = require("@bento-core/facet-filter");
10
10
  var _clsx = _interopRequireDefault(require("clsx"));
@@ -12,6 +12,8 @@ var _FilterMap = require("../components/FilterMap");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _config = _interopRequireDefault(require("./config"));
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
17
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
18
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
19
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,12 +29,15 @@ const QueryBarGenerator = function QueryBarGenerator() {
27
29
  let uiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _config.default;
28
30
  const {
29
31
  config,
30
- functions
32
+ functions,
33
+ customStyles = {}
31
34
  } = uiConfig;
32
35
  const {
33
36
  CHECKBOX
34
37
  } = _facetFilter.InputTypes;
38
+ const styles = () => _objectSpread(_objectSpread({}, (0, _styles.default)()), customStyles);
35
39
  const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
40
+ const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
36
41
  const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
37
42
  const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
38
43
  const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -45,7 +50,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
45
50
  return text.replace(/\s+/g, '-').toLowerCase();
46
51
  };
47
52
  return {
48
- QueryBar: (0, _core.withStyles)(_styles.default, {
53
+ QueryBar: (0, _core.withStyles)(styles, {
49
54
  withTheme: true
50
55
  })(props => {
51
56
  const {
@@ -57,6 +62,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
57
62
  autocomplete,
58
63
  upload
59
64
  } = localFind;
65
+ const [expand, setExpand] = (0, _react.useState)(false);
66
+ const noOfItems = expand ? autocomplete.length : maxItems;
67
+ (0, _react.useEffect)(() => {
68
+ if (autocomplete.length <= maxItems && expand) {
69
+ setExpand(!expand);
70
+ }
71
+ }, [autocomplete]);
60
72
 
61
73
  // Remove any sections without checkboxes selected
62
74
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -77,8 +89,23 @@ const QueryBarGenerator = function QueryBarGenerator() {
77
89
  itemKeys.splice(itemKeys.indexOf(item), 1);
78
90
  }
79
91
  });
92
+ // return { ...facet, items: itemKeys };
93
+ /**
94
+ * Maintain consistant behavior with facet filter component
95
+ * Display the active filter items based on the count value
96
+ * Display active filter items in query bar only if count is greater than 0
97
+ * behavior similar to filter component
98
+ */
99
+ const displayItems = itemKeys.reduce((accumulator, item) => {
100
+ const itemList = data.filter(d => d.group === item && d.count > 0) || [];
101
+ if (itemList.length > 0) {
102
+ const labels = itemList.map(filter => filter.group);
103
+ accumulator.push(labels);
104
+ }
105
+ return accumulator;
106
+ }, []);
80
107
  return _objectSpread(_objectSpread({}, facet), {}, {
81
- items: itemKeys
108
+ items: displayItems
82
109
  });
83
110
  }).filter(facet => facet.items.length > 0);
84
111
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
@@ -108,11 +135,17 @@ const QueryBarGenerator = function QueryBarGenerator() {
108
135
  }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
109
136
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
110
137
  onClick: clearUpload
111
- }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
138
+ }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
112
139
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
113
140
  key: idx,
114
141
  onClick: () => deleteAutocompleteItem(d.title)
115
- }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
142
+ }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
143
+ className: classes.expandBtn,
144
+ onClick: () => setExpand(!expand)
145
+ }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
146
+ className: classes.collapseBtn,
147
+ onClick: () => setExpand(!expand)
148
+ }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
116
149
  className: classes.bracketsClose
117
150
  }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
118
151
  className: classes.operators
@@ -123,6 +156,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
123
156
  type: filter.type,
124
157
  data: filter,
125
158
  maxItems: maxItems,
159
+ displayAllActiveFilters: displayAllActiveFilters,
126
160
  classes: classes,
127
161
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
128
162
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
package/dist/generators/config.js CHANGED
@@ -12,7 +12,12 @@ var _default = {
12
12
  * The maximum number of items to display in a query bar facet section
13
13
  * @var {number}
14
14
  */
15
- maxItems: 2
15
+ maxItems: 2,
16
+ /**
17
+ * overirdes maxItems to display all the active filter items
18
+ * @var {boolean}
19
+ */
20
+ displayAllActiveFilters: false
16
21
  },
17
22
  /* Component Helper Functions */
18
23
  functions: {
package/dist/generators/styles.js CHANGED
@@ -109,6 +109,16 @@ var _default = () => ({
109
109
  },
110
110
  facetSectionSamplesBackground: {
111
111
  backgroundColor: '#C3EAF5'
112
+ },
113
+ expandBtn: {
114
+ '&:hover': {
115
+ cursor: 'pointer'
116
+ }
117
+ },
118
+ collapseBtn: {
119
+ '&:hover': {
120
+ cursor: 'pointer'
121
+ }
112
122
  }
113
123
  });
114
124
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.0",
3
+ "version": "1.0.1-icdc.1",
4
4
  "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -1,11 +1,22 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState } from 'react';
2
2
  import clsx from 'clsx';
3
3
 
4
4
  export default ({
5
5
  index, data, classes, maxItems,
6
6
  onSectionClick, onItemClick,
7
+ displayAllActiveFilters,
7
8
  }) => {
8
9
  const { items, section } = data;
10
+ const [expand, setExpand] = useState(false);
11
+ const noOfItems = expand ? items.length : maxItems;
12
+
13
+ useEffect(() => {
14
+ if (items.length <= maxItems && expand) {
15
+ setExpand(!expand);
16
+ }
17
+ }, [items]);
18
+
19
+ const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
9
20
 
10
21
  return (
11
22
  <span>
@@ -13,7 +24,7 @@ export default ({
13
24
  {' '}
14
25
  {index !== 0 ? <span className={classes.operators}> AND </span> : ''}
15
26
  <span
16
- className={clsx(classes.filterName, classes[`facetSection${section}Background`])}
27
+ className={clsx(classes.filterName, classes[`${clsName(section, 'Background')}`])}
17
28
  onClick={() => onSectionClick(data)}
18
29
  >
19
30
  {data.label}
@@ -26,10 +37,10 @@ export default ({
26
37
  {items.length === 1 ? 'IS ' : 'IN '}
27
38
  </span>
28
39
  {items.length > 1 && <span className={classes.bracketsOpen}>(</span>}
29
- {items.slice(0, maxItems).map((d, idx) => (
40
+ {items.slice(0, noOfItems).map((d, idx) => (
30
41
  <>
31
42
  <span
32
- className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
43
+ className={clsx(classes.filterCheckboxes, classes[clsName(section)])}
33
44
  key={idx}
34
45
  onClick={() => onItemClick(data, d)}
35
46
  >
@@ -38,7 +49,30 @@ export default ({
38
49
  {idx === (maxItems - 1) ? null : ' '}
39
50
  </>
40
51
  ))}
41
- {items.length > maxItems && '...'}
52
+ {items.length > maxItems && (
53
+ <>
54
+ {
55
+ displayAllActiveFilters
56
+ ? (
57
+ <span
58
+ className={classes.expandBtn}
59
+ onClick={() => setExpand(!expand)}
60
+ >
61
+ ...
62
+ </span>
63
+ )
64
+ : '...'
65
+ }
66
+ </>
67
+ )}
68
+ {(expand && items.length > maxItems) && (
69
+ <span
70
+ className={classes.collapseBtn}
71
+ onClick={() => setExpand(!expand)}
72
+ >
73
+ {' LESS'}
74
+ </span>
75
+ )}
42
76
  {items.length > 1 && <span className={classes.bracketsClose}>)</span>}
43
77
  </span>
44
78
  </span>
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState, useEffect } from 'react';
2
2
  import { withStyles, Button } from '@material-ui/core';
3
3
  import { InputTypes } from '@bento-core/facet-filter';
4
4
  import clsx from 'clsx';
@@ -13,13 +13,20 @@ import DEFAULT_CONFIG from './config';
13
13
  * @returns {object} { QueryBar }
14
14
  */
15
15
  export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
16
- const { config, functions } = uiConfig;
16
+ const { config, functions, customStyles = {} } = uiConfig;
17
17
  const { CHECKBOX } = InputTypes;
18
+ const styles = () => (
19
+ { ...DEFAULT_STYLES(), ...customStyles }
20
+ );
18
21
 
19
22
  const maxItems = config && typeof config.maxItems === 'number'
20
23
  ? config.maxItems
21
24
  : DEFAULT_CONFIG.config.maxItems;
22
25
 
26
+ const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
27
+ ? config.displayAllActiveFilters
28
+ : DEFAULT_CONFIG.config.displayAllActiveFilters;
29
+
23
30
  const clearAll = functions && typeof functions.clearAll === 'function'
24
31
  ? functions.clearAll
25
32
  : DEFAULT_CONFIG.functions.clearAll;
@@ -51,11 +58,20 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
51
58
  const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
52
59
 
53
60
  return {
54
- QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
61
+ QueryBar: withStyles(styles, { withTheme: true })((props) => {
55
62
  const { statusReducer, localFind, classes } = props;
56
63
 
57
64
  const { autocomplete, upload } = localFind;
58
65
 
66
+ const [expand, setExpand] = useState(false);
67
+ const noOfItems = expand ? autocomplete.length : maxItems;
68
+
69
+ useEffect(() => {
70
+ if (autocomplete.length <= maxItems && expand) {
71
+ setExpand(!expand);
72
+ }
73
+ }, [autocomplete]);
74
+
59
75
  // Remove any sections without checkboxes selected
60
76
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
61
77
  .map((facet) => {
@@ -72,8 +88,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
72
88
  itemKeys.splice(itemKeys.indexOf(item), 1);
73
89
  }
74
90
  });
91
+ // return { ...facet, items: itemKeys };
92
+ /**
93
+ * Maintain consistant behavior with facet filter component
94
+ * Display the active filter items based on the count value
95
+ * Display active filter items in query bar only if count is greater than 0
96
+ * behavior similar to filter component
97
+ */
98
+ const displayItems = itemKeys.reduce((accumulator, item) => {
99
+ const itemList = data.filter((d) => (d.group === item && d.count > 0)) || [];
100
+ if (itemList.length > 0) {
101
+ const labels = itemList.map((filter) => filter.group);
102
+ accumulator.push(labels);
103
+ }
104
+ return accumulator;
105
+ }, []);
75
106
 
76
- return { ...facet, items: itemKeys };
107
+ return { ...facet, items: displayItems };
77
108
  })
78
109
  .filter((facet) => facet.items.length > 0);
79
110
 
@@ -140,7 +171,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
140
171
  {' '}
141
172
  </>
142
173
  ) : null}
143
- {autocomplete.slice(0, maxItems).map((d, idx) => (
174
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
144
175
  <>
145
176
  <span
146
177
  className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
@@ -149,10 +180,33 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
149
180
  >
150
181
  {d.title}
151
182
  </span>
152
- {idx === (maxItems - 1) ? null : ' '}
183
+ {idx === (noOfItems - 1) ? null : ' '}
153
184
  </>
154
185
  ))}
155
- {autocomplete.length > maxItems && '...'}
186
+ {autocomplete.length > maxItems && (
187
+ <>
188
+ {
189
+ displayAllActiveFilters
190
+ ? (
191
+ <span
192
+ className={classes.expandBtn}
193
+ onClick={() => setExpand(!expand)}
194
+ >
195
+ ...
196
+ </span>
197
+ )
198
+ : '...'
199
+ }
200
+ </>
201
+ )}
202
+ {(expand && autocomplete.length > maxItems) && (
203
+ <span
204
+ className={classes.collapseBtn}
205
+ onClick={() => setExpand(!expand)}
206
+ >
207
+ {' LESS'}
208
+ </span>
209
+ )}
156
210
  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
157
211
  ? <span className={classes.bracketsClose}>)</span>
158
212
  : null}
@@ -171,6 +225,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
171
225
  type={filter.type}
172
226
  data={filter}
173
227
  maxItems={maxItems}
228
+ displayAllActiveFilters={displayAllActiveFilters}
174
229
  classes={classes}
175
230
  onSectionClick={filter.type === CHECKBOX
176
231
  ? resetFacetSection
package/src/generators/config.js CHANGED
@@ -7,6 +7,11 @@ export default {
7
7
  * @var {number}
8
8
  */
9
9
  maxItems: 2,
10
+ /**
11
+ * overirdes maxItems to display all the active filter items
12
+ * @var {boolean}
13
+ */
14
+ displayAllActiveFilters: false,
10
15
  },
11
16
 
12
17
  /* Component Helper Functions */
package/src/generators/styles.js CHANGED
@@ -104,4 +104,14 @@ export default () => ({
104
104
  facetSectionSamplesBackground: {
105
105
  backgroundColor: '#C3EAF5',
106
106
  },
107
+ expandBtn: {
108
+ '&:hover': {
109
+ cursor: 'pointer',
110
+ },
111
+ },
112
+ collapseBtn: {
113
+ '&:hover': {
114
+ cursor: 'pointer',
115
+ },
116
+ },
107
117
  });