Disable relative date picker calendar clicking

twentyhq · FelixMalfait · Sep 27, 2024 · Sep 15, 2024 · Sep 16, 2024 · Sep 16, 2024
commit 0953394c538f64474e41ebe91c7db97477e183ec
diff --git a/...nty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/...nty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
@@ -12,6 +12,8 @@ import { isDefined } from '~/utils/isDefined';
 
 import { DatePickerHeader } from '@/ui/input/components/internal/date/components/DatePickerHeader';
 import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativePickerHeader';
+import { RelativeDateDirection } from '@/ui/input/components/internal/date/types/RelativeDateDirection';
+import { RelativeDateUnit } from '@/ui/input/components/internal/date/types/RelativeDateUnit';
 import { UserContext } from '@/users/contexts/UserContext';
 import { useContext } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -22,7 +24,7 @@ export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
 export const MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID =
   'date-picker-month-and-year-dropdown-year-select';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
   & .react-datepicker {
     border-color: ${({ theme }) => theme.border.color.light};
     background: transparent;
@@ -182,6 +184,10 @@ const StyledContainer = styled.div`
 
   & .react-datepicker__month {
     margin-top: 0;
+
+    pointer-events: ${({ calendarDisabled }) =>
+      calendarDisabled ? 'none' : 'auto'};
+    opacity: ${({ calendarDisabled }) => (calendarDisabled ? '0.5' : '1')};
   }
 
   & .react-datepicker__day {
@@ -434,9 +440,11 @@ export const InternalDatePicker = ({
   const endOfDayInLocalTimezone = endOfDayDateTimeInLocalTimezone.toJSDate();
 
   const dateToUse = isDateTimeInput ? endOfDayInLocalTimezone : dateWithoutTime;
-
   return (
-    <StyledContainer onKeyDown={handleKeyDown}>
+    <StyledContainer
+      onKeyDown={handleKeyDown}
+      calendarDisabled={isRelativeToNow}
+    >
       <div className={clearable ? 'clearable ' : ''}>
         <ReactDatePicker
           open={true}
@@ -458,12 +466,9 @@ export const InternalDatePicker = ({
           }) =>
             isRelativeToNow ? (
               <RelativeDatePickerHeader
-                direction=""
-                value=""
-                unit=""
-                onDirectionChange={() => {}}
-                onValueChange={() => {}}
-                onUnitChange={() => {}}
+                direction={RelativeDateDirection.Past}
+                value={1}
+                unit={RelativeDateUnit.Day}
                 onChange={() => {}}
               />
             ) : (

diff --git a/...y-front/src/modules/ui/input/components/internal/date/components/RelativePickerHeader.tsx b/...y-front/src/modules/ui/input/components/internal/date/components/RelativePickerHeader.tsx
@@ -1,6 +1,10 @@
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { RelativeDateUnit } from '../types/RelativeDateUnit';
 
+import { RELATIVE_DATE_DIRECTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateDirectionOptions';
+import { RELATIVE_DATE_UNITS } from '@/ui/input/components/internal/date/constants/RelativeDateUnits';
+import { RelativeDateDirection } from '@/ui/input/components/internal/date/types/RelativeDateDirection';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div`
@@ -12,50 +16,63 @@ const StyledContainer = styled.div`
 `;
 
 type RelativeDatePickerHeaderProps = {
-  direction: string;
-  value: string;
-  unit: string;
-  onDirectionChange: (value: string) => void;
-  onValueChange: (value: string) => void;
-  onUnitChange: (value: string) => void;
-  onChange: (value: { direction: string; value: string; unit: string }) => void;
+  direction?: RelativeDateDirection;
+  value?: number;
+  unit?: RelativeDateUnit;
+  onChange: (value: {
+    direction?: RelativeDateDirection;
+    value?: number;
+    unit?: RelativeDateUnit;
+  }) => void;
 };
 
 export const RelativeDatePickerHeader = ({
   direction,
   value,
   unit,
-  onDirectionChange,
-  onValueChange,
-  onUnitChange,
+  onChange,
 }: RelativeDatePickerHeaderProps) => {
   return (
     <StyledContainer>
       <Select
         dropdownId="direction-select"
         value={direction}
-        onChange={onDirectionChange}
-        options={[
-          { value: 'Past', label: 'Past' },
-          { value: 'Next', label: 'Next' },
-          { value: 'This', label: 'This' },
-        ]}
+        onChange={(newDirection) =>
+          onChange({
+            direction: newDirection,
+            value: value,
+            unit: unit,
+          })
+        }
+        options={RELATIVE_DATE_DIRECTIONS}
       />
       <TextInput
-        value={value}
-        onChange={(value) => onValueChange(value?.toString() ?? '')}
+        value={value?.toString() ?? ''}
+        onChange={(newValue) => {
+          const newNumericValue = newValue.replace(/[^0-9]/g, '');
+          const value = newNumericValue
+            ? parseInt(newNumericValue, 10)
+            : undefined;
+
+          onChange({
+            direction,
+            value,
+            unit,
+          });
+        }}
         placeholder="Number"
       />
       <Select
         dropdownId="unit-select"
         value={unit}
-        onChange={onUnitChange}
-        options={[
-          { value: 'Day', label: 'Day' },
-          { value: 'Week', label: 'Week' },
-          { value: 'Month', label: 'Month' },
-          { value: 'Year', label: 'Year' },
-        ]}
+        onChange={(newUnit) =>
+          onChange({
+            direction: direction,
+            value: value,
+            unit: newUnit,
+          })
+        }
+        options={RELATIVE_DATE_UNITS}
       />
     </StyledContainer>
   );

diff --git a/...t/src/modules/ui/input/components/internal/date/constants/RelativeDateDirectionOptions.ts b/...t/src/modules/ui/input/components/internal/date/constants/RelativeDateDirectionOptions.ts
@@ -0,0 +1,10 @@
+import { RelativeDateDirection } from '../types/RelativeDateDirection';
+
+export const RELATIVE_DATE_DIRECTIONS: {
+  value: RelativeDateDirection;
+  label: string;
+}[] = [
+  { value: RelativeDateDirection.Past, label: 'Past' },
+  { value: RelativeDateDirection.Next, label: 'Next' },
+  { value: RelativeDateDirection.This, label: 'This' },
+];
diff --git a/...twenty-front/src/modules/ui/input/components/internal/date/constants/RelativeDateUnits.ts b/...twenty-front/src/modules/ui/input/components/internal/date/constants/RelativeDateUnits.ts
@@ -0,0 +1,9 @@
+import { RelativeDateUnit } from '../types/RelativeDateUnit';
+
+export const RELATIVE_DATE_UNITS: { value: RelativeDateUnit; label: string }[] =
+  [
+    { value: RelativeDateUnit.Day, label: 'Day' },
+    { value: RelativeDateUnit.Week, label: 'Week' },
+    { value: RelativeDateUnit.Month, label: 'Month' },
+    { value: RelativeDateUnit.Year, label: 'Year' },
+  ];
diff --git a/...twenty-front/src/modules/ui/input/components/internal/date/types/RelativeDateDirection.ts b/...twenty-front/src/modules/ui/input/components/internal/date/types/RelativeDateDirection.ts
@@ -0,0 +1,5 @@
+export enum RelativeDateDirection {
+  Past = 'past',
+  Next = 'next',
+  This = 'this',
+}
diff --git a/...ages/twenty-front/src/modules/ui/input/components/internal/date/types/RelativeDateUnit.ts b/...ages/twenty-front/src/modules/ui/input/components/internal/date/types/RelativeDateUnit.ts
@@ -0,0 +1,6 @@
+export enum RelativeDateUnit {
+  Day = 'day',
+  Week = 'week',
+  Month = 'month',
+  Year = 'year',
+}