feat: updated haring-react components to match FormDynamicZone requir…

…ements
Smile-SA · Sep 4, 2024 · 5188d00 · 5188d00
1 parent 10088ae
commit 5188d00
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 43 deletions.
diff --git 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<Data extends Record<string, unknown>> = IAction<
-  Data | Data[]
->;
+export type IActionListAction<Data extends Record<string, unknown>> =
+  | IAction<Data[]>
+  | IAction<Data>;
 
 export interface IActionListProps<Data extends Record<string, unknown>>
   extends GroupProps {
@@ -72,7 +72,7 @@ export function ActionList<Data extends Record<string, unknown>>(
       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<Data extends Record<string, unknown>>(
     if (action.confirmation) {
       setModal(action);
     } else {
-      action.onAction?.(selectedElements);
+      action.onAction?.(selectedElements as Data & Data[]);
     }
   }
 
@@ -103,7 +103,7 @@ export function ActionList<Data extends Record<string, unknown>>(
       return '';
     }
     return typeof action.label === 'function'
-      ? action.label(selectedElements)
+      ? action.label(selectedElements as Data & Data[])
       : action.label;
   }
 
@@ -112,7 +112,7 @@ export function ActionList<Data extends Record<string, unknown>>(
       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<Data extends Record<string, unknown>>(
       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
@@ -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<IDynamicZoneBlockReference>[] =
-  [
-    {
-      color: 'white',
-      icon: <ArrowUp size={16} />,
-      id: 'move-up',
-      label: 'Move Up',
-      onAction: action('Move block up'),
-    },
-    {
-      color: 'white',
-      icon: <ArrowDown size={16} />,
-      id: 'move-down',
-      label: 'Move Down',
-      onAction: action('Move block down'),
-    },
-    {
-      color: 'white',
-      icon: <Trash size={16} />,
-      id: 'delete',
-      label: 'Delete',
-      onAction: action('Delete block'),
-    },
-  ];
+const dynamicZoneBlockActionsMock: IAction<IDynamicZoneBlockReference>[] = [
+  {
+    color: 'white',
+    icon: <ArrowUp size={16} />,
+    id: 'move-up',
+    label: 'Move Up',
+    onAction: action('Move block up'),
+  },
+  {
+    color: 'white',
+    icon: <ArrowDown size={16} />,
+    id: 'move-down',
+    label: 'Move Down',
+    onAction: action('Move block down'),
+  },
+  {
+    color: 'white',
+    icon: <Trash size={16} />,
+    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
@@ -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<Block extends IBaseBlock> {
+export interface IDynamicZoneProps<Block extends IBaseBlock>
+  extends ContainerProps {
   blockCardProps?: CardProps;
   blockOptions: IBaseBlockButton[];
   blocks: Block[];
@@ -27,7 +28,6 @@ export interface IDynamicZoneProps<Block extends IBaseBlock> {
   onAppendBlock: (blockType: IBaseBlockType) => void;
   onRenderBlockContent: (block: Block, index: number) => ReactElement;
   onToggleBlock: (block: Block, index: number, opened: boolean) => void;
-  rootContainerProps?: ContainerProps;
 }
 
 export function DynamicZone<Block extends IBaseBlock>(
@@ -46,7 +46,7 @@ export function DynamicZone<Block extends IBaseBlock>(
     onAppendBlock,
     onRenderBlockContent,
     onToggleBlock,
-    rootContainerProps,
+    ...rootContainerProps
   } = props;
 
   function onAddBlock(blockType: IBaseBlockType): void {
@@ -66,7 +66,7 @@ export function DynamicZone<Block extends IBaseBlock>(
             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)}
           </DynamicZoneBlock>

diff --git 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<string, unknown> {
+  arrayLength: number;
   id: string;
   index: number;
 }
 
-type IBlockReference =
-  | IDynamicZoneBlockReference
-  | IDynamicZoneBlockReference[];
-
 export interface IDynamicZoneBlockProps extends CardProps {
   actions?: IAction<IDynamicZoneBlockReference>[];
   children: ReactNode;
@@ -104,7 +101,7 @@ export function DynamicZoneBlock(props: IDynamicZoneBlockProps): ReactElement {
           </Group>
           {actions && actions.length > 0 ? (
             <ActionList<IDynamicZoneBlockReference>
-              actions={actions as IAction<IBlockReference>[]}
+              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
@@ -10,7 +10,7 @@ export interface IBaseBlock extends Record<string, unknown> {
   blockFooter?: ReactNode;
   blockHeader: ReactNode;
   blockType: IBaseBlockType;
-  id: string;
+  readonly id: string;
   opened: boolean;
 }