@bento-core/query-bar 1.0.1-icdc.17 → 1.0.1-icdc.19

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 (8) hide show
  1. package/README.md +1 -21
  2. package/dist/components/CheckboxFilter.js +4 -10
  3. package/dist/generators/QueryBarGenerator.js +5 -25
  4. package/dist/generators/config.js +0 -14
  5. package/package.json +1 -1
  6. package/src/components/CheckboxFilter.js +9 -22
  7. package/src/generators/QueryBarGenerator.js +115 -147
  8. package/src/generators/config.js +0 -14
package/README.md CHANGED
@@ -63,25 +63,6 @@ const CONFIG = {
63
63
  * @var {boolean}
64
64
  */
65
65
  displayAllActiveFilters: false,
66
- /**
67
- * key to access label text
68
- * @var {boolean}
69
- */
70
- group: 'group',
71
-
72
- /**
73
- * root path of bento app {window.location.href} or react PUBLIC_URL
74
- * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
75
- * @var {string}
76
- */
77
- rootPath: null,
78
- /**
79
- * display query URL
80
- * @var {boolean}
81
- * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
82
- */
83
- viewQueryURL: false,
84
-
85
66
  },
86
67
 
87
68
  /* Component Helper Functions */
@@ -139,7 +120,6 @@ const CONFIG = {
139
120
  * @returns {void}
140
121
  */
141
122
  resetFacetSlider: (section) => {},
142
-
143
123
  },
144
124
  };
145
125
  ```
@@ -164,4 +144,4 @@ This component, which is generated by the provided generator, accepts the follow
164
144
  />
165
145
  ```
166
146
 
167
- > **Warning**: The `statusReducer` prop requires the dashboard API data merged with the `facetsConfig` property. Please see the example in the demo implementation [here](https://github.com/CBIIT/bento-frontend/blob/7efd62cd3da0c29326e523055d30118244dc2f2f/packages/bento-frontend/src/pages/dashTemplate/filterQueryBar/QueryBarView.js#LL20C14-L20C14).
147
+ > **Warning**: The `statusReducer` prop requires the dashboard API data merged with the `facetsConfig` property. Please see the example in the demo implementation [here](https://github.com/CBIIT/bento-frontend/blob/7efd62cd3da0c29326e523055d30118244dc2f2f/packages/bento-frontend/src/pages/dashTemplate/filterQueryBar/QueryBarView.js#LL20C14-L20C14).
package/dist/components/CheckboxFilter.js CHANGED
@@ -16,20 +16,14 @@ var _default = _ref => {
16
16
  classes,
17
17
  maxItems,
18
18
  onSectionClick,
19
- onItemClick,
20
- displayAllActiveFilters
19
+ onItemClick
21
20
  } = _ref;
22
21
  const {
23
22
  items,
24
23
  section
25
24
  } = data;
26
- const [expand, setExpand] = (0, _react.useState)(false);
25
+ const [expand, setExpand] = (0, _react.useState)(true);
27
26
  const noOfItems = expand ? items.length : maxItems;
28
- (0, _react.useEffect)(() => {
29
- if (items.length <= maxItems && expand) {
30
- setExpand(!expand);
31
- }
32
- }, [items]);
33
27
  const clsName = function clsName() {
34
28
  let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
35
29
  let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -48,10 +42,10 @@ var _default = _ref => {
48
42
  className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
49
43
  key: idx,
50
44
  onClick: () => onItemClick(data, d)
51
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
45
+ }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
52
46
  className: classes.expandBtn,
53
47
  onClick: () => setExpand(!expand)
54
- }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
48
+ }, "...")), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
55
49
  className: classes.collapseBtn,
56
50
  onClick: () => setExpand(!expand)
57
51
  }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -40,11 +40,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
40
40
  const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
41
41
  const queryURLRootPath = config && typeof config.rootPath === 'string' ? config.rootPath : _config.default.config.rootPath;
42
42
  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean' ? config.viewQueryURL : _config.default.config.viewQueryURL;
43
- const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
44
-
45
- // const group = config && typeof config.group === 'string'
46
- // ? config.group : DEFAULT_CONFIG.config.group;
47
-
48
43
  const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
49
44
  const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
50
45
  const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -69,13 +64,8 @@ const QueryBarGenerator = function QueryBarGenerator() {
69
64
  autocomplete,
70
65
  upload
71
66
  } = localFind;
72
- const [expand, setExpand] = (0, _react.useState)(false);
67
+ const [expand, setExpand] = (0, _react.useState)(true);
73
68
  const noOfItems = expand ? autocomplete.length : maxItems;
74
- (0, _react.useEffect)(() => {
75
- if (autocomplete.length <= maxItems && expand) {
76
- setExpand(!expand);
77
- }
78
- }, [autocomplete]);
79
69
 
