@blaze-cms/react-page-builder 0.113.0-alpha.7 → 0.114.0-alpha.0

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, buildQuery, getInitialFilterValues } from '../helpers';
+import {
+  isDeviceDesktop,
+  buildQuery,
+  getInitialFilterValues,
+  getResponsiveFilterClassnames
+} from '../helpers';
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
-import { SEARCH, REFINE } from '../constants';
+import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const reducer = (state, action) => {
   const { newValues, type, shouldSearch = true } = action;
@@ -36,13 +41,20 @@ const SearchFilter = ({
   displaySearchFilter,
   setDisplaySearchFilter,
   initialFilterValues,
-  groupAfter
+  groupAfterDesktop,
+  groupAfterMobile
 }) => {
   const [isDesktop, setIsDesktop] = useState(true);
   const [pageWidth, setPageWidth] = useState(null);
-  const [moreFiltersCollapsed, setMoreFiltersCollapsed] = useState(true);
+  const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
+  const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
+  const handleSubmit = debounce(newValues => {
+    const newQuery = buildQuery(newValues, filters);
+    handleSearch(newQuery);
+  }, 200);
+
   useEffect(
     () => {
       if (window && !pageWidth) {
@@ -86,13 +98,12 @@ const SearchFilter = ({
     'filter__form filter__form--mobile': isMobileFormDisplayed
   });
 
-  const moreFiltersWrapperClass = classnames('filter__more-filters-wrapper', {
-    'filter__more-filters-wrapper--open': !moreFiltersCollapsed
-  });
-
-  const moreFiltersTogglerClass = classnames('filter__more-filters-toggler', {
-    'filter__more-filters-toggler--open': !moreFiltersCollapsed
-  });
+  const {
+    moreFiltersMobileWrapperClass,
+    moreFiltersMobileTogglerClass,
+    moreFiltersDesktopWrapperClass,
+    moreFiltersDesktopTogglerClass
+  } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);
 
   const formId = `filter-${name}-form`;
 
@@ -106,10 +117,7 @@ const SearchFilter = ({
     dispatch({ newValues, shouldSearch, type: 'update' });
   };
 
-  const handleSubmit = debounce(newValues => {
-    const newQuery = buildQuery(newValues, filters);
-    handleSearch(newQuery);
-  }, 200);
+  const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
 
   return (
     <>
@@ -132,7 +140,7 @@ const SearchFilter = ({
             {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
 
             <div className="filter__wrapper filter__wrapper--search-refine">
-              {!groupAfter && (
+              {!shouldGroup && (
                 <FiltersList
                   data={data}
                   filters={filters}
@@ -143,37 +151,74 @@ const SearchFilter = ({
                 />
               )}
 
-              {!!groupAfter && (
+              {shouldGroup && (
                 <>
                   <FiltersList
                     data={data}
-                    filters={filters.slice(0, groupAfter)}
+                    filters={filters.slice(0, groupAfterMobile)}
                     hasUrl={hasUrl}
                     entity={entity}
                     filterValues={filterValues}
                     updateFilterValues={updateFilterValues}
                   />
 
-                  <button
-                    className={moreFiltersTogglerClass}
-                    type="button"
-                    onClick={() => setMoreFiltersCollapsed(!moreFiltersCollapsed)}>
-                    More filters
-                  </button>
+                  {!!groupAfterMobile && (
+                    <button
+                      className={moreFiltersMobileTogglerClass}
+                      type="button"
+                      onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
+                      Filters
+                    </button>
+                  )}
 
-                  <div className={moreFiltersWrapperClass}>
-                    <div className="filter__more-filters-content">
+                  <div className={moreFiltersMobileWrapperClass}>
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
                       <FiltersList
                         data={data}
-                        filters={filters.slice(groupAfter)}
+                        filters={filters.slice(
+                          groupAfterMobile,
+                          groupAfterDesktop ? groupAfterDesktop - 1 : 0
+                        )}
                         hasUrl={hasUrl}
                         entity={entity}
                         filterValues={filterValues}
                         updateFilterValues={updateFilterValues}
                       />
+
+                      {!!groupAfterDesktop && (
+                        <button
+                          className={moreFiltersDesktopTogglerClass}
+                          type="button"
+                          onClick={() =>
+                            setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
+                          }>
+                          More filters
+                        </button>
+                      )}
+
+                      <div className={moreFiltersDesktopWrapperClass}>
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
+                          <FiltersList
+                            data={data}
+                            filters={filters.slice(groupAfterDesktop)}
+                            hasUrl={hasUrl}
+                            entity={entity}
+                            filterValues={filterValues}
+                            updateFilterValues={updateFilterValues}
+                          />
+                        </div>
+
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
+                          <ResetDesktopForm handleReset={handleReset} />
+
+                          <button className="button button--full-width" type="submit">
+                            {SEARCH}
+                          </button>
+                        </div>
+                      </div>
                     </div>
 
-                    <div className="filter__more-filters-buttons">
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
                       <ResetDesktopForm handleReset={handleReset} />
 
                       <button className="button button--full-width" type="submit">
@@ -224,7 +269,8 @@ SearchFilter.propTypes = {
   displaySearchFilter: PropTypes.bool.isRequired,
   setDisplaySearchFilter: PropTypes.func.isRequired,
   isCollapsedOnResponsive: PropTypes.bool.isRequired,
-  groupAfter: PropTypes.number.isRequired,
+  groupAfterDesktop: PropTypes.number.isRequired,
+  groupAfterMobile: PropTypes.number.isRequired,
   initialFilterValues: PropTypes.object.isRequired
 };
 

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -23,7 +23,8 @@ const SearchFilterContainer = ({
   filters,
   name,
   isCollapsedOnResponsive,
-  groupAfter
+  groupAfterMobile,
+  groupAfterDesktop
 }) => {
   const router = useRouter();
   const searchFilterRef = useRef(null);
@@ -61,11 +62,14 @@ const SearchFilterContainer = ({
     variables: { rawQueryStringified, limit: 0 }, // we only want aggs so limit=0 for no search results
     skip: !rawQueryStringified
   });
-  if (loading || !data) return '';
+
+  if (loading) return null;
   if (error) return error.message;
-  const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } = data;
-  const shouldDisplayForm = !!filters.length && !loading;
-  if (!shouldDisplayForm || !filterData) return null;
+  if (!filters.length) return null;
+
+  const { searchPublishedContent: { rawResults: { aggregations: filterData = {} } = {} } = {} } =
+    data || {};
+
   const initialFilterValues = getInitialFilterValues(filterData, filters, query);
 
   const handleSearch = newQuery => {
@@ -110,7 +114,8 @@ const SearchFilterContainer = ({
       isCollapsedOnResponsive={isCollapsedOnResponsive}
       displaySearchFilter={displaySearchFilter}
       setDisplaySearchFilter={setDisplaySearchFilter}
-      groupAfter={groupAfter}
+      groupAfterMobile={groupAfterMobile}
+      groupAfterDesktop={groupAfterDesktop}
     />
   );
 };
@@ -121,7 +126,8 @@ SearchFilterContainer.propTypes = {
   filters: PropTypes.array,
   name: PropTypes.string.isRequired,
   isCollapsedOnResponsive: PropTypes.bool,
-  groupAfter: PropTypes.number
+  groupAfterMobile: PropTypes.number,
+  groupAfterDesktop: PropTypes.number
 };
 
 SearchFilterContainer.defaultProps = {
@@ -129,7 +135,8 @@ SearchFilterContainer.defaultProps = {
   filters: [],
   entity: '',
   isCollapsedOnResponsive: true,
-  groupAfter: 0
+  groupAfterMobile: 0,
+  groupAfterDesktop: 0
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/constants.js

@@ -24,6 +24,18 @@ const SEARCH = 'Search';
 const REFINE = `Refine Search`;
 const MOBILE_REFINEMENT_TITLE = 'Search refinement';
 
+const MORE_FILTERS_CLASSES_BASE = 'filter__more-filters';
+const MORE_FILTERS_CLASSES = {
+  MOBILE_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-mobile-wrapper`,
+  MOBILE_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-mobile-content`,
+  MOBILE_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-mobile-toggler`,
+  MOBILE_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-mobile-buttons`,
+  DESKTOP_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-desktop-wrapper`,
+  DESKTOP_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-desktop-content`,
+  DESKTOP_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-desktop-toggler`,
+  DESKTOP_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-desktop-buttons`
+};
+
 export {
   CHECKBOX,
   SELECT,
@@ -49,5 +61,6 @@ export {
   RESET,
   SEARCH,
   REFINE,
-  MOBILE_REFINEMENT_TITLE
+  MOBILE_REFINEMENT_TITLE,
+  MORE_FILTERS_CLASSES
 };

package/src/components/SearchFilter/helpers/get-responsive-filter-classnames.js

@@ -0,0 +1,22 @@
+import classnames from 'classnames';
+import { MORE_FILTERS_CLASSES } from '../constants';
+
+const getResponsiveFilterClassnames = (
+  moreFiltersDesktopCollapsed,
+  moreFiltersMobileCollapsed
+) => ({
+  moreFiltersMobileWrapperClass: classnames(MORE_FILTERS_CLASSES.MOBILE_WRAPPER, {
+    [`${MORE_FILTERS_CLASSES.MOBILE_WRAPPER}--open`]: !moreFiltersMobileCollapsed
+  }),
+  moreFiltersMobileTogglerClass: classnames(MORE_FILTERS_CLASSES.MOBILE_TOGGLER, {
+    [`${MORE_FILTERS_CLASSES.MOBILE_TOGGLER}--open`]: !moreFiltersMobileCollapsed
+  }),
+  moreFiltersDesktopWrapperClass: classnames(MORE_FILTERS_CLASSES.DESKTOP_WRAPPER, {
+    [`${MORE_FILTERS_CLASSES.DESKTOP_WRAPPER}--open`]: !moreFiltersDesktopCollapsed
+  }),
+  moreFiltersDesktopTogglerClass: classnames(MORE_FILTERS_CLASSES.DESKTOP_TOGGLER, {
+    [`${MORE_FILTERS_CLASSES.DESKTOP_TOGGLER}--open`]: !moreFiltersDesktopCollapsed
+  })
+});
+
+export default getResponsiveFilterClassnames;

package/src/components/SearchFilter/helpers/index.js

@@ -2,6 +2,7 @@ import buildNewQuery from './build-new-query';
 import buildRawQueryStringified from './build-raw-query-stringified';
 import { decodeValue, encodeValue } from './decode-encode';
 import checkIfRangeUpdated from './check-if-range-updated';
+import getResponsiveFilterClassnames from './get-responsive-filter-classnames';
 import getDisplayValue from './get-display-value';
 import calculateStep from './calculate-step';
 import calculateMinMax from './calculate-min-max';
@@ -20,6 +21,7 @@ export {
   decodeValue,
   encodeValue,
   checkIfRangeUpdated,
+  getResponsiveFilterClassnames,
   getDisplayValue,
   calculateStep,
   calculateMinMax,

package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js

@@ -22,7 +22,8 @@ const mockedProps = {
   handleSearch: jest.fn(),
   resetFilters: jest.fn(),
   name: 'test',
-  groupAfter: 0,
+  groupAfterMobile: 0,
+  groupAfterDesktop: 0,
   isCollapsedOnResponsive: true,
   displaySearchFilter: false
 };
@@ -139,10 +140,35 @@ describe('SearchFilter component', () => {
     });
   });
 
-  describe('when groupAfter > 0', () => {
+  describe('when groupAfterMobile > 0 and groupAfterDesktop = 0', () => {
     const specificMockedProps = {
       ...mockedProps,
-      groupAfter: 1
+      groupAfterMobile: 1
+    };
+
+    it('should render without throwing error and match snapshot', () => {
+      const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  describe('when groupAfterMobile = 0 and groupAfterDesktop > 0', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      groupAfterDesktop: 1
+    };
+
+    it('should render without throwing error and match snapshot', () => {
+      const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  describe('when groupAfterMobile > 0 and groupAfterDesktop > 0', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      groupAfterMobile: 1,
+      groupAfterDesktop: 1
     };
 
     it('should render without throwing error and match snapshot', () => {

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchFilter component when groupAfter > 0 should render without throwing error and match snapshot 1`] = `
+exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop = 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
     class=""
@@ -34,19 +34,317 @@ exports[`SearchFilter component when groupAfter > 0 should render without throwi
         class="filter__wrapper filter__wrapper--search-refine"
       >
         <button
-          class="filter__more-filters-toggler"
+          class="filter__more-filters-mobile-toggler"
           type="button"
         >
-          More filters
+          Filters
         </button>
         <div
-          class="filter__more-filters-wrapper"
+          class="filter__more-filters-mobile-wrapper"
         >
           <div
-            class="filter__more-filters-content"
+            class="filter__more-filters-mobile-content"
+          >
+            <div
+              class="filter__more-filters-desktop-wrapper"
+            >
+              <div
+                class="filter__more-filters-desktop-content"
+              />
+              <div
+                class="filter__more-filters-desktop-buttons"
+              >
+                <div
+                  class="filter__reset"
+                >
+                  <button
+                    class="icon-button icon-button--reset"
+                    data-testid="reset-icon"
+                    title="reset--button"
+                    type="button"
+                  >
+                    <i
+                      class="fas fa-redo-alt"
+                    />
+                  </button>
+                  <div
+                    data-testid="reset-button"
+                    role="button"
+                  >
+                    Reset all filters
+                  </div>
+                </div>
+                <button
+                  class="button button--full-width"
+                  type="submit"
+                >
+                  Search
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="filter__more-filters-mobile-buttons"
+          >
+            <div
+              class="filter__reset"
+            >
+              <button
+                class="icon-button icon-button--reset"
+                data-testid="reset-icon"
+                title="reset--button"
+                type="button"
+              >
+                <i
+                  class="fas fa-redo-alt"
+                />
+              </button>
+              <div
+                data-testid="reset-button"
+                role="button"
+              >
+                Reset all filters
+              </div>
+            </div>
+            <button
+              class="button button--full-width"
+              type="submit"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+        <br />
+        <button
+          class="button button--full-width"
+          type="submit"
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
+<DocumentFragment>
+  <form
+    class=""
+    data-testid="filter-test-form"
+    id="filter-test-form"
+  >
+    <div
+      class="filter filter--search-refine"
+    >
+      <div
+        class="filter__reset"
+      >
+        <button
+          class="icon-button icon-button--reset"
+          data-testid="reset-icon"
+          title="reset--button"
+          type="button"
+        >
+          <i
+            class="fas fa-redo-alt"
+          />
+        </button>
+        <div
+          data-testid="reset-button"
+          role="button"
+        >
+          Reset all filters
+        </div>
+      </div>
+      <div
+        class="filter__wrapper filter__wrapper--search-refine"
+      >
+        <div
+          class="filter__more-filters-mobile-wrapper"
+        >
+          <div
+            class="filter__more-filters-mobile-content"
+          >
+            <button
+              class="filter__more-filters-desktop-toggler"
+              type="button"
+            >
+              More filters
+            </button>
+            <div
+              class="filter__more-filters-desktop-wrapper"
+            >
+              <div
+                class="filter__more-filters-desktop-content"
+              />
+              <div
+                class="filter__more-filters-desktop-buttons"
+              >
+                <div
+                  class="filter__reset"
+                >
+                  <button
+                    class="icon-button icon-button--reset"
+                    data-testid="reset-icon"
+                    title="reset--button"
+                    type="button"
+                  >
+                    <i
+                      class="fas fa-redo-alt"
+                    />
+                  </button>
+                  <div
+                    data-testid="reset-button"
+                    role="button"
+                  >
+                    Reset all filters
+                  </div>
+                </div>
+                <button
+                  class="button button--full-width"
+                  type="submit"
+                >
+                  Search
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="filter__more-filters-mobile-buttons"
+          >
+            <div
+              class="filter__reset"
+            >
+              <button
+                class="icon-button icon-button--reset"
+                data-testid="reset-icon"
+                title="reset--button"
+                type="button"
+              >
+                <i
+                  class="fas fa-redo-alt"
+                />
+              </button>
+              <div
+                data-testid="reset-button"
+                role="button"
+              >
+                Reset all filters
+              </div>
+            </div>
+            <button
+              class="button button--full-width"
+              type="submit"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+        <br />
+        <button
+          class="button button--full-width"
+          type="submit"
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
+<DocumentFragment>
+  <form
+    class=""
+    data-testid="filter-test-form"
+    id="filter-test-form"
+  >
+    <div
+      class="filter filter--search-refine"
+    >
+      <div
+        class="filter__reset"
+      >
+        <button
+          class="icon-button icon-button--reset"
+          data-testid="reset-icon"
+          title="reset--button"
+          type="button"
+        >
+          <i
+            class="fas fa-redo-alt"
           />
+        </button>
+        <div
+          data-testid="reset-button"
+          role="button"
+        >
+          Reset all filters
+        </div>
+      </div>
+      <div
+        class="filter__wrapper filter__wrapper--search-refine"
+      >
+        <button
+          class="filter__more-filters-mobile-toggler"
+          type="button"
+        >
+          Filters
+        </button>
+        <div
+          class="filter__more-filters-mobile-wrapper"
+        >
+          <div
+            class="filter__more-filters-mobile-content"
+          >
+            <button
+              class="filter__more-filters-desktop-toggler"
+              type="button"
+            >
+              More filters
+            </button>
+            <div
+              class="filter__more-filters-desktop-wrapper"
+            >
+              <div
+                class="filter__more-filters-desktop-content"
+              />
+              <div
+                class="filter__more-filters-desktop-buttons"
+              >
+                <div
+                  class="filter__reset"
+                >
+                  <button
+                    class="icon-button icon-button--reset"
+                    data-testid="reset-icon"
+                    title="reset--button"
+                    type="button"
+                  >
+                    <i
+                      class="fas fa-redo-alt"
+                    />
+                  </button>
+                  <div
+                    data-testid="reset-button"
+                    role="button"
+                  >
+                    Reset all filters
+                  </div>
+                </div>
+                <button
+                  class="button button--full-width"
+                  type="submit"
+                >
+                  Search
+                </button>
+              </div>
+            </div>
+          </div>
           <div
-            class="filter__more-filters-buttons"
+            class="filter__more-filters-mobile-buttons"
           >
             <div
               class="filter__reset"