@bento-core/query-bar 1.0.0-alpha.0 → 1.0.1-CDS.0
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/README.md +10 -0
- package/dist/components/CheckboxFilter.js +27 -6
- package/dist/generators/QueryBarGenerator.js +49 -14
- package/dist/generators/config.js +16 -1
- package/dist/generators/styles.js +10 -0
- package/package.json +3 -3
- package/src/components/CheckboxFilter.js +39 -5
- package/src/generators/QueryBarGenerator.js +82 -27
- package/src/generators/config.js +15 -0
- package/src/generators/styles.js +10 -0
package/README.md
CHANGED
|
@@ -58,6 +58,16 @@ const CONFIG = {
|
|
|
58
58
|
* @var {number}
|
|
59
59
|
*/
|
|
60
60
|
maxItems: 2,
|
|
61
|
+
/**
|
|
62
|
+
* overirdes maxItems to display all the active filter items
|
|
63
|
+
* @var {boolean}
|
|
64
|
+
*/
|
|
65
|
+
displayAllActiveFilters: false,
|
|
66
|
+
/**
|
|
67
|
+
* key to access label text
|
|
68
|
+
* @var {boolean}
|
|
69
|
+
*/
|
|
70
|
+
group: 'group',
|
|
61
71
|
},
|
|
62
72
|
|
|
63
73
|
/* Component Helper Functions */
|
|
@@ -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,20 @@ 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 caseIDLabel = config && typeof config.caseIDLabel === 'string' ? config.caseIDLabel : _config.default.config.caseIDLabel;
|
|
42
|
+
|
|
43
|
+
// const group = config && typeof config.group === 'string'
|
|
44
|
+
// ? config.group : DEFAULT_CONFIG.config.group;
|
|
45
|
+
|
|
36
46
|
const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
|
|
37
47
|
const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
|
|
38
48
|
const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
|
|
@@ -40,8 +50,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
40
50
|
const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
|
|
41
51
|
const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
|
|
42
52
|
const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
|
|
53
|
+
const clsName = function clsName() {
|
|
54
|
+
let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'filter-section';
|
|
55
|
+
return text.replace(/\s+/g, '-').toLowerCase();
|
|
56
|
+
};
|
|
43
57
|
return {
|
|
44
|
-
QueryBar: (0, _core.withStyles)(
|
|
58
|
+
QueryBar: (0, _core.withStyles)(styles, {
|
|
45
59
|
withTheme: true
|
|
46
60
|
})(props => {
|
|
47
61
|
const {
|
|
@@ -53,6 +67,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
53
67
|
autocomplete,
|
|
54
68
|
upload
|
|
55
69
|
} = localFind;
|
|
70
|
+
const [expand, setExpand] = (0, _react.useState)(false);
|
|
71
|
+
const noOfItems = expand ? autocomplete.length : maxItems;
|
|
72
|
+
(0, _react.useEffect)(() => {
|
|
73
|
+
if (autocomplete.length <= maxItems && expand) {
|
|
74
|
+
setExpand(!expand);
|
|
75
|
+
}
|
|
76
|
+
}, [autocomplete]);
|
|
56
77
|
|
|
57
78
|
// Remove any sections without checkboxes selected
|
|
58
79
|
const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
|
|
@@ -60,7 +81,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
60
81
|
return facet;
|
|
61
82
|
}
|
|
62
83
|
const {
|
|
63
|
-
data,
|
|
64
84
|
items
|
|
65
85
|
} = facet;
|
|
66
86
|
const itemKeys = Object.keys(items);
|
|
@@ -68,11 +88,17 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
68
88
|
|
|
69
89
|
/* Find any SELECTED CHECKBOXES that do NOT have any data
|
|
70
90
|
* and remove them from the list of selected checkboxes artificially */
|
|
71
|
-
itemKeys.forEach(item => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
});
|
|
91
|
+
// itemKeys.forEach((item) => {
|
|
92
|
+
// if (data.findIndex((d) => d.group === item) < 0) {
|
|
93
|
+
// itemKeys.splice(itemKeys.indexOf(item), 1);
|
|
94
|
+
// }
|
|
95
|
+
// });
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* commenting out line 89-93
|
|
99
|
+
* to display all the active filters in the query bar
|
|
100
|
+
* ICDC-3287
|
|
101
|
+
*/
|
|
76
102
|
return _objectSpread(_objectSpread({}, facet), {}, {
|
|
77
103
|
items: itemKeys
|
|
78
104
|
});
|
|
@@ -97,30 +123,39 @@ const QueryBarGenerator = function QueryBarGenerator() {
|
|
|
97
123
|
}, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
|
|
98
124
|
className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
|
|
99
125
|
onClick: clearAutocomplete
|
|
100
|
-
},
|
|
126
|
+
}, caseIDLabel), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
|
|
101
127
|
className: classes.operators
|
|
102
128
|
}, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
|
|
103
129
|
className: classes.bracketsOpen
|
|
104
130
|
}, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
|
|
105
131
|
className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
|
|
106
132
|
onClick: clearUpload
|
|
107
|
-
}, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0,
|
|
133
|
+
}, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
108
134
|
className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
|
|
109
135
|
key: idx,
|
|
110
136
|
onClick: () => deleteAutocompleteItem(d.title)
|
|
111
|
-
}, d.title), idx ===
|
|
137
|
+
}, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
|
|
138
|
+
className: classes.expandBtn,
|
|
139
|
+
onClick: () => setExpand(!expand)
|
|
140
|
+
}, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
|
|
141
|
+
className: classes.collapseBtn,
|
|
142
|
+
onClick: () => setExpand(!expand)
|
|
143
|
+
}, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
|
|
112
144
|
className: classes.bracketsClose
|
|
113
145
|
}, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
|
|
114
146
|
className: classes.operators
|
|
115
|
-
}, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(
|
|
147
|
+
}, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement("span", {
|
|
148
|
+
className: clsName(filter.section)
|
|
149
|
+
}, /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
|
|
116
150
|
index: index,
|
|
117
151
|
type: filter.type,
|
|
118
152
|
data: filter,
|
|
119
153
|
maxItems: maxItems,
|
|
154
|
+
displayAllActiveFilters: displayAllActiveFilters,
|
|
120
155
|
classes: classes,
|
|
121
156
|
onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
|
|
122
157
|
onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
|
|
123
|
-
}))));
|
|
158
|
+
})))));
|
|
124
159
|
})
|
|
125
160
|
};
|
|
126
161
|
};
|
|
@@ -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
|
+
* overides maxItems to display all the active filter items
|
|
18
|
+
* @var {boolean}
|
|
19
|
+
*/
|
|
20
|
+
displayAllActiveFilters: false,
|
|
21
|
+
/**
|
|
22
|
+
* key to access label text
|
|
23
|
+
* @var {string}
|
|
24
|
+
*/
|
|
25
|
+
group: 'group',
|
|
26
|
+
/**
|
|
27
|
+
* For the local find ID label case selection
|
|
28
|
+
* @var {string}
|
|
29
|
+
*/
|
|
30
|
+
caseIDLabel: 'Case IDs'
|
|
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.
|
|
3
|
+
"version": "1.0.1-CDS.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"react-redux": "^7.2.1"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@bento-core/facet-filter": "^1.0.
|
|
23
|
+
"@bento-core/facet-filter": "^1.0.1-CDS.0",
|
|
24
24
|
"lodash": "^4.17.20"
|
|
25
25
|
},
|
|
26
26
|
"author": "CTOS Bento Team",
|
|
27
27
|
"license": "ISC",
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "4a7e8f3a0eaf09a10dbb1a0ef54218cd84a377f1"
|
|
29
29
|
}
|
|
@@ -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 caseIDLabel = config && typeof config.caseIDLabel === 'string'
|
|
31
|
+
? config.caseIDLabel : DEFAULT_CONFIG.config.caseIDLabel;
|
|
32
|
+
|
|
33
|
+
// const group = config && typeof config.group === 'string'
|
|
34
|
+
// ? config.group : DEFAULT_CONFIG.config.group;
|
|
35
|
+
|
|
23
36
|
const clearAll = functions && typeof functions.clearAll === 'function'
|
|
24
37
|
? functions.clearAll
|
|
25
38
|
: DEFAULT_CONFIG.functions.clearAll;
|
|
@@ -48,29 +61,45 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
48
61
|
? functions.resetFacetSlider
|
|
49
62
|
: DEFAULT_CONFIG.functions.resetFacetSlider;
|
|
50
63
|
|
|
64
|
+
const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
|
|
65
|
+
|
|
51
66
|
return {
|
|
52
|
-
QueryBar: withStyles(
|
|
67
|
+
QueryBar: withStyles(styles, { withTheme: true })((props) => {
|
|
53
68
|
const { statusReducer, localFind, classes } = props;
|
|
54
69
|
|
|
55
70
|
const { autocomplete, upload } = localFind;
|
|
56
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
|
+
|
|
57
81
|
// Remove any sections without checkboxes selected
|
|
58
82
|
const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
|
|
59
83
|
.map((facet) => {
|
|
60
84
|
if (facet.type !== CHECKBOX) { return facet; }
|
|
61
85
|
|
|
62
|
-
const {
|
|
86
|
+
const { items } = facet;
|
|
63
87
|
const itemKeys = Object.keys(items);
|
|
64
88
|
itemKeys.sort((a, b) => a.localeCompare(b));
|
|
65
89
|
|
|
66
90
|
/* Find any SELECTED CHECKBOXES that do NOT have any data
|
|
67
91
|
* and remove them from the list of selected checkboxes artificially */
|
|
68
|
-
itemKeys.forEach((item) => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
});
|
|
73
|
-
|
|
92
|
+
// itemKeys.forEach((item) => {
|
|
93
|
+
// if (data.findIndex((d) => d.group === item) < 0) {
|
|
94
|
+
// itemKeys.splice(itemKeys.indexOf(item), 1);
|
|
95
|
+
// }
|
|
96
|
+
// });
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* commenting out line 89-93
|
|
100
|
+
* to display all the active filters in the query bar
|
|
101
|
+
* ICDC-3287
|
|
102
|
+
*/
|
|
74
103
|
return { ...facet, items: itemKeys };
|
|
75
104
|
})
|
|
76
105
|
.filter((facet) => facet.items.length > 0);
|
|
@@ -113,7 +142,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
113
142
|
className={clsx(classes.filterName, classes.localFindBackground)}
|
|
114
143
|
onClick={clearAutocomplete}
|
|
115
144
|
>
|
|
116
|
-
|
|
145
|
+
{caseIDLabel}
|
|
117
146
|
</span>
|
|
118
147
|
{' '}
|
|
119
148
|
{' '}
|
|
@@ -138,7 +167,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
138
167
|
{' '}
|
|
139
168
|
</>
|
|
140
169
|
) : null}
|
|
141
|
-
{autocomplete.slice(0,
|
|
170
|
+
{autocomplete.slice(0, noOfItems).map((d, idx) => (
|
|
142
171
|
<>
|
|
143
172
|
<span
|
|
144
173
|
className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
|
|
@@ -147,10 +176,33 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
147
176
|
>
|
|
148
177
|
{d.title}
|
|
149
178
|
</span>
|
|
150
|
-
{idx === (
|
|
179
|
+
{idx === (noOfItems - 1) ? null : ' '}
|
|
151
180
|
</>
|
|
152
181
|
))}
|
|
153
|
-
{autocomplete.length > maxItems &&
|
|
182
|
+
{autocomplete.length > maxItems && (
|
|
183
|
+
<>
|
|
184
|
+
{
|
|
185
|
+
displayAllActiveFilters
|
|
186
|
+
? (
|
|
187
|
+
<span
|
|
188
|
+
className={classes.expandBtn}
|
|
189
|
+
onClick={() => setExpand(!expand)}
|
|
190
|
+
>
|
|
191
|
+
...
|
|
192
|
+
</span>
|
|
193
|
+
)
|
|
194
|
+
: '...'
|
|
195
|
+
}
|
|
196
|
+
</>
|
|
197
|
+
)}
|
|
198
|
+
{(expand && autocomplete.length > maxItems) && (
|
|
199
|
+
<span
|
|
200
|
+
className={classes.collapseBtn}
|
|
201
|
+
onClick={() => setExpand(!expand)}
|
|
202
|
+
>
|
|
203
|
+
{' LESS'}
|
|
204
|
+
</span>
|
|
205
|
+
)}
|
|
154
206
|
{(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
|
|
155
207
|
? <span className={classes.bracketsClose}>)</span>
|
|
156
208
|
: null}
|
|
@@ -163,19 +215,22 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
|
|
|
163
215
|
? <span className={classes.operators}> AND </span>
|
|
164
216
|
: null}
|
|
165
217
|
{mappedInputs.map((filter, index) => (
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
218
|
+
<span className={clsName(filter.section)}>
|
|
219
|
+
<Filter
|
|
220
|
+
index={index}
|
|
221
|
+
type={filter.type}
|
|
222
|
+
data={filter}
|
|
223
|
+
maxItems={maxItems}
|
|
224
|
+
displayAllActiveFilters={displayAllActiveFilters}
|
|
225
|
+
classes={classes}
|
|
226
|
+
onSectionClick={filter.type === CHECKBOX
|
|
227
|
+
? resetFacetSection
|
|
228
|
+
: resetFacetSlider}
|
|
229
|
+
onItemClick={filter.type === CHECKBOX
|
|
230
|
+
? resetFacetCheckbox
|
|
231
|
+
: resetFacetSlider}
|
|
232
|
+
/>
|
|
233
|
+
</span>
|
|
179
234
|
))}
|
|
180
235
|
</span>
|
|
181
236
|
</div>
|
package/src/generators/config.js
CHANGED
|
@@ -7,6 +7,21 @@ export default {
|
|
|
7
7
|
* @var {number}
|
|
8
8
|
*/
|
|
9
9
|
maxItems: 2,
|
|
10
|
+
/**
|
|
11
|
+
* overides maxItems to display all the active filter items
|
|
12
|
+
* @var {boolean}
|
|
13
|
+
*/
|
|
14
|
+
displayAllActiveFilters: false,
|
|
15
|
+
/**
|
|
16
|
+
* key to access label text
|
|
17
|
+
* @var {string}
|
|
18
|
+
*/
|
|
19
|
+
group: 'group',
|
|
20
|
+
/**
|
|
21
|
+
* For the local find ID label case selection
|
|
22
|
+
* @var {string}
|
|
23
|
+
*/
|
|
24
|
+
caseIDLabel: 'Case IDs',
|
|
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
|
});
|