Disable relative vs absolute inputs

temporalio · Sep 7, 2023 · 48f83ab · 48f83ab
1 parent 8b0aa42
commit 48f83ab
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -207,13 +207,15 @@
                 error={error(relativeTime)}
                 unroundRight
                 class="h-10"
+                disabled={type !== 'relative'}
               />
               <Select
                 unroundLeft
                 bind:value={timeUnit}
                 id="relative-datetime-unit-input"
                 label={translate('time-unit')}
                 labelHidden
+                disabled={type !== 'relative'}
               >
                 {#each TIME_UNIT_OPTIONS as unit}
                   <Option value={unit}>{unit} {translate('ago')}</Option>
@@ -248,12 +250,14 @@
                 todayLabel={translate('today')}
                 closeLabel={translate('close')}
                 clearLabel={translate('clear-input-button-label')}
+                disabled={type !== 'absolute'}
               />
               <TimePicker
                 bind:hour={startHour}
                 bind:minute={startMinute}
                 bind:second={startSecond}
                 twelveHourClock={false}
+                disabled={type !== 'absolute'}
               />
             </div>
           </div>

diff --git a/src/lib/holocene/date-picker.svelte b/src/lib/holocene/date-picker.svelte
@@ -17,6 +17,7 @@
   export let todayLabel: string;
   export let closeLabel: string;
   export let clearLabel: string;
+  export let disabled = false;
 
   let month: number | undefined;
   let year: number | undefined;
@@ -88,6 +89,7 @@
     value={selected.toDateString()}
     clearable
     clearButtonLabel={clearLabel}
+    {disabled}
   />
   {#if showDatePicker}
     <div

diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
@@ -8,6 +8,7 @@
   export let second = '';
   export let half: 'AM' | 'PM' = 'AM';
   export let twelveHourClock = true;
+  export let disabled = false;
 </script>
 
 <div class="flex gap-2">
@@ -20,6 +21,7 @@
     suffix="hrs"
     maxLength={2}
     error={twelveHourClock ? parseInt(hour) > 12 : parseInt(hour) > 23}
+    {disabled}
   />
   <Input
     id="minute"
@@ -31,6 +33,7 @@
     suffix="min"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
   <Input
     id="second"
@@ -41,6 +44,7 @@
     suffix="sec"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
   {#if twelveHourClock}
     <ToggleButtons>