@bento-core/query-bar 1.0.1-icdc.18 → 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 (5) hide show
  1. package/dist/components/CheckboxFilter.js +1 -1
  2. package/dist/generators/QueryBarGenerator.js +3 -8
  3. package/package.json +1 -1
  4. package/src/components/CheckboxFilter.js +1 -1
  5. package/src/generators/QueryBarGenerator.js +114 -123
package/dist/components/CheckboxFilter.js CHANGED
@@ -42,7 +42,7 @@ var _default = _ref => {
42
42
  className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
43
43
  key: idx,
44
44
  onClick: () => onItemClick(data, d)
45
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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", {
46
46
  className: classes.expandBtn,
47
47
  onClick: () => setExpand(!expand)
48
48
  }, "...")), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -66,11 +66,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
66
66
  } = localFind;
67
67
  const [expand, setExpand] = (0, _react.useState)(true);
68
68
  const noOfItems = expand ? autocomplete.length : maxItems;
69
- (0, _react.useEffect)(() => {
70
- if (autocomplete.length <= maxItems && expand) {
71
- setExpand(!expand);
72
- }
73
- }, [autocomplete]);
74
69
 
75
70
  // Remove any sections without checkboxes selected
76
71
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -94,7 +89,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
94
89
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
95
90
  return null;
96
91
  }
97
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
92
+ return /*#__PURE__*/_react.default.createElement("div", {
98
93
  className: classes.queryWrapper
99
94
  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
100
95
  className: classes.clearQueryButton,
@@ -122,7 +117,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
122
117
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
123
118
  key: idx,
124
119
  onClick: () => deleteAutocompleteItem(d.title)
125
- }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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", {
126
121
  className: classes.expandBtn,
127
122
  onClick: () => setExpand(!expand)
128
123
  }, "...")), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
@@ -147,7 +142,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
147
142
  localFind: localFind,
148
143
  filterItems: mappedInputs,
149
144
  rootPath: queryURLRootPath
150
- })));
145
+ }));
151
146
  })
152
147
  };
153
148
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.18",
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
@@ -42,7 +42,7 @@ export default ({
42
42
  {idx === (maxItems - 1) ? null : ' '}
43
43
  </>
44
44
  ))}
45
- {items.length > maxItems && (
45
+ {(items.length > maxItems && !expand) && (
46
46
  <>
47
47
  <span
48
48
  className={classes.expandBtn}
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';
@@ -71,12 +71,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
71
71
  const [expand, setExpand] = useState(true);
72
72
  const noOfItems = expand ? autocomplete.length : maxItems;
73
73
 
74
- useEffect(() => {
75
- if (autocomplete.length <= maxItems && expand) {
76
- setExpand(!expand);
77
- }
78
- }, [autocomplete]);
79
-
80
74
  // Remove any sections without checkboxes selected
81
75
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
82
76
  .map((facet) => {
@@ -99,136 +93,133 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
99
93
  }
100
94
 
101
95
  return (
102
- <>
103
- <div className={classes.queryWrapper}>
104
- <Button
105
- className={classes.clearQueryButton}
106
- color="primary"
107
- variant="outlined"
108
- onClick={clearAll}
109
- >
110
- Clear Query
111
- </Button>
112
- <span className={classes.divider} />
113
- <span className={classes.queryContainer}>
114
- {/* Local Find Selections */}
115
- {/* TODO: Refactor this into a separate component */}
116
- {(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}
117
138
  <span>
118
- {/* Standalone case set button */}
119
- {(upload.length && !autocomplete.length)
120
- ? (
139
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
140
+ ? <span className={classes.bracketsOpen}>(</span>
141
+ : null}
142
+ {upload.length && autocomplete.length ? (
143
+ <>
144
+ {' '}
121
145
  <span
122
- className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
146
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
123
147
  onClick={clearUpload}
124
148
  >
125
149
  INPUT CASE SET
126
150
  </span>
127
- ) : null}
128
- {autocomplete.length
129
- ? (
130
- <span>
131
- {' '}
132
- <span
133
- className={clsx(classes.filterName, classes.localFindBackground)}
134
- onClick={clearAutocomplete}
135
- >
136
- Case ID
137
- </span>
138
- {' '}
139
- {' '}
140
- <span className={classes.operators}>
141
- {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
142
- </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}
143
162
  </span>
144
- ) : null}
145
- <span>
146
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
147
- ? <span className={classes.bracketsOpen}>(</span>
148
- : null}
149
- {upload.length && autocomplete.length ? (
150
- <>
151
- {' '}
152
- <span
153
- className={clsx(classes.filterCheckboxes, classes.localFind)}
154
- onClick={clearUpload}
155
- >
156
- INPUT CASE SET
157
- </span>
158
- {' '}
159
- </>
160
- ) : null}
161
- {autocomplete.slice(0, noOfItems).map((d, idx) => (
162
- <>
163
- <span
164
- className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
165
- key={idx}
166
- onClick={() => deleteAutocompleteItem(d.title)}
167
- >
168
- {d.title}
169
- </span>
170
- {idx === (noOfItems - 1) ? null : ' '}
171
- </>
172
- ))}
173
- {autocomplete.length > maxItems && (
174
- <>
175
- <span
176
- className={classes.expandBtn}
177
- onClick={() => setExpand(!expand)}
178
- >
179
- ...
180
- </span>
181
- </>
182
- )}
183
- {(expand && autocomplete.length > maxItems) && (
163
+ {idx === (noOfItems - 1) ? null : ' '}
164
+ </>
165
+ ))}
166
+ {(autocomplete.length > maxItems && !expand) && (
167
+ <>
184
168
  <span
185
- className={classes.collapseBtn}
169
+ className={classes.expandBtn}
186
170
  onClick={() => setExpand(!expand)}
187
171
  >
188
- {' LESS'}
172
+ ...
189
173
  </span>
190
- )}
191
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
192
- ? <span className={classes.bracketsClose}>)</span>
193
- : null}
194
- </span>
195
- </span>
196
- ) : null}
197
-
198
- {/* Facet Sidebar Selections */}
199
- {((autocomplete.length || upload.length) && mappedInputs.length)
200
- ? <span className={classes.operators}> AND </span>
201
- : null}
202
- {mappedInputs.map((filter, index) => (
203
- <span className={clsName(filter.section)}>
204
- <Filter
205
- index={index}
206
- type={filter.type}
207
- data={filter}
208
- maxItems={maxItems}
209
- classes={classes}
210
- onSectionClick={filter.type === CHECKBOX
211
- ? resetFacetSection
212
- : resetFacetSlider}
213
- onItemClick={filter.type === CHECKBOX
214
- ? resetFacetCheckbox
215
- : resetFacetSlider}
216
- />
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}
217
187
  </span>
218
- ))}
219
- </span>
220
- {
221
- (viewQueryURL && queryURLRootPath) && (
222
- <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}
223
201
  classes={classes}
224
- localFind={localFind}
225
- filterItems={mappedInputs}
226
- rootPath={queryURLRootPath}
202
+ onSectionClick={filter.type === CHECKBOX
203
+ ? resetFacetSection
204
+ : resetFacetSlider}
205
+ onItemClick={filter.type === CHECKBOX
206
+ ? resetFacetCheckbox
207
+ : resetFacetSlider}
227
208
  />
228
- )
229
- }
230
- </div>
231
- </>
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>
232
223
  );
233
224
  }),
234
225
  };