From d417833036eb439090c3c44f1e73ae1d7b9a0b59 Mon Sep 17 00:00:00 2001
From: Christian Seidel <christian.seidel@mll.com>
Date: Mon, 11 Mar 2024 15:47:35 +0100
Subject: [PATCH] feat: add CheckboxGroupField

---
 src/Fields/CheckboxGroupField.tsx | 45 +++++++++++++++++++++++++++++++
 src/Fields/index.stories.tsx      |  8 ++++++
 src/Fields/index.ts               |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 src/Fields/CheckboxGroupField.tsx

diff --git a/src/Fields/CheckboxGroupField.tsx b/src/Fields/CheckboxGroupField.tsx
new file mode 100644
index 00000000..de5606fd
--- /dev/null
+++ b/src/Fields/CheckboxGroupField.tsx
@@ -0,0 +1,45 @@
+import { CheckboxGroupProps } from 'antd/es/checkbox';
+import React from 'react';
+import {
+  useController,
+  FieldValues,
+  UseControllerProps,
+  FieldPath,
+} from 'react-hook-form';
+
+import { Checkbox } from '../Checkbox';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type CheckboxGroupFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: CheckboxGroupProps;
+  };
+
+export function CheckboxGroupField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: CheckboxGroupFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <Checkbox.Group
+        {...field}
+        value={field.value ?? undefined}
+        disabled={disabled}
+        {...component}
+      />
+    </FieldWrapper>
+  );
+}
diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index 456f4fea..eb07bc88 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -9,6 +9,7 @@ import { toFormInputOption } from '../Select';
 import { Space } from '../Space';
 
 import { CheckboxField } from './CheckboxField';
+import { CheckboxGroupField } from './CheckboxGroupField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
 import { InputNumberField } from './InputNumberField';
@@ -24,6 +25,7 @@ export default {
 
 type FormType = {
   checkbox: boolean;
+  checkboxGroup: Array<string>;
   input: string;
   input_number: number;
   radio_group: 1 | 2;
@@ -133,6 +135,12 @@ function AllFields() {
       >
         Checkbox children
       </CheckboxField>
+      <CheckboxGroupField
+        name="checkboxGroup"
+        control={formMethods.control}
+        formItem={{ label: 'CheckboxGroup' }}
+        component={{ options: ['a', 'b'].map(toFormInputOption) }}
+      />
       <InputField
         name="input"
         rules={{ required: 'You really need this', maxLength: 3 }}
diff --git a/src/Fields/index.ts b/src/Fields/index.ts
index 4ef7070d..2e47abdd 100644
--- a/src/Fields/index.ts
+++ b/src/Fields/index.ts
@@ -1,4 +1,5 @@
 export * from './CheckboxField';
+export * from './CheckboxGroupField';
 export * from './FieldProvider';
 export * from './FieldWrapper';
 export * from './formItemFieldProps';