@bento-core/query-bar 1.0.1-icdc.12 → 1.0.1-icdc.13

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 (3) hide show
  1. package/dist/generators/QueryBarGenerator.js +10 -6
  2. package/package.json +1 -1
  3. package/src/generators/QueryBarGenerator.js +137 -118
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -110,17 +110,21 @@ const QueryBarGenerator = function QueryBarGenerator() {
110
110
  }
111
111
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
112
112
  className: classes.queryWrapper
113
- }, /*#__PURE__*/_react.default.createElement(_core.Button, {
113
+ }, /*#__PURE__*/_react.default.createElement("div", null, config.useSpanForClearButton ? /*#__PURE__*/_react.default.createElement("span", {
114
+ className: classes.clearQueryButton,
115
+ onClick: clearAll
116
+ }, "Clear") : /*#__PURE__*/_react.default.createElement(_core.Button, {
114
117
  className: classes.clearQueryButton,
115
118
  color: "primary",
116
119
  variant: "outlined",
117
- onClick: clearAll
118
- }, "Clear Query"), /*#__PURE__*/_react.default.createElement("span", {
120
+ onClick: clearAll,
121
+ size: "small"
122
+ }, "Clear"), /*#__PURE__*/_react.default.createElement("span", {
119
123
  className: classes.divider
120
124
  }), /*#__PURE__*/_react.default.createElement("span", {
121
125
  className: classes.queryContainer
122
126
  }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
123
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
127
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground, classes.standAloneInputSet),
124
128
  onClick: clearUpload
125
129
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
126
130
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
@@ -157,12 +161,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
157
161
  classes: classes,
158
162
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
159
163
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
160
- })))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
164
+ }))))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
161
165
  classes: classes,
162
166
  localFind: localFind,
163
167
  filterItems: mappedInputs,
164
168
  rootPath: queryURLRootPath
165
- })));
169
+ }))));
166
170
  })
167
171
  };
168
172
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.12",
3
+ "version": "1.0.1-icdc.13",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable */
1
2
  import React, { useState, useEffect } from 'react';
2
3
  import { withStyles, Button } from '@material-ui/core';
3
4
  import { InputTypes } from '@bento-core/facet-filter';
