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

package/src/components/ContentGroup/ContentGroup.js

@@ -3,14 +3,27 @@ import PropTypes from 'prop-types';
 import { CONTENT_GROUP_TYPES } from './constants';
 import ContentGroupTabs from './ContentGroupTabs';
 import ContentGroupAccordion from './ContentGroupAccordion';
-import { getSectionsData } from './helpers';
+import ContentGroupDataFetcher from './ContentGroupDataFetcher';
+import { getSectionsData, buildDataSections } from './helpers';
 import getStructuredDataProperties from './helpers/get-structured-data-properties';
 import { getCustomHtmlProperties } from '../../helpers';
 
 const VALID_TYPES = Object.values(CONTENT_GROUP_TYPES);
 
-const ContentGroup = ({ contentType, isFaqContent, children, customHtmlProps, ...props }) => {
-  const groupSections = children?.props?.children?.[1];
+const ContentGroup = ({
+  contentType,
+  isFaqContent,
+  children,
+  customHtmlProps,
+  simpleData,
+  dataProperty,
+  ...props
+}) => {
+  const hasSimpleData = Array.isArray(simpleData) && simpleData.length > 0;
+  const dataPropertyName = Array.isArray(dataProperty) ? dataProperty[0] : dataProperty;
+  const hasDataProperty = !!dataPropertyName;
+
+  const childGroupSections = children?.props?.children?.[1];
 
   const GroupComponent = useMemo(
     () =>
@@ -30,9 +43,32 @@ const ContentGroup = ({ contentType, isFaqContent, children, customHtmlProps, ..
     };
   }, [isFaqContent, customHtmlProps]);
 
-  if (!groupSections || !groupSections.length || !VALID_TYPES.includes(contentType)) return '';
+  if (!VALID_TYPES.includes(contentType)) return '';
+
+  if (!hasSimpleData && hasDataProperty) {
+    return (
+      <WrapperComponent {...topWrapperProps}>
+        <ContentGroupDataFetcher
+          dataProperty={dataPropertyName}
+          contentType={contentType}
+          {...props}
+          {...schemaProperties}
+        />
+      </WrapperComponent>
+    );
+  }
+
+  let groupSections;
+  let sectionsData;
 
-  const sectionsData = getSectionsData(groupSections);
+  if (hasSimpleData) {
+    ({ groupSections, sectionsData } = buildDataSections(simpleData));
+  } else {
+    groupSections = childGroupSections;
+    if (!groupSections || !groupSections.length) return '';
+    sectionsData = getSectionsData(groupSections);
+  }
+  if (!groupSections || !groupSections.length) return '';
 
   return (
     <WrapperComponent {...topWrapperProps}>
@@ -48,7 +84,7 @@ const ContentGroup = ({ contentType, isFaqContent, children, customHtmlProps, ..
 };
 
 ContentGroup.propTypes = {
-  children: PropTypes.object.isRequired,
+  children: PropTypes.object,
   contentType: PropTypes.oneOf(VALID_TYPES).isRequired,
   isFaqContent: PropTypes.bool,
   customHtmlProps: PropTypes.arrayOf(
@@ -56,12 +92,22 @@ ContentGroup.propTypes = {
       name: PropTypes.string,
       value: PropTypes.string
     })
-  )
+  ),
+  simpleData: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      text: PropTypes.string
+    })
+  ),
+  dataProperty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
 };
 
 ContentGroup.defaultProps = {
+  children: null,
   isFaqContent: false,
-  customHtmlProps: []
+  customHtmlProps: [],
+  simpleData: null,
+  dataProperty: null
 };
 
 export default ContentGroup;

package/src/components/ContentGroup/ContentGroupDataFetcher.js

@@ -0,0 +1,74 @@
+import React, { useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useQuery, gql } from '@apollo/client';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
+import ContentGroupTabs from './ContentGroupTabs';
+import ContentGroupAccordion from './ContentGroupAccordion';
+import { buildDataSections } from './helpers';
+import { CONTENT_GROUP_TYPES } from './constants';
+
+const PLACEHOLDER_QUERY = gql`
+  query {
+    __typename
+  }
+`;
+
+const ContentGroupDataFetcher = ({ dataProperty, parent, contentType, ...props }) => {
+  const { isPreview } = useContext(MainContext);
+  const dataPropertyName = Array.isArray(dataProperty) ? dataProperty[0] : dataProperty;
+
+  const { data: schemaData, loading: schemaLoading } = useQuery(getSingleEntitySchema, {
+    variables: { id: parent?.itemEntity },
+    skip: !parent?.itemEntity || !dataPropertyName
+  });
+
+  const dataQuery = useMemo(() => {
+    if (!schemaData) return null;
+    const { getEntitySchema } = schemaData;
+    const { actions: { getPublished, get } = {} } = getEntitySchema;
+    const actionKey = isPreview ? get : getPublished || get;
+    if (!actionKey) return null;
+    return generateSingleItemQuery(actionKey, `${dataPropertyName} { label text }`);
+  }, [schemaData, isPreview, dataPropertyName]);
+
+  const { data: recordData, loading: recordLoading } = useQuery(dataQuery || PLACEHOLDER_QUERY, {
+    variables: { id: parent?.itemId },
+    skip: !dataQuery || !parent?.itemId
+  });
+
+  if (schemaLoading || recordLoading) return '';
+  if (!recordData?.entityData) return null;
+
+  const propertyData = recordData.entityData[dataPropertyName];
+  if (!propertyData || !propertyData.length) return null;
+
+  const { groupSections, sectionsData } = buildDataSections(propertyData);
+
+  if (!groupSections.length) return null;
+
+  const GroupComponent =
+    contentType === CONTENT_GROUP_TYPES.ACCORDION ? ContentGroupAccordion : ContentGroupTabs;
+
+  return (
+    <GroupComponent
+      contentType={contentType}
+      groupSections={groupSections}
+      sectionsData={sectionsData}
+      {...props}
+    />
+  );
+};
+
+ContentGroupDataFetcher.propTypes = {
+  dataProperty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  parent: PropTypes.object,
+  contentType: PropTypes.string.isRequired
+};
+
+ContentGroupDataFetcher.defaultProps = {
+  dataProperty: null,
+  parent: null
+};
+
+export default ContentGroupDataFetcher;