80
70
  // Remove any sections without checkboxes selected
81
71
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -88,16 +78,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
88
78
  const itemKeys = Object.keys(items);
89
79
  itemKeys.sort((a, b) => a.localeCompare(b));
90
80
 
91
- /* Find any SELECTED CHECKBOXES that do NOT have any data
92
- * and remove them from the list of selected checkboxes artificially */
93
- // itemKeys.forEach((item) => {
94
- // if (data.findIndex((d) => d.group === item) < 0) {
95
- // itemKeys.splice(itemKeys.indexOf(item), 1);
96
- // }
97
- // });
98
-
99
81
  /**
100
- * commenting out line 89-93
101
82
  * to display all the active filters in the query bar
102
83
  * ICDC-3287
103
84
  */
@@ -108,7 +89,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
108
89
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
109
90
  return null;
110
91
  }
111
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
92
+ return /*#__PURE__*/_react.default.createElement("div", {
112
93
  className: classes.queryWrapper
113
94
  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
114
95
  className: classes.clearQueryButton,
@@ -136,10 +117,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
136
117
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
137
118
  key: idx,
138
119
  onClick: () => deleteAutocompleteItem(d.title)
139
- }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
120
+ }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
140
121
  className: classes.expandBtn,
141
122
  onClick: () => setExpand(!expand)
142
- }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
123
+ }, "...")), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
143
124
  className: classes.collapseBtn,
144
125
  onClick: () => setExpand(!expand)
145
126
  }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
@@ -153,7 +134,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
153
134
  type: filter.type,
154
135
  data: filter,
155
136
  maxItems: maxItems,
156
- displayAllActiveFilters: displayAllActiveFilters,
157
137
  classes: classes,
158
138
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
159
139
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
@@ -162,7 +142,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
162
142
  localFind: localFind,
163
143
  filterItems: mappedInputs,
164
144
  rootPath: queryURLRootPath
165
- })));
145
+ }));
166
146
  })
167
147
  };
168
148
  };
package/dist/generators/config.js CHANGED
@@ -18,20 +18,6 @@ var _default = {
18
18
  * @var {boolean}
19
19
  */
20
20
  displayAllActiveFilters: false,
21
- /**
22
- * key to access label text
23
- * @var {boolean}
24
- */
25
- group: 'group',
26
- /**
27
- * root path of bento app
28
- * @var {boolean}
29
- */
30
- rootPath: null,
31
- /**
32
- * display query URL
33
- * @var {boolean}
34
- */
35
21
  viewQueryURL: false
36
22
  },
37
23
  /* Component Helper Functions */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.17",