@@ -117,137 +118,155 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
117
118
  return (
118
119
  <>
119
120
  <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) ? (
133
- <span>
134
- {/* Standalone case set button */}
135
- {(upload.length && !autocomplete.length)
136
- ? (
137
- <span
138
- className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
139
- onClick={clearUpload}
140
- >
141
- INPUT CASE SET
142
- </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>
159
- </span>
160
- ) : null}
121
+ <div>
122
+ {
123
+ config.useSpanForClearButton ? (
124
+ <span className={classes.clearQueryButton} onClick={clearAll}>Clear</span>
125
+ ) : (
126
+ <Button
127
+ className={classes.clearQueryButton}
128
+ color="primary"
129
+ variant="outlined"
130
+ onClick={clearAll}
131
+ size="small"
132
+ >
133
+ Clear
134
+ </Button>
135
+
136
+ )
137
+ }
138
+ <span className={classes.divider} />
139
+ <span className={classes.queryContainer}>
140
+ {/* Local Find Selections */}
141
+ {/* TODO: Refactor this into a separate component */}
142
+ {(autocomplete.length || upload.length) ? (
161
143
  <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
- {' '}
144
+ {/* Standalone case set button */}
145
+ {(upload.length && !autocomplete.length)
146
+ ? (
168
147
  <span
169
- className={clsx(classes.filterCheckboxes, classes.localFind)}
148
+ className={
149
+ clsx(
150
+ classes.filterCheckboxes,
151
+ classes.localFindBackground,
152
+ classes.standAloneInputSet,
153
+ )
154
+ }
170
155
  onClick={clearUpload}
171
156
  >
172
157
  INPUT CASE SET
173
158
  </span>
174
- {' '}
175
- </>
176
- ) : null}
177
- {autocomplete.slice(0, noOfItems).map((d, idx) => (
178
- <>
159
+ ) : null}
160
+ {autocomplete.length
161
+ ? (
162
+ <span>
163
+ {' '}
164
+ <span
165
+ className={clsx(classes.filterName, classes.localFindBackground)}
166
+ onClick={clearAutocomplete}
167
+ >
168
+ Case ID
169
+ </span>
170
+ {' '}
171
+ {' '}
172
+ <span className={classes.operators}>
173
+ {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
174
+ </span>
175
+ </span>
176
+ ) : null}
177
+ <span>
178
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
179
+ ? <span className={classes.bracketsOpen}>(</span>
180
+ : null}
181
+ {upload.length && autocomplete.length ? (
182
+ <>
183
+ {' '}
184
+ <span
185
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
186
+ onClick={clearUpload}
187
+ >
188
+ INPUT CASE SET
189
+ </span>
190
+ {' '}
191
+ </>
192
+ ) : null}
193
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
194
+ <>
195
+ <span
196
+ className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
197
+ key={idx}
198
+ onClick={() => deleteAutocompleteItem(d.title)}
199
+ >
200
+ {d.title}
201
+ </span>
202
+ {idx === (noOfItems - 1) ? null : ' '}
203
+ </>
204
+ ))}
205
+ {autocomplete.length > maxItems && (
206
+ <>
207
+ {
208
+ displayAllActiveFilters
209
+ ? (
210
+ <span
211
+ className={classes.expandBtn}
212
+ onClick={() => setExpand(!expand)}
213
+ >
214
+ ...
215
+ </span>
216
+ )
217
+ : '...'
218
+ }
219
+ </>
220
+ )}
221
+ {(expand && autocomplete.length > maxItems) && (
179
222
  <span
180
- className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
181
- key={idx}
182
- onClick={() => deleteAutocompleteItem(d.title)}
223
+ className={classes.collapseBtn}
224
+ onClick={() => setExpand(!expand)}
183
225
  >
184
- {d.title}
226
+ {' LESS'}
185
227
  </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) && (
206
- <span
207
- className={classes.collapseBtn}
208
- onClick={() => setExpand(!expand)}
209
- >
210
- {' LESS'}
211
- </span>
212
- )}
213
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
214
- ? <span className={classes.bracketsClose}>)</span>
215
- : null}
228
+ )}
229
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
230
+ ? <span className={classes.bracketsClose}>)</span>
231
+ : null}
232
+ </span>
216
233
  </span>
217
- </span>
218
- ) : null}
234
+ ) : null}
219
235
 
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
- />
240
- </span>
241
- ))}
242
- </span>
236
+ {/* Facet Sidebar Selections */}
237
+ {((autocomplete.length || upload.length) && mappedInputs.length)
238
+ ? <span className={classes.operators}> AND </span>
239
+ : null}
240
+ {mappedInputs.map((filter, index) => (
241
+ <span className={clsName(filter.section)}>
242
+ <Filter
243
+ index={index}
244
+ type={filter.type}
245
+ data={filter}
246
+ maxItems={maxItems}
247
+ displayAllActiveFilters={displayAllActiveFilters}
248
+ classes={classes}
249
+ onSectionClick={filter.type === CHECKBOX
250
+ ? resetFacetSection
251
+ : resetFacetSlider}
252
+ onItemClick={filter.type === CHECKBOX
253
+ ? resetFacetCheckbox
254
+ : resetFacetSlider}
255
+ />
256
+ </span>
257
+ ))}
258
+ </span>
259
+ </div>
243
260
  {
244
261
  (viewQueryURL && queryURLRootPath) && (
245
- <QueryUrl
246
- classes={classes}
247
- localFind={localFind}
248
- filterItems={mappedInputs}
249
- rootPath={queryURLRootPath}
250
- />
262
+ <div>
263
+ <QueryUrl
264
+ classes={classes}
265
+ localFind={localFind}
266
+ filterItems={mappedInputs}
267
+ rootPath={queryURLRootPath}
268
+ />
269
+ </div>
251
270
  )
252
271
  }
253
272
  </div>