Merge pull request #187 from AppQuality/develop

feat: Allow setting disabled to date/timepicker (#186)
AppQuality · Apr 24, 2024 · 2a5f33a · 2a5f33a
2 parents c1a697f + 3f2bd77
commit 2a5f33a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -42,20 +42,27 @@ 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}
+      />
     );
   }
 
   return (
     <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
@@ -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
@@ -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;
 }