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