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

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

@@ -16,9 +16,11 @@ const Range = ({
   entity,
   propsToDisplay,
   updateFilterValues,
-  filterValues
+  filterValues,
+  shouldSearch
 }) => {
   const router = useRouter();
+  const debounceAmount = shouldSearch ? 1200 : 100;
   const { query } = parseUrl(decodeValue(router.asPath));
   const hasMultipleOptions = propsToDisplay.length > 1;
   const initialRangeOption = getIntersectedProp(query, propsToDisplay) || propsToDisplay[0];
@@ -39,8 +41,8 @@ const Range = ({
   const shouldShowRange = rangeOption && min !== max;
 
   const handleChange = debounce((option, value) => {
-    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, true);
-  }, 1200);
+    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
+  }, debounceAmount);
 
   return (
     <>
@@ -86,11 +88,13 @@ Range.propTypes = {
   entity: PropTypes.string.isRequired,
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
   label: PropTypes.string
 };
 
 Range.defaultProps = {
+  shouldSearch: false,
   rangeInterval: 1,
   label: ''
 };

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

@@ -4,7 +4,7 @@ import Select from '@blaze-react/select';
 import { withTitle } from '../../../HOC';
 import { DEFAULT_OPTION } from '../constants';
 
-const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues }) => {
+const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues, shouldSearch }) => {
   const filterValue = filterValues[prop] || '';
 
   const options = data[prop].buckets
@@ -21,7 +21,7 @@ const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues }) =
       id={prop}
       options={optionsJoined}
       onChange={({ value }) => {
-        updateFilterValues({ [prop]: value }, true);
+        updateFilterValues({ [prop]: value }, shouldSearch);
       }}
     />
   );
@@ -32,10 +32,12 @@ SelectFilter.propTypes = {
   prop: PropTypes.string.isRequired,
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  shouldSearch: PropTypes.bool,
   label: PropTypes.string
 };
 
 SelectFilter.defaultProps = {
+  shouldSearch: false,
   label: ''
 };
 

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/build-query.js

@@ -8,12 +8,13 @@ const buildQuery = (filterValues, filters) => {
 
   filters.forEach(({ propsToDisplay, type }) => {
     if (type === TEXT_SEARCH) return;
-    propsToDisplay.map(prop => {
+
+    propsToDisplay.forEach(prop => {
       const value = filterValues[prop];
       const parsedValue = parseFilterValue(prop, type, value);
-      if (!parsedValue) return null;
-      if (parsedValue) newQuery.push(parsedValue);
-      return parsedValue;
+      if (parsedValue && !newQuery.includes(parsedValue)) {
+        newQuery.push(parsedValue);
+      }
     });
   });
 

package/src/components/SearchFilter/helpers/get-range-value.js

@@ -4,7 +4,9 @@ const getRangeValue = (rawQueryProp, rangeInterval, _min, _max) => {
   const { min, max } = calculateMinMax({ min: _min, max: _max }, rangeInterval);
 
   if (rawQueryProp) {
-    const [queryParamMin, queryParamMax] = rawQueryProp.split('-');
+    const [queryParamMin, queryParamMax] = Array.isArray(rawQueryProp)
+      ? rawQueryProp[0].split('-')
+      : rawQueryProp.split('-');
     const updatedMinValue = Number(queryParamMin);
     const updatedMaxValue = Number(queryParamMax);
 

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/DataSummary/helpers/build-loop-props-content.test.js

@@ -57,4 +57,28 @@ describe('buildLoopPropsContent helper function', () => {
   it('should return looped data based on limit if is reachable', () => {
     expect(withLimit).toEqual(mockedResults[3]);
   });
+
+  it('should have empty label if label is not set', () => {
+    const withNoLabel = buildLoopPropsContent(
+      mockedLoopProps,
+      [
+        {
+          bold: false,
+          enableLink: true,
+          label: '',
+          modifier: '',
+          prefix: '',
+          propertiesToDisplay: ['nestedLoopProp.nestedValue'],
+          shouldStrip: true
+        }
+      ],
+      0,
+      mockedData[0]
+    );
+
+    withNoLabel.forEach(([label]) => {
+      expect(label).toEqual('');
+    });
+    expect.hasAssertions();
+  });
 });

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', () => {