add calendar dropdow to calendar view controls

atelier-saulx · Oct 18, 2024 · 1d48119 · 1d48119
1 parent d1b4350
commit 1d48119
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
@@ -18,6 +18,7 @@ import { IconButton } from '../IconButton/index.js'
 import { Field, getTitleField } from '../../utils/common.js'
 import { CalendarItem } from './CalendarItem.js'
 import { ScrollArea } from '../ScrollArea/index.js'
+import { CalendarDropdown } from '../DateInput/index.js'
 
 type CalendarVariant = 'monthly' | 'weekly' | '2-weekly'
 
@@ -569,13 +570,15 @@ function CalendarControls({
           )
         }}
       />
-      <Button variant="ghost">
-        {variant === 'monthly' && format(value, 'MMMM yyyy')}
-        {variant === '2-weekly' &&
-          `${format(startOfWeek(value, { weekStartsOn: 1 }), 'MMM d yyyy')} - ${format(addDays(startOfWeek(value, { weekStartsOn: 1 }), 13), 'MMM d yyyy')}`}
-        {variant === 'weekly' &&
-          `${format(startOfWeek(value, { weekStartsOn: 1 }), 'MMM d yyyy')} - ${format(addDays(startOfWeek(value, { weekStartsOn: 1 }), 6), 'MMM d yyyy')}`}
-      </Button>
+      <CalendarDropdown value={value} onChange={onChange} variant="date">
+        <Button variant="ghost">
+          {variant === 'monthly' && format(value, 'MMMM yyyy')}
+          {variant === '2-weekly' &&
+            `${format(startOfWeek(value, { weekStartsOn: 1 }), 'MMM d yyyy')} - ${format(addDays(startOfWeek(value, { weekStartsOn: 1 }), 13), 'MMM d yyyy')}`}
+          {variant === 'weekly' &&
+            `${format(startOfWeek(value, { weekStartsOn: 1 }), 'MMM d yyyy')} - ${format(addDays(startOfWeek(value, { weekStartsOn: 1 }), 6), 'MMM d yyyy')}`}
+        </Button>
+      </CalendarDropdown>
       <IconButton
         icon="arrow-right"
         onClick={() => {

diff --git a/src/components/DateInput/Calendar.tsx b/src/components/DateInput/Calendar.tsx
@@ -130,7 +130,7 @@ function Calendar({
             <div
               ref={refs.setFloating}
               style={{
-                zIndex: 2,
+                zIndex: 4,
                 position: 'relative',
                 width: 240,
                 borderRadius: radius[16],

diff --git a/src/components/DateInput/index.tsx b/src/components/DateInput/index.tsx
@@ -42,5 +42,5 @@ function DateInput({
   )
 }
 
-export { DateInput }
+export { DateInput, Calendar as CalendarDropdown }
 export type { DateInputProps }