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

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/QueryUrl.js +17 -6
  2. package/dist/generators/QueryBarGenerator.js +6 -10
  3. package/package.json +1 -1
  4. package/src/components/QueryUrl.js +19 -6
  5. package/src/generators/QueryBarGenerator.js +118 -137
package/dist/components/QueryUrl.js CHANGED
@@ -23,7 +23,7 @@ const ViewFullLinkComponent = _ref => {
23
23
  maxWidth = 1200
24
24
  } = _ref;
25
25
  const linkRef = (0, _react.useRef)(null);
26
- const [expandLink, setExpand] = (0, _react.useState)(false);
26
+ const [collapseLink, setCollapseLink] = (0, _react.useState)(false);
27
27
 
28
28
  /**
29
29
  * Compute url link width based on the windowsize
@@ -32,22 +32,29 @@ const ViewFullLinkComponent = _ref => {
32
32
  var _linkRef$current;
33
33
  const urlWidth = linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.offsetWidth;
34
34
  if (urlWidth > maxWidth / 2) {
35
- setExpand(true);
35
+ setCollapseLink(true);
36
36
  }
37
37
  }, []);
38
38
  const expandUrl = () => {
39
- setExpand(!expandLink);
39
+ setCollapseLink(false);
40
+ };
41
+ const collapseUrl = () => {
42
+ setCollapseLink(true);
40
43
  };
41
44
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
42
45
  ref: linkRef,
43
46
  className: classes.link
44
47
  }, /*#__PURE__*/_react.default.createElement("span", {
45
48
  className: (0, _clsx.default)(classes.viewLink, {
46
- [classes.collapseLink]: expandLink
49
+ [classes.collapseLink]: collapseLink
47
50
  })
48
51
  }, /*#__PURE__*/_react.default.createElement("span", {
49
- className: classes.urlView
50
- }, url), expandLink && /*#__PURE__*/_react.default.createElement("span", {
52
+ className: (0, _clsx.default)(classes.urlView, {
53
+ [classes.urlViewBtn]: !collapseLink
54
+ }),
55
+ type: "button",
56
+ onClick: collapseUrl
57
+ }, url), collapseLink && /*#__PURE__*/_react.default.createElement("span", {
51
58
  className: classes.expandLinkBtn,
52
59
  type: "button",
53
60
  onClick: expandUrl
@@ -105,6 +112,7 @@ const QueryUrl = _ref2 => {
105
112
  alt: "copy icon"
106
113
  }))))), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
107
114
  open: open,
115
+ onClose: () => toggleOpen(!open),
108
116
  "aria-labelledby": "alert-dialog-title",
109
117
  "aria-describedby": "alert-dialog-description",
110
118
  className: (0, _clsx.default)(classes.dialogBox, 'dialogBox')
@@ -140,6 +148,9 @@ const styles = () => ({
140
148
  viewLink: {
141
149
  margin: '0'
142
150
  },
151
+ urlViewBtn: {
152
+ cursor: 'pointer'
153
+ },
143
154
  collapseLink: {
144
155
  maxHeight: '1em',
145
156
  display: 'block',
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -110,21 +110,17 @@ 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("div", null, config.useSpanForClearButton ? /*#__PURE__*/_react.default.createElement("span", {
114
- className: classes.clearQueryButton,
115
- onClick: clearAll
116
- }, "Clear") : /*#__PURE__*/_react.default.createElement(_core.Button, {
113
+ }, /*#__PURE__*/_react.default.createElement(_core.Button, {
117
114
  className: classes.clearQueryButton,
118
115
  color: "primary",
119
116
  variant: "outlined",
120
- onClick: clearAll,
121
- size: "small"
122
- }, "Clear"), /*#__PURE__*/_react.default.createElement("span", {
117
+ onClick: clearAll
118
+ }, "Clear Query"), /*#__PURE__*/_react.default.createElement("span", {
123
119
  className: classes.divider
124
120
  }), /*#__PURE__*/_react.default.createElement("span", {
125
121
  className: classes.queryContainer
126
122
  }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
127
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground, classes.standAloneInputSet),
123
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
128
124
  onClick: clearUpload
129
125
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
130
126
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
@@ -161,12 +157,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
161
157
  classes: classes,
162
158
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
163
159
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
164
- }))))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
160
+ })))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
165
161
  classes: classes,
166
162
  localFind: localFind,
167
163
  filterItems: mappedInputs,
168
164
  rootPath: queryURLRootPath
169
- }))));
165
+ })));
170
166
  })
171
167
  };
