@blaze-cms/react-page-builder 0.147.0-rc-eagle.4 → 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/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;