From 5188d00ff5734f95b73ccb2c70096cdafad2f0ce Mon Sep 17 00:00:00 2001 From: Quentin Le Caignec Date: Wed, 4 Sep 2024 16:04:59 +0200 Subject: [PATCH] feat: updated haring-react components to match FormDynamicZone requirements --- .../src/Components/ActionList/ActionList.tsx | 16 +++--- .../src/Form/DynamicZone/DynamicZone.mock.tsx | 49 +++++++++---------- .../src/Form/DynamicZone/DynamicZone.tsx | 8 +-- .../DynamicZoneBlock/DynamicZoneBlock.tsx | 7 +-- .../haring-react/src/types/dynamic-zone.ts | 2 +- 5 files changed, 39 insertions(+), 43 deletions(-) diff --git a/packages/haring-react/src/Components/ActionList/ActionList.tsx b/packages/haring-react/src/Components/ActionList/ActionList.tsx index 9eb2efd1..80871669 100644 --- a/packages/haring-react/src/Components/ActionList/ActionList.tsx +++ b/packages/haring-react/src/Components/ActionList/ActionList.tsx @@ -28,9 +28,9 @@ const defaultTooltipProps = { withArrow: true, }; -export type IActionListAction> = IAction< - Data | Data[] ->; +export type IActionListAction> = + | IAction + | IAction; export interface IActionListProps> extends GroupProps { @@ -72,7 +72,7 @@ export function ActionList>( children: action.confirmModalProps?.children, confirmColor: action.confirmModalProps?.confirmColor, confirmLabel: action.confirmModalProps?.confirmLabel, - onConfirm: () => action.onAction?.(selectedElements), + onConfirm: () => action.onAction?.(selectedElements as Data & Data[]), title: action.confirmModalProps?.title, }); } @@ -94,7 +94,7 @@ export function ActionList>( if (action.confirmation) { setModal(action); } else { - action.onAction?.(selectedElements); + action.onAction?.(selectedElements as Data & Data[]); } } @@ -103,7 +103,7 @@ export function ActionList>( return ''; } return typeof action.label === 'function' - ? action.label(selectedElements) + ? action.label(selectedElements as Data & Data[]) : action.label; } @@ -112,7 +112,7 @@ export function ActionList>( return null; } return typeof action.icon === 'function' - ? action.icon(selectedElements) + ? action.icon(selectedElements as Data & Data[]) : action.icon; } @@ -123,7 +123,7 @@ export function ActionList>( return undefined; } return typeof action.componentProps === 'function' - ? action.componentProps(selectedElements) + ? action.componentProps(selectedElements as Data & Data[]) : action.componentProps; } diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx index 2450babf..bf06c977 100644 --- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx +++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx @@ -1,6 +1,6 @@ import type { IDynamicZoneBlockReference } from './DynamicZoneBlock/DynamicZoneBlock'; -import type { IActionListAction } from '../../Components/ActionList/ActionList'; import type { IBaseBlock, IBaseBlockButton } from '../../types'; +import type { IAction } from '@smile/haring-react-shared'; import { Alien, @@ -12,30 +12,29 @@ import { } from '@phosphor-icons/react'; import { action } from '@storybook/addon-actions'; -const dynamicZoneBlockActionsMock: IActionListAction[] = - [ - { - color: 'white', - icon: , - id: 'move-up', - label: 'Move Up', - onAction: action('Move block up'), - }, - { - color: 'white', - icon: , - id: 'move-down', - label: 'Move Down', - onAction: action('Move block down'), - }, - { - color: 'white', - icon: , - id: 'delete', - label: 'Delete', - onAction: action('Delete block'), - }, - ]; +const dynamicZoneBlockActionsMock: IAction[] = [ + { + color: 'white', + icon: , + id: 'move-up', + label: 'Move Up', + onAction: action('Move block up'), + }, + { + color: 'white', + icon: , + id: 'move-down', + label: 'Move Down', + onAction: action('Move block down'), + }, + { + color: 'white', + icon: , + id: 'delete', + label: 'Delete', + onAction: action('Delete block'), + }, +]; export const dynamicZoneBlocks: IBaseBlock[] = [ { diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx index c41bfd74..db2b754f 100644 --- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx +++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx @@ -14,7 +14,8 @@ import { Button, Container, Group, Stack, Text } from '@mantine/core'; import classes from './DynamicZone.module.css'; import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock'; -export interface IDynamicZoneProps { +export interface IDynamicZoneProps + extends ContainerProps { blockCardProps?: CardProps; blockOptions: IBaseBlockButton[]; blocks: Block[]; @@ -27,7 +28,6 @@ export interface IDynamicZoneProps { onAppendBlock: (blockType: IBaseBlockType) => void; onRenderBlockContent: (block: Block, index: number) => ReactElement; onToggleBlock: (block: Block, index: number, opened: boolean) => void; - rootContainerProps?: ContainerProps; } export function DynamicZone( @@ -46,7 +46,7 @@ export function DynamicZone( onAppendBlock, onRenderBlockContent, onToggleBlock, - rootContainerProps, + ...rootContainerProps } = props; function onAddBlock(blockType: IBaseBlockType): void { @@ -66,7 +66,7 @@ export function DynamicZone( internalComponentProps={internalBlockCardProps} onToggle={(opened) => onToggleBlock(block, index, opened)} opened={block.opened} - reference={{ id: block.id, index }} + reference={{ arrayLength: blocks.length, id: block.id, index }} > {onRenderBlockContent(block, index)} diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx index a507f61c..b657b694 100644 --- a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx +++ b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx @@ -41,14 +41,11 @@ export interface IDynamicZoneBlockToggleProps { } export interface IDynamicZoneBlockReference extends Record { + arrayLength: number; id: string; index: number; } -type IBlockReference = - | IDynamicZoneBlockReference - | IDynamicZoneBlockReference[]; - export interface IDynamicZoneBlockProps extends CardProps { actions?: IAction[]; children: ReactNode; @@ -104,7 +101,7 @@ export function DynamicZoneBlock(props: IDynamicZoneBlockProps): ReactElement { {actions && actions.length > 0 ? ( - actions={actions as IAction[]} + actions={actions} isCompactStyle selectedElements={reference} {...internalComponentProps?.headerActionListProps} diff --git a/packages/haring-react/src/types/dynamic-zone.ts b/packages/haring-react/src/types/dynamic-zone.ts index fe87d962..479dcb43 100644 --- a/packages/haring-react/src/types/dynamic-zone.ts +++ b/packages/haring-react/src/types/dynamic-zone.ts @@ -10,7 +10,7 @@ export interface IBaseBlock extends Record { blockFooter?: ReactNode; blockHeader: ReactNode; blockType: IBaseBlockType; - id: string; + readonly id: string; opened: boolean; }