From d16ada282577cb24e8e86b6456697504024a7e55 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Fri, 16 Jun 2023 09:46:01 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20make=20datefield=20?=
 =?UTF-8?q?inputs=20reusable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor the date field input to ensure the inclusion of two identical
and reusable date field inputs in the future DateRangePicker component.
By factoring out the common logic and structure, we can create a more efficient
and easily reusable component for selecting date ranges.
---
 .../components/Forms/DatePicker/DateField.tsx | 25 ++++++++++++++++---
 .../components/Forms/DatePicker/index.scss    | 11 ++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Forms/DatePicker/DateField.tsx b/packages/react/src/components/Forms/DatePicker/DateField.tsx
index 26e890e..f6681ab 100644
--- a/packages/react/src/components/Forms/DatePicker/DateField.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateField.tsx
@@ -12,8 +12,7 @@ import {
 } from "@react-stately/datepicker";
 import { createCalendar, DateValue } from "@internationalized/date";
 import classNames from "classnames";
-import { Button } from ":/components/Button";
-import { useCunningham } from ":/components/Provider";
+import { LabelledBox, Props } from ":/components/Forms/LabelledBox";
 
 interface DateSegmentProps {
   currentSegment: DateSegment;
@@ -21,7 +20,7 @@ interface DateSegmentProps {
   state: DateFieldState;
 }
 
-export const DateSegmentInput = ({
+const DateSegmentInput = ({
   currentSegment,
   previousSegment,
   state,
@@ -43,7 +42,7 @@ export const DateSegmentInput = ({
   );
 };
 
-export const DateField = (props: AriaDatePickerProps<DateValue>) => {
+const DateField = (props: AriaDatePickerProps<DateValue>) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -66,3 +65,21 @@ export const DateField = (props: AriaDatePickerProps<DateValue>) => {
     </div>
   );
 };
+
+interface DateFieldBoxProps
+  extends Props,
+    Omit<AriaDatePickerProps<DateValue>, "label"> {}
+
+const DateFieldBox = ({ ...props }: DateFieldBoxProps) => (
+  <LabelledBox {...props}>
+    <div
+      className={classNames("c__date-picker__inner", {
+        "c__date-picker__inner--collapsed": props.labelAsPlaceholder,
+      })}
+    >
+      <DateField {...props} />
+    </div>
+  </LabelledBox>
+);
+
+export default DateFieldBox;
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 4cee72a..e22b5da 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -39,6 +39,17 @@
     user-select: none;
     min-width: 0;
 
+    &--collapsed {
+      clip: rect(1px, 1px, 1px, 1px);
+      clip-path: inset(50%);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute
+    }
+
     &--clickable {
       cursor: pointer;
     }