GroupNode.tsx
| 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 |