@blaze-cms/react-page-builder 0.113.1 → 0.114.0-alpha.3

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/src/components/SearchFilter/helpers/is-device-desktop.js

@@ -1,5 +1,6 @@
 import { TABLET_WIDTH } from '../constants';
 
-const isDeviceDesktop = () => window.innerWidth > TABLET_WIDTH;
+const isDeviceDesktop = () =>
+  typeof window !== 'undefined' ? window.innerWidth > TABLET_WIDTH : false;
 
 export default isDeviceDesktop;

package/src/helpers/get-generic-render-variables.js

@@ -1,31 +1,41 @@
-import checkSortby from './check-sort-by';
 import getSortbyFieldName from './get-sort-by-field-name';
 import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
+const buildSortValues = (sortFilters, relations, stringProps) => {
+  if (!sortFilters || !sortFilters.length) return { sort: [] };
+  const sortValues = sortFilters
+    .map(
+      ({ sort, propsToDisplay }) =>
+        !!sort &&
+        !!propsToDisplay[0] &&
+        `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`
+    )
+    .filter(Boolean)
+    .join(',');
+
+  return { sort: sortValues };
+};
 const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {
   if (isTextSearchApplied) {
     return {};
   }
-  const { sort, sortby } = filterProps;
-
-  const isSortbyArray = Array.isArray(sortby);
-
-  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);
-
-  const sortValue = hasSortFields
-    ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}`
-    : '';
+  const { sort, sortby, sortProperties = [] } = filterProps;
 
-  return sortValue ? { sort: sortValue } : {};
+  return buildSortValues(
+    [{ sort, propsToDisplay: [sortby] }, ...sortProperties],
+    relations,
+    stringProps
+  );
 };
 
 const getGenericRenderVariables = (
   relations,
-  { limit = DEFAULT_LIMIT, offset, ...filterProps } = {},
+  filterProps = {},
   stringProps = [],
   rawQueryStringified = '',
   isTextSearchFilterApplied = false
 ) => {
+  const { limit = DEFAULT_LIMIT, offset } = filterProps;
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
   const raw = rawQueryStringified ? { rawQueryStringified } : {};
 

package/tests/unit/src/components/List/helpers/get-sort-props.test.js

@@ -0,0 +1,58 @@
+import getSortProps from '../../../../../../src/components/List/helpers/get-sort-props';
+
+const property = 'updated';
+const defaultProperty = 'name';
+const asc = 'asc';
+const desc = 'desc';
+const sortProperties = [
+  {
+    propsToDisplay: [property],
+    sort: asc
+  }
+];
+const querySortBy = 'date';
+const props = {
+  querySort: '',
+  sortProperties,
+  defaultSort: desc,
+  querySortBy: '',
+  defaultSortBy: [defaultProperty]
+};
+
+describe('getSortProps helper function', () => {
+  it('should ignore old sortby/sort and use sortProperties', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps(props);
+    expect(sortbyFilters).toEqual([property]);
+    expect(updatedSortProperties).toEqual(sortProperties);
+  });
+
+  it('should add query sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      querySortBy,
+      querySort: desc
+    });
+    expect(sortbyFilters).toEqual([querySortBy, property]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [querySortBy],
+        sort: desc
+      },
+      ...sortProperties
+    ]);
+  });
+
+  it('should use old style sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      sortProperties: []
+    });
+    expect(sortbyFilters).toEqual([defaultProperty]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [defaultProperty],
+        sort: desc
+      }
+    ]);
+  });
+});

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"

package/tests/unit/src/helpers/build-raw-query.test.js

@@ -304,6 +304,7 @@ describe('build raw query', () => {
       id,
       itemsToDisplay
     );
+
     expect(rawQueryOneCheckboxFilterMoreItemsToDisplayValues).toEqual(
       RAW_QUERY_OR_OPERATOR_ITEMS_TO_DISPLAY
     );
@@ -347,7 +348,7 @@ describe('build raw query', () => {
       filterData,
       id,
       [],
-      false,
+      true,
       { shouldReturnAggs: true, isAZ: true }
     );
     expect(queryWithAggs).toEqual(RAW_QUERY_WITH_AGGS);

package/tests/unit/src/helpers/get-generic-render-variables.test.js

@@ -17,11 +17,7 @@ const mockedProps = overrides => ({
 });
 
 describe('get card/list render variables', () => {
-  it('should be a function', () => {
-    expect(typeof getGenericRenderVariables).toEqual('function');
-  });
-
-  it('should return always an object', () => {
+  it('should always return an object', () => {
     const variables = getGenericRenderVariables();
     const variablesWithProps = getGenericRenderVariables([], mockedProps(), STRING_PROPS_EMPTY);
 
@@ -78,20 +74,18 @@ describe('get card/list render variables', () => {
       mockedProps({ sortby: ['length'] }),
       STRING_PROPS_EMPTY
     );
-
     expect(sort).toEqual('length:desc');
   });
 
   it('should return correct sort data when when there is a prop that is of type string', () => {
-    const { sort } = getGenericRenderVariables([], mockedProps({ sortby: ['name'] }), STRING_PROPS);
-
+    const { sort } = getGenericRenderVariables([], mockedProps({ sortby: 'name' }), STRING_PROPS);
     expect(sort).toEqual('name.keyword:desc');
   });
 
   it("should return correct sort data when when there is a prop that is of type string and it's also a relation prop", () => {
     const { sort } = getGenericRenderVariables(
       [{ localField: 'entity', entityIdentifier: 'entity' }],
-      mockedProps({ sortby: ['entity.name'], sort: 'ASC' }),
+      mockedProps({ sortby: 'entity.name', sort: 'ASC' }),
       ['entity.name']
     );
 
@@ -103,7 +97,7 @@ describe('get card/list render variables', () => {
     const sortby = `${localField}.length`;
     const { sort } = getGenericRenderVariables(
       [{ localField, entityIdentifier: 'entity' }],
-      mockedProps({ sortby: [sortby], sort: 'ASC' }),
+      mockedProps({ sortby, sort: 'ASC' }),
       []
     );
 
@@ -113,7 +107,7 @@ describe('get card/list render variables', () => {
   it('should return correct sort data when when there is a relation prop that is of type string but with updated value', () => {
     const { sort } = getGenericRenderVariables(
       [{ localField: 'tag', entityIdentifier: 'tags' }],
-      mockedProps({ sortby: ['tag.name'], sort: 'ASC' }),
+      mockedProps({ sortby: 'tag.name', sort: 'ASC' }),
       ['tags.name']
     );
 

package/lib/helpers/check-sort-by.js

@@ -1,16 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var checkSortby = function checkSortby(sortby, isSortbyArray) {
-  return isSortbyArray && sortby.length || !isSortbyArray && sortby;
-};
-
-var _default = checkSortby;
-exports["default"] = _default;
-//# sourceMappingURL=check-sort-by.js.map

package/lib/helpers/check-sort-by.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/helpers/check-sort-by.js"],"names":["checkSortby","sortby","isSortbyArray","length"],"mappings":";;;;;;;;;AAAA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,MAAD,EAASC,aAAT;AAAA,SACjBA,aAAa,IAAID,MAAM,CAACE,MAAzB,IAAqC,CAACD,aAAD,IAAkBD,MADrC;AAAA,CAApB;;eAGeD,W","sourcesContent":["const checkSortby = (sortby, isSortbyArray) =>\n  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);\n\nexport default checkSortby;\n"],"file":"check-sort-by.js"}

package/lib-es/helpers/check-sort-by.js

@@ -1,4 +0,0 @@
-const checkSortby = (sortby, isSortbyArray) => isSortbyArray && sortby.length || !isSortbyArray && sortby;
-
-export default checkSortby;
-//# sourceMappingURL=check-sort-by.js.map

package/lib-es/helpers/check-sort-by.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/helpers/check-sort-by.js"],"names":["checkSortby","sortby","isSortbyArray","length"],"mappings":"AAAA,MAAMA,WAAW,GAAG,CAACC,MAAD,EAASC,aAAT,KACjBA,aAAa,IAAID,MAAM,CAACE,MAAzB,IAAqC,CAACD,aAAD,IAAkBD,MADzD;;AAGA,eAAeD,WAAf","sourcesContent":["const checkSortby = (sortby, isSortbyArray) =>\n  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);\n\nexport default checkSortby;\n"],"file":"check-sort-by.js"}

package/src/helpers/check-sort-by.js

@@ -1,4 +0,0 @@
-const checkSortby = (sortby, isSortbyArray) =>
-  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);
-
-export default checkSortby;