@blaze-cms/react-page-builder 0.122.1 → 0.122.2

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 (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/lib/components/SearchFilter/SearchFilter/SearchFilter.js +15 -50
  3. package/lib/components/SearchFilter/SearchFilter/SearchFilter.js.map +1 -1
  4. package/lib-es/components/SearchFilter/SearchFilter/SearchFilter.js +10 -40
  5. package/lib-es/components/SearchFilter/SearchFilter/SearchFilter.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/SearchFilter/SearchFilter/SearchFilter.js +113 -148
  8. package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js +64 -86
  9. package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap +133 -61
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.122.2](https://github.com/thebyte9/blaze/compare/v0.122.1...v0.122.2) (2022-04-04)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * add initial modifier to filter form ([be2254c](https://github.com/thebyte9/blaze/commit/be2254c967137b1c08e9989fcd1bf29d3675bb05))
12
+ * handle search filter with css ([872dc99](https://github.com/thebyte9/blaze/commit/872dc99b2ff26931bad9280f62b771d01a8c1c10))
13
+ * remove visibility ([7479231](https://github.com/thebyte9/blaze/commit/747923186c1c127dd82b4c4565b91b93e5812593))
14
+ * remove visibility ([32afbb4](https://github.com/thebyte9/blaze/commit/32afbb49f097a43e3e58a4938862a839beabe394))
15
+ * update to handle isCollapseOnMobile more consistently ([3123d99](https://github.com/thebyte9/blaze/commit/3123d9952f3d19391f91252bc1cfc716c787bed1))
16
+
17
+
18
+
19
+
20
+
6
21
  ## [0.122.1](https://github.com/thebyte9/blaze/compare/v0.122.1-alpha.0...v0.122.1) (2022-03-21)
7
22
 
8
23
  **Note:** Version bump only for package @blaze-cms/react-page-builder
package/lib/components/SearchFilter/SearchFilter/SearchFilter.js CHANGED
@@ -117,23 +117,13 @@ var SearchFilter = function SearchFilter(_ref) {
117
117
 
118
118
  var _useState = (0, _react.useState)(true),
119
119
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
120
- isDesktop = _useState2[0],
121
- setIsDesktop = _useState2[1];
120
+ moreFiltersMobileCollapsed = _useState2[0],
121
+ setMoreFiltersMobileCollapsed = _useState2[1];
122
122
 
123
- var _useState3 = (0, _react.useState)(null),
123
+ var _useState3 = (0, _react.useState)(true),
124
124
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
125
- pageWidth = _useState4[0],
126
- setPageWidth = _useState4[1];
127
-
128
- var _useState5 = (0, _react.useState)(true),
129
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
130
- moreFiltersMobileCollapsed = _useState6[0],
131
- setMoreFiltersMobileCollapsed = _useState6[1];
132
-
133
- var _useState7 = (0, _react.useState)(true),
134
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
135
- moreFiltersDesktopCollapsed = _useState8[0],
136
- setMoreFiltersDesktopCollapsed = _useState8[1];
125
+ moreFiltersDesktopCollapsed = _useState4[0],
126
+ setMoreFiltersDesktopCollapsed = _useState4[1];
137
127
 
138
128
  var _useReducer = (0, _react.useReducer)(reducer, initialFilterValues),
139
129
  _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
@@ -144,24 +134,6 @@ var SearchFilter = function SearchFilter(_ref) {
144
134
  var newQuery = (0, _helpers.buildQuery)(newValues, filters);
145
135
  handleSearch(newQuery);
146
136
  }, 200);
147
- (0, _react.useEffect)(function () {
148
- if (window && !pageWidth) {
149
- setPageWidth(window.innerWidth);
150
- setIsDesktop((0, _helpers.isDeviceDesktop)());
151
- }
152
-
153
- var handleResize = function handleResize(_ref2) {
154
- var innerWidth = _ref2.target.innerWidth;
155
- setIsDesktop((0, _helpers.isDeviceDesktop)());
156
- setPageWidth(innerWidth);
157
- if (isDesktop) setDisplaySearchFilter(false);
158
- };
159
-
160
- window.addEventListener('resize', handleResize);
161
- return function () {
162
- window.removeEventListener('resize', handleResize);
163
- };
164
- }, [isDesktop, pageWidth, setDisplaySearchFilter]);
165
137
  (0, _react.useEffect)(function () {
166
138
  if (filterValues.shouldSearch) {
167
139
  handleSubmit(filterValues);
@@ -170,16 +142,9 @@ var SearchFilter = function SearchFilter(_ref) {
170
142
  });
171
143
  }
172
144
  }, [filterValues, handleSubmit]);
173
- var isDesktopFormDisplayed = true;
174
- var isMobileFormDisplayed = false;
175
-
176
- if (!isDesktop && isCollapsedOnResponsive) {
177
- isMobileFormDisplayed = displaySearchFilter;
178
- isDesktopFormDisplayed = false;
179
- }
180
-
181
- var formClass = (0, _classnames["default"])({
182
- 'filter__form filter__form--mobile': isMobileFormDisplayed
145
+ var formClass = (0, _classnames["default"])('filter__form filter__form--initial', {
146
+ 'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
147
+ 'filter__form--collapsible': isCollapsedOnResponsive
183
148
  });
184
149
 
185
150
  var _getResponsiveFilterC = (0, _helpers.getResponsiveFilterClassnames)(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed),
@@ -208,7 +173,7 @@ var SearchFilter = function SearchFilter(_ref) {
208
173
 
209
174
  var shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
210
175
  var shouldSearch = !hasUrl;
211
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isDesktopFormDisplayed || isMobileFormDisplayed ? /*#__PURE__*/_react["default"].createElement("form", {
176
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("form", {
212
177
  ref: searchFilterRef,
213
178
  className: formClass,
214
179
  "data-testid": formId,
@@ -218,13 +183,13 @@ var SearchFilter = function SearchFilter(_ref) {
218
183
  var newQuery = (0, _helpers.buildQuery)(filterValues, filters);
219
184
  handleSearch(newQuery);
220
185
  }
221
- }, isMobileFormDisplayed && /*#__PURE__*/_react["default"].createElement(_CloseMobileForm["default"], {
186
+ }, displaySearchFilter && /*#__PURE__*/_react["default"].createElement(_CloseMobileForm["default"], {
222
187
  handleClose: function handleClose() {
223
188
  return setDisplaySearchFilter(false);
224
189
  }
225
190
  }), /*#__PURE__*/_react["default"].createElement("div", {
226
191
  className: "filter filter--search-refine"
227
- }, isDesktopFormDisplayed && /*#__PURE__*/_react["default"].createElement(_ResetDesktopForm["default"], {
192
+ }, /*#__PURE__*/_react["default"].createElement(_ResetDesktopForm["default"], {
228
193
  handleReset: handleReset
229
194
  }), /*#__PURE__*/_react["default"].createElement("div", {
230
195
  className: "filter__wrapper filter__wrapper--search-refine"
@@ -294,13 +259,13 @@ var SearchFilter = function SearchFilter(_ref) {
294
259
  }), /*#__PURE__*/_react["default"].createElement("button", {
295
260
  className: "button button--full-width",
296
261
  type: "submit"
297
- }, _constants.SEARCH)))), /*#__PURE__*/_react["default"].createElement("br", null), isDesktopFormDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
262
+ }, _constants.SEARCH)))), /*#__PURE__*/_react["default"].createElement("br", null), !displaySearchFilter && /*#__PURE__*/_react["default"].createElement("button", {
298
263
  className: "button button--full-width",
299
264
  type: "submit"
300
- }, _constants.SEARCH))), isMobileFormDisplayed && /*#__PURE__*/_react["default"].createElement(_MobileFormToolbar["default"], {
265
+ }, _constants.SEARCH))), displaySearchFilter && /*#__PURE__*/_react["default"].createElement(_MobileFormToolbar["default"], {
301
266
  formId: formId,
302
267
  handleReset: handleReset
303
- })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isCollapsedOnResponsive && /*#__PURE__*/_react["default"].createElement("div", {
268
+ })), isCollapsedOnResponsive && !displaySearchFilter && /*#__PURE__*/_react["default"].createElement("div", {
304
269
  className: "filter__refine filter__refine--mobile-close",
305
270
  "data-testid": "refine-mobile"
306
271
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -308,7 +273,7 @@ var SearchFilter = function SearchFilter(_ref) {
308
273
  onClick: function onClick() {
309
274
  return setDisplaySearchFilter(true);
310
275
  }
311
- }, _constants.REFINE))));
276
+ }, _constants.REFINE)));
312
277
  };
