feat: add DateRangePickerField (#257)

* feat: add DateRangePickerField

* refactor: Apply eslint fix

---------

Co-authored-by: Christian Seidel <[email protected]>
Co-authored-by: Quis90 <[email protected]>

src/Fields/DateRangePickerField.tsx

@@ -0,0 +1,39 @@
+import { DatePicker } from 'antd';
+import { RangePickerProps } from 'antd/es/date-picker';
+import React from 'react';
+import {
+  FieldPath,
+  FieldValues,
+  useController,
+  UseControllerProps,
+} from 'react-hook-form';
+
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+const { RangePicker } = DatePicker;
+
+type DateRangePickerFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: RangePickerProps;
+  };
+
+export function DateRangePickerField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: DateRangePickerFieldProps<TFieldValues, TName>) {
+  const {
+    field: { ref, ...fieldProps },
+  } = useController<TFieldValues, TName>(controller);
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <RangePicker format="DD.MM.YYYY" {...fieldProps} {...component} />
+    </FieldWrapper>
+  );
+}

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 { DateRangePickerField } from './DateRangePickerField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
 import { InputNumberField } from './InputNumberField';
@@ -34,6 +35,7 @@ type FormType = {
   select: 'a' | 'b';
   switch: boolean;
   text_area: string;
+  date_range: string;
 };
 
 export const Default: Story<{
@@ -217,6 +219,11 @@ function AllFields() {
           label: 'Switch',
         }}
       />
+      <DateRangePickerField
+        name="date_range"
+        control={formMethods.control}
+        formItem={{ label: 'DateRangePicker' }}
+      />
       <TextAreaStory />
     </Form>
   );

src/Fields/index.ts

@@ -1,5 +1,6 @@
 export * from './AutocompleteField';
 export * from './CheckboxField';
+export * from './DateRangePickerField';
 export * from './CheckboxGroupField';
 export * from './FieldProvider';
 export * from './FieldWrapper';