@blaze-cms/react-page-builder 0.146.0-translations.8 → 0.147.0-rc-eagle.4

package/src/components/DataSummary/DataSummaryTypes/index.js

@@ -1,19 +1,23 @@
 import dynamic from 'next/dynamic';
 
 export const summaryComponents = {
-  list: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
+  list: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
   ),
-  large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
+  large: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
   ),
-  text: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
+  text: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
   ),
-  heading_large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary')
+  heading_large: dynamic(
+    () =>
+      import(
+        /* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary'
+      )
   ),
-  item_details: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
+  item_details: dynamic(
+    () =>
+      import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
   )
 };

package/src/components/DataSummary/helpers/get-record-id.js

@@ -0,0 +1,14 @@
+import { checkIfLoggedIn } from '@blaze-cms/core-auth-ui';
+
+const getRecordId = (entityForQuery, dataRecordId, parent) => {
+  const [recordId] = dataRecordId;
+  let foundUserId;
+
+  if (entityForQuery === 'user' && !recordId) {
+    const { id: userId } = checkIfLoggedIn();
+    foundUserId = userId;
+  }
+  return foundUserId || recordId || (parent && parent.itemId);
+};
+
+export default getRecordId;

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

@@ -6,6 +6,7 @@ import buildLoopPropsContent from './build-loop-props-content';
 import parseBooleanValues from './parse-boolean-values';
 import getLinkBasedOnValue from './get-link-based-on-value';
 import getLinkProps from './get-link-props';
+import getRecordId from './get-record-id';
 
 export {
   getDataSummaryQuery,
@@ -15,5 +16,6 @@ export {
   buildLoopPropsContent,
   parseBooleanValues,
   getLinkBasedOnValue,
-  getLinkProps
+  getLinkProps,
+  getRecordId
 };

package/src/components/EmailConfirm/EmailConfirm.js

@@ -6,7 +6,7 @@ import { parseUrl } from 'query-string';
 import EMAIL_CONFIRM_MUTATION from './mutation';
 import { renderChildren } from '../../helpers';
 
-const EmailConfirm = ({ modifier, errorMessage, children }) => {
+function EmailConfirm({ modifier, errorMessage, children }) {
   const router = useRouter();
   const { asPath } = router;
 
@@ -16,8 +16,7 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     onCompleted: ({ confirmUserEmail }) => {
       const {
         result: { extras }
-      } =
-        confirmUserEmail || {};
+      } = confirmUserEmail || {};
       const { redirectUrl } = extras || {};
       setDisplayError(false);
       if (redirectUrl && !setRedirectUrl) {
@@ -26,18 +25,17 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     }
   });
 
-  useEffect(
-    () => {
-      if (token) emailConfirmMutation({ variables: { token } });
-    },
-    [emailConfirmMutation, token]
-  );
+  useEffect(() => {
+    if (token) emailConfirmMutation({ variables: { token } });
+  }, [emailConfirmMutation, token]);
 
   if ((token && !called) || loading) return null;
   const renderedChildren = renderChildren(children);
 
-  return <>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</>;
-};
+  return (
+    <div>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</div>
+  );
+}
 
 EmailConfirm.propTypes = {
   modifier: PropTypes.string,

package/src/components/ErrorMessage/index.js

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
 
-export default dynamic(() =>
-  import(/* webpackChunkName: "blazePbLoginErrorMessage" */ './ErrorMessage')
+export default dynamic(
+  () => import(/* webpackChunkName: "blazePbLoginErrorMessage" */ './ErrorMessage')
 );

package/src/components/Image/GlobalLightbox/GlobalLightbox.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
 import { FaTimes } from 'react-icons/fa';
@@ -69,97 +69,93 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
   const imageCounter = `${index + 1} / ${images.length}`;
 
   return (
-    <>
-      {!!images.length && (
-        <div>
-          <div className="overlay" />
-          <div className="modal modal--full-screen modal--gallery modal--show">
-            <header className="modal__header modal__header--gallery">
-              <div className="modal__title modal__title--gallery">
-                {parentName || metaTitle || name}
-              </div>
-              <div
-                role="button"
-                className="modal__close"
-                onClick={handleClose}
-                aria-label="Close modal">
-                <i>
-                  <FaTimes />
-                </i>
-              </div>
-            </header>
-            <div className="modal__content modal__content--gallery">
-              <div className="gallery">
-                <div className="gallery__column gallery__column--slider">
-                  <div className="gallery__slider">
-                    <div className="slider__wrapper slider__wrapper--gallery open">
-                      <div className="slider__header slider__header--gallery">
-                        <div
-                          className="slider__counter slider__counter--gallery"
-                          data-testid="image-counter">
-                          {imageCounter}
-                        </div>
+    !!images.length && (
+      <div>
+        <div className="overlay" />
+        <div className="modal modal--full-screen modal--gallery modal--show">
+          <header className="modal__header modal__header--gallery">
+            <div className="modal__title modal__title--gallery">
+              {parentName || metaTitle || name}
+            </div>
+            <div
+              role="button"
+              className="modal__close"
+              onClick={handleClose}
+              aria-label="Close modal">
+              <i>
+                <FaTimes />
+              </i>
+            </div>
+          </header>
+          <div className="modal__content modal__content--gallery">
+            <div className="gallery">
+              <div className="gallery__column gallery__column--slider">
+                <div className="gallery__slider">
+                  <div className="slider__wrapper slider__wrapper--gallery open">
+                    <div className="slider__header slider__header--gallery">
+                      <div
+                        className="slider__counter slider__counter--gallery"
+                        data-testid="image-counter">
+                        {imageCounter}
                       </div>
+                    </div>
 
-                      <NavButton
-                        handleAction={handlePrevious}
-                        show={showPrevious}
-                        modifier="previous"
-                        ariaLabel="Previous Image"
-                      />
-
-                      <div className="slider slider--gallery">
-                        <div className="slider__list slider__list--gallery">
-                          <div className="slider__list-wrapper slider__list-wrapper--gallery">
-                            <div className="slider__slide slider__slide--gallery">
-                              {loading && <div />}
-                              {Object.keys(imgWrapperProps).length ? (
-                                <BlazeLink {...imgWrapperProps}>
-                                  <ResponsiveImage
-                                    src={imageUrl}
-                                    alt={altText}
-                                    sizeKey="globalLightbox"
-                                    data-testid="globalLightboxImage"
-                                  />
-                                </BlazeLink>
-                              ) : (
-                                <Fragment>
-                                  <ResponsiveImage
-                                    src={imageUrl}
-                                    alt={altText}
-                                    sizeKey="globalLightbox"
-                                    data-testid="globalLightboxImage"
-                                  />
-                                </Fragment>
-                              )}
-                            </div>
+                    <NavButton
+                      handleAction={handlePrevious}
+                      show={showPrevious}
+                      modifier="previous"
+                      ariaLabel="Previous Image"
+                    />
+
+                    <div className="slider slider--gallery">
+                      <div className="slider__list slider__list--gallery">
+                        <div className="slider__list-wrapper slider__list-wrapper--gallery">
+                          <div className="slider__slide slider__slide--gallery">
+                            {loading && <div />}
+                            {Object.keys(imgWrapperProps).length ? (
+                              <BlazeLink {...imgWrapperProps}>
+                                <ResponsiveImage
+                                  src={imageUrl}
+                                  alt={altText}
+                                  sizeKey="globalLightbox"
+                                  data-testid="globalLightboxImage"
+                                />
+                              </BlazeLink>
+                            ) : (
+                              <ResponsiveImage
+                                src={imageUrl}
+                                alt={altText}
+                                sizeKey="globalLightbox"
+                                data-testid="globalLightboxImage"
+                              />
+                            )}
                           </div>
                         </div>
                       </div>
-
-                      <NavButton
-                        ariaLabel="Next Image"
-                        handleAction={handleNext}
-                        show={showNext}
-                        modifier="next"
-                      />
                     </div>
-                    {(shouldDisplayCaption || shouldDisplayCredits) && (
-                      <ImageDetails
-                        caption={caption}
-                        credits={credits || imageCredits}
-                        shouldDisplayCaption={shouldDisplayCaption}
-                        shouldDisplayCredits={shouldDisplayCredits}
-                      />
-                    )}
+
+                    <NavButton
+                      ariaLabel="Next Image"
+                      handleAction={handleNext}
+                      show={showNext}
+                      modifier="next"
+                    />
                   </div>
+                  {(shouldDisplayCaption || shouldDisplayCredits) && (
+                    <ImageDetails
+                      caption={caption}
+                      credits={credits || imageCredits}
+                      shouldDisplayCaption={shouldDisplayCaption}
+                      shouldDisplayCredits={shouldDisplayCredits}
+                    />
+                  )}
                 </div>
               </div>
             </div>
           </div>
         </div>
-      )}
-    </>
+      </div>
+    )
   );
 };
 

