Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace hand-rolled dropdown on the dashboard and menu-related UI fixes #5037

Merged
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
f6985a6
Try popover
apata Jan 28, 2025
ce86bbe
Pass targetRef instead of target, stop Escape clearing filters
apata Jan 29, 2025
719e59e
Stop Escape clearing filters when popover menus active
apata Jan 29, 2025
9bfc4ec
Attempt get rid of hand-rolled dropdown
apata Jan 29, 2025
d392d3b
Fix issue with comparison calendar
apata Jan 29, 2025
315ce65
Almost works
apata Jan 29, 2025
5ca7af2
Unify styles
apata Jan 29, 2025
9f1cb57
Focus modals on mount
apata Jan 29, 2025
776a19f
Refactor date picker logic
apata Jan 29, 2025
6db18d8
Replace navigate keybinds with straightforward keybinds
apata Jan 29, 2025
688c947
Remove extraneous Calendar component, better props
apata Jan 29, 2025
15efcc3
Attempt optimise menu re-renders
apata Jan 29, 2025
38a7360
Memoise QueryPeriodsMenu, refactor getDatePeriodGroups
apata Jan 30, 2025
e2dae51
Refactor ComparisonMenu to Popover
apata Jan 30, 2025
ec86842
Refactor QueryPeriodMenu to Popover
apata Jan 30, 2025
b8c68f9
Pull calendar out of components
apata Jan 30, 2025
c49465d
Refactor calendar to receive position from JS
apata Jan 30, 2025
868dd40
Simpler calendar API
apata Jan 30, 2025
c526804
Add click outside listener for Calendar, fix FiltersBar measurements
apata Jan 30, 2025
3dbd86a
Give back top bar room
apata Jan 30, 2025
d21f724
Update tests
apata Jan 30, 2025
68afaeb
Apply unified button text style
apata Jan 30, 2025
2633518
Close calendar on keyboard nav to othe menus as well
apata Jan 30, 2025
a6a3807
Kinda works
apata Feb 3, 2025
994c52c
Works even better
apata Feb 3, 2025
ea6fe11
Working well
apata Feb 3, 2025
cb9fbe3
Sometimes menu stays active
apata Feb 3, 2025
382b13f
WIP
apata Feb 3, 2025
2793345
Adapter
apata Feb 3, 2025
5788d62
Works with error
apata Feb 3, 2025
85a7b33
Fixed the error
apata Feb 3, 2025
304758c
Remove handrolled isOpen
apata Feb 3, 2025
cec6f02
Introduce shared adapter
apata Feb 3, 2025
8fdeb07
Share adapter
apata Feb 3, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove extraneous Calendar component, better props
apata committed Jan 29, 2025
commit 688c947006907382eb1186d3573e7314588d978b
88 changes: 9 additions & 79 deletions assets/js/dashboard/nav-menu/query-periods/date-range-calendar.tsx
Original file line number Diff line number Diff line change
@@ -2,111 +2,40 @@
import React, { useEffect, useRef } from 'react'
import DatePicker from 'react-flatpickr'

export function DateRangeCalendar({
id,
minDate,
maxDate,
defaultDates,
onCloseWithNoSelection,
onCloseWithSelection
}: {
export interface DateRangeCalendarProps {
id: string
minDate?: string
maxDate?: string
defaultDates?: [string, string]
onCloseWithNoSelection?: () => void
onCloseWithSelection?: ([selectionStart, selectionEnd]: [Date, Date]) => void
}) {
const calendarRef = useRef<DatePicker>(null)

useEffect(() => {
const calendar = calendarRef.current
if (calendar) {
calendar.flatpickr.open()
}

return () => {
calendar?.flatpickr?.destroy()
}
}, [])

return (
<div className="h-0 w-0">
<DatePicker
id={id}
options={{
mode: 'range',
maxDate,
minDate,
defaultDate: defaultDates,
showMonths: 1,
static: true,
animate: true
}}
ref={calendarRef}
onClose={
onCloseWithSelection || onCloseWithNoSelection
? ([selectionStart, selectionEnd]) => {
if (selectionStart && selectionEnd) {
if (onCloseWithSelection) {
onCloseWithSelection([selectionStart, selectionEnd])
}
} else {
if (onCloseWithNoSelection) {
onCloseWithNoSelection()
}
}
}
: undefined
}
className="invisible"
/>
</div>
)
}

export function OtherDateRangeCalendar({
open,
export function DateRangeCalendar({
id,
minDate,
maxDate,
defaultDates,
onCloseWithNoSelection,
onCloseWithSelection
}: {
open: boolean
minDate?: string
maxDate?: string
defaultDates?: [string, string]
onCloseWithNoSelection?: () => void
onCloseWithSelection?: ([selectionStart, selectionEnd]: [Date, Date]) => void
}) {
}: DateRangeCalendarProps) {
const calendarRef = useRef<DatePicker>(null)

useEffect(() => {
const calendar = calendarRef.current
// console.log('calendar', calendar)
// if (calendar) {
// calendar.flatpickr.open()
// }
if (calendar) {
calendar.flatpickr.open()
}

return () => {
calendar?.flatpickr?.destroy()
}
}, [])

useEffect(() => {
const calendar = calendarRef.current

if (open && calendar) {
calendar.flatpickr.open()
}
}, [open])

return (
<div className="h-0 w-0">
<DatePicker
className="invisible"
id="calendar"
id={id}
options={{
mode: 'range',
maxDate,
@@ -132,6 +61,7 @@ export function OtherDateRangeCalendar({
}
: undefined
}
className="invisible"
/>
</div>
)