| 1 |
import {Group, Node} from '@givewp/forms/types'; |
| 2 |
import {useTemplateWrapper} from '../templates'; |
| 3 |
import type {GroupProps} from '@givewp/forms/propTypes'; |
| 4 |
import SectionNode from './SectionNode'; |
| 5 |
import memoNode from '@givewp/forms/app/utilities/memoNode'; |
| 6 |
|
| 7 |
const formTemplates = window.givewp.form.templates; |
| 8 |
|
| 9 |
/** |
| 10 |
* Renders a group node and its children. At this point, group nodes are not generic, and are only used for specific |
| 11 |
* subtypes of group fields, such as the Name field. The nodes are grouped by component and props, and then passed to |
| 12 |
* the group template component. This way the group template controls how the nodes are rendered, and can choose to |
| 13 |
* manipulate or override props. |
| 14 |
* |
| 15 |
* @since 3.0.0 |
| 16 |
*/ |
| 17 |
function GroupNode({node}: {node: Group}) { |
| 18 |
const Group = useTemplateWrapper<GroupProps>(formTemplates.groups[node.type], 'div', node.name); |
| 19 |
|
| 20 |
const nodeComponents = node.reduceNodes((nodes, node: Node) => { |
| 21 |
nodes[node.name] = (props: Node) => <SectionNode node={{...node, ...props}} />; |
| 22 |
|
| 23 |
return nodes; |
| 24 |
}, {}); |
| 25 |
|
| 26 |
const nodeProps = node.reduceNodes((nodes, node: Node) => { |
| 27 |
nodes[node.name] = node; |
| 28 |
|
| 29 |
return nodes; |
| 30 |
}, {}); |
| 31 |
|
| 32 |
return <Group key={node.name} nodeComponents={nodeComponents} nodeProps={nodeProps} {...node} />; |
| 33 |
} |
| 34 |
|
| 35 |
const MemoizedGroupNode = memoNode(GroupNode); |
| 36 |
|
| 37 |
export default MemoizedGroupNode; |
| 38 |
|