package/src/components/ContentGroup/helpers/build-data-sections.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import getComponentId from '../../../helpers/get-component-id';
+
+const TextBlock = dynamic(() => import('../../TextBlock'));
+const ContentGroupSection = dynamic(() => import('../../ContentGroupSection'));
+
+const buildDataSections = (items = []) => {
+  const itemData = items.map((item, i) => {
+    if (!item || !item.text || !item.label) return null;
+
+    const sectionName = getComponentId(item.label || `section-${i}`, true, true);
+    return {
+      sectionName,
+      label: item.label,
+      sectionContent: (
+        <ContentGroupSection key={sectionName} name={sectionName} disableChildCheck>
+          <TextBlock html={item.text} name={`${sectionName}-text`} />
+        </ContentGroupSection>
+      )
+    };
+  });
+
+  return itemData.filter(Boolean).reduce(
+    (acc, { sectionName, label, sectionContent }) => {
+      if (!sectionName || !sectionContent) return acc;
+      acc.groupSections.push(sectionContent);
+      acc.sectionsData.push([sectionName, label]);
+      return acc;
+    },
+    { groupSections: [], sectionsData: [] }
+  );
+};
+
+export default buildDataSections;

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

@@ -1,4 +1,5 @@
 import getSectionsData from './get-sections-data';
 import getActiveTab from './get-active-tab';
+import buildDataSections from './build-data-sections';
 
-export { getSectionsData, getActiveTab };
+export { getSectionsData, getActiveTab, buildDataSections };

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 
-const ContentGroupSection = ({ children, name }) => {
-  if (!hasChildren(children)) return null;
+const ContentGroupSection = ({ children, name, disableChildCheck }) => {
+  if (!disableChildCheck && !hasChildren(children)) return null;
 
   return (
     <div key={name} className="content-group-section">

package/src/components/Iframe/Iframe.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import IframeResizer from 'iframe-resizer-react';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import { IFRAME_CLASS, DEFAULT_WIDTH } from './constants';
 
-const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
-  if (!src) return null;
+const UNSAFE_URL_PATTERN = /^(javascript|data):/i;
+
+const isSafeUrl = url => !UNSAFE_URL_PATTERN.test(url.trim());
+
+const Iframe = ({ src, modifier, width, height, enableScrolling, parent }) => {
+  const {
+    data: [resolvedSrc]
+  } = useStringTemplate(parent, [src || '']);
+  if (!resolvedSrc || !isSafeUrl(resolvedSrc)) return null;
   const modifierString = modifier ? ` ${modifier}` : '';
   const iframeClassName = `${IFRAME_CLASS}${modifierString}`;
   const defaultWidth = !width ? DEFAULT_WIDTH : {};
@@ -13,7 +21,7 @@ const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
       <IframeResizer
         scrolling={enableScrolling}
         autoResize
-        src={src}
+        src={resolvedSrc}
         sizeHeight={!height}
         height={height}
         width={width}
@@ -24,13 +32,21 @@ const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
 };
 
 Iframe.propTypes = {
-  src: PropTypes.string.isRequired,
+  src: PropTypes.string,
   enableScrolling: PropTypes.bool,
   modifier: PropTypes.string,
   width: PropTypes.string,
-  height: PropTypes.string
+  height: PropTypes.string,
+  parent: PropTypes.object
 };
 
-Iframe.defaultProps = { enableScrolling: false, modifier: '', width: '', height: '' };
+Iframe.defaultProps = {
+  src: '',
+  enableScrolling: false,
+  modifier: '',
+  width: '',
+  height: '',
+  parent: {}
+};
 
 export default Iframe;

package/src/components/Layout/Layout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import Wrapper from '../Wrapper';
 import { getClassModifiers } from '../../utils';
 import { useGetImages } from '../../hooks';
@@ -15,6 +16,8 @@ const Layout = React.forwardRef(
       settings,
       modifier,
       backgroundImage,
+      backgroundImageUrl,
+      parent,
       tagType,
       dataNoSnippet,
       sticky,
@@ -24,10 +27,14 @@ const Layout = React.forwardRef(
     },
     ref
   ) => {
+    const {
+      data: [resolvedBackgroundImageUrl]
+    } = useStringTemplate(parent, [backgroundImageUrl || '']);
     const {
       data: { getFile: { url = null } = {} }
-    } = useGetImages(backgroundImage);
-    const style = getStylesToUpdate({ backgroundImage: url });
+    } = useGetImages(backgroundImage, false, !!resolvedBackgroundImageUrl);
+    const backgroundUrl = resolvedBackgroundImageUrl || url;
+    const style = getStylesToUpdate({ backgroundImage: backgroundUrl });
     const { title } = settings;
     const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });
     const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
@@ -65,6 +72,8 @@ Layout.propTypes = {
   }),
   modifier: PropTypes.string,
   backgroundImage: PropTypes.string,
