components
4 years ago
hoc
4 years ago
hooks
4 years ago
inspector-controls
4 years ago
utils
4 years ago
DynamicRenderer.js
4 years ago
InspectorControls.js
4 years ago
attributes.js
4 years ago
DynamicRenderer.js
75 lines
| 1 | import HeadlineContentRenderer from '../../blocks/headline/components/HeadlineContentRenderer'; |
| 2 | import ButtonContentRenderer from '../../blocks/button/components/ButtonContentRenderer'; |
| 3 | import filterAttributes from '../../utils/filter-attributes'; |
| 4 | import dynamicContentAttributes from './attributes'; |
| 5 | import applyContext from './utils/applyContext'; |
| 6 | import { RichText } from '@wordpress/block-editor'; |
| 7 | import useDynamicContent from './hooks/useDynamicContent'; |
| 8 | import ContainerContentRenderer from '../../blocks/container/components/ContainerContentRenderer'; |
| 9 | import ImageContentRenderer from '../../blocks/image/components/ImageContentRenderer'; |
| 10 | |
| 11 | function getContentRenderer( name ) { |
| 12 | const contentRenders = { |
| 13 | 'generateblocks/headline': HeadlineContentRenderer, |
| 14 | 'generateblocks/button': ButtonContentRenderer, |
| 15 | 'generateblocks/container': ContainerContentRenderer, |
| 16 | 'generateblocks/image': ImageContentRenderer, |
| 17 | }; |
| 18 | |
| 19 | return contentRenders[ name ]; |
| 20 | } |
| 21 | |
| 22 | export default function DynamicRenderer( props ) { |
| 23 | const { |
| 24 | name, |
| 25 | attributes, |
| 26 | context, |
| 27 | } = props; |
| 28 | |
| 29 | const dynamicAttributes = filterAttributes( attributes, Object.keys( dynamicContentAttributes ) ); |
| 30 | const attributesWithContext = applyContext( context, dynamicAttributes ); |
| 31 | const { |
| 32 | dynamicContentType, |
| 33 | dynamicLinkType, |
| 34 | termSeparator, |
| 35 | } = attributesWithContext; |
| 36 | const rawContent = useDynamicContent( attributesWithContext, name ); |
| 37 | |
| 38 | const ContentRenderer = getContentRenderer( name ); |
| 39 | |
| 40 | const staticContent = 'generateblocks/headline' === name ? attributes.content : attributes.text; |
| 41 | |
| 42 | let content = !! attributes.dynamicContentType ? rawContent : staticContent; |
| 43 | |
| 44 | if ( !! dynamicLinkType && 'terms' === dynamicContentType && 'generateblocks/headline' === name ) { |
| 45 | content = rawContent |
| 46 | .split( termSeparator ) |
| 47 | .map( ( newContent, idx, fullContent ) => { |
| 48 | return ( <><a>{ newContent }</a>{ idx + 1 !== fullContent.length && termSeparator }</> ); // eslint-disable-line jsx-a11y/anchor-is-valid |
| 49 | } ); |
| 50 | } |
| 51 | |
| 52 | // Only return first term in buttons for now. |
| 53 | if ( 'terms' === dynamicContentType && 'generateblocks/button' === name ) { |
| 54 | content = rawContent.split( termSeparator )[ 0 ]; |
| 55 | } |
| 56 | |
| 57 | const newAttributes = Object.assign( {}, attributes, { |
| 58 | content: 'generateblocks/headline' === name ? content : undefined, |
| 59 | text: 'generateblocks/button' === name ? content : undefined, |
| 60 | dynamicImage: 'generateblocks/container' === name || |
| 61 | 'generateblocks/image' === name |
| 62 | ? content |
| 63 | : undefined, |
| 64 | } ); |
| 65 | |
| 66 | const newProps = Object.assign( {}, props, { |
| 67 | InnerContent: !! attributes.dynamicContentType ? RichText.Content : RichText, |
| 68 | attributes: newAttributes, |
| 69 | } ); |
| 70 | |
| 71 | return ( |
| 72 | <ContentRenderer { ...newProps } /> |
| 73 | ); |
| 74 | } |
| 75 |