@blaze-cms/react-page-builder 0.131.1 → 0.132.0-admin-updates.1

package/lib-es/helpers/process-data-summary-value.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import components from '../components';
+const {
+  code: Code
+} = components;
+const renderCode = value => /*#__PURE__*/React.createElement(Code, {
+  code: value,
+  disableWrapper: true
+});
+const processDataSummaryValue = (objPropValue, {
+  isHtml
+}) => {
+  let pValue = objPropValue;
+  if (isHtml) {
+    pValue = Array.isArray(objPropValue) ? objPropValue.map(_ref => {
+      let {
+          keyField,
+          [keyField]: value
+        } = _ref,
+        otherProps = _objectWithoutProperties(_ref, ["keyField", keyField].map(_toPropertyKey));
+      return _objectSpread({
+        [keyField]: renderCode(value),
+        keyField
+      }, otherProps);
+    }) : renderCode(objPropValue);
+  }
+  return pValue;
+};
+export default processDataSummaryValue;
+//# sourceMappingURL=process-data-summary-value.js.map

package/lib-es/helpers/process-data-summary-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-data-summary-value.js","names":["React","components","code","Code","renderCode","value","createElement","disableWrapper","processDataSummaryValue","objPropValue","isHtml","pValue","Array","isArray","map","_ref","keyField","otherProps","_objectWithoutProperties","_toPropertyKey","_objectSpread"],"sources":["../../src/helpers/process-data-summary-value.js"],"sourcesContent":["import React from 'react';\nimport components from '../components';\n\nconst { code: Code } = components;\n\nconst renderCode = value => <Code code={value} disableWrapper />;\n\nconst processDataSummaryValue = (objPropValue, { isHtml }) => {\n  let pValue = objPropValue;\n  if (isHtml) {\n    pValue = Array.isArray(objPropValue)\n      ? objPropValue.map(({ keyField, [keyField]: value, ...otherProps }) => ({\n          [keyField]: renderCode(value),\n          keyField,\n          ...otherProps\n        }))\n      : renderCode(objPropValue);\n  }\n  return pValue;\n};\n\nexport default processDataSummaryValue;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,eAAe;AAEtC,MAAM;EAAEC,IAAI,EAAEC;AAAK,CAAC,GAAGF,UAAU;AAEjC,MAAMG,UAAU,GAAGC,KAAK,iBAAIL,KAAA,CAAAM,aAAA,CAACH,IAAI;EAACD,IAAI,EAAEG,KAAM;EAACE,cAAc;AAAA,CAAE,CAAC;AAEhE,MAAMC,uBAAuB,GAAGA,CAACC,YAAY,EAAE;EAAEC;AAAO,CAAC,KAAK;EAC5D,IAAIC,MAAM,GAAGF,YAAY;EACzB,IAAIC,MAAM,EAAE;IACVC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACJ,YAAY,CAAC,GAChCA,YAAY,CAACK,GAAG,CAACC,IAAA;MAAA,IAAC;UAAEC,QAAQ;UAAE,CAACA,QAAQ,GAAGX;QAAqB,CAAC,GAAAU,IAAA;QAAZE,UAAU,GAAAC,wBAAA,CAAAH,IAAA,eAA/BC,QAAQ,EAAAF,GAAA,CAAAK,cAAA;MAAA,OAAAC,aAAA;QACrC,CAACJ,QAAQ,GAAGZ,UAAU,CAACC,KAAK,CAAC;QAC7BW;MAAQ,GACLC,UAAU;IAAA,CACb,CAAC,GACHb,UAAU,CAACK,YAAY,CAAC;EAC9B;EACA,OAAOE,MAAM;AACf,CAAC;AAED,eAAeH,uBAAuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.131.1",
+  "version": "0.132.0-admin-updates.1",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,15 +27,15 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "^0.131.0",
-    "@blaze-cms/core-errors": "^0.131.0",
-    "@blaze-cms/core-errors-ui": "^0.131.0",
+    "@blaze-cms/core-auth-ui": "0.132.0-admin-updates.0",
+    "@blaze-cms/core-errors": "0.132.0-admin-updates.0",
+    "@blaze-cms/core-errors-ui": "0.132.0-admin-updates.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.5",
-    "@blaze-cms/nextjs-components": "^0.131.0",
-    "@blaze-cms/plugin-search-ui": "^0.131.0",
-    "@blaze-cms/setup-ui": "^0.131.0",
-    "@blaze-cms/utils": "^0.131.0",
-    "@blaze-cms/utils-handlebars": "^0.131.0",
+    "@blaze-cms/nextjs-components": "0.132.0-admin-updates.0",
+    "@blaze-cms/plugin-search-ui": "0.132.0-admin-updates.1",
+    "@blaze-cms/setup-ui": "0.132.0-admin-updates.0",
+    "@blaze-cms/utils": "0.132.0-admin-updates.0",
+    "@blaze-cms/utils-handlebars": "0.132.0-admin-updates.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "7023bf3e0ef207eda6ec8d85ab68d9fd6cc3a17a"
+  "gitHead": "7d0cac53177294b81aa22198200b9236bd922306"
 }