3
+ "version": "1.0.1-icdc.19",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -1,21 +1,14 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { 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,
8
7
  }) => {
9
8
  const { items, section } = data;
10
- const [expand, setExpand] = useState(false);
9
+ const [expand, setExpand] = useState(true);
11
10
  const noOfItems = expand ? items.length : maxItems;
12
11
 
13
- useEffect(() => {
14
- if (items.length <= maxItems && expand) {
15
- setExpand(!expand);
16
- }
17
- }, [items]);
18
-
19
12
  const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
20
13
 
21
14
  return (
@@ -49,20 +42,14 @@ export default ({
49
42
  {idx === (maxItems - 1) ? null : ' '}
50
43
  </>
51
44
  ))}
52
- {items.length > maxItems && (
45
+ {(items.length > maxItems && !expand) && (
53
46
  <>
54
- {
55
- displayAllActiveFilters
56
- ? (
57
- <span
58
- className={classes.expandBtn}
59
- onClick={() => setExpand(!expand)}
60
- >
61
- ...
62
- </span>
63
- )
64
- : '...'
65
- }
47
+ <span
48
+ className={classes.expandBtn}
49
+ onClick={() => setExpand(!expand)}
50
+ >
51
+ ...
52
+ </span>
66
53
  </>
67
54
  )}
68
55
  {(expand && items.length > maxItems) && (
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState } 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';
@@ -32,13 +32,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
32
32
  ? config.viewQueryURL
33
33
  : DEFAULT_CONFIG.config.viewQueryURL;
34
34
 
35
- const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
36
- ? config.displayAllActiveFilters
37
- : DEFAULT_CONFIG.config.displayAllActiveFilters;
38
-
39
- // const group = config && typeof config.group === 'string'
40
- // ? config.group : DEFAULT_CONFIG.config.group;
41
-
42
35
  const clearAll = functions && typeof functions.clearAll === 'function'
43
36
  ? functions.clearAll
44
37
  : DEFAULT_CONFIG.functions.clearAll;
@@ -75,15 +68,9 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
75
68
 
76
69
  const { autocomplete, upload } = localFind;
77
70
 
78
- const [expand, setExpand] = useState(false);
71
+ const [expand, setExpand] = useState(true);
79
72
  const noOfItems = expand ? autocomplete.length : maxItems;
80
73
 
81
- useEffect(() => {
82
- if (autocomplete.length <= maxItems && expand) {
83
- setExpand(!expand);
84
- }
85
- }, [autocomplete]);
86
-
87
74
  // Remove any sections without checkboxes selected
88
75
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
89
76
  .map((facet) => {
@@ -93,16 +80,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
93
80
  const itemKeys = Object.keys(items);
94
81
  itemKeys.sort((a, b) => a.localeCompare(b));
95
82
 
96
- /* Find any SELECTED CHECKBOXES that do NOT have any data
97
- * and remove them from the list of selected checkboxes artificially */
98
- // itemKeys.forEach((item) => {
99
- // if (data.findIndex((d) => d.group === item) < 0) {
100
- // itemKeys.splice(itemKeys.indexOf(item), 1);
101
- // }
102
- // });
103
-
104
83
  /**
105
- * commenting out line 89-93
106
84
  * to display all the active filters in the query bar
107
85
  * ICDC-3287
108
86
  */
@@ -115,143 +93,133 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
115
93
  }
116
94
 
117
95
  return (
118
- <>
119
- <div className={classes.queryWrapper}>
120
- <Button
121
- className={classes.clearQueryButton}
122
- color="primary"
123
- variant="outlined"
124
- onClick={clearAll}
125
- >
126
- Clear Query
127
- </Button>
128
- <span className={classes.divider} />
129
- <span className={classes.queryContainer}>
130
- {/* Local Find Selections */}
131
- {/* TODO: Refactor this into a separate component */}
132
- {(autocomplete.length || upload.length) ? (
96
+ <div className={classes.queryWrapper}>
97
+ <Button
98
+ className={classes.clearQueryButton}
99
+ color="primary"
100
+ variant="outlined"
101
+ onClick={clearAll}
102
+ >
103
+ Clear Query
104
+ </Button>
105
+ <span className={classes.divider} />
106
+ <span className={classes.queryContainer}>
107
+ {/* Local Find Selections */}
108
+ {/* TODO: Refactor this into a separate component */}
109
+ {(autocomplete.length || upload.length) ? (
110
+ <span>
111
+ {/* Standalone case set button */}
112
+ {(upload.length && !autocomplete.length)
113
+ ? (
114
+ <span
115
+ className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
116
+ onClick={clearUpload}
117
+ >
118
+ INPUT CASE SET
119
+ </span>
120
+ ) : null}
121
+ {autocomplete.length
122
+ ? (
123
+ <span>
124
+ {' '}
125
+ <span
126
+ className={clsx(classes.filterName, classes.localFindBackground)}
127
+ onClick={clearAutocomplete}
128
+ >
129
+ Case ID
130
+ </span>
131
+ {' '}
132
+ {' '}
133
+ <span className={classes.operators}>
134
+ {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
135
+ </span>
136
+ </span>
137
+ ) : null}
133
138
  <span>
134
- {/* Standalone case set button */}
135
- {(upload.length && !autocomplete.length)
136
- ? (
139
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
140
+ ? <span className={classes.bracketsOpen}>(</span>
141
+ : null}
142
+ {upload.length && autocomplete.length ? (
143
+ <>
144
+ {' '}
137
145
  <span
138
- className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
146
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
139
147
  onClick={clearUpload}
140
148
  >
141
149
  INPUT CASE SET
142
150
  </span>
143
- ) : null}
144
- {autocomplete.length
145
- ? (
146
- <span>
147
- {' '}
148
- <span
149
- className={clsx(classes.filterName, classes.localFindBackground)}
150
- onClick={clearAutocomplete}
151
- >
152
- Case ID
153
- </span>
154
- {' '}
155
- {' '}
156
- <span className={classes.operators}>
157
- {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
158
- </span>
151
+ {' '}
152
+ </>
153
+ ) : null}
154
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
155
+ <>
156
+ <span
157
+ className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
158
+ key={idx}
159
+ onClick={() => deleteAutocompleteItem(d.title)}
160
+ >
161
+ {d.title}
159
162
  </span>
160
- ) : null}
161
- <span>
162
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
163
- ? <span className={classes.bracketsOpen}>(</span>
164
- : null}
165
- {upload.length && autocomplete.length ? (
166
- <>
167
- {' '}
168
- <span
169
- className={clsx(classes.filterCheckboxes, classes.localFind)}
170
- onClick={clearUpload}
171
- >
172
- INPUT CASE SET
173
- </span>
174
- {' '}
175
- </>
176
- ) : null}
177
- {autocomplete.slice(0, noOfItems).map((d, idx) => (
178
- <>
179
- <span
180
- className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
181
- key={idx}
182
- onClick={() => deleteAutocompleteItem(d.title)}
183
- >
184
- {d.title}
185
- </span>
186
- {idx === (noOfItems - 1) ? null : ' '}
187
- </>
188
- ))}
189
- {autocomplete.length > maxItems && (
190
- <>
191
- {
192
- displayAllActiveFilters
193
- ? (
194
- <span
195
- className={classes.expandBtn}
196
- onClick={() => setExpand(!expand)}
197
- >
198
- ...
199
- </span>
200
- )
201
- : '...'
202
- }
203
- </>
204
- )}
205
- {(expand && autocomplete.length > maxItems) && (
163
+ {idx === (noOfItems - 1) ? null : ' '}
164
+ </>
165
+ ))}
166
+ {(autocomplete.length > maxItems && !expand) && (
167
+ <>
206
168
  <span
207
- className={classes.collapseBtn}
169
+ className={classes.expandBtn}
208
170
  onClick={() => setExpand(!expand)}
209
171
  >
210
- {' LESS'}
172
+ ...
211
173
  </span>
212
- )}
213
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
214
- ? <span className={classes.bracketsClose}>)</span>
215
- : null}
216
- </span>
217
- </span>
218
- ) : null}
219
-
220
- {/* Facet Sidebar Selections */}
221
- {((autocomplete.length || upload.length) && mappedInputs.length)
222
- ? <span className={classes.operators}> AND </span>
223
- : null}
224
- {mappedInputs.map((filter, index) => (
225
- <span className={clsName(filter.section)}>
226
- <Filter
227
- index={index}
228
- type={filter.type}
229
- data={filter}
230
- maxItems={maxItems}
231
- displayAllActiveFilters={displayAllActiveFilters}
232
- classes={classes}
233
- onSectionClick={filter.type === CHECKBOX
234
- ? resetFacetSection
235
- : resetFacetSlider}
236
- onItemClick={filter.type === CHECKBOX
237
- ? resetFacetCheckbox
238
- : resetFacetSlider}
239
- />
174
+ </>
175
+ )}
176
+ {(expand && autocomplete.length > maxItems) && (
177
+ <span
178
+ className={classes.collapseBtn}
179
+ onClick={() => setExpand(!expand)}
180
+ >
181
+ {' LESS'}
182
+ </span>
183
+ )}
184
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
185
+ ? <span className={classes.bracketsClose}>)</span>
186
+ : null}
240
187
  </span>
241
- ))}
242
- </span>
243
- {
244
- (viewQueryURL && queryURLRootPath) && (
245
- <QueryUrl
188
+ </span>
189
+ ) : null}
190
+ {/* Facet Sidebar Selections */}
191
+ {((autocomplete.length || upload.length) && mappedInputs.length)
192
+ ? <span className={classes.operators}> AND </span>
193
+ : null}
194
+ {mappedInputs.map((filter, index) => (
195
+ <span className={clsName(filter.section)}>
196
+ <Filter
197
+ index={index}
198
+ type={filter.type}
199
+ data={filter}
200
+ maxItems={maxItems}
246
201
  classes={classes}
247
- localFind={localFind}
248
- filterItems={mappedInputs}
249
- rootPath={queryURLRootPath}
202
+ onSectionClick={filter.type === CHECKBOX
203
+ ? resetFacetSection
204
+ : resetFacetSlider}
205
+ onItemClick={filter.type === CHECKBOX
206
+ ? resetFacetCheckbox
207
+ : resetFacetSlider}
250
208
  />
251
- )
252
- }
253
- </div>
254
- </>
209
+ </span>
210
+ ))}
211
+ </span>
212
+ {
213
+ (viewQueryURL && queryURLRootPath) && (
214
+ <QueryUrl
215
+ classes={classes}
216
+ localFind={localFind}
217
+ filterItems={mappedInputs}
218
+ rootPath={queryURLRootPath}
219
+ />
220
+ )
221
+ }
222
+ </div>
255
223
  );
256
224
  }),
257
225
  };
package/src/generators/config.js CHANGED
@@ -12,20 +12,6 @@ export default {
12
12
  * @var {boolean}
13
13
  */
14
14
  displayAllActiveFilters: false,
15
- /**
16
- * key to access label text
17
- * @var {boolean}
18
- */
19
- group: 'group',
20
- /**
21
- * root path of bento app
22
- * @var {boolean}
23
- */
24
- rootPath: null,
25
- /**
26
- * display query URL
27
- * @var {boolean}
28
- */
29
15
  viewQueryURL: false,
30
16
  },
31
17