From 620c8b25a45d7c87e9bbd38ad414ec26fd7f6d43 Mon Sep 17 00:00:00 2001
From: Christian Seidel <christian.seidel@mll.com>
Date: Thu, 14 Mar 2024 15:23:38 +0100
Subject: [PATCH] feat: add DatePickerField.tsx

---
 src/Fields/DatePickerField.tsx | 39 ++++++++++++++++++++++++++++++++++
 src/Fields/index.stories.tsx   |  8 +++++++
 src/Fields/index.ts            |  1 +
 3 files changed, 48 insertions(+)
 create mode 100644 src/Fields/DatePickerField.tsx

diff --git a/src/Fields/DatePickerField.tsx b/src/Fields/DatePickerField.tsx
new file mode 100644
index 00000000..16813e13
--- /dev/null
+++ b/src/Fields/DatePickerField.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  useController,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from 'react-hook-form';
+
+import { DatePicker, DatePickerProps } from '../DatePicker';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type DatePickerFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: DatePickerProps;
+  };
+
+export function DatePickerField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: DatePickerFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <DatePicker disabled={disabled} {...field} {...component} />
+    </FieldWrapper>
+  );
+}
diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index c7190001..4784480b 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -11,6 +11,7 @@ import { Space } from '../Space';
 import { AutocompleteField } from './AutocompleteField';
 import { CheckboxField } from './CheckboxField';
 import { CheckboxGroupField } from './CheckboxGroupField';
+import { DatePickerField } from './DatePickerField';
 import { DateRangePickerField } from './DateRangePickerField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
@@ -36,6 +37,7 @@ type FormType = {
   switch: boolean;
   text_area: string;
   date_range: string;
+  date_picker: string;
 };
 
 export const Default: Story<{
@@ -219,6 +221,12 @@ function AllFields() {
           label: 'Switch',
         }}
       />
+      <DatePickerField
+        name="date_picker"
+        control={formMethods.control}
+        formItem={{ label: 'DatePicker' }}
+        component={{ placeholder: 'Datum wählen' }}
+      />
       <DateRangePickerField
         name="date_range"
         control={formMethods.control}
diff --git a/src/Fields/index.ts b/src/Fields/index.ts
index 65131b2f..f58c4302 100644
--- a/src/Fields/index.ts
+++ b/src/Fields/index.ts
@@ -1,5 +1,6 @@
 export * from './AutocompleteField';
 export * from './CheckboxField';
+export * from './DatePickerField';
 export * from './DateRangePickerField';
 export * from './CheckboxGroupField';
 export * from './FieldProvider';