313
278
 
314
279
  SearchFilter.propTypes = {
package/lib/components/SearchFilter/SearchFilter/SearchFilter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SearchFilter/SearchFilter/SearchFilter.js"],"names":["reducer","state","action","newValues","type","shouldSearch","Error","SearchFilter","searchFilterRef","data","filters","hasUrl","entity","handleSearch","name","isCollapsedOnResponsive","displaySearchFilter","setDisplaySearchFilter","initialFilterValues","groupAfterDesktop","groupAfterMobile","isDesktop","setIsDesktop","pageWidth","setPageWidth","moreFiltersMobileCollapsed","setMoreFiltersMobileCollapsed","moreFiltersDesktopCollapsed","setMoreFiltersDesktopCollapsed","filterValues","dispatch","handleSubmit","newQuery","window","innerWidth","handleResize","target","addEventListener","removeEventListener","isDesktopFormDisplayed","isMobileFormDisplayed","formClass","moreFiltersMobileWrapperClass","moreFiltersMobileTogglerClass","moreFiltersDesktopWrapperClass","moreFiltersDesktopTogglerClass","formId","handleReset","updateFilterValues","shouldSubmit","shouldGroup","e","preventDefault","slice","MORE_FILTERS_CLASSES","MOBILE_CONTENT","DESKTOP_CONTENT","DESKTOP_BUTTONS","SEARCH","MOBILE_BUTTONS","REFINE","propTypes","PropTypes","object","isRequired","array","bool","string","func","number"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useReducer } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport FiltersList from './FiltersList';\nimport {\n isDeviceDesktop,\n buildQuery,\n getInitialFilterValues,\n getResponsiveFilterClassnames\n} from '../helpers';\nimport CloseMobileForm from './CloseMobileForm';\nimport ResetDesktopForm from './ResetDesktopForm';\nimport MobileFormToolbar from './MobileFormToolbar';\nimport { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';\n\nconst reducer = (state, action) => {\n const { newValues, type, shouldSearch = true } = action;\n\n switch (type) {\n case 'update':\n return { ...state, ...newValues, shouldSearch };\n case 'resetSearch':\n return { ...state, shouldSearch: false };\n case 'reset':\n return { ...newValues, shouldSearch };\n default:\n throw new Error();\n }\n};\n\nconst SearchFilter = ({\n searchFilterRef,\n data,\n filters,\n hasUrl,\n entity,\n handleSearch,\n name,\n isCollapsedOnResponsive,\n displaySearchFilter,\n setDisplaySearchFilter,\n initialFilterValues,\n groupAfterDesktop,\n groupAfterMobile\n}) => {\n const [isDesktop, setIsDesktop] = useState(true);\n const [pageWidth, setPageWidth] = useState(null);\n const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);\n const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);\n const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);\n\n const handleSubmit = debounce(newValues => {\n const newQuery = buildQuery(newValues, filters);\n handleSearch(newQuery);\n }, 200);\n\n useEffect(\n () => {\n if (window && !pageWidth) {\n setPageWidth(window.innerWidth);\n setIsDesktop(isDeviceDesktop());\n }\n\n const handleResize = ({ target: { innerWidth } }) => {\n setIsDesktop(isDeviceDesktop());\n setPageWidth(innerWidth);\n if (isDesktop) setDisplaySearchFilter(false);\n };\n\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n },\n [isDesktop, pageWidth, setDisplaySearchFilter]\n );\n\n useEffect(\n () => {\n if (filterValues.shouldSearch) {\n handleSubmit(filterValues);\n dispatch({ type: 'resetSearch' });\n }\n },\n [filterValues, handleSubmit]\n );\n\n let isDesktopFormDisplayed = true;\n let isMobileFormDisplayed = false;\n\n if (!isDesktop && isCollapsedOnResponsive) {\n isMobileFormDisplayed = displaySearchFilter;\n isDesktopFormDisplayed = false;\n }\n\n const formClass = classnames({\n 'filter__form filter__form--mobile': isMobileFormDisplayed\n });\n\n const {\n moreFiltersMobileWrapperClass,\n moreFiltersMobileTogglerClass,\n moreFiltersDesktopWrapperClass,\n moreFiltersDesktopTogglerClass\n } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);\n\n const formId = `filter-${name}-form`;\n\n const handleReset = () => {\n const newValues = getInitialFilterValues(data, filters, {});\n\n dispatch({ newValues, type: 'reset' });\n };\n\n const updateFilterValues = (newValues, shouldSubmit) => {\n dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });\n };\n\n const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);\n const shouldSearch = !hasUrl;\n\n return (\n <>\n {isDesktopFormDisplayed || isMobileFormDisplayed ? (\n <form\n ref={searchFilterRef}\n className={formClass}\n data-testid={formId}\n id={formId}\n onSubmit={e => {\n e.preventDefault();\n const newQuery = buildQuery(filterValues, filters);\n handleSearch(newQuery);\n }}>\n {isMobileFormDisplayed && (\n <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />\n )}\n\n <div className=\"filter filter--search-refine\">\n {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}\n\n <div className=\"filter__wrapper filter__wrapper--search-refine\">\n {!shouldGroup && (\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n )}\n\n {shouldGroup && (\n <>\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters.slice(0, groupAfterMobile)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterMobile && (\n <button\n className={moreFiltersMobileTogglerClass}\n type=\"button\"\n onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>\n Filters\n </button>\n )}\n\n <div className={moreFiltersMobileWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>\n <FiltersList\n shouldSearch={shouldSearch && isDeviceDesktop()}\n data={data}\n filters={filters.slice(\n groupAfterMobile,\n groupAfterDesktop ? groupAfterDesktop - 1 : 0\n )}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterDesktop && (\n <button\n className={moreFiltersDesktopTogglerClass}\n type=\"button\"\n onClick={() =>\n setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)\n }>\n More filters\n </button>\n )}\n\n <div className={moreFiltersDesktopWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>\n <FiltersList\n shouldSearch={false}\n data={data}\n filters={filters.slice(groupAfterDesktop)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n </div>\n\n <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </div>\n\n <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </>\n )}\n\n <br />\n\n {isDesktopFormDisplayed && (\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n )}\n </div>\n </div>\n\n {isMobileFormDisplayed && <MobileFormToolbar formId={formId} handleReset={handleReset} />}\n </form>\n ) : (\n <>\n {isCollapsedOnResponsive && (\n <div\n className=\"filter__refine filter__refine--mobile-close\"\n data-testid=\"refine-mobile\">\n <div role=\"button\" onClick={() => setDisplaySearchFilter(true)}>\n {REFINE}\n </div>\n </div>\n )}\n </>\n )}\n </>\n );\n};\n\nSearchFilter.propTypes = {\n data: PropTypes.object.isRequired,\n filters: PropTypes.array.isRequired,\n searchFilterRef: PropTypes.object.isRequired,\n hasUrl: PropTypes.bool.isRequired,\n entity: PropTypes.string.isRequired,\n handleSearch: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n displaySearchFilter: PropTypes.bool.isRequired,\n setDisplaySearchFilter: PropTypes.func.isRequired,\n isCollapsedOnResponsive: PropTypes.bool.isRequired,\n groupAfterDesktop: PropTypes.number.isRequired,\n groupAfterMobile: PropTypes.number.isRequired,\n initialFilterValues: PropTypes.object.isRequired\n};\n\nexport default SearchFilter;\n"],"file":"SearchFilter.js"}
1
+ {"version":3,"sources":["../../../../src/components/SearchFilter/SearchFilter/SearchFilter.js"],"names":["reducer","state","action","newValues","type","shouldSearch","Error","SearchFilter","searchFilterRef","data","filters","hasUrl","entity","handleSearch","name","isCollapsedOnResponsive","displaySearchFilter","setDisplaySearchFilter","initialFilterValues","groupAfterDesktop","groupAfterMobile","moreFiltersMobileCollapsed","setMoreFiltersMobileCollapsed","moreFiltersDesktopCollapsed","setMoreFiltersDesktopCollapsed","filterValues","dispatch","handleSubmit","newQuery","formClass","moreFiltersMobileWrapperClass","moreFiltersMobileTogglerClass","moreFiltersDesktopWrapperClass","moreFiltersDesktopTogglerClass","formId","handleReset","updateFilterValues","shouldSubmit","shouldGroup","e","preventDefault","slice","MORE_FILTERS_CLASSES","MOBILE_CONTENT","DESKTOP_CONTENT","DESKTOP_BUTTONS","SEARCH","MOBILE_BUTTONS","REFINE","propTypes","PropTypes","object","isRequired","array","bool","string","func","number"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useReducer } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport FiltersList from './FiltersList';\nimport {\n isDeviceDesktop,\n buildQuery,\n getInitialFilterValues,\n getResponsiveFilterClassnames\n} from '../helpers';\nimport CloseMobileForm from './CloseMobileForm';\nimport ResetDesktopForm from './ResetDesktopForm';\nimport MobileFormToolbar from './MobileFormToolbar';\nimport { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';\n\nconst reducer = (state, action) => {\n const { newValues, type, shouldSearch = true } = action;\n\n switch (type) {\n case 'update':\n return { ...state, ...newValues, shouldSearch };\n case 'resetSearch':\n return { ...state, shouldSearch: false };\n case 'reset':\n return { ...newValues, shouldSearch };\n default:\n throw new Error();\n }\n};\n\nconst SearchFilter = ({\n searchFilterRef,\n data,\n filters,\n hasUrl,\n entity,\n handleSearch,\n name,\n isCollapsedOnResponsive,\n displaySearchFilter,\n setDisplaySearchFilter,\n initialFilterValues,\n groupAfterDesktop,\n groupAfterMobile\n}) => {\n const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);\n const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);\n const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);\n\n const handleSubmit = debounce(newValues => {\n const newQuery = buildQuery(newValues, filters);\n handleSearch(newQuery);\n }, 200);\n\n useEffect(\n () => {\n if (filterValues.shouldSearch) {\n handleSubmit(filterValues);\n dispatch({ type: 'resetSearch' });\n }\n },\n [filterValues, handleSubmit]\n );\n\n const formClass = classnames('filter__form filter__form--initial', {\n 'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,\n 'filter__form--collapsible': isCollapsedOnResponsive\n });\n\n const {\n moreFiltersMobileWrapperClass,\n moreFiltersMobileTogglerClass,\n moreFiltersDesktopWrapperClass,\n moreFiltersDesktopTogglerClass\n } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);\n\n const formId = `filter-${name}-form`;\n\n const handleReset = () => {\n const newValues = getInitialFilterValues(data, filters, {});\n\n dispatch({ newValues, type: 'reset' });\n };\n\n const updateFilterValues = (newValues, shouldSubmit) => {\n dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });\n };\n\n const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);\n const shouldSearch = !hasUrl;\n\n return (\n <>\n <form\n ref={searchFilterRef}\n className={formClass}\n data-testid={formId}\n id={formId}\n onSubmit={e => {\n e.preventDefault();\n const newQuery = buildQuery(filterValues, filters);\n handleSearch(newQuery);\n }}>\n {displaySearchFilter && (\n <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />\n )}\n\n <div className=\"filter filter--search-refine\">\n <ResetDesktopForm handleReset={handleReset} />\n\n <div className=\"filter__wrapper filter__wrapper--search-refine\">\n {!shouldGroup && (\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n )}\n\n {shouldGroup && (\n <>\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters.slice(0, groupAfterMobile)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterMobile && (\n <button\n className={moreFiltersMobileTogglerClass}\n type=\"button\"\n onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>\n Filters\n </button>\n )}\n\n <div className={moreFiltersMobileWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>\n <FiltersList\n shouldSearch={shouldSearch && isDeviceDesktop()}\n data={data}\n filters={filters.slice(\n groupAfterMobile,\n groupAfterDesktop ? groupAfterDesktop - 1 : 0\n )}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterDesktop && (\n <button\n className={moreFiltersDesktopTogglerClass}\n type=\"button\"\n onClick={() =>\n setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)\n }>\n More filters\n </button>\n )}\n\n <div className={moreFiltersDesktopWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>\n <FiltersList\n shouldSearch={false}\n data={data}\n filters={filters.slice(groupAfterDesktop)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n </div>\n\n <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </div>\n\n <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </>\n )}\n\n <br />\n\n {!displaySearchFilter && (\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n )}\n </div>\n </div>\n\n {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}\n </form>\n\n {isCollapsedOnResponsive &&\n !displaySearchFilter && (\n <div className=\"filter__refine filter__refine--mobile-close\" data-testid=\"refine-mobile\">\n <div role=\"button\" onClick={() => setDisplaySearchFilter(true)}>\n {REFINE}\n </div>\n </div>\n )}\n </>\n );\n};\n\nSearchFilter.propTypes = {\n data: PropTypes.object.isRequired,\n filters: PropTypes.array.isRequired,\n searchFilterRef: PropTypes.object.isRequired,\n hasUrl: PropTypes.bool.isRequired,\n entity: PropTypes.string.isRequired,\n handleSearch: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n displaySearchFilter: PropTypes.bool.isRequired,\n setDisplaySearchFilter: PropTypes.func.isRequired,\n isCollapsedOnResponsive: PropTypes.bool.isRequired,\n groupAfterDesktop: PropTypes.number.isRequired,\n groupAfterMobile: PropTypes.number.isRequired,\n initialFilterValues: PropTypes.object.isRequired\n};\n\nexport default SearchFilter;\n"],"file":"SearchFilter.js"}
package/lib-es/components/SearchFilter/SearchFilter/SearchFilter.js CHANGED
@@ -58,8 +58,6 @@ const SearchFilter = ({
58
58
  groupAfterDesktop,
59
59
  groupAfterMobile
60
60
  }) => {
61
- const [isDesktop, setIsDesktop] = useState(true);
62
- const [pageWidth, setPageWidth] = useState(null);
63
61
  const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
64
62
  const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
65
63
  const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
@@ -67,27 +65,6 @@ const SearchFilter = ({
67
65
  const newQuery = buildQuery(newValues, filters);
68
66
  handleSearch(newQuery);
69
67
  }, 200);
70
- useEffect(() => {
71
- if (window && !pageWidth) {
72
- setPageWidth(window.innerWidth);
73
- setIsDesktop(isDeviceDesktop());
74
- }
75
-
76
- const handleResize = ({
77
- target: {
78
- innerWidth
79
- }
80
- }) => {
81
- setIsDesktop(isDeviceDesktop());
82
- setPageWidth(innerWidth);
83
- if (isDesktop) setDisplaySearchFilter(false);
84
- };
85
-
86
- window.addEventListener('resize', handleResize);
87
- return () => {
88
- window.removeEventListener('resize', handleResize);
89
- };
90
- }, [isDesktop, pageWidth, setDisplaySearchFilter]);
91
68
  useEffect(() => {
92
69
  if (filterValues.shouldSearch) {
93
70
  handleSubmit(filterValues);
@@ -96,16 +73,9 @@ const SearchFilter = ({
96
73
  });
97
74
  }
98
75
  }, [filterValues, handleSubmit]);
99
- let isDesktopFormDisplayed = true;
100
- let isMobileFormDisplayed = false;
101
-
102
- if (!isDesktop && isCollapsedOnResponsive) {
103
- isMobileFormDisplayed = displaySearchFilter;
104
- isDesktopFormDisplayed = false;
105
- }
106
-
107
- const formClass = classnames({
108
- 'filter__form filter__form--mobile': isMobileFormDisplayed
76
+ const formClass = classnames('filter__form filter__form--initial', {
77
+ 'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
78
+ 'filter__form--collapsible': isCollapsedOnResponsive
109
79
  });
110
80
  const {
111
81
  moreFiltersMobileWrapperClass,
@@ -133,7 +103,7 @@ const SearchFilter = ({
133
103
 
134
104
  const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
135
105
  const shouldSearch = !hasUrl;
136
- return /*#__PURE__*/React.createElement(React.Fragment, null, isDesktopFormDisplayed || isMobileFormDisplayed ? /*#__PURE__*/React.createElement("form", {
106
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
137
107
  ref: searchFilterRef,
138
108
  className: formClass,
139
109
  "data-testid": formId,
@@ -143,11 +113,11 @@ const SearchFilter = ({
143
113
  const newQuery = buildQuery(filterValues, filters);
144
114
  handleSearch(newQuery);
145
115
  }
146
- }, isMobileFormDisplayed && /*#__PURE__*/React.createElement(CloseMobileForm, {
116
+ }, displaySearchFilter && /*#__PURE__*/React.createElement(CloseMobileForm, {
147
117
  handleClose: () => setDisplaySearchFilter(false)
148
118
  }), /*#__PURE__*/React.createElement("div", {
149
119
  className: "filter filter--search-refine"
150
- }, isDesktopFormDisplayed && /*#__PURE__*/React.createElement(ResetDesktopForm, {
120
+ }, /*#__PURE__*/React.createElement(ResetDesktopForm, {
151
121
  handleReset: handleReset
152
122
  }), /*#__PURE__*/React.createElement("div", {
153
123
  className: "filter__wrapper filter__wrapper--search-refine"
@@ -213,19 +183,19 @@ const SearchFilter = ({
213
183
  }), /*#__PURE__*/React.createElement("button", {
214
184
  className: "button button--full-width",
215
185
  type: "submit"
216
- }, SEARCH)))), /*#__PURE__*/React.createElement("br", null), isDesktopFormDisplayed && /*#__PURE__*/React.createElement("button", {
186
+ }, SEARCH)))), /*#__PURE__*/React.createElement("br", null), !displaySearchFilter && /*#__PURE__*/React.createElement("button", {
217
187
  className: "button button--full-width",
218
188
  type: "submit"
219
- }, SEARCH))), isMobileFormDisplayed && /*#__PURE__*/React.createElement(MobileFormToolbar, {
189
+ }, SEARCH))), displaySearchFilter && /*#__PURE__*/React.createElement(MobileFormToolbar, {
220
190
  formId: formId,
221
191
  handleReset: handleReset
222
- })) : /*#__PURE__*/React.createElement(React.Fragment, null, isCollapsedOnResponsive && /*#__PURE__*/React.createElement("div", {
192
+ })), isCollapsedOnResponsive && !displaySearchFilter && /*#__PURE__*/React.createElement("div", {
223
193
  className: "filter__refine filter__refine--mobile-close",
224
194
  "data-testid": "refine-mobile"
225
195
  }, /*#__PURE__*/React.createElement("div", {
226
196
  role: "button",
227
197
  onClick: () => setDisplaySearchFilter(true)
228
- }, REFINE))));
198
+ }, REFINE)));
229
199
  };
