components
3 years ago
hoc
4 years ago
hooks
3 years ago
inspector-controls
3 years ago
utils
3 years ago
DynamicRenderer.js
3 years ago
InspectorControls.js
3 years ago
attributes.js
3 years ago
DynamicRenderer.js
87 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 | function isValidUrl( string ) { |
| 23 | try { |
| 24 | new URL( string ); |
| 25 | return true; |
| 26 | } catch ( err ) { |
| 27 | return false; |
| 28 | } |
| 29 | } |
| 30 | |
| 31 | export default function DynamicRenderer( props ) { |
| 32 | const { |
| 33 | name, |
| 34 | attributes, |
| 35 | context, |
| 36 | } = props; |
| 37 | |
| 38 | const dynamicAttributes = filterAttributes( attributes, Object.keys( dynamicContentAttributes ) ); |
| 39 | const attributesWithContext = applyContext( context, dynamicAttributes ); |
| 40 | const { |
| 41 | dynamicContentType, |
| 42 | dynamicLinkType, |
| 43 | termSeparator, |
| 44 | } = attributesWithContext; |
| 45 | const rawContent = useDynamicContent( attributesWithContext, name ); |
| 46 | |
| 47 | const ContentRenderer = getContentRenderer( name ); |
| 48 | |
| 49 | const staticContent = 'generateblocks/headline' === name ? attributes.content : attributes.text; |
| 50 | |
| 51 | let content = !! attributes.dynamicContentType ? rawContent : staticContent; |
| 52 | |
| 53 | if ( !! dynamicLinkType && 'terms' === dynamicContentType && 'generateblocks/headline' === name ) { |
| 54 | content = rawContent |
| 55 | .split( termSeparator ) |
| 56 | .map( ( newContent, idx, fullContent ) => { |
| 57 | return ( <><a>{ newContent }</a>{ idx + 1 !== fullContent.length && termSeparator }</> ); // eslint-disable-line jsx-a11y/anchor-is-valid |
| 58 | } ); |
| 59 | } |
| 60 | |
| 61 | // Only return first term in buttons for now. |
| 62 | if ( 'terms' === dynamicContentType && 'generateblocks/button' === name ) { |
| 63 | content = rawContent.split( termSeparator )[ 0 ]; |
| 64 | } |
| 65 | |
| 66 | const dynamicImage = ( |
| 67 | !! content && |
| 68 | ( 'generateblocks/container' === name || 'generateblocks/image' === name ) && |
| 69 | ( isValidUrl( content ) || ! isNaN( parseInt( content ) ) ) |
| 70 | ) ? content : undefined; |
| 71 | |
| 72 | const newAttributes = Object.assign( {}, attributes, { |
| 73 | content: 'generateblocks/headline' === name ? content : undefined, |
| 74 | text: 'generateblocks/button' === name ? content : undefined, |
| 75 | dynamicImage, |
| 76 | } ); |
| 77 | |
| 78 | const newProps = Object.assign( {}, props, { |
| 79 | InnerContent: !! attributes.dynamicContentType ? RichText.Content : RichText, |
| 80 | attributes: newAttributes, |
| 81 | } ); |
| 82 | |
| 83 | return ( |
| 84 | <ContentRenderer { ...newProps } /> |
| 85 | ); |
| 86 | } |
| 87 |