index.tsx
114 lines
| 1 | import type {FC, ReactNode} from 'react'; |
| 2 | import {useMemo} from 'react'; |
| 3 | import {Element, Field, Group} from '@givewp/forms/types'; |
| 4 | |
| 5 | /** |
| 6 | * Get the active template from the window |
| 7 | * |
| 8 | * @since 3.0.0 |
| 9 | */ |
| 10 | const template = window.givewp.form.templates |
| 11 | |
| 12 | /** |
| 13 | * Get the NodeWrapper from active template |
| 14 | * |
| 15 | * @since 3.0.0 |
| 16 | */ |
| 17 | const NodeWrapper = template.layouts.wrapper; |
| 18 | |
| 19 | /** |
| 20 | * Find the names of nodeType and type based on the value of the template. |
| 21 | * |
| 22 | * @since 3.0.0 |
| 23 | */ |
| 24 | export function findTemplateKeys<S extends keyof typeof template, T extends keyof typeof template[S]>( |
| 25 | templateValue: ReactNode |
| 26 | ): {nodeType: S | null; type: T | null} { |
| 27 | let nodeType = null; |
| 28 | let type = null; |
| 29 | |
| 30 | Object.entries(template).forEach((firstLevel) => { |
| 31 | if (typeof firstLevel[1] === 'object') { |
| 32 | const firstLevelKey = firstLevel[0]; |
| 33 | const secondLevelKeys = Object.keys(firstLevel[1]); |
| 34 | const templateType = secondLevelKeys.find((key) => firstLevel[1][key] === templateValue); |
| 35 | |
| 36 | if (templateType) { |
| 37 | type = templateType; |
| 38 | nodeType = firstLevelKey; |
| 39 | } |
| 40 | } |
| 41 | }); |
| 42 | |
| 43 | return {nodeType, type}; |
| 44 | } |
| 45 | |
| 46 | /** |
| 47 | * This HOC will wrap a template component in our NodeWrapper and automatically figure out what nodeType and type to use as props. |
| 48 | * |
| 49 | * @since 3.0.0 |
| 50 | */ |
| 51 | export function withTemplateWrapper<TemplateProps>( |
| 52 | Template: FC<TemplateProps>, |
| 53 | htmlTag: keyof JSX.IntrinsicElements = 'div', |
| 54 | name?: string |
| 55 | ): FC<TemplateProps> { |
| 56 | // @ts-ignore |
| 57 | const {nodeType, type} = findTemplateKeys(Template); |
| 58 | |
| 59 | return (props: TemplateProps) => ( |
| 60 | <NodeWrapper nodeType={nodeType} type={type} htmlTag={htmlTag} name={name}> |
| 61 | <Template {...(props as TemplateProps)} /> |
| 62 | </NodeWrapper> |
| 63 | ); |
| 64 | } |
| 65 | |
| 66 | /** |
| 67 | * A component version of withTemplateWrapper that uses the child component to determine the NodeWrapper props. |
| 68 | * |
| 69 | * @since 3.0.0 |
| 70 | */ |
| 71 | export function TemplateWrapper({children, htmlTag}: {children: JSX.Element; htmlTag?: keyof JSX.IntrinsicElements}) { |
| 72 | const {nodeType, type} = useMemo(() => findTemplateKeys(children.type), []); |
| 73 | |
| 74 | return ( |
| 75 | <NodeWrapper nodeType={nodeType} type={type} htmlTag={htmlTag}> |
| 76 | {children} |
| 77 | </NodeWrapper> |
| 78 | ); |
| 79 | } |
| 80 | |
| 81 | /** |
| 82 | * A hook version of withTemplateWrapper |
| 83 | * |
| 84 | * @since 3.0.0 |
| 85 | */ |
| 86 | export function useTemplateWrapper<TemplateProps>( |
| 87 | Template: FC<TemplateProps>, |
| 88 | htmlTag: keyof JSX.IntrinsicElements = 'div', |
| 89 | name?: string |
| 90 | ): FC<TemplateProps> { |
| 91 | return useMemo(() => withTemplateWrapper(Template, htmlTag, name), [Template]); |
| 92 | } |
| 93 | |
| 94 | /** |
| 95 | * @since 3.0.0 |
| 96 | */ |
| 97 | export function fieldTemplateExists(field: Field): boolean { |
| 98 | return template.fields.hasOwnProperty(field.type); |
| 99 | } |
| 100 | |
| 101 | /** |
| 102 | * @since 3.0.0 |
| 103 | */ |
| 104 | export function elementTemplateExists(element: Element): boolean { |
| 105 | return template.elements.hasOwnProperty(element.type); |
| 106 | } |
| 107 | |
| 108 | /** |
| 109 | * @since 3.0.0 |
| 110 | */ |
| 111 | export function groupTemplateExists(group: Group): boolean { |
| 112 | return template.groups.hasOwnProperty(group.type); |
| 113 | } |
| 114 |