@blaze-cms/react-page-builder 0.146.0-alpha.50 → 0.146.0-alpha.51

package/src/components/List/components/Pagination/ListPagination.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Classic from './Classic';
 import LoadMore from './LoadMore';
-import { LOAD_MORE, SCROLL_OFFSET } from '../../../../constants';
+import { LOAD_MORE } from '../../../../constants';
 
 const ListPagination = ({
+  listRef,
   listTotal,
   name,
   itemsPerPage,
@@ -15,18 +16,12 @@ const ListPagination = ({
   ...props
 }) => {
   const [showPagination, setShowPagination] = useState(true);
-  const paginationRef = useRef(null);
 
   const isLoadMore = paginationType === LOAD_MORE;
+
   const scrollOnClick = () => {
-    if (!isLoadMore && paginationRef && paginationRef.current) {
-      window.scrollTo({
-        left: 0,
-        top:
-          window.pageYOffset -
-          SCROLL_OFFSET +
-          paginationRef.current.previousSibling.getBoundingClientRect().top
-      });
+    if (!isLoadMore && listRef && listRef.current) {
+      listRef.current.scrollIntoView();
     }
   };
 
@@ -54,13 +49,14 @@ const ListPagination = ({
   };
 
   return (
-    <div className="pagination" ref={paginationRef}>
+    <div className="pagination">
       {isLoadMore ? <LoadMore {...paginationProps} /> : <Classic {...paginationProps} />}
     </div>
   );
 };
 
 ListPagination.propTypes = {
+  listRef: PropTypes.object.isRequired,
   currentPage: PropTypes.number.isRequired,
   paginationType: PropTypes.string.isRequired,
   listTotal: PropTypes.number.isRequired,

package/src/components/List/helpers/build-pagination-items.js

@@ -3,7 +3,15 @@ import BlazeLink from '../../BlazeLink';
 import buildPaginationUrl from './build-pagination-url';
 import { PAGINATION_DISPLAY_LIMIT, PAGINATION_DIFFERENCE } from '../../../constants';
 
-const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, onClick }) => {
+const buildPaginationItems = ({
+  name,
+  numberOfPages,
+  currentPage,
+  query,
+  url,
+  onClick,
+  componentId
+}) => {
   const pages = [];
   const paginationDifference =
     currentPage > PAGINATION_DIFFERENCE ? currentPage - PAGINATION_DIFFERENCE : 0;
@@ -13,7 +21,7 @@ const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, on
   for (let index = 0; index < numberOfPages; index += 1) {
     const page = index + 1 + paginationDifference;
     if (pages.length < PAGINATION_DISPLAY_LIMIT && page <= numberOfPages) {
-      const href = buildPaginationUrl(name, page, query, url);
+      const href = buildPaginationUrl(name, page, query, url, componentId);
       const pageHtml =
         page === currentPage ? (
           <span key={page} className="pagination_page-item--current">
@@ -26,7 +34,7 @@ const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, on
             className="pagination_page-item"
             onClick={onClick}
             shallow
-            scroll
+            scroll={false}
             ariaLabel={`Page ${page}`}>
             {page}
           </BlazeLink>

package/src/components/List/helpers/build-pagination-url.js

@@ -1,10 +1,10 @@
 import { stringify } from 'query-string';
 import { PB_QUERY_CONST, PAGINATION_QUERY_CONST } from '../../../constants';
 
-const buildPaginationUrl = (name, page, query, url) => {
+const buildPaginationUrl = (name, page, query, url, componentId) => {
   const newQuery = { ...query, [`${PB_QUERY_CONST}[${name}]${PAGINATION_QUERY_CONST}`]: page };
   const stringQuery = stringify(newQuery);
-  return `${url}?${stringQuery}`;
+  return `${url}?${stringQuery}${componentId ? `#${componentId}` : ''}`;
 };
 
 export default buildPaginationUrl;

package/src/components/Loading/index.js

@@ -1,3 +1,3 @@
-import Loading from './Loading';
+import dynamic from 'next/dynamic';
 
-export default Loading;
+export default dynamic(() => import(/* webpackChunkName: "blazePbLoading" */ './Loading'));

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -19,7 +19,8 @@ import {
   getInheritedFilters,
   getQueryProps,
   buildRawQueryStringified,
-  buildFiltersQuery
+  buildFiltersQuery,
+  getComponentId
 } from '../../helpers';
 import { RAW_RESULTS } from './constants';
 import { SCROLL_OFFSET } from '../../constants';
@@ -133,10 +134,13 @@ const SearchFilterContainer = ({
   }
 
   const handleSearch = newQuery => {
+    const componentId = listComponentName ? getComponentId(listComponentName) : '';
     setDisplaySearchFilter(false);
     const hashBit = asPath.split('#')[1] || '';
-    const parsedHashBit = hashBit ? `#${hashBit}` : '';
-    scrollToFirstList();
+    let parsedHashBit = hashBit ? `#${hashBit}` : '';
+    parsedHashBit = parsedHashBit || `#${componentId}`;
+
+    scrollToFirstList(componentId);
     if (!newQuery) {
       const baseQuery = `${currentUrl}${parsedHashBit}`;
       setUrlPath(baseQuery);
@@ -149,8 +153,10 @@ const SearchFilterContainer = ({
     return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
   };
 
-  const scrollToFirstList = () => {
-    const [list] = document.getElementsByClassName('list-top');
+  const scrollToFirstList = componentId => {
+    const list = componentId
+      ? document.getElementById(componentId)
+      : document.getElementsByClassName('list-top')[0];
     const shouldScrollToFirstList = !url && list;
 
     if (shouldScrollToFirstList) {

package/src/constants/index.js

@@ -178,6 +178,8 @@ const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,2
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 
+const COMPONENT_ID_PREFIX = 'pb-';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -286,5 +288,6 @@ export {
   DATA_SUMMARY_URL_REGEX,
   DATA_SUMMARY_TEL_REGEX,
   VIMEO_OEMBED_URL,
-  SIZE
+  SIZE,
+  COMPONENT_ID_PREFIX
 };

package/src/helpers/build-query-fields.js

@@ -6,7 +6,7 @@ const buildQueryFields = (sanitizedEntityFields, entityTypes, isFull) =>
       ${sanitizedEntityFields}
       __typename
       id
-      ${isFull ? 'pageBuilderComponents' : ''}
+     ${isFull ? 'pageBuilderComponents: preparedPageBuilderComponents' : ''}
     }`
     )}
   },

package/src/helpers/get-component-id.js

@@ -0,0 +1,9 @@
+import cssesc from 'cssesc';
+import { COMPONENT_ID_PREFIX } from '../constants';
+
+const getComponentId = componentName =>
+  cssesc(`${COMPONENT_ID_PREFIX}${componentName}`, {
+    isIdentifier: true
+  });
+
+export default getComponentId;

package/src/helpers/index.js

@@ -61,3 +61,4 @@ export { default as shouldReturn } from './should-return';
 export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';
+export { default as getComponentId } from './get-component-id';

package/src/index.js

@@ -25,7 +25,8 @@ export {
   buildFiltersQuery,
   getUnpublishedEntityName,
   renderChildren,
-  hasChildren
+  hasChildren,
+  getComponentId
 } from './helpers';
 export { withTitle } from './HOC';
 export { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';

package/tests/unit/src/components/List/__snapshots__/ListRender.test.js.snap

@@ -4,8 +4,9 @@ exports[`ListRender component should not render a List if no actionKey match is
 
 exports[`ListRender component should not render a List with total if displayTotal is true 1`] = `
 <DocumentFragment>
-  <span
+  <div
     class="list-top"
+    id="pb-list"
   />
   <div
     class="list_total_results w-full text-left p-4"
@@ -23,8 +24,9 @@ exports[`ListRender component should not render a List with total if displayTota
 
 exports[`ListRender component should render a List based on passed parameters 1`] = `
 <DocumentFragment>
-  <span
+  <div
     class="list-top"
+    id="pb-list"
   />
   <div>
     Mocked List Comp

package/tests/unit/src/components/List/helpers/__snapshots__/build-pagination-items.test.js.snap

@@ -10,7 +10,7 @@ Array [
     href="url?pb%5Blist-1%5D%5Bpage%5D=1"
     name=""
     onClick={[MockFunction]}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -29,7 +29,7 @@ Array [
     href="url?pb%5Blist-1%5D%5Bpage%5D=3"
     name=""
     onClick={[MockFunction]}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -43,7 +43,7 @@ Array [
     href="url?pb%5Blist-1%5D%5Bpage%5D=4"
     name=""
     onClick={[MockFunction]}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -62,7 +62,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=1"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -76,7 +76,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=2"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -90,7 +90,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=3"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -104,7 +104,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=4"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -123,7 +123,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=6"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -137,7 +137,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=7"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -151,7 +151,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=8"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -165,7 +165,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=9"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -179,7 +179,7 @@ Array [
     href="url?pb%5Blist-3%5D%5Bpage%5D=10"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -198,7 +198,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=4"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -212,7 +212,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=5"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -226,7 +226,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=6"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -240,7 +240,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=7"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -259,7 +259,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=9"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -273,7 +273,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=10"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -287,7 +287,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=11"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -301,7 +301,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=12"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >
@@ -315,7 +315,7 @@ Array [
     href="url?pb%5Blist-2%5D%5Bpage%5D=13"
     name=""
     onClick={null}
-    scroll={true}
+    scroll={false}
     shallow={true}
     title=""
   >

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

@@ -18,21 +18,9 @@ exports[`Loading component should render dots loader if dots string is passed 1`
 </DocumentFragment>
 `;
 
-exports[`Loading component should render spinner loader if no value or not supported value is passed to type 1`] = `
-<DocumentFragment>
-  <div
-    class="blaze-loading__spinner"
-  />
-</DocumentFragment>
-`;
+exports[`Loading component should render spinner loader if no value or not supported value is passed to type 1`] = `<DocumentFragment />`;
 
-exports[`Loading component should render spinner loader if no value or not supported value is passed to type 2`] = `
-<DocumentFragment>
-  <div
-    class="blaze-loading__spinner"
-  />
-</DocumentFragment>
-`;
+exports[`Loading component should render spinner loader if no value or not supported value is passed to type 2`] = `<DocumentFragment />`;
 
 exports[`Loading component should render spinner loader if spinner string is passed 1`] = `
 <DocumentFragment>

package/tests/unit/src/helpers/__snapshots__/build-query-fields.test.js.snap

@@ -7,7 +7,7 @@ exports[`build query field should return a string with additional field if list
       name,category{name}
       __typename
       id
-      pageBuilderComponents
+     pageBuilderComponents: preparedPageBuilderComponents
     }
   },
   total
@@ -21,7 +21,7 @@ exports[`build query field should return a string with correct data 1`] = `
       name,category{name}
       __typename
       id
-      
+     
     }
   },
   total