@blaze-cms/react-page-builder 0.146.0-translations.6 → 0.147.0-rc-eagle.2

package/src/components/List/ListFactory.js

@@ -31,6 +31,8 @@ import { getItemListId, getItemListIds } from '../ItemList/helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
 
+export const VariantContext = React.createContext(null);
+
 const ListFactory = props => {
   const {
     entity: legacyEntity,
@@ -46,7 +48,8 @@ const ListFactory = props => {
     allSearchFilters,
     operator: filterOperator,
     sortProperties,
-    itemListName
+    itemListName,
+    VariantComponent
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -89,10 +92,8 @@ const ListFactory = props => {
     error: schemasError
   } = useGetEntitySchemasAsObj([updatedParentEntity, ...entitiesToUse]);
 
-  const {
-    [updatedParentEntity]: currentSchema = {},
-    [filterEntity]: filterEntitySchema = {}
-  } = mainSchemas;
+  const { [updatedParentEntity]: currentSchema = {}, [filterEntity]: filterEntitySchema = {} } =
+    mainSchemas;
 
   const {
     data: requiredSchema = {},
@@ -116,13 +117,14 @@ const ListFactory = props => {
     skip: schemasLoading || (!inheritedFilters.length && queryProps === ID)
   });
 
-  const { data: itemListData = {}, error: itemListError, loading: itemListLoading } = useQuery(
-    getItemList,
-    {
-      variables: { id: itemListId },
-      skip: !itemListId
-    }
-  );
+  const {
+    data: itemListData = {},
+    error: itemListError,
+    loading: itemListLoading
+  } = useQuery(getItemList, {
+    variables: { id: itemListId },
+    skip: !itemListId
+  });
 
   if (!hasRequiredItemListDetails({ itemListName, router, itemListId, queryItemListId })) return '';
 
@@ -176,7 +178,11 @@ const ListFactory = props => {
     mainSchemas
   };
 
-  return <ListBuilder {...listProps} />;
+  return (
+    <VariantContext.Provider value={VariantComponent}>
+      <ListBuilder {...listProps} />
+    </VariantContext.Provider>
+  );
 };
 
 ListFactory.propTypes = {
@@ -193,7 +199,8 @@ ListFactory.propTypes = {
   sort: PropTypes.string,
   allSearchFilters: PropTypes.array,
   sortProperties: PropTypes.array,
-  itemListName: PropTypes.string
+  itemListName: PropTypes.string,
+  VariantComponent: PropTypes.func
 };
 
 ListFactory.defaultProps = {
@@ -208,7 +215,8 @@ ListFactory.defaultProps = {
   sort: '',
   operator: AND,
   allSearchFilters: [],
-  itemListName: ''
+  itemListName: '',
+  VariantComponent: null
 };
 
 export default ListFactory;

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,85 @@ 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]: { results: [] }, 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 reference
+    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/Full/FullRenderItem.js

@@ -2,44 +2,42 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import { MainContext } from '@blaze-cms/nextjs-components';
+import { VariantContext } from '../../ListFactory';
 import BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';
 import Banner from '../../../Banner';
 import { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';
 
-const FullRenderItem = ({
-  isInfinite,
-  pageBuilderComponents,
-  entityProps,
-  propsToDisplay,
-  entity,
-  index,
-  itemId,
-  listTotal,
-  initialOffset,
-  currentListLength,
-  triggerInfiniteScroll,
-  parent,
-  pageBuilderID,
-  displayCount,
-  shouldRenderBanner,
-  bannerProps,
-  bannerIndex
-}) => {
+const FullRenderItem = props => {
+  const {
+    isInfinite,
+    pageBuilderComponents,
+    entityProps,
+    propsToDisplay,
+    entity,
+    index,
+    itemId,
+    listTotal,
+    initialOffset,
+    currentListLength,
+    triggerInfiniteScroll,
+    parent,
+    pageBuilderID,
+    displayCount,
+    shouldRenderBanner,
+    bannerProps,
+    bannerIndex
+  } = props;
   const { hasGTM } = useContext(MainContext);
+  const VariantComponent = useContext(VariantContext);
+
   if (!pageBuilderComponents) return null;
   const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);
   const currentItemIndex = initialOffset + index;
   const renderWaypoint =
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
-  return (
+
+  const defaultContent = (
     <>
-      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}
-      {displayCount && (
-        <div className="heading heading--section heading--section--count">
-          <span className="section-number">{currentItemIndex + 1}</span>
-          <span className="section-total">/{listTotal}</span>
-        </div>
-      )}
       <div className="list__item list__item--full">
         {BuildPBComponents(pageBuilderComponents, {
           parent: { ...parent, itemId, itemEntity: entity },
@@ -47,9 +45,27 @@ const FullRenderItem = ({
           pageBuilderID
         })}
       </div>
-      {!!parsedPropsToDisplay.length && (
+      {!VariantComponent && !!parsedPropsToDisplay.length && (
         <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
       )}
+    </>
+  );
+
+  return (
+    <>
+      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}
+      {displayCount && (
+        <div className="heading heading--section heading--section--count">
+          <span className="section-number">{currentItemIndex + 1}</span>
+          <span className="section-total">/{listTotal}</span>
+        </div>
+      )}
+      {VariantComponent ? (
+        <VariantComponent {...props}>{defaultContent}</VariantComponent>
+      ) : (
+        defaultContent
+      )}
+
       {shouldRenderBanner && <Banner {...bannerProps} renderCounter={bannerIndex} />}
     </>
   );

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,27 +16,18 @@ 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();
     }
   };
 
-  useEffect(
-    () => {
-      if (isInfinite) setShowPagination(false);
-    },
-    [isInfinite]
-  );
+  useEffect(() => {
+    if (isInfinite) setShowPagination(false);
+  }, [isInfinite]);
 
   if (!showPagination) return null;
   const totalRecordsToFetch = limitToUse || listTotal;
@@ -54,13 +46,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/components/Pagination/LoadMore.js

@@ -15,15 +15,13 @@ const LoadMore = ({ name, currentPage, query, url, triggerInfiniteScroll, isLast
   };
 
   return (
-    <>
-      <BlazeLink
-        className="pagination_load-more"
-        role="button"
-        href={nextPageLink}
-        onClick={loadMoreItems}>
-        {LOAD_MORE_STRING}
-      </BlazeLink>
-    </>
+    <BlazeLink
+      className="pagination_load-more"
+      role="button"
+      href={nextPageLink}
+      onClick={loadMoreItems}>
+      {LOAD_MORE_STRING}
+    </BlazeLink>
   );
 };
 

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

@@ -8,12 +8,11 @@ const buildQueryBooster = (props, data) => {
   const { function_score: { query, functions = [] } = {} } = parsedRawQuery;
 
   const boostedPropsFunctios = recencyBoostProperty.map(propToBoost => ({
-    gauss: {
+    exp: {
       [propToBoost]: {
-        origin: 'now',
-        scale: '30d',
-        offset: '7d',
-        decay: 0.5
+        scale: '14d',
+        decay: 0.99, // high value slow decay
+        offset: '7d'
       }
     }
   }));
@@ -21,7 +20,14 @@ const buildQueryBooster = (props, data) => {
   const updatedData = {
     function_score: {
       query: functions.length ? query : parsedRawQuery,
-      functions: [...functions, ...boostedPropsFunctios],
+      functions: [
+        ...functions,
+        ...boostedPropsFunctios,
+        {
+          weight: 0.01 // minimum score to avoid zeroing out
+        }
+      ],
+      score_mode: 'sum',
       boost_mode: 'multiply'
     }
   };

package/src/components/List/helpers/sort-aggs.js

@@ -5,8 +5,7 @@ const sortAggs = data => {
     searchPublishedContent: {
       rawResults: { aggregations: { azCount: { buckets = [] } = {} } = {} } = {}
     } = {}
-  } =
-    data || {};
+  } = data || {};
 
   return [...buckets].sort((a, b) => {
     if (Number(a.key) || specialCheck.test(a.key)) return 1;

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/Menu/Menu.js

@@ -11,7 +11,6 @@ import BlazeLink from '../BlazeLink';
 const Menu = ({
   children,
   collapse,
-  openActiveSubmenus,
   modifier,
   mobileMenuModifier,
   mobileMenuChildrenModifier,
@@ -29,17 +28,14 @@ const Menu = ({
   const router = useRouter();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
-  useEffect(
-    () => {
-      const handleRouteChange = () => setShowMobileMenu(false);
-      router.events.on('routeChangeStart', handleRouteChange);
+  useEffect(() => {
+    const handleRouteChange = () => setShowMobileMenu(false);
+    router.events.on('routeChangeStart', handleRouteChange);
 
-      return () => {
-        router.events.off('routeChangeStart', handleRouteChange);
-      };
-    },
-    [router.events]
-  );
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [router.events]);
 
   const shouldDisplayChildren = collapse ? showMobileMenu : true;
 
@@ -55,7 +51,7 @@ const Menu = ({
   });
 
   return (
-    <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
+    <MenuContext.Provider value={{ showMobileMenu }}>
       <div className={menuWrapperClasses}>
         {collapse && (
           <div className="menu--mobile-wrapper">
@@ -76,12 +72,11 @@ const Menu = ({
             </div>
           </div>
         )}
-        {logoOnMobile &&
-          !showMobileMenu && (
-            <Link href="/" name="mobile menu">
-              <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
-            </Link>
-          )}
+        {logoOnMobile && !showMobileMenu && (
+          <Link href="/" name="mobile menu">
+            <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+          </Link>
+        )}
 
         <div className="menu--desktop-wrapper">
           <ul className={childModifiers}>
@@ -104,7 +99,6 @@ const Menu = ({
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
-  openActiveSubmenus: PropTypes.bool.isRequired,
   logoOnMobile: PropTypes.bool.isRequired,
   logoOnDesktop: PropTypes.bool,
   logoOnMobileUrl: PropTypes.string,

package/src/components/Menu/MenuContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });
+const MenuContext = React.createContext({ showMobileMenu: false });
 
 export default MenuContext;