@blaze-cms/react-page-builder 0.145.1-core-styles.0 → 0.146.0-alpha.10

package/src/components/Image/Image.js

@@ -106,6 +106,7 @@ const Image = ({
         <div
           className="image__button image__button--count"
           role="button"
+          aria-label="Show more images"
           onClick={handleEnableLightbox}>
           <p>{countMessage}</p>
           <div className="arrow arrow--right" />

package/src/components/Image/Lightbox/Lightbox.js

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import Modal from '@blaze-react/modal';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import Modal from '../../ModalAdapter';
 import BlazeLink from '../../BlazeLink';
 import { IN_VIEW_CONFIG } from '../../../constants';
 

package/src/components/ItemList/ItemListNew/ItemListNew.js

@@ -32,10 +32,7 @@ const ItemListNew = ({ listName, modifier, text }) => {
   };
 
   return (
-    <BlazeButton
-      className={`item-list-new ${modifier}`}
-      onClick={handleClick}
-      aria-label={`Create new ${listName}`}>
+    <BlazeButton className={`item-list-new ${modifier}`} onClick={handleClick}>
       {text}
     </BlazeButton>
   );

package/src/components/List/ListRender.js

@@ -34,7 +34,6 @@ const ListRender = props => {
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-
   const { data = {}, error, loading, fetchMore } = useQuery(action, {
     variables: boostedVariables
   });

package/src/components/List/components/Cards/CardsRender.js

@@ -38,7 +38,9 @@ const CardsRender = ({
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
+
   if (imagesLoading) return '';
+
   const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 

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

@@ -16,9 +16,10 @@ const FullRender = ({
   graphqlEntityMap,
   ...props
 }) => {
+  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
+
   const contextProps = useContext(MainContext);
   const pageBuilderID = uuid();
-  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;

package/src/components/Loading/Loading.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DOTS_TYPE, LOADING_CLASSNAME, SPINNER_TYPE } from './constants';
+import { getLoaderType } from './helpers';
+
+const Loading = ({ type }) => {
+  const loaderType = getLoaderType(type);
+  const CLASSNAME = `${LOADING_CLASSNAME}__${loaderType}`;
+
+  return (
+    <div className={CLASSNAME}>
+      {loaderType === DOTS_TYPE && (
+        <>
+          <div className={`${CLASSNAME}__dot`} />
+          <div className={`${CLASSNAME}__dot`} />
+          <div className={`${CLASSNAME}__dot`} />
+        </>
+      )}
+    </div>
+  );
+};
+
+Loading.propTypes = {
+  type: PropTypes.string
+};
+
+Loading.defaultProps = {
+  type: SPINNER_TYPE
+};
+
+export default Loading;

package/src/components/Loading/constants.js

@@ -0,0 +1,5 @@
+const LOADING_CLASSNAME = 'blaze-loading';
+const SPINNER_TYPE = 'spinner';
+const DOTS_TYPE = 'dots';
+
+export { LOADING_CLASSNAME, SPINNER_TYPE, DOTS_TYPE };

package/src/components/Loading/helpers.js

@@ -0,0 +1,9 @@
+import { DOTS_TYPE, SPINNER_TYPE } from './constants';
+
+const getLoaderType = type => {
+  const supportedTypes = [DOTS_TYPE, SPINNER_TYPE];
+  if (supportedTypes.find(sType => sType === type)) return type;
+  return SPINNER_TYPE;
+};
+
+export { getLoaderType };

package/src/components/Loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;

package/src/components/Menu/Menu.js

@@ -63,7 +63,7 @@ const Menu = ({
               <BlazeButton
                 className={`menu--mobile-button ${mobileButtonModifier}`}
                 onClick={() => setShowMobileMenu(!showMobileMenu)}
-                aria-label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
+                label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
                 <i>
                   {showMobileMenu ? (
                     <MdClose className={closeIconModifier} />

package/src/components/MenuItem/MenuEntitiesItem.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import MenuItemRender from './MenuItemRender';
+import {
+  buildPropsQuery,
+  getEntityData,
+  getRequiredSchemas,
+  getUnpublishedEntityName,
+  getUpdatedFilterBy,
+  filterQuerySetup,
+  filtersSetup,
+  getUpdatedItemsToDisplay,
+  getUpdatedSortProperties,
+  shouldReturn,
+  shouldSkipSingleQuery
+} from '../../helpers';
+import { useGetEntitySchemasAsObj } from '../../hooks';
+import { generateSingleItemQuery } from '../../application/query';
+import { AND, SEARCH_PUBLISHED_CONTENT } from '../../constants';
+
+const MenuEntitiesItem = ({ entities, parent, ...props }) => {
+  const { itemEntity: parentEntity, itemId: parentId } = parent;
+  const {
+    operator: filterOperator = AND,
+    filterByProperty = [],
+    sortProperties = [],
+    itemsToDisplay,
+    filterBy = [],
+    sortby,
+    sort
+  } = props;
+
+  const unpublishedEntityName = getUnpublishedEntityName(parentEntity);
+
+  const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(
+    sort,
+    sortby,
+    sortProperties
+  );
+
+  const {
+    data: mainSchemas = {},
+    loading: entityObjloading,
+    error: entityObjError
+  } = useGetEntitySchemasAsObj([unpublishedEntityName, ...entities]);
+
+  const [filterEntity] = entities;
+
+  const { [filterEntity]: filterEntitySchema = {} } = mainSchemas;
+
+  const entitiesTypes = entities.map(entity => getEntityData(entity, mainSchemas[entity]));
+  const graphqlEntityMap = entitiesTypes.reduce(
+    (acc, entityType) => ({ ...acc, [entityType.entityType]: entityType.entity }),
+    {}
+  );
+  const docTypes = entitiesTypes.map(({ docType }) => docType);
+  const entityTypes = entitiesTypes.map(({ entityType }) => entityType);
+
+  const entityFields = buildPropsQuery(filterEntitySchema, ['name', 'url']) || '';
+  const parentSchema = mainSchemas[unpublishedEntityName] || {};
+
+  const {
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    inheritedFilters,
+    queryProps,
+    getAction,
+    action
+  } = filtersSetup({
+    itemEntityUpdated: unpublishedEntityName,
+    currentSchema: parentSchema,
+    filterEntitySchema,
+    filterByProperty,
+    entityFields,
+    entityTypes,
+    filterBy,
+    entities
+  });
+
+  const {
+    data: { entityData: parentEntityData = {} } = {},
+    error: singleItemQueryError,
+    loading: singleItemQueryLoading
+  } = useQuery(generateSingleItemQuery(getAction, queryProps), {
+    variables: { id: parentId },
+    skip: shouldSkipSingleQuery(entityObjloading, getAction, queryProps)
+  });
+
+  const {
+    data: requiredSchema = {},
+    loading: schemaLoading,
+    error: schemaError
+  } = useGetEntitySchemasAsObj(
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
+    entityObjloading
+  );
+
+  const getEntitySchemas = Object.values(requiredSchema);
+
+  const updatedItemsToDisplay = getUpdatedItemsToDisplay({
+    inheritedFilters,
+    parentEntityData,
+    itemsToDisplay,
+    parentSchema
+  });
+
+  const variableProps = {
+    sortProperties: updatedSortProperties,
+    filterByProperty,
+    sortby: null,
+    sort: null,
+    filterBy
+  };
+
+  const updatedFilterBy = getUpdatedFilterBy(
+    inheritedFilters,
+    parentEntityData,
+    filterEntitySchema,
+    parentSchema,
+    parentId,
+    variableProps
+  );
+
+  const { variables } = filterQuerySetup({
+    itemsToDisplay: updatedItemsToDisplay,
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    entity: filterEntity,
+    docType: docTypes,
+    getEntitySchemas,
+    updatedFilterBy,
+    variableProps,
+    filterOperator
+  });
+
+  const hasNoItemsToDisplayOrFilter = !updatedItemsToDisplay.length && !updatedFilterBy;
+
+  const { data = {} } = useQuery(action, {
+    variables,
+    skip: shouldReturn(
+      hasNoItemsToDisplayOrFilter,
+      singleItemQueryLoading,
+      singleItemQueryError,
+      entityObjloading,
+      entityObjError,
+      schemaLoading,
+      schemaError
+    )
+  });
+
+  const { results } = data[SEARCH_PUBLISHED_CONTENT] || {};
+
+  if (!results) return null;
+
+  return results.map(item => {
+    const itemParent = {
+      itemId: item.id,
+      itemEntity: graphqlEntityMap[item.__typename]
+    };
+    return <MenuItemRender {...props} parent={itemParent} url={item.url || props.url} />;
+  });
+};
+
+MenuEntitiesItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
+  modifier: PropTypes.string,
+  parent: PropTypes.object,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  entities: PropTypes.array,
+  limit: PropTypes.number,
+  offset: PropTypes.number,
+  sortby: PropTypes.array,
+  filterBy: PropTypes.array,
+  sort: PropTypes.string,
+  operator: PropTypes.string.isRequired,
+  filterOperator: PropTypes.string.isRequired,
+  sortProperties: PropTypes.array,
+  filterByProperty: PropTypes.array,
+  itemsToDisplay: PropTypes.array
+};
+
+MenuEntitiesItem.defaultProps = {
+  children: null,
+  modifier: '',
+  limit: 0,
+  offset: 0,
+  itemsToDisplay: [],
+  sort: '',
+  sortby: [],
+  sortProperties: [],
+  filterByProperty: [],
+  parent: {},
+  filterBy: [],
+  text: '',
+  url: '',
+  entities: []
+};
+
+export default MenuEntitiesItem;

package/src/components/MenuItem/MenuItem.js

@@ -1,83 +1,33 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
-import { hasChildren } from '../../helpers';
-import BlazeLink from '../BlazeLink';
-import MenuContext from '../Menu/MenuContext';
+import MenuItemRender from './MenuItemRender';
+import MenuEntitiesItem from './MenuEntitiesItem';
 
-const MenuItem = ({ children, eventType, text, modifier, url }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+const MenuItem = ({ entities, parent, ...props }) => {
+  const hasEntities = entities && entities.length;
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  if (!hasEntities) return <MenuItemRender parent={parent} {...props} />;
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
-  const handleItemEvent = ({ type }) => {
-    if (isHoverEvent) {
-      if (type === MOUSE_ENTER) {
-        setDisplayChildren(true);
-      }
-      if (type === MOUSE_LEAVE) {
-        setDisplayChildren(false);
-      }
-    }
-  };
-  const hasValidChildren = hasChildren(children);
-
-  return (
-    <li
-      className={modifier}
-      onMouseEnter={handleItemEvent}
-      onMouseLeave={handleItemEvent}
-      aria-label={text}>
-      <div className="menu--item--link">
-        {url ? (
-          <BlazeLink href={url}>{text}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent} aria-label={text}>
-            {text}
-          </span>
-        )}
-        {hasValidChildren && (
-          <i
-            role="button"
-            aria-label={
-              displayChildren ? `Collapse ${text} menu items` : `Expand ${text} menu items`
-            }
-            className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
-            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
-          </i>
-        )}
-      </div>
-      {hasValidChildren && (
-        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
-      )}
-    </li>
-  );
+  return <MenuEntitiesItem entities={entities} parent={parent} {...props} />;
 };
 
 MenuItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
+  parent: PropTypes.object,
   text: PropTypes.string,
   url: PropTypes.string,
-  eventType: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  entities: PropTypes.array
 };
 
 MenuItem.defaultProps = {
-  url: '',
+  children: null,
   modifier: '',
+  parent: {},
   text: '',
-  children: null
+  url: '',
+  entities: []
 };
 
 export default MenuItem;

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,92 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+import { injectHelperIntoTemplate } from './helpers';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

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

@@ -0,0 +1,3 @@
+import injectHelperIntoTemplate from './inject-helper-into-template';
+
+export { injectHelperIntoTemplate };

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -0,0 +1,11 @@
+const injectHelperIntoTemplate = (template, helper) => {
+  if (!helper || !template) return template;
+
+  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+
+  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+
+  return result;
+};
+
+export default injectHelperIntoTemplate;

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

@@ -0,0 +1,3 @@
+import ModalAdapter from './ModalAdapter';
+
+export default ModalAdapter;

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

@@ -38,6 +38,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case CHECKBOX:
         return (
           <div
@@ -56,6 +57,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case SELECT:
         return (
           <div
@@ -74,6 +76,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case RANGE:
         return (
           !!areAggregationsAvailable && (

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

@@ -9,7 +9,7 @@ const MobileFormToolbar = ({ formId, handleReset }) => (
       data-testid="reset-button"
       role="button"
       onClick={handleReset}
-      aria-label="Reset Filters">
+      aria-label="Reset search filters">
       {RESET}
     </div>
 

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

@@ -10,13 +10,14 @@ const ResetDesktopForm = ({ handleReset }) => (
       className="icon-button icon-button--reset"
       title="reset--button"
       data-testid="reset-icon"
-      onClick={handleReset}>
+      onClick={handleReset}
+      aria-label="Reset search filters">
       <i>
         <FaRedoAlt />
       </i>
     </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button" aria-label="Reset Filters">
+    <div role="button" onClick={handleReset} data-testid="reset-button">
       {RESET}
     </div>
   </div>