230
200
 
231
201
  SearchFilter.propTypes = {
package/lib-es/components/SearchFilter/SearchFilter/SearchFilter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SearchFilter/SearchFilter/SearchFilter.js"],"names":["React","useState","useEffect","useReducer","PropTypes","classnames","debounce","FiltersList","isDeviceDesktop","buildQuery","getInitialFilterValues","getResponsiveFilterClassnames","CloseMobileForm","ResetDesktopForm","MobileFormToolbar","SEARCH","REFINE","MORE_FILTERS_CLASSES","reducer","state","action","newValues","type","shouldSearch","Error","SearchFilter","searchFilterRef","data","filters","hasUrl","entity","handleSearch","name","isCollapsedOnResponsive","displaySearchFilter","setDisplaySearchFilter","initialFilterValues","groupAfterDesktop","groupAfterMobile","isDesktop","setIsDesktop","pageWidth","setPageWidth","moreFiltersMobileCollapsed","setMoreFiltersMobileCollapsed","moreFiltersDesktopCollapsed","setMoreFiltersDesktopCollapsed","filterValues","dispatch","handleSubmit","newQuery","window","innerWidth","handleResize","target","addEventListener","removeEventListener","isDesktopFormDisplayed","isMobileFormDisplayed","formClass","moreFiltersMobileWrapperClass","moreFiltersMobileTogglerClass","moreFiltersDesktopWrapperClass","moreFiltersDesktopTogglerClass","formId","handleReset","updateFilterValues","shouldSubmit","shouldGroup","e","preventDefault","slice","MOBILE_CONTENT","DESKTOP_CONTENT","DESKTOP_BUTTONS","MOBILE_BUTTONS","propTypes","object","isRequired","array","bool","string","func","number"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useReducer } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport FiltersList from './FiltersList';\nimport {\n isDeviceDesktop,\n buildQuery,\n getInitialFilterValues,\n getResponsiveFilterClassnames\n} from '../helpers';\nimport CloseMobileForm from './CloseMobileForm';\nimport ResetDesktopForm from './ResetDesktopForm';\nimport MobileFormToolbar from './MobileFormToolbar';\nimport { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';\n\nconst reducer = (state, action) => {\n const { newValues, type, shouldSearch = true } = action;\n\n switch (type) {\n case 'update':\n return { ...state, ...newValues, shouldSearch };\n case 'resetSearch':\n return { ...state, shouldSearch: false };\n case 'reset':\n return { ...newValues, shouldSearch };\n default:\n throw new Error();\n }\n};\n\nconst SearchFilter = ({\n searchFilterRef,\n data,\n filters,\n hasUrl,\n entity,\n handleSearch,\n name,\n isCollapsedOnResponsive,\n displaySearchFilter,\n setDisplaySearchFilter,\n initialFilterValues,\n groupAfterDesktop,\n groupAfterMobile\n}) => {\n const [isDesktop, setIsDesktop] = useState(true);\n const [pageWidth, setPageWidth] = useState(null);\n const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);\n const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);\n const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);\n\n const handleSubmit = debounce(newValues => {\n const newQuery = buildQuery(newValues, filters);\n handleSearch(newQuery);\n }, 200);\n\n useEffect(\n () => {\n if (window && !pageWidth) {\n setPageWidth(window.innerWidth);\n setIsDesktop(isDeviceDesktop());\n }\n\n const handleResize = ({ target: { innerWidth } }) => {\n setIsDesktop(isDeviceDesktop());\n setPageWidth(innerWidth);\n if (isDesktop) setDisplaySearchFilter(false);\n };\n\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n },\n [isDesktop, pageWidth, setDisplaySearchFilter]\n );\n\n useEffect(\n () => {\n if (filterValues.shouldSearch) {\n handleSubmit(filterValues);\n dispatch({ type: 'resetSearch' });\n }\n },\n [filterValues, handleSubmit]\n );\n\n let isDesktopFormDisplayed = true;\n let isMobileFormDisplayed = false;\n\n if (!isDesktop && isCollapsedOnResponsive) {\n isMobileFormDisplayed = displaySearchFilter;\n isDesktopFormDisplayed = false;\n }\n\n const formClass = classnames({\n 'filter__form filter__form--mobile': isMobileFormDisplayed\n });\n\n const {\n moreFiltersMobileWrapperClass,\n moreFiltersMobileTogglerClass,\n moreFiltersDesktopWrapperClass,\n moreFiltersDesktopTogglerClass\n } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);\n\n const formId = `filter-${name}-form`;\n\n const handleReset = () => {\n const newValues = getInitialFilterValues(data, filters, {});\n\n dispatch({ newValues, type: 'reset' });\n };\n\n const updateFilterValues = (newValues, shouldSubmit) => {\n dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });\n };\n\n const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);\n const shouldSearch = !hasUrl;\n\n return (\n <>\n {isDesktopFormDisplayed || isMobileFormDisplayed ? (\n <form\n ref={searchFilterRef}\n className={formClass}\n data-testid={formId}\n id={formId}\n onSubmit={e => {\n e.preventDefault();\n const newQuery = buildQuery(filterValues, filters);\n handleSearch(newQuery);\n }}>\n {isMobileFormDisplayed && (\n <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />\n )}\n\n <div className=\"filter filter--search-refine\">\n {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}\n\n <div className=\"filter__wrapper filter__wrapper--search-refine\">\n {!shouldGroup && (\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n )}\n\n {shouldGroup && (\n <>\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters.slice(0, groupAfterMobile)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterMobile && (\n <button\n className={moreFiltersMobileTogglerClass}\n type=\"button\"\n onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>\n Filters\n </button>\n )}\n\n <div className={moreFiltersMobileWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>\n <FiltersList\n shouldSearch={shouldSearch && isDeviceDesktop()}\n data={data}\n filters={filters.slice(\n groupAfterMobile,\n groupAfterDesktop ? groupAfterDesktop - 1 : 0\n )}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterDesktop && (\n <button\n className={moreFiltersDesktopTogglerClass}\n type=\"button\"\n onClick={() =>\n setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)\n }>\n More filters\n </button>\n )}\n\n <div className={moreFiltersDesktopWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>\n <FiltersList\n shouldSearch={false}\n data={data}\n filters={filters.slice(groupAfterDesktop)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n </div>\n\n <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </div>\n\n <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </>\n )}\n\n <br />\n\n {isDesktopFormDisplayed && (\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n )}\n </div>\n </div>\n\n {isMobileFormDisplayed && <MobileFormToolbar formId={formId} handleReset={handleReset} />}\n </form>\n ) : (\n <>\n {isCollapsedOnResponsive && (\n <div\n className=\"filter__refine filter__refine--mobile-close\"\n data-testid=\"refine-mobile\">\n <div role=\"button\" onClick={() => setDisplaySearchFilter(true)}>\n {REFINE}\n </div>\n </div>\n )}\n </>\n )}\n </>\n );\n};\n\nSearchFilter.propTypes = {\n data: PropTypes.object.isRequired,\n filters: PropTypes.array.isRequired,\n searchFilterRef: PropTypes.object.isRequired,\n hasUrl: PropTypes.bool.isRequired,\n entity: PropTypes.string.isRequired,\n handleSearch: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n displaySearchFilter: PropTypes.bool.isRequired,\n setDisplaySearchFilter: PropTypes.func.isRequired,\n isCollapsedOnResponsive: PropTypes.bool.isRequired,\n groupAfterDesktop: PropTypes.number.isRequired,\n groupAfterMobile: PropTypes.number.isRequired,\n initialFilterValues: PropTypes.object.isRequired\n};\n\nexport default SearchFilter;\n"],"file":"SearchFilter.js"}
1
+ {"version":3,"sources":["../../../../src/components/SearchFilter/SearchFilter/SearchFilter.js"],"names":["React","useState","useEffect","useReducer","PropTypes","classnames","debounce","FiltersList","isDeviceDesktop","buildQuery","getInitialFilterValues","getResponsiveFilterClassnames","CloseMobileForm","ResetDesktopForm","MobileFormToolbar","SEARCH","REFINE","MORE_FILTERS_CLASSES","reducer","state","action","newValues","type","shouldSearch","Error","SearchFilter","searchFilterRef","data","filters","hasUrl","entity","handleSearch","name","isCollapsedOnResponsive","displaySearchFilter","setDisplaySearchFilter","initialFilterValues","groupAfterDesktop","groupAfterMobile","moreFiltersMobileCollapsed","setMoreFiltersMobileCollapsed","moreFiltersDesktopCollapsed","setMoreFiltersDesktopCollapsed","filterValues","dispatch","handleSubmit","newQuery","formClass","moreFiltersMobileWrapperClass","moreFiltersMobileTogglerClass","moreFiltersDesktopWrapperClass","moreFiltersDesktopTogglerClass","formId","handleReset","updateFilterValues","shouldSubmit","shouldGroup","e","preventDefault","slice","MOBILE_CONTENT","DESKTOP_CONTENT","DESKTOP_BUTTONS","MOBILE_BUTTONS","propTypes","object","isRequired","array","bool","string","func","number"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useReducer } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport debounce from 'lodash.debounce';\nimport FiltersList from './FiltersList';\nimport {\n isDeviceDesktop,\n buildQuery,\n getInitialFilterValues,\n getResponsiveFilterClassnames\n} from '../helpers';\nimport CloseMobileForm from './CloseMobileForm';\nimport ResetDesktopForm from './ResetDesktopForm';\nimport MobileFormToolbar from './MobileFormToolbar';\nimport { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';\n\nconst reducer = (state, action) => {\n const { newValues, type, shouldSearch = true } = action;\n\n switch (type) {\n case 'update':\n return { ...state, ...newValues, shouldSearch };\n case 'resetSearch':\n return { ...state, shouldSearch: false };\n case 'reset':\n return { ...newValues, shouldSearch };\n default:\n throw new Error();\n }\n};\n\nconst SearchFilter = ({\n searchFilterRef,\n data,\n filters,\n hasUrl,\n entity,\n handleSearch,\n name,\n isCollapsedOnResponsive,\n displaySearchFilter,\n setDisplaySearchFilter,\n initialFilterValues,\n groupAfterDesktop,\n groupAfterMobile\n}) => {\n const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);\n const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);\n const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);\n\n const handleSubmit = debounce(newValues => {\n const newQuery = buildQuery(newValues, filters);\n handleSearch(newQuery);\n }, 200);\n\n useEffect(\n () => {\n if (filterValues.shouldSearch) {\n handleSubmit(filterValues);\n dispatch({ type: 'resetSearch' });\n }\n },\n [filterValues, handleSubmit]\n );\n\n const formClass = classnames('filter__form filter__form--initial', {\n 'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,\n 'filter__form--collapsible': isCollapsedOnResponsive\n });\n\n const {\n moreFiltersMobileWrapperClass,\n moreFiltersMobileTogglerClass,\n moreFiltersDesktopWrapperClass,\n moreFiltersDesktopTogglerClass\n } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);\n\n const formId = `filter-${name}-form`;\n\n const handleReset = () => {\n const newValues = getInitialFilterValues(data, filters, {});\n\n dispatch({ newValues, type: 'reset' });\n };\n\n const updateFilterValues = (newValues, shouldSubmit) => {\n dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });\n };\n\n const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);\n const shouldSearch = !hasUrl;\n\n return (\n <>\n <form\n ref={searchFilterRef}\n className={formClass}\n data-testid={formId}\n id={formId}\n onSubmit={e => {\n e.preventDefault();\n const newQuery = buildQuery(filterValues, filters);\n handleSearch(newQuery);\n }}>\n {displaySearchFilter && (\n <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />\n )}\n\n <div className=\"filter filter--search-refine\">\n <ResetDesktopForm handleReset={handleReset} />\n\n <div className=\"filter__wrapper filter__wrapper--search-refine\">\n {!shouldGroup && (\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n )}\n\n {shouldGroup && (\n <>\n <FiltersList\n shouldSearch={shouldSearch}\n data={data}\n filters={filters.slice(0, groupAfterMobile)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterMobile && (\n <button\n className={moreFiltersMobileTogglerClass}\n type=\"button\"\n onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>\n Filters\n </button>\n )}\n\n <div className={moreFiltersMobileWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>\n <FiltersList\n shouldSearch={shouldSearch && isDeviceDesktop()}\n data={data}\n filters={filters.slice(\n groupAfterMobile,\n groupAfterDesktop ? groupAfterDesktop - 1 : 0\n )}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n\n {!!groupAfterDesktop && (\n <button\n className={moreFiltersDesktopTogglerClass}\n type=\"button\"\n onClick={() =>\n setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)\n }>\n More filters\n </button>\n )}\n\n <div className={moreFiltersDesktopWrapperClass}>\n <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>\n <FiltersList\n shouldSearch={false}\n data={data}\n filters={filters.slice(groupAfterDesktop)}\n hasUrl={hasUrl}\n entity={entity}\n filterValues={filterValues}\n updateFilterValues={updateFilterValues}\n />\n </div>\n\n <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </div>\n\n <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>\n <ResetDesktopForm handleReset={handleReset} />\n\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n </div>\n </div>\n </>\n )}\n\n <br />\n\n {!displaySearchFilter && (\n <button className=\"button button--full-width\" type=\"submit\">\n {SEARCH}\n </button>\n )}\n </div>\n </div>\n\n {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}\n </form>\n\n {isCollapsedOnResponsive &&\n !displaySearchFilter && (\n <div className=\"filter__refine filter__refine--mobile-close\" data-testid=\"refine-mobile\">\n <div role=\"button\" onClick={() => setDisplaySearchFilter(true)}>\n {REFINE}\n </div>\n </div>\n )}\n </>\n );\n};\n\nSearchFilter.propTypes = {\n data: PropTypes.object.isRequired,\n filters: PropTypes.array.isRequired,\n searchFilterRef: PropTypes.object.isRequired,\n hasUrl: PropTypes.bool.isRequired,\n entity: PropTypes.string.isRequired,\n handleSearch: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n displaySearchFilter: PropTypes.bool.isRequired,\n setDisplaySearchFilter: PropTypes.func.isRequired,\n isCollapsedOnResponsive: PropTypes.bool.isRequired,\n groupAfterDesktop: PropTypes.number.isRequired,\n groupAfterMobile: PropTypes.number.isRequired,\n initialFilterValues: PropTypes.object.isRequired\n};\n\nexport default SearchFilter;\n"],"file":"SearchFilter.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blaze-cms/react-page-builder",
3
- "version": "0.122.1",
3
+ "version": "0.122.2",
4
4
  "description": "Blaze react page builder",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-es/index.js",