package/src/components/Image/GlobalLightbox/NavButton.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavButton = ({ handleAction, show, modifier, ariaLabel }) => (
-  <>
-    {show && (
+const NavButton = ({ handleAction, show, modifier, ariaLabel }) =>
+  show ? (
+    <div
+      role="button"
+      className={`slider__button slider__button--gallery slider__button--${modifier}`}
+      onClick={handleAction}
+      aria-label={ariaLabel}>
       <div
-        role="button"
-        className={`slider__button slider__button--gallery slider__button--${modifier}`}
-        onClick={handleAction}
-        aria-label={ariaLabel}>
-        <div
-          className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
-          data-testid={`navButton-${modifier}`}
-        />
-      </div>
-    )}
-  </>
-);
+        className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
+        data-testid={`navButton-${modifier}`}
+      />
+    </div>
+  ) : null;
 
 NavButton.propTypes = {
   handleAction: PropTypes.func.isRequired,

package/src/components/Image/GlobalLightbox/index.js

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
 
-export default dynamic(() =>
-  import(/* webpackChunkName: "blazePbGlobalLightbox" */ './GlobalLightbox')
+export default dynamic(
+  () => import(/* webpackChunkName: "blazePbGlobalLightbox" */ './GlobalLightbox')
 );

package/src/components/Image/Image.js

@@ -36,10 +36,12 @@ const Image = ({
   const [displayLightbox, setDisplayLightbox] = useState(false);
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
 
-  const { caption, altText, hrefUrl, credits: imageDataCredits } = getImageData(
-    otherProps,
-    imageData
-  );
+  const {
+    caption,
+    altText,
+    hrefUrl,
+    credits: imageDataCredits
+  } = getImageData(otherProps, imageData);
 
   const href = url || hrefUrl;
 

package/src/components/Image/ImageFactory.js

@@ -41,11 +41,11 @@ const ImageFactory = props => {
     : getImageIds(imageRelation, relationData, imageId);
   const imageIds =
     updatedImageIds && updatedImageIds.length === 1 ? updatedImageIds[0] : updatedImageIds;
-  const { data: { getFile, getFiles = [] } = {}, loading, error } = useGetImages(
-    imageIds,
-    updatedImageIds && updatedImageIds.length > 1,
-    !!imgSrcToUse
-  );
+  const {
+    data: { getFile, getFiles = [] } = {},
+    loading,
+    error
+  } = useGetImages(imageIds, updatedImageIds && updatedImageIds.length > 1, !!imgSrcToUse);
   if (error) return error.message;
   if (loading) return '';
 

package/src/components/ItemList/hooks/use-item-list-id.js

@@ -5,21 +5,18 @@ const useItemListId = ({ listName }) => {
   const idFromStorage = getItemListId(listName);
   const [listId, setListId] = useState(idFromStorage);
 
-  useEffect(
-    () => {
-      const storageEventHandler = () => {
-        const newId = getItemListId(listName);
-        setListId(newId);
-      };
+  useEffect(() => {
+    const storageEventHandler = () => {
+      const newId = getItemListId(listName);
+      setListId(newId);
+    };
 
-      window.addEventListener('storage', storageEventHandler);
+    window.addEventListener('storage', storageEventHandler);
 
-      return () => {
-        window.removeEventListener('storage', storageEventHandler);
-      };
-    },
-    [listName]
-  );
+    return () => {
+      window.removeEventListener('storage', storageEventHandler);
+    };
+  }, [listName]);
 
   return { listId };
 };

package/src/components/Layout/Layout.js

@@ -4,7 +4,7 @@ import Wrapper from '../Wrapper';
 import { getClassModifiers } from '../../utils';
 import { useGetImages } from '../../hooks';
 import { getStylesToUpdate, checkIfRowHasColumns } from './helpers';
-import { renderChildren, hasChildren } from '../../helpers';
+import { renderChildren, hasChildren, getCustomHtmlProperties } from '../../helpers';
 import { COLUMN } from '../../constants';
 
 const Layout = React.forwardRef(
@@ -19,6 +19,7 @@ const Layout = React.forwardRef(
       dataNoSnippet,
       sticky,
       VariantComponent,
+      customHtmlProps = [],
       ...otherProps
     },
     ref
@@ -36,6 +37,8 @@ const Layout = React.forwardRef(
     const otherWrapperProps = {};
     if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
+    const customHtmlProperties = getCustomHtmlProperties({ customHtmlProps });
+
     const WrapperComponent = VariantComponent || Wrapper;
 
     return (
@@ -45,7 +48,8 @@ const Layout = React.forwardRef(
         className={type}
         modifiers={`${classModifiers}${additionalRowModifier}`}
         style={style}
-        {...otherWrapperProps}>
+        {...otherWrapperProps}
+        {...customHtmlProperties}>
         {title && <h2 className="heading heading--section">{title}</h2>}
         {renderChildren(children, otherProps)}
       </WrapperComponent>
@@ -64,6 +68,12 @@ Layout.propTypes = {
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
   VariantComponent: PropTypes.func,
+  customHtmlProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
@@ -76,7 +86,8 @@ Layout.defaultProps = {
   tagType: '',
   dataNoSnippet: false,
   sticky: false,
-  VariantComponent: null
+  VariantComponent: null,
+  customHtmlProps: []
 };
 
 export default Layout;

package/src/components/Layout/LayoutFactory.js

@@ -2,8 +2,8 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 import Layout from './Layout';
 
-const LayoutWithStickyTimer = dynamic(() =>
-  import(/* webpackChunkName: "blazePbLayoutWithStickyTimer" */ './LayoutWithStickyTimer')
+const LayoutWithStickyTimer = dynamic(
+  () => import(/* webpackChunkName: "blazePbLayoutWithStickyTimer" */ './LayoutWithStickyTimer')
 );
 
 const LayoutFactory = props => {

package/src/components/Layout/LayoutWithStickyTimer.js

@@ -8,21 +8,18 @@ const LayoutWithStickyTimer = ({ sticky, stickyTimer, ...otherProps }) => {
   const [isIntersecting, outerRef] = useInView({});
   const [isSticky, setIsSticky] = useState(sticky);
 
-  useEffect(
-    () => {
-      if (isIntersecting && sticky && !!stickyTimer) {
-        setIsSticky(true);
-        const timer = setTimeout(() => {
-          setIsSticky(false);
-        }, stickyTimer);
+  useEffect(() => {
+    if (isIntersecting && sticky && !!stickyTimer) {
+      setIsSticky(true);
+      const timer = setTimeout(() => {
+        setIsSticky(false);
+      }, stickyTimer);
 
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-    },
-    [isIntersecting, stickyTimer, sticky]
-  );
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isIntersecting, stickyTimer, sticky]);
 
   return <Layout {...otherProps} sticky={isSticky} ref={sticky ? outerRef : null} />;
 };

package/src/components/List/ListBuilder.js

@@ -65,7 +65,7 @@ const ListBuilder = props => {
   const limitToUse = limit || itemsToDisplayToUse.length;
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
-  const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
+  const initialOffset = getCurrentOffset(limitToUse, offset, itemsPerPageToUse, paginationIndex);
   const fields = buildQueryFields(entityFields, entityTypes, !isCard);
   const action = getSearchPublishedContent(fields);
   const actionKey = SEARCH_PUBLISHED_CONTENT;

package/src/components/List/ListFactory.js

@@ -92,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 = {},
@@ -119,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 '';
 

package/src/components/List/ListRender.js

@@ -36,12 +36,14 @@ const ListRender = props => {
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-  const { data = { [actionKey]: { results: [] }, total: 0 }, error, loading, fetchMore } = useQuery(
-    action,
-    {
-      variables: boostedVariables
-    }
-  );
+  const {
+    data = { [actionKey]: { results: [] }, total: 0 },
+    error,
+    loading,
+    fetchMore
+  } = useQuery(action, {
+    variables: boostedVariables
+  });
 
   if (loading && !listRef.current) {
     // don't render if loading for the first time with no reference

package/src/components/List/components/Full/FullRenderItem.js

@@ -45,10 +45,9 @@ const FullRenderItem = props => {
           pageBuilderID
         })}
       </div>
-      {!VariantComponent &&
-        !!parsedPropsToDisplay.length && (
-          <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
-        )}
+      {!VariantComponent && !!parsedPropsToDisplay.length && (
+        <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
+      )}
     </>
   );
 

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

@@ -25,12 +25,9 @@ const ListPagination = ({
     }
   };
 
-  useEffect(
-    () => {
-      if (isInfinite) setShowPagination(false);
-    },
-    [isInfinite]
-  );
+  useEffect(() => {
+    if (isInfinite) setShowPagination(false);
+  }, [isInfinite]);
 
   if (!showPagination) return null;
   const totalRecordsToFetch = limitToUse || listTotal;

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>
   );
 };