+  backgroundImageUrl: PropTypes.string,
+  parent: PropTypes.object,
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
   VariantComponent: PropTypes.func,
@@ -82,6 +91,8 @@ Layout.defaultProps = {
     title: ''
   },
   backgroundImage: '',
+  backgroundImageUrl: '',
+  parent: {},
   modifier: '',
   tagType: '',
   dataNoSnippet: false,

package/src/components/Menu/Menu.js

@@ -11,6 +11,7 @@ import BlazeLink from '../BlazeLink';
 const Menu = ({
   children,
   collapse,
+  openActiveSubmenus,
   modifier,
   mobileMenuModifier,
   mobileMenuChildrenModifier,
@@ -51,7 +52,7 @@ const Menu = ({
   });
 
   return (
-    <MenuContext.Provider value={{ showMobileMenu }}>
+    <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
       <div className={menuWrapperClasses}>
         {collapse && (
           <div className="menu--mobile-wrapper">
@@ -99,6 +100,7 @@ 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 });
+const MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });
 
 export default MenuContext;

package/src/components/MenuItem/MenuItemRender.js

@@ -1,17 +1,23 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate } from './helpers';
+import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+  const router = useRouter();
+  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
+
+  const isHoverEvent = eventType === HOVER;
+  const isClickEvent = eventType === CLICK;
+
   const {
     loading: loadingText,
     data: [textToUse]
@@ -21,14 +27,24 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const router = useRouter();
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
+  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
+  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
   const hasValidChildren = hasChildren(children);
 
+  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
+
   useEffect(() => {
-    if (!showMobileMenu) setDisplayChildren(false);
-  }, [showMobileMenu]);
+    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
+  }, [
+    children,
+    isClickEvent,
+    loadingUrl,
+    openActiveSubmenus,
+    router,
+    shouldPreOpen,
+    showMobileMenu
+  ]);
 
   useEffect(() => {
     if (isHoverEvent) {
@@ -38,6 +54,8 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   if (loadingUrl || loadingText) return '';
 
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -55,15 +73,25 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
+  const menuItemLinkClassname = classnames('menu--item--link', {
+    'menu--item--link--active': isActive,
+    'menu--item--link--active-parent': isActiveParent
+  });
+
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className="menu--item--link"
+        className={menuItemLinkClassname}
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
-
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
         {hasValidChildren && (
           <i
             role="button"

package/src/components/MenuItem/helpers/has-active-child.js

@@ -0,0 +1,10 @@
+import isUrlPathMatch from './isUrlPathMatch';
+import { hasChildren } from '../../../helpers';
+
+const hasActiveChild = (path, children) =>
+  hasChildren(children) &&
+  children.props.children[1][0].props.component.items.find(menuItem =>
+    isUrlPathMatch(path, menuItem.settings.url)
+  );
+
+export default hasActiveChild;

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

@@ -1,3 +1,5 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
+import isUrlPathMatch from './isUrlPathMatch';
+import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate };
+export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };

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

@@ -0,0 +1,10 @@
+const isUrlPathMatch = (path, itemUrl) => {
+  if (!itemUrl || !path) return false;
+
+  const reg = new RegExp(/^[^#?]+/);
+  const _path = reg.exec(path)[0];
+
+  return _path === itemUrl || _path === `/${itemUrl}`;
+};
+
+export default isUrlPathMatch;

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

@@ -1,9 +1,12 @@
 import cssesc from 'cssesc';
 import { COMPONENT_ID_PREFIX } from '../constants';
 
-const getComponentId = componentName =>
-  cssesc(`${COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`, {
-    isIdentifier: true
-  });
+const getComponentId = (componentName, noPrefix = false, toLowerCase = false) => {
+  let id = `${noPrefix ? '' : COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`;
+  if (toLowerCase) {
+    id = id.toLowerCase();
+  }
+  return cssesc(id, { isIdentifier: true });
+};
 
 export default getComponentId;