feat: wip DynamicZoneBlock opened icon, state, FormDynamicZone onToggle

Smile-SA · Aug 20, 2024 · ddb325b · ddb325b
1 parent f1f7958
commit ddb325b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.tsx b/packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.tsx
@@ -7,7 +7,6 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
 interface IFormBlock extends IBaseBlock {
   fieldName: string;
-  type: string;
   value?: string;
 }
 
@@ -20,7 +19,7 @@ export function FormDynamicZone(props: IFormDynamicZoneProps): ReactElement {
 
   const { control, register, handleSubmit } =
     useFormContext<Record<typeof dynamicZoneName, Omit<IFormBlock, 'id'>[]>>();
-  const { fields, append, remove, swap } = useFieldArray({
+  const { fields, append, remove, swap, update } = useFieldArray({
     control,
     name: dynamicZoneName,
   });
@@ -35,9 +34,14 @@ export function FormDynamicZone(props: IFormDynamicZoneProps): ReactElement {
     );
   }
 
+  function onToggle(block: IFormBlock, index: number, opened: boolean): void {
+    update(index, { ...block, opened });
+  }
+
   function onAppend(blockType: string): void {
     append({
       fieldName: `${blockType}-${fields.length}`,
+      opened: false,
       type: blockType,
       value: '',
     });
@@ -68,6 +72,7 @@ export function FormDynamicZone(props: IFormDynamicZoneProps): ReactElement {
           blocks={fields as IFormBlock[]}
           onAppendBlock={onAppend}
           onRenderBlockContent={newBlock}
+          onToggleBlock={onToggle}
         />
         <input type="submit" />
       </form>

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
@@ -17,9 +17,9 @@ export const DynamicZone: IStory = {
   args: {
     blockOptions: ['default'],
     blocks: [
-      { id: '1', opened: false, value: 'initial' },
-      { id: '2', opened: true, value: 'initial' },
-      { id: '3', opened: false, value: 'initial' },
+      { id: '1', opened: false, type: 'default', value: 'initial' },
+      { id: '2', opened: true, type: 'default', value: 'initial' },
+      { id: '3', opened: false, type: 'default', value: 'initial' },
     ],
     onAppendBlock: action('onAppendBlock, type'),
     onRenderBlockContent: (_b, index) => <input key={index} />,

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -26,7 +26,7 @@ export interface IDynamicZoneProps<Block extends IBaseBlock> {
   buttonsGroupProps?: GroupProps;
   onAppendBlock: (blockType: string) => void;
   onRenderBlockContent: (block: Block, index: number) => ReactElement;
-  onToggleBlock: (opened: boolean) => void;
+  onToggleBlock: (block: Block, index: number, opened: boolean) => void;
   rootContainerProps?: ContainerProps;
 }
 
@@ -63,7 +63,7 @@ export function DynamicZone<Block extends IBaseBlock>(
             cardSectionProps={blockCardProps?.cardSectionProps}
             {...blockCardProps?.cardProps}
             key={block.id}
-            onToggle={onToggleBlock}
+            onToggle={(opened) => onToggleBlock(block, index, opened)}
             opened={block.opened}
           >
             {onRenderBlockContent(block, index)}

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css
@@ -3,6 +3,7 @@
 
 .header {
   cursor: pointer;
+  user-select: none;
 
   &:hover {
     filter: contrast(40%);

diff --git a/packages/haring-react/src/types/dynamic-zone.ts b/packages/haring-react/src/types/dynamic-zone.ts
@@ -1,4 +1,5 @@
 export interface IBaseBlock extends Record<string, unknown> {
   id: string;
   opened: boolean;
+  type: string;
 }