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

package/src/components/List/ListRender.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import ListPagination from './components/Pagination';
@@ -6,6 +6,7 @@ import ListHeader from './components/Header';
 import { LOAD_MORE } from '../../constants';
 import { useAppSyncEventHook } from '../../hooks';
 import { buildQueryBooster } from './helpers';
+import { getComponentId } from '../../helpers';
 
 const ListRender = props => {
   const {
@@ -28,65 +29,80 @@ const ListRender = props => {
     azFilter,
     displayTotal
   } = props;
+  const listRef = useRef(null);
   const { data: updatedVariables } = useAppSyncEventHook({
     eventName: 'list:query-variables',
     data: variables,
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-  const { data = {}, error, loading, fetchMore } = useQuery(action, {
+  const { data = { [actionKey]: [], total: 0 }, error, loading, fetchMore } = useQuery(action, {
     variables: boostedVariables
   });
 
-  if (loading) return '';
+  if (loading && !listRef.current) {
+    // don't render if loading for the first time with no data
+    return '';
+  }
   if (error) return error.message;
   if (!data[actionKey] || !data[actionKey].results) return null;
 
   const listData = data[actionKey].results;
   const listTotal = data[actionKey].total;
 
-  if (!listData || !listData.length) return null;
-  const { length: currentListLength } = listData;
+  if ((!listData || !listData.length) && !loading) return null;
+  const currentListLength = listData.length;
   const currentPage = Math.ceil((initialOffset + currentListLength) / itemsPerPageToUse);
   const totalDisplay = limitToUse && listTotal > limitToUse ? limitToUse : listTotal;
+  const componentId = getComponentId(name);
 
   return (
     <>
-      <span className="list-top" />
-      {isAZ && <ListHeader name={name} listAggregations={listAggregations} azFilter={azFilter} />}
-      {displayTotal && (
-        <div className="list_total_results w-full text-left p-4">Total results: {totalDisplay}</div>
-      )}
-      <ListComponent
-        orderedListData={listData}
-        isInfinite={isInfinite}
-        initialOffset={initialOffset}
-        actionKey={actionKey}
-        limitToUse={limitToUse}
-        fetchMore={fetchMore}
-        omitWrappers={omitWrappers}
-        itemsPerPageToUse={itemsPerPageToUse || listData.length}
-        listTotal={listTotal}
-        currentListLength={currentListLength}
-        currentPage={currentPage}
-        query={query}
-        url={url}
-        itemsToDisplay={itemsToDisplay}
-        {...props}
-      />
-      {paginationType !== LOAD_MORE && (
-        <ListPagination
-          limitToUse={limitToUse}
-          itemsPerPage={itemsPerPageToUse}
-          listTotal={listTotal}
-          name={name}
-          isInfinite={isInfinite}
-          currentListLength={currentListLength}
-          paginationType={paginationType}
-          currentPage={currentPage}
-          query={query}
-          url={url}
-        />
+      <div ref={listRef} id={componentId} className="list-top" />
+      {!loading && (
+        <>
+          {isAZ && (
+            <ListHeader name={name} listAggregations={listAggregations} azFilter={azFilter} />
+          )}
+          {displayTotal && (
+            <div className="list_total_results w-full text-left p-4">
+              Total results: {totalDisplay}
+            </div>
+          )}
+          <ListComponent
+            orderedListData={listData}
+            isInfinite={isInfinite}
+            initialOffset={initialOffset}
+            actionKey={actionKey}
+            limitToUse={limitToUse}
+            fetchMore={fetchMore}
+            omitWrappers={omitWrappers}
+            itemsPerPageToUse={itemsPerPageToUse || listData.length}
+            listTotal={listTotal}
+            currentListLength={currentListLength}
+            currentPage={currentPage}
+            query={query}
+            url={url}
+            itemsToDisplay={itemsToDisplay}
+            {...props}
+          />
+          {paginationType !== LOAD_MORE && (
+            <ListPagination
+              listRef={listRef}
+              componentId={componentId}
+              limitToUse={limitToUse}
+              itemsPerPage={itemsPerPageToUse}
+              listTotal={listTotal}
+              name={name}
+              isInfinite={isInfinite}
+              currentListLength={currentListLength}
+              paginationType={paginationType}
+              currentPage={currentPage}
+              query={query}
+              url={url}
+            />
+          )}
+        </>
       )}
     </>
   );

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

@@ -5,13 +5,32 @@ import BlazeLink from '../../../BlazeLink';
 import buildPaginationUrl from '../../helpers/build-pagination-url';
 import { NEXT_STRING, PREVIOUS_STRING } from '../../../../constants';
 
-const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onClick }) => {
-  const pages = buildPaginationItems({ name, numberOfPages, currentPage, query, url, onClick });
+const Classic = ({
+  name,
+  numberOfPages,
+  currentPage,
+  query,
+  url,
+  isLastPage,
+  onClick,
+  componentId
+}) => {
+  const pages = buildPaginationItems({
+    name,
+    numberOfPages,
+    currentPage,
+    query,
+    url,
+    onClick,
+    componentId
+  });
   const nextPage = currentPage + 1;
   const previousPage = currentPage - 1;
   const previousPageLink =
-    currentPage > 1 ? buildPaginationUrl(name, previousPage, query, url) : null;
-  const nextPageLink = !isLastPage ? buildPaginationUrl(name, nextPage, query, url) : null;
+    currentPage > 1 ? buildPaginationUrl(name, previousPage, query, url, componentId) : null;
+  const nextPageLink = !isLastPage
+    ? buildPaginationUrl(name, nextPage, query, url, componentId)
+    : null;
 
   return (
     <>
@@ -21,7 +40,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           className="pagination_page-previous"
           onClick={onClick}
           shallow
-          scroll>
+          scroll={false}>
           {`${PREVIOUS_STRING} page`}
         </BlazeLink>
       )}
@@ -32,7 +51,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           className="pagination_page-next"
           onClick={onClick}
           shallow
-          scroll>
+          scroll={false}>
           {`${NEXT_STRING} page`}
         </BlazeLink>
       )}
@@ -41,6 +60,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
 };
 
 Classic.propTypes = {
+  componentId: PropTypes.string.isRequired,
   numberOfPages: PropTypes.number.isRequired,
   currentPage: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,

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