@bento-core/query-bar 1.0.1-icdc.0 → 1.0.1-icdc.2
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.
- package/dist/components/CheckboxFilter.js +27 -6
- package/dist/generators/QueryBarGenerator.js +43 -6
- package/dist/generators/config.js +16 -1
- package/dist/generators/styles.js +10 -0
- package/package.json +1 -1
- package/src/components/CheckboxFilter.js +39 -5
- package/src/generators/QueryBarGenerator.js +69 -7
- package/src/generators/config.js +15 -0
- package/src/generators/styles.js +10 -0
|
@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _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["
|
|
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,
|
|
33
|
-
className: (0, _clsx.default)(classes.filterCheckboxes, classes[
|
|
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 &&
|
|
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
|
};
|
|
@@ -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 =
|
|
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,17 @@ 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;
|
|
41
|
+
const group = config && typeof config.group === 'string' ? config.group : _config.default.config.group;
|
|
42
|
+
const count = config && typeof config.count === 'string' ? config.count : _config.default.config.count;
|
|
36
43
|
const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
|
|
37
44
|
const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
|
|
38
45
|
const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
|
|
@@ -45,7 +52,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
45
52
|
return text.replace(/\s+/g, '-').toLowerCase();
|
|
46
53
|
};
|
|
47
54
|
return {
|
|
48
|
-
QueryBar: (0, _core.withStyles)(
|
|
55
|
+
QueryBar: (0, _core.withStyles)(styles, {
|
|
49
56
|
withTheme: true
|
|
50
57
|
})(props => {
|
|
51
58
|
const {
|
|
@@ -57,6 +64,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
57
64
|
autocomplete,
|
|
58
65
|
upload
|
|
59
66
|
} = localFind;
|
|
67
|
+
const [expand, setExpand] = (0, _react.useState)(false);
|
|
68
|
+
const noOfItems = expand ? autocomplete.length : maxItems;
|
|
69
|
+
(0, _react.useEffect)(() => {
|
|
70
|
+
if (autocomplete.length <= maxItems && expand) {
|
|
71
|
+
setExpand(!expand);
|
|
72
|
+
}
|
|
73
|
+
}, [autocomplete]);
|
|
60
74
|
|
|
61
75
|
// Remove any sections without checkboxes selected
|
|
62
76
|
const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
|
|
@@ -77,8 +91,24 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
77
91
|
itemKeys.splice(itemKeys.indexOf(item), 1);
|
|
78
92
|
}
|
|
79
93
|
});
|
|
94
|
+
// return { ...facet, items: itemKeys };
|
|
95
|
+
/**
|
|
96
|
+
* Maintain consistant behavior with facet filter component
|
|
97
|
+
* Display the active filter items based on the count value
|
|
98
|
+
* Display active filter items in query bar only if count is greater than 0
|
|
99
|
+
* behavior similar to filter component
|
|
100
|
+
*/
|
|
101
|
+
// const { group, count } = config;
|
|
102
|
+
const displayItems = itemKeys.reduce((accumulator, item) => {
|
|
103
|
+
const itemList = data.filter(d => d[group] === item && d[count] > 0) || [];
|
|
104
|
+
if (itemList.length > 0) {
|
|
105
|
+
const labels = itemList.map(filter => filter[group]);
|
|
106
|
+
accumulator.push(labels);
|
|
107
|
+
}
|
|
108
|
+
return accumulator;
|
|
109
|
+
}, []);
|
|
80
110
|
return _objectSpread(_objectSpread({}, facet), {}, {
|
|
81
|
-
items:
|
|
111
|
+
items: displayItems
|
|
82
112
|
});
|
|
83
113
|
}).filter(facet => facet.items.length > 0);
|
|
84
114
|
if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
|
|
@@ -108,11 +138,17 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
108
138
|
}, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
|
|
109
139
|
className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
|
|
110
140
|
onClick: clearUpload
|
|
111
|
-
}, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0,
|
|
141
|
+
}, "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
142
|
className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
|
|
113
143
|
key: idx,
|
|
114
144
|
onClick: () => deleteAutocompleteItem(d.title)
|
|
115
|
-
}, d.title), idx ===
|
|
145
|
+
}, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
|
|
146
|
+
className: classes.expandBtn,
|
|
147
|
+
onClick: () => setExpand(!expand)
|
|
148
|
+
}, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
|
|
149
|
+
className: classes.collapseBtn,
|
|
150
|
+
onClick: () => setExpand(!expand)
|
|
151
|
+
}, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
|
|
116
152
|
className: classes.bracketsClose
|
|
117
153
|
}, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
|
|
118
154
|
className: classes.operators
|
|
@@ -123,6 +159,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
123
159
|
type: filter.type,
|
|
124
160
|
data: filter,
|
|
125
161
|
maxItems: maxItems,
|
|
162
|
+
displayAllActiveFilters: displayAllActiveFilters,
|
|
126
163
|
classes: classes,
|
|
127
164
|
onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
|
|
128
165
|
onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
|
|
@@ -12,7 +12,22 @@ 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,
|
|
21
|
+
/**
|
|
22
|
+
* key to access label text
|
|
23
|
+
* @var {boolean}
|
|
24
|
+
*/
|
|
25
|
+
group: 'group',
|
|
26
|
+
/**
|
|
27
|
+
* key to access count value
|
|
28
|
+
* @var {boolean}
|
|
29
|
+
*/
|
|
30
|
+
count: 'subjects'
|
|
16
31
|
},
|
|
17
32
|
/* Component Helper Functions */
|
|
18
33
|
functions: {
|
|
@@ -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.
|
|
3
|
+
"version": "1.0.1-icdc.2",
|
|
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": {
|
|
@@ -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[
|
|
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,
|
|
40
|
+
{items.slice(0, noOfItems).map((d, idx) => (
|
|
30
41
|
<>
|
|
31
42
|
<span
|
|
32
|
-
className={clsx(classes.filterCheckboxes, classes[
|
|
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>
|
|
@@ -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,26 @@ 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
|
+
|
|
30
|
+
const group = config && typeof config.group === 'string'
|
|
31
|
+
? config.group : DEFAULT_CONFIG.config.group;
|
|
32
|
+
|
|
33
|
+
const count = config && typeof config.count === 'string'
|
|
34
|
+
? config.count : DEFAULT_CONFIG.config.count;
|
|
35
|
+
|
|
23
36
|
const clearAll = functions && typeof functions.clearAll === 'function'
|
|
24
37
|
? functions.clearAll
|
|
25
38
|
: DEFAULT_CONFIG.functions.clearAll;
|
|
@@ -51,11 +64,20 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
51
64
|
const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
|
|
52
65
|
|
|
53
66
|
return {
|
|
54
|
-
QueryBar: withStyles(
|
|
67
|
+
QueryBar: withStyles(styles, { withTheme: true })((props) => {
|
|
55
68
|
const { statusReducer, localFind, classes } = props;
|
|
56
69
|
|
|
57
70
|
const { autocomplete, upload } = localFind;
|
|
58
71
|
|
|
72
|
+
const [expand, setExpand] = useState(false);
|
|
73
|
+
const noOfItems = expand ? autocomplete.length : maxItems;
|
|
74
|
+
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
if (autocomplete.length <= maxItems && expand) {
|
|
77
|
+
setExpand(!expand);
|
|
78
|
+
}
|
|
79
|
+
}, [autocomplete]);
|
|
80
|
+
|
|
59
81
|
// Remove any sections without checkboxes selected
|
|
60
82
|
const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
|
|
61
83
|
.map((facet) => {
|
|
@@ -72,8 +94,24 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
72
94
|
itemKeys.splice(itemKeys.indexOf(item), 1);
|
|
73
95
|
}
|
|
74
96
|
});
|
|
97
|
+
// return { ...facet, items: itemKeys };
|
|
98
|
+
/**
|
|
99
|
+
* Maintain consistant behavior with facet filter component
|
|
100
|
+
* Display the active filter items based on the count value
|
|
101
|
+
* Display active filter items in query bar only if count is greater than 0
|
|
102
|
+
* behavior similar to filter component
|
|
103
|
+
*/
|
|
104
|
+
// const { group, count } = config;
|
|
105
|
+
const displayItems = itemKeys.reduce((accumulator, item) => {
|
|
106
|
+
const itemList = data.filter((d) => (d[group] === item && d[count] > 0)) || [];
|
|
107
|
+
if (itemList.length > 0) {
|
|
108
|
+
const labels = itemList.map((filter) => filter[group]);
|
|
109
|
+
accumulator.push(labels);
|
|
110
|
+
}
|
|
111
|
+
return accumulator;
|
|
112
|
+
}, []);
|
|
75
113
|
|
|
76
|
-
return { ...facet, items:
|
|
114
|
+
return { ...facet, items: displayItems };
|
|
77
115
|
})
|
|
78
116
|
.filter((facet) => facet.items.length > 0);
|
|
79
117
|
|
|
@@ -140,7 +178,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
140
178
|
{' '}
|
|
141
179
|
</>
|
|
142
180
|
) : null}
|
|
143
|
-
{autocomplete.slice(0,
|
|
181
|
+
{autocomplete.slice(0, noOfItems).map((d, idx) => (
|
|
144
182
|
<>
|
|
145
183
|
<span
|
|
146
184
|
className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
|
|
@@ -149,10 +187,33 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
149
187
|
>
|
|
150
188
|
{d.title}
|
|
151
189
|
</span>
|
|
152
|
-
{idx === (
|
|
190
|
+
{idx === (noOfItems - 1) ? null : ' '}
|
|
153
191
|
</>
|
|
154
192
|
))}
|
|
155
|
-
{autocomplete.length > maxItems &&
|
|
193
|
+
{autocomplete.length > maxItems && (
|
|
194
|
+
<>
|
|
195
|
+
{
|
|
196
|
+
displayAllActiveFilters
|
|
197
|
+
? (
|
|
198
|
+
<span
|
|
199
|
+
className={classes.expandBtn}
|
|
200
|
+
onClick={() => setExpand(!expand)}
|
|
201
|
+
>
|
|
202
|
+
...
|
|
203
|
+
</span>
|
|
204
|
+
)
|
|
205
|
+
: '...'
|
|
206
|
+
}
|
|
207
|
+
</>
|
|
208
|
+
)}
|
|
209
|
+
{(expand && autocomplete.length > maxItems) && (
|
|
210
|
+
<span
|
|
211
|
+
className={classes.collapseBtn}
|
|
212
|
+
onClick={() => setExpand(!expand)}
|
|
213
|
+
>
|
|
214
|
+
{' LESS'}
|
|
215
|
+
</span>
|
|
216
|
+
)}
|
|
156
217
|
{(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
|
|
157
218
|
? <span className={classes.bracketsClose}>)</span>
|
|
158
219
|
: null}
|
|
@@ -171,6 +232,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
171
232
|
type={filter.type}
|
|
172
233
|
data={filter}
|
|
173
234
|
maxItems={maxItems}
|
|
235
|
+
displayAllActiveFilters={displayAllActiveFilters}
|
|
174
236
|
classes={classes}
|
|
175
237
|
onSectionClick={filter.type === CHECKBOX
|
|
176
238
|
? resetFacetSection
|
package/src/generators/config.js
CHANGED
|
@@ -7,6 +7,21 @@ 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,
|
|
15
|
+
/**
|
|
16
|
+
* key to access label text
|
|
17
|
+
* @var {boolean}
|
|
18
|
+
*/
|
|
19
|
+
group: 'group',
|
|
20
|
+
/**
|
|
21
|
+
* key to access count value
|
|
22
|
+
* @var {boolean}
|
|
23
|
+
*/
|
|
24
|
+
count: 'subjects',
|
|
10
25
|
},
|
|
11
26
|
|
|
12
27
|
/* 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
|
});
|