@@ -84,5 +84,5 @@
84
84
  "lib/*",
85
85
  "lib-es/*"
86
86
  ],
87
- "gitHead": "e0f65e11ac8aca235f572dd61e9110bbbd2666a9"
87
+ "gitHead": "902fe9c63427c77430763c9fc6312e6f9e3cac6d"
88
88
  }
package/src/components/SearchFilter/SearchFilter/SearchFilter.js CHANGED
@@ -44,8 +44,6 @@ const SearchFilter = ({
44
44
  groupAfterDesktop,
45
45
  groupAfterMobile
46
46
  }) => {
47
- const [isDesktop, setIsDesktop] = useState(true);
48
- const [pageWidth, setPageWidth] = useState(null);
49
47
  const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
50
48
  const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
51
49
  const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
@@ -55,27 +53,6 @@ const SearchFilter = ({
55
53
  handleSearch(newQuery);
56
54
  }, 200);
57
55
 
58
- useEffect(
59
- () => {
60
- if (window && !pageWidth) {
61
- setPageWidth(window.innerWidth);
62
- setIsDesktop(isDeviceDesktop());
63
- }
64
-
65
- const handleResize = ({ target: { innerWidth } }) => {
66
- setIsDesktop(isDeviceDesktop());
67
- setPageWidth(innerWidth);
68
- if (isDesktop) setDisplaySearchFilter(false);
69
- };
70
-
71
- window.addEventListener('resize', handleResize);
72
- return () => {
73
- window.removeEventListener('resize', handleResize);
74
- };
75
- },
76
- [isDesktop, pageWidth, setDisplaySearchFilter]
77
- );
78
-
79
56
  useEffect(
80
57
  () => {
81
58
  if (filterValues.shouldSearch) {
@@ -86,16 +63,9 @@ const SearchFilter = ({
86
63
  [filterValues, handleSubmit]
87
64
  );
88
65
 
89
- let isDesktopFormDisplayed = true;
90
- let isMobileFormDisplayed = false;
91
-
92
- if (!isDesktop && isCollapsedOnResponsive) {
93
- isMobileFormDisplayed = displaySearchFilter;
94
- isDesktopFormDisplayed = false;
95
- }
96
-
97
- const formClass = classnames({
98
- 'filter__form filter__form--mobile': isMobileFormDisplayed
66
+ const formClass = classnames('filter__form filter__form--initial', {
67
+ 'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
68
+ 'filter__form--collapsible': isCollapsedOnResponsive
99
69
  });
100
70
 
101
71
  const {
@@ -122,143 +92,138 @@ const SearchFilter = ({
122
92
 
123
93
  return (
124
94
  <>
125
- {isDesktopFormDisplayed || isMobileFormDisplayed ? (
126
- <form
127
- ref={searchFilterRef}
128
- className={formClass}
129
- data-testid={formId}
130
- id={formId}
131
- onSubmit={e => {
132
- e.preventDefault();
133
- const newQuery = buildQuery(filterValues, filters);
134
- handleSearch(newQuery);
135
- }}>
136
- {isMobileFormDisplayed && (
137
- <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
138
- )}
139
-
140
- <div className="filter filter--search-refine">
141
- {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
142
-
143
- <div className="filter__wrapper filter__wrapper--search-refine">
144
- {!shouldGroup && (
95
+ <form
96
+ ref={searchFilterRef}
97
+ className={formClass}
98
+ data-testid={formId}
99
+ id={formId}
100
+ onSubmit={e => {
101
+ e.preventDefault();
102
+ const newQuery = buildQuery(filterValues, filters);
103
+ handleSearch(newQuery);
104
+ }}>
105
+ {displaySearchFilter && (
106
+ <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
107
+ )}
108
+
109
+ <div className="filter filter--search-refine">
110
+ <ResetDesktopForm handleReset={handleReset} />
111
+
112
+ <div className="filter__wrapper filter__wrapper--search-refine">
113
+ {!shouldGroup && (
114
+ <FiltersList
115
+ shouldSearch={shouldSearch}
116
+ data={data}
117
+ filters={filters}
118
+ hasUrl={hasUrl}
119
+ entity={entity}
120
+ filterValues={filterValues}
121
+ updateFilterValues={updateFilterValues}
122
+ />
123
+ )}
124
+
125
+ {shouldGroup && (
126
+ <>
145
127
  <FiltersList
146
128
  shouldSearch={shouldSearch}
147
129
  data={data}
148
- filters={filters}
130
+ filters={filters.slice(0, groupAfterMobile)}
149
131
  hasUrl={hasUrl}
150
132
  entity={entity}
151
133
  filterValues={filterValues}
152
134
  updateFilterValues={updateFilterValues}
153
135
  />
154
- )}
155
-
156
- {shouldGroup && (
157
- <>
158
- <FiltersList
159
- shouldSearch={shouldSearch}
160
- data={data}
161
- filters={filters.slice(0, groupAfterMobile)}
162
- hasUrl={hasUrl}
163
- entity={entity}
164
- filterValues={filterValues}
165
- updateFilterValues={updateFilterValues}
166
- />
167
136
 
168
- {!!groupAfterMobile && (
169
- <button
170
- className={moreFiltersMobileTogglerClass}
171
- type="button"
172
- onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
173
- Filters
174
- </button>
175
- )}
176
-
177
- <div className={moreFiltersMobileWrapperClass}>
178
- <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
179
- <FiltersList
180
- shouldSearch={shouldSearch && isDeviceDesktop()}
181
- data={data}
182
- filters={filters.slice(
183
- groupAfterMobile,
184
- groupAfterDesktop ? groupAfterDesktop - 1 : 0
185
- )}
186
- hasUrl={hasUrl}
187
- entity={entity}
188
- filterValues={filterValues}
189
- updateFilterValues={updateFilterValues}
190
- />
191
-
192
- {!!groupAfterDesktop && (
193
- <button
194
- className={moreFiltersDesktopTogglerClass}
195
- type="button"
196
- onClick={() =>
197
- setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
198
- }>
199
- More filters
200
- </button>
137
+ {!!groupAfterMobile && (
138
+ <button
139
+ className={moreFiltersMobileTogglerClass}
140
+ type="button"
141
+ onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
142
+ Filters
143
+ </button>
144
+ )}
145
+
146
+ <div className={moreFiltersMobileWrapperClass}>
147
+ <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
148
+ <FiltersList
149
+ shouldSearch={shouldSearch && isDeviceDesktop()}
150
+ data={data}
151
+ filters={filters.slice(
152
+ groupAfterMobile,
153
+ groupAfterDesktop ? groupAfterDesktop - 1 : 0
201
154
  )}
155
+ hasUrl={hasUrl}
156
+ entity={entity}
157
+ filterValues={filterValues}
158
+ updateFilterValues={updateFilterValues}
159
+ />
160
+
161
+ {!!groupAfterDesktop && (
162
+ <button
163
+ className={moreFiltersDesktopTogglerClass}
164
+ type="button"
165
+ onClick={() =>
166
+ setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
167
+ }>
168
+ More filters
169
+ </button>
170
+ )}
171
+
172
+ <div className={moreFiltersDesktopWrapperClass}>
173
+ <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
174
+ <FiltersList
175
+ shouldSearch={false}
176
+ data={data}
177
+ filters={filters.slice(groupAfterDesktop)}
178
+ hasUrl={hasUrl}
179
+ entity={entity}
180
+ filterValues={filterValues}
181
+ updateFilterValues={updateFilterValues}
182
+ />
183
+ </div>
202
184
 
203
- <div className={moreFiltersDesktopWrapperClass}>
204
- <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
205
- <FiltersList
206
- shouldSearch={false}
207
- data={data}
208
- filters={filters.slice(groupAfterDesktop)}
209
- hasUrl={hasUrl}
210
- entity={entity}
211
- filterValues={filterValues}
212
- updateFilterValues={updateFilterValues}
213
- />
214
- </div>
215
-
216
- <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
217
- <ResetDesktopForm handleReset={handleReset} />
185
+ <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
186
+ <ResetDesktopForm handleReset={handleReset} />
218
187
 
219
- <button className="button button--full-width" type="submit">
220
- {SEARCH}
221
- </button>
222
- </div>
188
+ <button className="button button--full-width" type="submit">
189
+ {SEARCH}
190
+ </button>
223
191
  </div>
224
192
  </div>
193
+ </div>
225
194
 
226
- <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
227
- <ResetDesktopForm handleReset={handleReset} />
195
+ <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
196
+ <ResetDesktopForm handleReset={handleReset} />
228
197
 
229
- <button className="button button--full-width" type="submit">
230
- {SEARCH}
231
- </button>
232
- </div>
198
+ <button className="button button--full-width" type="submit">
199
+ {SEARCH}
200
+ </button>
233
201
  </div>
234
- </>
235
- )}
202
+ </div>
203
+ </>
204
+ )}
236
205
 
237
- <br />
206
+ <br />
238
207
 
239
- {isDesktopFormDisplayed && (
240
- <button className="button button--full-width" type="submit">
241
- {SEARCH}
242
- </button>
243
- )}
244
- </div>
208
+ {!displaySearchFilter && (
209
+ <button className="button button--full-width" type="submit">
210
+ {SEARCH}
211
+ </button>
212
+ )}
245
213
  </div>
214
+ </div>
215
+
216
+ {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
217
+ </form>
246
218
 
247
- {isMobileFormDisplayed && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
248
- </form>
249
- ) : (
250
- <>
251
- {isCollapsedOnResponsive && (
252
- <div
253
- className="filter__refine filter__refine--mobile-close"
254
- data-testid="refine-mobile">
255
- <div role="button" onClick={() => setDisplaySearchFilter(true)}>
256
- {REFINE}
257
- </div>
219
+ {isCollapsedOnResponsive &&
220
+ !displaySearchFilter && (
221
+ <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
222
+ <div role="button" onClick={() => setDisplaySearchFilter(true)}>
223
+ {REFINE}
258
224
  </div>
259
- )}
260
- </>
261
- )}
225
+ </div>
226
+ )}
262
227
  </>
263
228
  );
264
229
  };
package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
- import { render, screen, fireEvent } from '@testing-library/react';
2
+ import { render, screen } from '@testing-library/react';
3
3
  import '@testing-library/jest-dom';
4
4
  import SearchFilter from '../../../../../../src/components/SearchFilter/SearchFilter';
5
- import { TABLET_WIDTH } from '../../../../../../src/components/SearchFilter/constants';
6
5
 
7
6
  // TODO DELETE WHEN UTIL WILL BE MERGED & USE IMPORT COMMENTED ABOVE
8
7
  const renderComponent = (Component, props) => {
@@ -28,118 +27,97 @@ const mockedProps = {
28
27
  displaySearchFilter: false
29
28
  };
30
29
 
31
- const customGlobal = global;
32
- const defaultWidth = global.innerWidth;
33
-
34
- afterAll(() => {
35
- customGlobal.innerWidth = defaultWidth;
36
- });
37
-
38
30
  describe('SearchFilter component', () => {
39
31
  it('should be defined', () => {
40
32
  expect(SearchFilter).toBeDefined();
41
33
  });
42
34
 
43
- describe('when the device is mobile', () => {
44
- beforeEach(() => {
45
- customGlobal.innerWidth = TABLET_WIDTH;
46
- fireEvent(customGlobal, new Event('resize'));
35
+ describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
36
+ const specificMockedProps = {
37
+ ...mockedProps,
38
+ isCollapsedOnResponsive: true,
39
+ displaySearchFilter: false
40
+ };
41
+
42
+ it('should NOT render form', () => {
43
+ renderComponent(SearchFilter, specificMockedProps);
44
+ expect(screen.queryByRole('form')).not.toBeInTheDocument();
47
45
  });
48
46
 
49
- describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
50
- const specificMockedProps = {
51
- ...mockedProps,
52
- isCollapsedOnResponsive: true,
53
- displaySearchFilter: false
54
- };
55
-
56
- it('should NOT render form', () => {
57
- renderComponent(SearchFilter, specificMockedProps);
58
- expect(screen.queryByRole('form')).not.toBeInTheDocument();
59
- });
60
-
61
- it('should render the mobile refine button', () => {
62
- renderComponent(SearchFilter, specificMockedProps);
63
- expect(screen.queryByTestId('refine-mobile')).toBeInTheDocument();
64
- });
47
+ it('should render the mobile refine button', () => {
48
+ renderComponent(SearchFilter, specificMockedProps);
49
+ expect(screen.queryByTestId('refine-mobile')).toBeInTheDocument();
65
50
  });
51
+ });
66
52
 
67
- describe('when isCollapsedOnResponsive = false, displaySearchFilter = true', () => {
68
- const specificMockedProps = {
69
- ...mockedProps,
70
- isCollapsedOnResponsive: false,
71
- displaySearchFilter: true
72
- };
73
-
74
- it('should NOT render form', () => {
75
- renderComponent(SearchFilter, specificMockedProps);
76
- expect(screen.queryByRole('form')).not.toBeInTheDocument();
77
- });
53
+ describe('when isCollapsedOnResponsive = false, displaySearchFilter = true', () => {
54
+ const specificMockedProps = {
55
+ ...mockedProps,
56
+ isCollapsedOnResponsive: false,
57
+ displaySearchFilter: true
58
+ };
59
+
60
+ it('should NOT render form', () => {
61
+ renderComponent(SearchFilter, specificMockedProps);
62
+ expect(screen.queryByRole('form')).not.toBeInTheDocument();
78
63
  });
64
+ });
65
+
66
+ describe('when isCollapsedOnResponsive = false, displaySearchFilter = false', () => {
67
+ const specificMockedProps = {
68
+ ...mockedProps,
69
+ isCollapsedOnResponsive: false,
70
+ displaySearchFilter: false
71
+ };
79
72
 
80
- describe('when isCollapsedOnResponsive = false, displaySearchFilter = false', () => {
81
- const specificMockedProps = {
82
- ...mockedProps,
83
- isCollapsedOnResponsive: false,
84
- displaySearchFilter: false
85
- };
86
-
87
- it('should render without throwing error and match snapshot', () => {
88
- const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
89
- expect(asFragment()).toMatchSnapshot();
90
- });
91
-
92
- it('should render form', () => {
93
- renderComponent(SearchFilter, specificMockedProps);
94
-
95
- const formId = `filter-${specificMockedProps.name}-form`;
96
- const form = screen.getByTestId(formId);
97
- expect(form).toBeInTheDocument();
98
- });
73
+ it('should render without throwing error and match snapshot', () => {
74
+ const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
75
+ expect(asFragment()).toMatchSnapshot();
99
76
  });
100
77
 
101
- describe('when isCollapsedOnResponsive = true, displaySearchFilter = true', () => {
102
- const specificMockedProps = {
103
- ...mockedProps,
104
- isCollapsedOnResponsive: true,
105
- displaySearchFilter: true
106
- };
107
-
108
- it('should render without throwing error and match snapshot', () => {
109
- const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
110
- expect(asFragment()).toMatchSnapshot();
111
- });
112
-
113
- it('should render form', () => {
114
- renderComponent(SearchFilter, specificMockedProps);
115
-
116
- const formId = `filter-${specificMockedProps.name}-form`;
117
- const form = screen.getByTestId(formId);
118
- expect(form).toBeInTheDocument();
119
- });
78
+ it('should render form', () => {
79
+ renderComponent(SearchFilter, specificMockedProps);
80
+
81
+ const formId = `filter-${specificMockedProps.name}-form`;
82
+ const form = screen.getByTestId(formId);
83
+ expect(form).toBeInTheDocument();
120
84
  });
121
85
  });
122
86
 
123
- describe('when the device is desktop', () => {
124
- beforeEach(() => {
125
- customGlobal.innerWidth = TABLET_WIDTH + 10;
126
- fireEvent(customGlobal, new Event('resize'));
127
- });
87
+ describe('when isCollapsedOnResponsive = true, displaySearchFilter = true', () => {
88
+ const specificMockedProps = {
89
+ ...mockedProps,
90
+ isCollapsedOnResponsive: true,
91
+ displaySearchFilter: true
92
+ };
128
93
 
129
94
  it('should render without throwing error and match snapshot', () => {
130
- const { asFragment } = renderComponent(SearchFilter, mockedProps);
95
+ const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
131
96
  expect(asFragment()).toMatchSnapshot();
132
97
  });
133
98
 
134
99
  it('should render form', () => {
135
- renderComponent(SearchFilter, mockedProps);
100
+ renderComponent(SearchFilter, specificMockedProps);
136
101
 
137
- const formId = `filter-${mockedProps.name}-form`;
102
+ const formId = `filter-${specificMockedProps.name}-form`;
138
103
  const form = screen.getByTestId(formId);
139
104
  expect(form).toBeInTheDocument();
140
105
  });
141
106
  });
142
107
 
108
+ it('should render without throwing error and match snapshot', () => {
109
+ const { asFragment } = renderComponent(SearchFilter, mockedProps);
110
+ expect(asFragment()).toMatchSnapshot();
111
+ });
112
+
113
+ it('should render form', () => {
114
+ renderComponent(SearchFilter, mockedProps);
115
+
116
+ const formId = `filter-${mockedProps.name}-form`;
117
+ const form = screen.getByTestId(formId);
118
+ expect(form).toBeInTheDocument();
119
+ });
120
+
143
121
  describe('when groupAfterMobile > 0 and groupAfterDesktop = 0', () => {
144
122
  const specificMockedProps = {
145
123
  ...mockedProps,
package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap CHANGED
@@ -1,9 +1,77 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`SearchFilter component should render without throwing error and match snapshot 1`] = `
4
+ <DocumentFragment>
5
+ <form
6
+ class="filter__form filter__form--initial filter__form--collapsible"
7
+ data-testid="filter-test-form"
8
+ id="filter-test-form"
9
+ >
10
+ <div
11
+ class="filter filter--search-refine"
12
+ >
13
+ <div
14
+ class="filter__reset"
15
+ >
16
+ <button
17
+ class="icon-button icon-button--reset"
18
+ data-testid="reset-icon"
19
+ title="reset--button"
20
+ type="button"
21
+ >
22
+ <i>
23
+ <svg
24
+ fill="currentColor"
25
+ height="1em"
26
+ stroke="currentColor"
27
+ stroke-width="0"
28
+ viewBox="0 0 512 512"
29
+ width="1em"
30
+ xmlns="http://www.w3.org/2000/svg"
31
+ >
32
+ <path
33
+ d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
34
+ />
35
+ </svg>
36
+ </i>
37
+ </button>
38
+ <div
39
+ data-testid="reset-button"
40
+ role="button"
41
+ >
42
+ Reset all filters
43
+ </div>
44
+ </div>
45
+ <div
46
+ class="filter__wrapper filter__wrapper--search-refine"
47
+ >
48
+ <br />
49
+ <button
50
+ class="button button--full-width"
51
+ type="submit"
52
+ >
53
+ Search
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </form>
58
+ <div
59
+ class="filter__refine filter__refine--mobile-close"
60
+ data-testid="refine-mobile"
61
+ >
62
+ <div
63
+ role="button"
64
+ >
65
+ Refine Search
66
+ </div>
67
+ </div>
68
+ </DocumentFragment>
69
+ `;
70
+
3
71
  exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
4
72
  <DocumentFragment>
5
73
  <form
6
- class=""
74
+ class="filter__form filter__form--initial filter__form--collapsible"
7
75
  data-testid="filter-test-form"
8
76
  id="filter-test-form"
9
77
  >
@@ -160,13 +228,23 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
160
228
  </div>
161
229
  </div>
162
230
  </form>
231
+ <div
232
+ class="filter__refine filter__refine--mobile-close"
233
+ data-testid="refine-mobile"
234
+ >
235
+ <div
236
+ role="button"
237
+ >
238
+ Refine Search
239
+ </div>
240
+ </div>
163
241
  </DocumentFragment>
164
242
  `;
165
243
 
166
244
  exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop = 0 should render without throwing error and match snapshot 1`] = `
167
245
  <DocumentFragment>
168
246
  <form
169
- class=""
247
+ class="filter__form filter__form--initial filter__form--collapsible"
170
248
  data-testid="filter-test-form"
171
249
  id="filter-test-form"
172
250
  >
@@ -323,13 +401,23 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
323
401
  </div>
324
402
  </div>
325
403
  </form>
404
+ <div
405
+ class="filter__refine filter__refine--mobile-close"
406
+ data-testid="refine-mobile"
407
+ >
408
+ <div
409
+ role="button"
410
+ >
411
+ Refine Search
412
+ </div>
413
+ </div>
326
414
  </DocumentFragment>
327
415
  `;
328
416
 
329
417
  exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
330
418
  <DocumentFragment>
331
419
  <form
332
- class=""
420
+ class="filter__form filter__form--initial filter__form--collapsible"
333
421
  data-testid="filter-test-form"
334
422
  id="filter-test-form"
335
423
  >
@@ -492,71 +580,23 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
492
580
  </div>
493
581
  </div>
494
582
  </form>
495
- </DocumentFragment>
496
- `;
497
-
498
- exports[`SearchFilter component when the device is desktop should render without throwing error and match snapshot 1`] = `
499
- <DocumentFragment>
500
- <form
501
- class=""
502
- data-testid="filter-test-form"
503
- id="filter-test-form"
583
+ <div
584
+ class="filter__refine filter__refine--mobile-close"
585
+ data-testid="refine-mobile"
504
586
  >
505
587
  <div
506
- class="filter filter--search-refine"
588
+ role="button"
507
589
  >
508
- <div
509
- class="filter__reset"
510
- >
511
- <button
512
- class="icon-button icon-button--reset"
513
- data-testid="reset-icon"
514
- title="reset--button"
515
- type="button"
516
- >
517
- <i>
518
- <svg
519
- fill="currentColor"
520
- height="1em"
521
- stroke="currentColor"
522
- stroke-width="0"
523
- viewBox="0 0 512 512"
524
- width="1em"
525
- xmlns="http://www.w3.org/2000/svg"
526
- >
527
- <path
528
- d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
529
- />
530
- </svg>
531
- </i>
532
- </button>
533
- <div
534
- data-testid="reset-button"
535
- role="button"
536
- >
537
- Reset all filters
538
- </div>
539
- </div>
540
- <div
541
- class="filter__wrapper filter__wrapper--search-refine"
542
- >
543
- <br />
544
- <button
545
- class="button button--full-width"
546
- type="submit"
547
- >
548
- Search
549
- </button>
550
- </div>
590
+ Refine Search
551
591
  </div>
552
- </form>
592
+ </div>
553
593
  </DocumentFragment>
554
594
  `;
555
595
 
556
- exports[`SearchFilter component when the device is mobile when isCollapsedOnResponsive = false, displaySearchFilter = false should render without throwing error and match snapshot 1`] = `
596
+ exports[`SearchFilter component when isCollapsedOnResponsive = false, displaySearchFilter = false should render without throwing error and match snapshot 1`] = `
557
597
  <DocumentFragment>
558
598
  <form
559
- class=""
599
+ class="filter__form filter__form--initial"
560
600
  data-testid="filter-test-form"
561
601
  id="filter-test-form"
562
602
  >
@@ -611,10 +651,10 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
611
651
  </DocumentFragment>
612
652
  `;
613
653
 
614
- exports[`SearchFilter component when the device is mobile when isCollapsedOnResponsive = true, displaySearchFilter = true should render without throwing error and match snapshot 1`] = `
654
+ exports[`SearchFilter component when isCollapsedOnResponsive = true, displaySearchFilter = true should render without throwing error and match snapshot 1`] = `
615
655
  <DocumentFragment>
616
656
  <form
617
- class="filter__form filter__form--mobile"
657
+ class="filter__form filter__form--initial filter__form--mobile filter__form--collapsible"
618
658
  data-testid="filter-test-form"
619
659
  id="filter-test-form"
620
660
  >
@@ -649,6 +689,38 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
649
689
  <div
650
690
  class="filter filter--search-refine"
651
691
  >
692
+ <div
693
+ class="filter__reset"
694
+ >
695
+ <button
696
+ class="icon-button icon-button--reset"
697
+ data-testid="reset-icon"
698
+ title="reset--button"
699
+ type="button"
700
+ >
701
+ <i>
702
+ <svg
703
+ fill="currentColor"
704
+ height="1em"
705
+ stroke="currentColor"
706
+ stroke-width="0"
707
+ viewBox="0 0 512 512"
708
+ width="1em"
709
+ xmlns="http://www.w3.org/2000/svg"
710
+ >
711
+ <path
712
+ d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
713
+ />
714
+ </svg>
715
+ </i>
716
+ </button>
717
+ <div
718
+ data-testid="reset-button"
719
+ role="button"
720
+ >
721
+ Reset all filters
722
+ </div>
723
+ </div>
652
724
  <div
653
725
  class="filter__wrapper filter__wrapper--search-refine"
654
726
  >