package/src/components/Button.js

@@ -59,7 +59,8 @@ const Button = props => {
 
   const logout = () => {
     handleLogout(client);
-    url ? router.reload(urlToUse) : router.reload();
+    if (hasChildren(children)) return setShowChildren(true);
+    return url ? router.reload(urlToUse) : router.reload();
   };
 
   const handleClick = () => {

package/src/components/Card/CardsRender.js

@@ -22,7 +22,8 @@ import {
   filterQuerySetup,
   shouldSkipSingleQuery,
   shouldReturn,
-  getUpdatedSortProperties
+  getUpdatedSortProperties,
+  getUpdatedItemsToDisplay
 } from './helpers';
 
 const CardsContainer = dynamic(() => import('./CardsContainer'));
@@ -95,6 +96,7 @@ const CardsRender = ({
     isPreview,
     itemEntityUpdated: unpublishedParentEntityName
   });
+
   const {
     data: { entityData: parentEntityData = {} } = {},
     error: _err,
@@ -122,6 +124,13 @@ const CardsRender = ({
     variableProps
   );
 
+  const updatedItemsToDisplay = getUpdatedItemsToDisplay({
+    itemsToDisplay,
+    inheritedFilters,
+    parentSchema,
+    parentEntityData
+  });
+
   const { limit, variables } = filterQuerySetup({
     getEntitySchemas: Object.values(requiredSchema),
     entity: primaryEntityToUse,
@@ -130,22 +139,33 @@ const CardsRender = ({
     docType: docTypes,
     filterOperator,
     filterEntityRelations,
-    itemsToDisplay,
+    itemsToDisplay: updatedItemsToDisplay,
     entitySameAsCurrentItemEntity,
     useRandomSort
   });
+
+  const hasNoFiltersOrItemsToDisplay = !updatedItemsToDisplay.length && !updatedFilterBy;
+
   const { data: cardData, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
     fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',
-    skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)
+    skip: shouldReturn(
+      hasNoFiltersOrItemsToDisplay,
+      _loading,
+      _load,
+      schemaLoading,
+      _error,
+      _err,
+      schemaError
+    )
   });
 
-  const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
+  const imageIds = updatedItemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
   const isLoading = shouldReturn(_loading, _load, schemaLoading, cardsLoading, imagesLoading);
   const hasError = shouldReturn(_error, _err, schemaError);
 
-  if (!updatedFilterBy) return null;
+  if (hasNoFiltersOrItemsToDisplay) return null;
   if (isLoading) return null;
   if (hasError) return null;
   if (cardsError) return cardsError.message;
@@ -160,7 +180,7 @@ const CardsRender = ({
 
   const orderedData = useRandomSort
     ? cardDataResults
-    : sortResponseData(cardDataResults, itemsToDisplay);
+    : sortResponseData(cardDataResults, updatedItemsToDisplay);
   const { regularChildren, gtmChildren } = splitChildren(
     children,
     cardDataResults,
@@ -169,7 +189,7 @@ const CardsRender = ({
       name: variableProps.name
     }
   );
-  const updatedCards = appendImages(imagesData, orderedData, itemsToDisplay);
+  const updatedCards = appendImages(imagesData, orderedData, updatedItemsToDisplay);
 
   return (
     <>

package/src/components/Card/helpers/get-updated-items-to-display.js

@@ -0,0 +1,32 @@
+const getUpdatedItemsToDisplay = ({
+  parentSchema,
+  parentEntityData,
+  itemsToDisplay = [],
+  inheritedFilters = []
+}) => {
+  const idProp = inheritedFilters.find(filter => filter.indexOf('id/') === 0);
+
+  if (!idProp || !parentSchema || !parentEntityData) return itemsToDisplay;
+  const { properties } = parentSchema;
+  const [, entityKey] = idProp.split('/');
+  if (!properties || !entityKey) return itemsToDisplay;
+  const queryValue = Object.keys(properties).find(
+    propKey =>
+      properties[propKey] &&
+      properties[propKey].relation &&
+      properties[propKey].relation.entityIdentifier === entityKey
+  );
+  const parentValues = parentEntityData[queryValue];
+  if (!parentValues) return itemsToDisplay;
+  const updatedItemsToDisplay = [...itemsToDisplay];
+  if (Array.isArray(parentValues)) {
+    parentValues.forEach(value => {
+      updatedItemsToDisplay.push({ displayItems: [value] });
+    });
+  } else {
+    updatedItemsToDisplay.push({ displayItems: [parentValues] });
+  }
+  return updatedItemsToDisplay;
+};
+
+export default getUpdatedItemsToDisplay;

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

@@ -6,3 +6,4 @@ export { default as filterQuerySetup } from './filter-query-setup';
 export { default as shouldReturn } from './should-return';
 export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as getUpdatedSortProperties } from './get-updated-sort-properties';
+export { default as getUpdatedItemsToDisplay } from './get-updated-items-to-display';

package/src/components/CarouselWrapper/SmoothScrollCarousel.js

@@ -10,8 +10,8 @@ const SmoothScrollCarousel = ({
 }) => {
   const wrapperClassName = `cards-carousel-smooth${bannerModifier}`;
   const contentClassName = `cards-carousel--content smooth-scroll items-per-row-${itemsPerRow}`;
-  const aimationTime = (autoScrollTimer * numberOfCards) / 1000;
-  const animationDuration = `${aimationTime < 1 ? 1 : aimationTime}s`;
+  const animationTime = (autoScrollTimer * numberOfCards) / 1000;
+  const animationDuration = `${animationTime < 1 ? 1 : animationTime}s`;
 
   return (
     <div className={wrapperClassName}>

package/src/components/Code/Code.js

@@ -7,26 +7,30 @@ import { getClassModifiers } from '../../utils';
 import { CODE } from '../../constants';
 import { wrapScriptTags } from './helpers';
 
-const Code = memo(({ code: embedCode, parserOptions, ...otherProps }) => {
+const Code = memo(({ code: embedCode, parserOptions, disableWrapper, ...otherProps }) => {
   if (!embedCode) return null;
 
   const parsedCode = parseHTML(embedCode, parserOptions);
   const wrappedCode = wrapScriptTags(parsedCode);
   const modifiers = getClassModifiers(CODE, { ...otherProps });
 
+  if (disableWrapper) return wrappedCode;
+
   return <Wrapper modifiers={modifiers}>{wrappedCode}</Wrapper>;
 });
 
 Code.propTypes = {
   code: PropTypes.string,
   modifier: PropTypes.string,
-  parserOptions: PropTypes.object
+  parserOptions: PropTypes.object,
+  disableWrapper: PropTypes.bool
 };
 
 Code.defaultProps = {
   code: '',
   modifier: '',
-  parserOptions: {}
+  parserOptions: {},
+  disableWrapper: false
 };
 
 export default withTitle(Code);

package/src/components/DataSummary/helpers/build-loop-props-content.js

@@ -3,6 +3,7 @@ import flatten from 'lodash.flatten';
 import getLinkToPublishedContent from './get-link-to-published-content';
 import getLoopPropsLimit from './get-loop-props-limit';
 import getPropValue from './get-prop-value';
+import { processDataSummaryValue } from '../../../helpers';
 
 const getLoopValue = value => {
   const { keyField } = value;
@@ -44,10 +45,13 @@ const buildLoopPropsContent = (loopProps = [], propsToDisplay = [], limit = 0, d
 
         return propertiesToDisplay.map(key => {
           const loopValue = loopValues[key];
-          const propValue = loopValue ? getLoopValue(loopValue[i]) : regularValues[key];
+          const loopValueItem = loopValue && loopValue[i];
+          const propValue = loopValueItem ? getLoopValue(loopValueItem) : regularValues[key];
           if (!propValue) return null;
-          const linkToPublishedContent = getLinkToPublishedContent(key, data);
-          return [upperFirst(label), propValue, linkToPublishedContent, modifier];
+
+          const processedValue = processDataSummaryValue(propValue, options);
+          const linkToPublishedContent = getLinkToPublishedContent(key, data, loopValueItem);
+          return [upperFirst(label), processedValue, linkToPublishedContent, modifier];
         });
       })
     ).filter(Boolean);

package/src/components/DataSummary/helpers/build-props-to-display-with-content.js

@@ -1,6 +1,6 @@
 import upperFirst from 'lodash.upperfirst';
 import flatten from 'lodash.flatten';
-import { isObject } from '../../../helpers';
+import { isObject, processDataSummaryValue } from '../../../helpers';
 import getLinkToPublishedContent from './get-link-to-published-content';
 import getPropValue from './get-prop-value';
 import getLinkBasedOnValue from './get-link-based-on-value';
@@ -27,15 +27,18 @@ const buildPropsToDisplayWithContent = (props, propsToDisplay = []) => {
         const objPropValue = getPropValue(key, props, options);
         if (!objPropValue) return null;
 
-        const link = getLink(enableLink, key, props, objPropValue);
+        const processedValue = processDataSummaryValue(objPropValue, options);
 
-        return [upperFirst(label), objPropValue, link, modifier];
+        const link = getLink(enableLink, key, props, processedValue);
+
+        return [upperFirst(label), processedValue, link, modifier];
       });
     })
   ).filter(Boolean);
 };
 
 export default buildPropsToDisplayWithContent;
+
 function getLink(enableLink, key, props, objPropValue) {
   let link = '';
   if (enableLink) {

package/src/components/DataSummary/helpers/get-link-to-published-content.js

@@ -1,6 +1,9 @@
-const getLinkToPublishedContent = (key = '', props = {}) => {
+const getLinkToPublishedContent = (key = '', props = {}, currentValue = null) => {
   const [baseKey] = key.split('.');
   if (!props[baseKey]) return '';
+
+  if (currentValue && typeof currentValue.url !== 'undefined') return currentValue.url;
+
   const content = Array.isArray(props[baseKey]) ? props[baseKey][0] : props[baseKey];
   return content && content.url ? content.url : '';
 };

package/src/components/List/ListFactory.js

@@ -7,7 +7,13 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import { generateSingleItemQuery, getItemList } from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
-import { getAzQueryFilter, getSortProps, hasRequiredItemListDetails } from './helpers';
+import {
+  getAzQueryFilter,
+  getSortProps,
+  hasRequiredItemListDetails,
+  getListSpecificSearchFilter,
+  getListQuery
+} from './helpers';
 import {
   getGenericProps,
   getRequiredSchemas,
@@ -37,7 +43,7 @@ const ListFactory = props => {
     type,
     sortby: defaultSortBy,
     sort: defaultSort,
-    searchFilter,
+    allSearchFilters,
     operator: filterOperator,
     sortProperties,
     itemListName
@@ -46,11 +52,13 @@ const ListFactory = props => {
   const router = useRouter();
   const { asPath } = router;
   const parsedQuery = asPath.replace(/%5D/g, ']').replace(/%5B/g, '[');
-  const {
-    query,
-    url,
-    query: { sort: querySort, sortby: querySortBy, itemListId: queryItemListId } = {}
-  } = parseUrl(parsedQuery);
+  const [searchFilter, hasListSpecificFilters] = getListSpecificSearchFilter(
+    allSearchFilters,
+    name
+  );
+  const { query, url, query: { itemListId: queryItemListId } = {} } = parseUrl(parsedQuery);
+  const updatedQuery = getListQuery(query, hasListSpecificFilters, name);
+  const { sort: querySort, sortby: querySortBy } = updatedQuery;
   const { sortbyFilters, updatedSortProperties } = getSortProps({
     querySort,
     sortProperties,
@@ -62,8 +70,8 @@ const ListFactory = props => {
   const itemListId = getItemListId(itemListName, queryItemListId);
   const { itemEntity: parentEntity, itemId: parentId } = parent;
   const updatedParentEntity = getUnpublishedEntityName(parentEntity);
-  const paginationIndex = getPaginationIndex(query, name);
-  const azFilter = getAzQueryFilter(query, name);
+  const paginationIndex = getPaginationIndex(updatedQuery, name);
+  const azFilter = getAzQueryFilter(updatedQuery, name);
 
   const entitiesToUse = entities && entities.length ? entities : [legacyEntity];
   const [filterEntity] = entitiesToUse;
@@ -123,10 +131,12 @@ const ListFactory = props => {
   const [textFilter] = getSearchFilterType(searchFilter, TEXT_SEARCH);
   const shouldApplyTextFilter = textFilter && textFilter.propsToDisplay.length;
   const operator = shouldApplyTextFilter ? getElasticsearchOperator(textFilter) : AND_OPERATOR;
-  const valuesText = shouldApplyTextFilter ? buildSearchValuesText(textFilter, query) : [];
-  const { valuesAnd, valuesOr } = getQueryFilters(searchFilter, query);
+  const valuesText = shouldApplyTextFilter
+    ? buildSearchValuesText(textFilter, updatedQuery, name)
+    : [];
+  const { valuesAnd, valuesOr } = getQueryFilters(searchFilter, updatedQuery, name);
   const isTextSearchFilterApplied = !!(
-    query.search_term &&
+    updatedQuery.search_term &&
     searchFilter &&
     getSearchFilterType(searchFilter, TEXT_SEARCH).length
   );
@@ -139,7 +149,7 @@ const ListFactory = props => {
   const listProps = {
     ...props,
     ...genericProps,
-    query,
+    query: updatedQuery,
     url,
     isCard,
     isAZ,
@@ -179,7 +189,7 @@ ListFactory.propTypes = {
   name: PropTypes.string,
   sortby: PropTypes.array,
   sort: PropTypes.string,
-  searchFilter: PropTypes.object,
+  allSearchFilters: PropTypes.array,
   sortProperties: PropTypes.array,
   itemListName: PropTypes.string
 };
@@ -195,7 +205,7 @@ ListFactory.defaultProps = {
   sortProperties: [],
   sort: '',
   operator: AND,
-  searchFilter: {},
+  allSearchFilters: [],
   itemListName: ''
 };
 

package/src/components/List/helpers/get-list-query.js

@@ -0,0 +1,28 @@
+import stripQueryKey from './strip-query-key';
+
+const getListQuery = (query, hasListSpecificFilters, name) => {
+  const updatedQuery = {};
+  const listKey = `pb[${name}]`;
+  const paginationKey = `${listKey}[page]`;
+  const sortKey = `${listKey}[sort]`;
+  const sortByKey = `${listKey}[sortby]`;
+
+  Object.keys(query).forEach(queryKey => {
+    const isListKey = queryKey.indexOf(`${listKey}`) !== -1;
+    const decodedQueryValue = Array.isArray(query[queryKey])
+      ? query[queryKey].map(value => decodeURIComponent(value))
+      : decodeURIComponent(query[queryKey]);
+    if (hasListSpecificFilters) {
+      const strippedKey = stripQueryKey(queryKey, listKey, paginationKey);
+      if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
+    } else {
+      if (queryKey.indexOf('pb[') === -1) updatedQuery[queryKey] = decodedQueryValue;
+      if (queryKey.indexOf(paginationKey) !== -1) updatedQuery[queryKey] = decodedQueryValue;
+    }
+  });
+  updatedQuery.sort = query[sortKey] || query.sort;
+  updatedQuery.sortby = query[sortByKey] || query.sortby;
+  return updatedQuery;
+};
+
+export default getListQuery;

package/src/components/List/helpers/get-list-specific-search-filter.js

@@ -0,0 +1,10 @@
+const getListSpecificSearchFilter = (searchFilters, listName) => {
+  const searchFilterMatch = searchFilters.find(
+    ({ settings: { listComponentName } }) => listComponentName === listName
+  );
+  const hasListSpecificFilters = !!searchFilterMatch;
+  const searchFilterToUse = searchFilterMatch || searchFilters[0] || {};
+  return [searchFilterToUse, hasListSpecificFilters];
+};
+
+export default getListSpecificSearchFilter;

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

@@ -7,3 +7,5 @@ export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
 export { default as getSortProps } from './get-sort-props';
 export { default as hasRequiredItemListDetails } from './has-required-item-list-details';
 export { default as getListComponent } from './get-list-component';
+export { default as getListQuery } from './get-list-query';
+export { default as getListSpecificSearchFilter } from './get-list-specific-search-filter';

package/src/components/List/helpers/strip-query-key.js

@@ -0,0 +1,6 @@
+const stripQueryKey = (fullKey, listNameKey, paginationKey) => {
+  if (paginationKey === fullKey) return fullKey;
+  return fullKey.substring(listNameKey.length + 1, fullKey.length - 1);
+};
+
+export default stripQueryKey;

package/src/components/SearchContent/SearchContent.js

@@ -10,12 +10,12 @@ const SearchContent = ({
   searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
-  collapsible,
   isMobile,
   placeholder,
-  modifier
+  modifier,
+  collapsedSearch
 }) => {
-  const [collapsed, setCollapsed] = useState(collapsible);
+  const [collapsed, setCollapsed] = useState(collapsedSearch);
   const router = useRouter();
 
   const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
@@ -50,7 +50,7 @@ const SearchContent = ({
   };
 
   const handleOnBlur = () => {
-    if (!collapsible) return;
+    if (!collapsedSearch) return;
     if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
   };
 
@@ -118,9 +118,9 @@ SearchContent.propTypes = {
   searchInputWrapperDesktop: PropTypes.string,
   placeholder: PropTypes.string,
   isMobile: PropTypes.bool,
-  collapsible: PropTypes.bool,
   entities: PropTypes.array.isRequired,
-  modifier: PropTypes.string
+  modifier: PropTypes.string,
+  collapsedSearch: PropTypes.bool
 };
 
 SearchContent.defaultProps = {
@@ -129,8 +129,8 @@ SearchContent.defaultProps = {
   searchInputWrapperDesktop: '',
   placeholder: '',
   isMobile: false,
-  collapsible: false,
-  modifier: ''
+  modifier: '',
+  collapsedSearch: false
 };
 
 export default SearchContent;

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

@@ -3,12 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import {
-  isDeviceDesktop,
-  buildQuery,
-  getInitialFilterValues,
-  getResponsiveFilterClassnames
-} from '../helpers';
+import { isDeviceDesktop, buildUrlQuery, getResponsiveFilterClassnames } from '../helpers';
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
@@ -16,6 +11,7 @@ import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({
   searchFilterRef,
+  listComponentName,
   data,
   filters,
   hasUrl,
@@ -28,13 +24,14 @@ const SearchFilter = ({
   groupAfterDesktop,
   groupAfterMobile,
   filterValues,
-  setAppliedFilters
+  setAppliedFilters,
+  query
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
-  const doSubmit = (newValues = filterValues) => {
-    const newQuery = buildQuery(newValues, filters);
+  const doSubmit = newValues => {
+    const newQuery = buildUrlQuery(newValues, filters, listComponentName, query);
     handleSearch(newQuery);
     setMoreFiltersDesktopCollapsed(true);
     setMoreFiltersMobileCollapsed(true);
@@ -69,9 +66,8 @@ const SearchFilter = ({
   const formId = `filter-${name}-form`;
 
   const handleReset = () => {
-    const newValues = getInitialFilterValues(null, filters, {});
-    setAppliedFilters({ newValues, type: 'reset' });
-    doSubmit(newValues);
+    setAppliedFilters({ type: 'reset' });
+    doSubmit();
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {
@@ -79,7 +75,7 @@ const SearchFilter = ({
   };
 
   const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
-  const shouldSearch = !hasUrl;
+
   return (
     <>
       <form
@@ -89,7 +85,7 @@ const SearchFilter = ({
         id={formId}
         onSubmit={e => {
           e.preventDefault();
-          doSubmit();
+          doSubmit(filterValues);
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -101,7 +97,7 @@ const SearchFilter = ({
           <div className="filter__wrapper filter__wrapper--search-refine">
             {!shouldGroup && (
               <FiltersList
-                shouldSearch={shouldSearch}
+                shouldSearch={!hasUrl}
                 data={data}
                 filters={filters}
                 hasUrl={hasUrl}
@@ -114,7 +110,7 @@ const SearchFilter = ({
             {shouldGroup && (
               <>
                 <FiltersList
-                  shouldSearch={shouldSearch}
+                  shouldSearch={!hasUrl}
                   data={data}
                   filters={filters.slice(0, groupAfterMobile)}
                   hasUrl={hasUrl}
@@ -136,7 +132,7 @@ const SearchFilter = ({
                 <div className={moreFiltersMobileWrapperClass}>
                   <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
                     <FiltersList
-                      shouldSearch={shouldSearch && isDeviceDesktop()}
+                      shouldSearch={!hasUrl && isDeviceDesktop()}
                       data={data}
                       filters={filters.slice(
                         groupAfterMobile,
@@ -233,7 +229,14 @@ SearchFilter.propTypes = {
   groupAfterDesktop: PropTypes.number.isRequired,
   groupAfterMobile: PropTypes.number.isRequired,
   filterValues: PropTypes.object.isRequired,
-  setAppliedFilters: PropTypes.func.isRequired
+  setAppliedFilters: PropTypes.func.isRequired,
+  listComponentName: PropTypes.string,
+  query: PropTypes.object
+};
+
+SearchFilter.defaultProps = {
+  listComponentName: '',
+  query: {}
 };
 
 export default SearchFilter;