172
168
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.15",
3
+ "version": "1.0.1-icdc.17",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/QueryUrl.js CHANGED
@@ -18,7 +18,7 @@ const ViewFullLinkComponent = ({
18
18
  maxWidth = 1200,
19
19
  }) => {
20
20
  const linkRef = useRef(null);
21
- const [expandLink, setExpand] = useState(false);
21
+ const [collapseLink, setCollapseLink] = useState(false);
22
22
 
23
23
  /**
24
24
  * Compute url link width based on the windowsize
@@ -26,12 +26,16 @@ const ViewFullLinkComponent = ({
26
26
  useEffect(() => {
27
27
  const urlWidth = linkRef?.current?.offsetWidth;
28
28
  if (urlWidth > maxWidth / 2) {
29
- setExpand(true);
29
+ setCollapseLink(true);
30
30
  }
31
31
  }, []);
32
32
 
33
33
  const expandUrl = () => {
34
- setExpand(!expandLink);
34
+ setCollapseLink(false);
35
+ };
36
+
37
+ const collapseUrl = () => {
38
+ setCollapseLink(true);
35
39
  };
36
40
 
37
41
  return (
@@ -39,12 +43,17 @@ const ViewFullLinkComponent = ({
39
43
  <span ref={linkRef} className={classes.link}>
40
44
  <span
41
45
  className={clsx(classes.viewLink,
42
- { [classes.collapseLink]: expandLink })}
46
+ { [classes.collapseLink]: collapseLink })}
43
47
  >
44
- <span className={classes.urlView}>
48
+ <span
49
+ className={clsx(classes.urlView,
50
+ { [classes.urlViewBtn]: !collapseLink })}
51
+ type="button"
52
+ onClick={collapseUrl}
53
+ >
45
54
  {url}
46
55
  </span>
47
- {(expandLink) && (
56
+ {(collapseLink) && (
48
57
  <span
49
58
  className={classes.expandLinkBtn}
50
59
  type="button"
@@ -132,6 +141,7 @@ const QueryUrl = ({
132
141
  </div>
133
142
  <Dialog
134
143
  open={open}
144
+ onClose={() => toggleOpen(!open)}
135
145
  aria-labelledby="alert-dialog-title"
136
146
  aria-describedby="alert-dialog-description"
137
147
  className={clsx(classes.dialogBox, 'dialogBox')}
@@ -175,6 +185,9 @@ const styles = () => ({
175
185
  viewLink: {
176
186
  margin: '0',
177
187
  },
188
+ urlViewBtn: {
189
+ cursor: 'pointer',
190
+ },
178
191
  collapseLink: {
179
192
  maxHeight: '1em',
180
193
  display: 'block',
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,4 +1,3 @@
1
- /* eslint-disable */
2
1
  import React, { useState, useEffect } from 'react';
3
2
  import { withStyles, Button } from '@material-ui/core';
4
3
  import { InputTypes } from '@bento-core/facet-filter';
@@ -118,155 +117,137 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
118
117
  return (
119
118
  <>
120
119
  <div className={classes.queryWrapper}>
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) ? (
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}
143
161
  <span>
144
- {/* Standalone case set button */}
145
- {(upload.length && !autocomplete.length)
146
- ? (
162
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
163
+ ? <span className={classes.bracketsOpen}>(</span>
164
+ : null}
165
+ {upload.length && autocomplete.length ? (
166
+ <>
167
+ {' '}
147
168
  <span
148
- className={
149
- clsx(
150
- classes.filterCheckboxes,
151
- classes.localFindBackground,
152
- classes.standAloneInputSet,
153
- )
154
- }
169
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
155
170
  onClick={clearUpload}
156
171
  >
157
172
  INPUT CASE SET
158
173
  </span>
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) && (
174
+ {' '}
175
+ </>
176
+ ) : null}
177
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
178
+ <>
222
179
  <span
223
- className={classes.collapseBtn}
224
- onClick={() => setExpand(!expand)}
180
+ className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
181
+ key={idx}
182
+ onClick={() => deleteAutocompleteItem(d.title)}
225
183
  >
226
- {' LESS'}
184
+ {d.title}
227
185
  </span>
228
- )}
229
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
230
- ? <span className={classes.bracketsClose}>)</span>
231
- : null}
232
- </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}
233
216
  </span>
234
- ) : null}
217
+ </span>
218
+ ) : null}
235
219
 
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>
260
- {
261
- (viewQueryURL && queryURLRootPath) && (
262
- <div>
263
- <QueryUrl
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}
264
232
  classes={classes}
265
- localFind={localFind}
266
- filterItems={mappedInputs}
267
- rootPath={queryURLRootPath}
233
+ onSectionClick={filter.type === CHECKBOX
234
+ ? resetFacetSection
235
+ : resetFacetSlider}
236
+ onItemClick={filter.type === CHECKBOX
237
+ ? resetFacetCheckbox
238
+ : resetFacetSlider}
268
239
  />
269
- </div>
240
+ </span>
241
+ ))}
242
+ </span>
243
+ {
244
+ (viewQueryURL && queryURLRootPath) && (
245
+ <QueryUrl
246
+ classes={classes}
247
+ localFind={localFind}
248
+ filterItems={mappedInputs}
249
+ rootPath={queryURLRootPath}
250
+ />
270
251
  )
271
252
  }
272
253
  </div>