Dynamic Zone

Controlled container that displays a dynamic zone.

Buttons at the bottom can be clicked to add new blocks into the zone, each block is displayed in the zone with header, footer, actions and the content is rendered through a render function provided by the parent component

• Import

  import { DynamicZone } from '@smile/haring-react';
• Extends Container
• Source View Source Code
• Package @smile/haring-react

Storybook Docs

Props

DynamicZone takes a <Block> generic type that extends IBaseBlock.

Name	Type	Default	Description
blockOptions *	IBaseBlockButton[]	-	Array of IBaseBlockButton, displays as buttons to add blocks at the bottom of the zone
blocks *	Block[]	-	Array of Block, displays as list of DynamicZoneBlock
onAppendBlock *	(blockType: string) => void	-	Callback function called when a block button is clicked to append a new block
onRenderBlockContent *	(block: Block, index: number) => ReactElement	-	Callback function called when a block is being rendered in the list, parent needs to return the rendered content
onToggleBlock *	(block: Block, index: number, opened: boolean) => void	-	Callback function called when a block's toggle button is clicked to open/close it
blockCardProps	CardProps	-	Extra props for the internal Card component, root of DynamicZoneBlock
blocksStackProps	StackProps	-	Extra props for the internal Stack component, child of the root Container
bottomContainerProps	ContainerProps	-	Extra props for the internal Container component, child of the root Container
buttonsGroupProps	GroupProps	-	Extra props for the internal Group component, container of the button area
buttonsText	string	-	Content of button area's optional header, inside a Text component
buttonsTextProps	TextProps	-	Extra props for the internal Text component, container of the button area's optional header
internalBlockCardProps	IDynamicZoneBlockInternalComponentProps	-	Extra internal component props passed to DynamicZoneBlock
...	-	-	extends Container Props, root container

IBaseBlock

Name	Type	Default	Description
id *	string	-	Used internally as keys and for other reasons, should be unique and not be modified once set
opened *	boolean	-	Controlled value that determines if the block is opened or not
blockType *	string	-	Type of the block being rendered, sent back to parent for render, used as a kind of block type ID here and in IBaseBlockButton
blockHeader *	ReactNode	-	Content of the block header
blockFooter	ReactNode	-	Content of the block footer
blockActions	IAction<IDynamicZoneBlockReference>[]	-	Action(s) displayed to the right of the block header

IBaseBlockButton

Name	Type	Default	Description
blockType *	string	-	Type of the block being rendered, sent back to parent for render, used as a kind of block type ID here and in IBaseBlock
label *	string	-	Label of button to add a new block

---

Dynamic Zone Block

Sub-component that renders one block with header, content and footer.

Props

Name	Type	Default	Description
children *	ReactNode	-	Main content of block
headerChildren *	ReactNode	-	Content of header
onToggle *	(opened: boolean) => void	-	Callback function called when opening/close button is clicked
opened *	boolean	-	Controlled value the determines if the block's Collapse is open or closed
reference *	IDynamicZoneBlockReference	-	Object used internally and sent back to parent in callbacks, declares a block's id, index and the total arrayLength of blocks
actions	IAction<IDynamicZoneBlockReference>[]	-	Array of IAction using IDynamicZoneBlockReference as T, displayed to the right of the header
footerChildren	ReactNode	-	Optional content of footer
internalComponentProps	IDynamicZoneBlockInternalComponentProps	-	Group of extra internal component props
...	-	-	extends Card Props

IDynamicZoneBlockReference

Name	Type	Default	Description
arrayLength *	number	-	Total length of parent's blocks array
id *	string	-	ID of the block
index *	number	-	Index of the block in the parent's blocks array
...	-	-	extends Record<string, unknown>

IDynamicZoneBlockInternalComponentProps

Name	Type	Default	Description
contentCollapseProps	CollapseProps	-	Extra props for the internal Collapse component
contentContainerProps	ContainerProps	-	Extra props for the internal Container component
footerCardSectionProps	CardSectionProps	-	Extra props for the internal CardSection component
headerActionListProps	IActionListProps<IDynamicZoneBlockReference>	-	Extra props for the internal ActionList component
headerCardSectionProps	CardSectionProps	-	Extra props for the internal CardSection component
headerGroupProps	GroupProps	-	Extra props for the internal Group component
toggleComponentProps	IDynamicZoneBlockToggleProps	-	Extra props passed to the internal ActionIcon toggle button

IDynamicZoneBlockToggleProps

Name	Type	Default	Description
actionIconProps	ActionIconProps	-	Extra props for the internal ActionIcon component used as the toggle button
downIcon	ReactNode	-	Content of toggle button in down state
upIcon	ReactNode	-	Content of toggle button in up state