Merge pull request #91 from bleu/time-input

Add Time as input type
bleu · Aug 20, 2024 · aa43f41 · aa43f41
2 parents 434ef9b + 7cd4b5a
commit aa43f41
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/FormBuilder/fields/DatePickerInput.tsx b/src/components/FormBuilder/fields/DatePickerInput.tsx
@@ -37,7 +37,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
         rules={field.required ? { required: true } : undefined}
         defaultValue={field.defaultValue}
         render={({ field: formField }) => (
-          <FormItem className="flex flex-col">
+          <FormItem className="flex flex-col w-full">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
             <Popover>
               <PopoverTrigger asChild>
@@ -64,7 +64,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
                   </Button>
                 </FormControl>
               </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
+              <PopoverContent className="w-auto p-0 z-[1500]" align="start">
                 {/* @ts-expect-error TS(2739) FIXME: Type '{ mode: string; selected: any; onSelect: any... Remove this comment to see the full error message */}
                 <Calendar
                   mode="single"

diff --git a/src/components/FormBuilder/fields/InputField.tsx b/src/components/FormBuilder/fields/InputField.tsx
@@ -12,13 +12,14 @@ import { Input } from "#/components/ui/Input";
 
 import { withConditional } from "../withConditional";
 import { BaseField } from "../types";
+import { cn } from "#/lib";
 
 export interface InputFieldProps extends BaseField {
   length?: {
     maximum?: number;
     minimum: number; // undefined or number
   };
-  mode: "text" | "number";
+  mode: "text" | "number" | "time";
   type: "input";
 }
 
@@ -56,7 +57,9 @@ export const InputField = withConditional<InputFieldProps>(
         }
         defaultValue={field.defaultValue}
         render={({ field: formField }) => (
-          <FormItem className="w-full">
+          <FormItem
+            className={cn(field.mode === "time" ? "w-[240px]" : "w-full")}
+          >
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
             <FormDescription>{field.description}</FormDescription>
             <FormControl>