From 3f2bd779b494f6b9c8538589f2a3b85f1cae6c68 Mon Sep 17 00:00:00 2001
From: d-beezee <59012086+d-beezee@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:19:54 +0200
Subject: [PATCH] feat: Allow setting disabled to date/timepicker (#186)

---
 src/stories/form/datepicker/Datepicker.stories.tsx | 10 ++++++++++
 src/stories/form/datepicker/Datepicker.tsx         |  9 ++++++++-
 src/stories/form/datepicker/TimePicker.tsx         |  3 +++
 src/stories/form/datepicker/_types.ts              |  8 ++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/stories/form/datepicker/Datepicker.stories.tsx b/src/stories/form/datepicker/Datepicker.stories.tsx
index 41cf798..03d3ddf 100644
--- a/src/stories/form/datepicker/Datepicker.stories.tsx
+++ b/src/stories/form/datepicker/Datepicker.stories.tsx
@@ -59,3 +59,13 @@ DatepickerTime.args = {
   value: new Date("04-01-2022 12:00"),
   control: "time",
 };
+
+export const DatepickerTimeDisabled = DatepickerTemplate.bind({});
+DatepickerTimeDisabled.args = {
+  onChange: ({ value }: { value: Date }) => {
+    console.log(value);
+  },
+  disabled: true,
+  value: new Date("04-01-2022 12:00"),
+  control: "time",
+};
diff --git a/src/stories/form/datepicker/Datepicker.tsx b/src/stories/form/datepicker/Datepicker.tsx
index b2e789f..a59ce4d 100644
--- a/src/stories/form/datepicker/Datepicker.tsx
+++ b/src/stories/form/datepicker/Datepicker.tsx
@@ -42,13 +42,19 @@ export const Datepicker = ({
   setText = "Set",
   cancelText = "Cancel",
   dateFormat = "DD/MM/YYYY",
+  disabled,
 }: DatepickerProps) => {
   const [currentDate, setCurrentDate] = useState(
     value ? (typeof value === "string" ? value : formatDate(value)) : "",
   );
   if (control === "time") {
     return (
-      <TimePicker placeholder={placeholder} value={value} onChange={onChange} />
+      <TimePicker
+        disabled={disabled}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
     );
   }
 
@@ -56,6 +62,7 @@ export const Datepicker = ({
     <DateInput
       placeholder={placeholder}
       value={currentDate}
+      disabled={disabled}
       max={maxDate ? formatDate(maxDate) : undefined}
       min={minDate ? formatDate(minDate) : undefined}
       onChange={(e) => {
diff --git a/src/stories/form/datepicker/TimePicker.tsx b/src/stories/form/datepicker/TimePicker.tsx
index 09f3039..ce7c6c8 100644
--- a/src/stories/form/datepicker/TimePicker.tsx
+++ b/src/stories/form/datepicker/TimePicker.tsx
@@ -25,10 +25,12 @@ const TimePicker = ({
   value,
   placeholder,
   onChange,
+  disabled,
 }: {
   placeholder: DatepickerProps["placeholder"];
   value: DatepickerProps["value"];
   onChange: DatepickerProps["onChange"];
+  disabled?: DatepickerProps["disabled"];
 }) => {
   const [time, setTime] = useState(
     value ? (typeof value === "string" ? value : formatTime(value)) : "",
@@ -59,6 +61,7 @@ const TimePicker = ({
         }}
         maskChar="0"
         value={time}
+        disabled={disabled}
         onChange={(event) => {
           if (onChange) {
             onChange({
diff --git a/src/stories/form/datepicker/_types.ts b/src/stories/form/datepicker/_types.ts
index 43f7dff..3c05635 100644
--- a/src/stories/form/datepicker/_types.ts
+++ b/src/stories/form/datepicker/_types.ts
@@ -1,16 +1,24 @@
 export interface DatepickerProps {
+  /** @deprecated since version 2.0 */
   select?: "date" | "range";
   value?: string | Date;
   id: string;
   minDate?: Date;
   maxDate?: Date;
+  /** @deprecated since version 2.0 */
   locale?: string;
+  /** @deprecated since version 2.0 */
   onOpen?: () => void;
+  /** @deprecated since version 2.0 */
   onCancel?: ({ value, valueText }: { value: Date; valueText: string }) => void;
   onChange?: ({ value, valueText }: { value: Date; valueText: string }) => void;
   placeholder?: string;
   control?: "date" | "calendar" | "time";
+  /** @deprecated since version 2.0 */
   setText?: string;
+  /** @deprecated since version 2.0 */
   cancelText?: string;
+  /** @deprecated since version 2.0 */
   dateFormat?: string;
+  disabled?: boolean;
 }