import React, { useCallback, useEffect, useMemo, useState } from 'react' import { mdiChevronDown, mdiClose } from '@mdi/js' import classNames from 'classnames' import { endOfMonth, endOfToday, endOfWeek, startOfMonth, startOfToday, startOfWeek, format, endOfDay, subMonths, } from 'date-fns' import { Button, Container, Icon, Popover, PopoverContent, type PopoverOpenEvent, PopoverTrigger, Checkbox, Tooltip, } from '@sourcegraph/wildcard' import { Calendar } from './Calendar' import styles from './DateRangeSelect.module.scss' export interface DateRangeSelectProps { placeholder?: string value?: [Date, Date] isRequired?: boolean onChange?: (value?: [Date, Date], isNegated?: boolean) => void defaultIsOpen?: boolean // If provided will render additional checkbox and pass value to onChange prop negation?: { label: string value?: boolean message?: React.ReactNode } className?: string } export const DateRangeSelect: React.FunctionComponent = ({ placeholder = 'Select a date range', value, onChange, isRequired, negation, className, defaultIsOpen = false, }) => { const predefinedDates: [Date, Date, string][] = useMemo(() => { const now = new Date() return [ [startOfToday(), endOfToday(), 'Today'], [startOfWeek(now), endOfWeek(now), 'This week'], [startOfMonth(now), endOfMonth(now), 'This month'], [subMonths(now, 3), endOfDay(now), 'Last 3 months'], ] }, []) const [range, setRange] = useState<[Date, Date] | undefined>(value) const [isOpen, setIsOpen] = useState(defaultIsOpen) const [isNegated, setIsNegated] = useState(negation?.value ?? false) const handleCancel = useCallback((): void => { setIsOpen(false) }, []) const handleOpenChange = useCallback((event: PopoverOpenEvent): void => { setIsOpen(event.isOpen) }, []) useEffect(() => { if (!isOpen) { setRange(value) setIsNegated(negation?.value ?? false) } }, [isOpen, negation?.value, value]) const handleApply = useCallback((): void => { onChange?.(range, isNegated) setIsOpen(false) }, [isNegated, onChange, range]) const handleClear = useCallback(() => { setRange(() => undefined) setIsNegated(false) // When the user clicks on clear, we set the value of `range` to undefined // and close the popover. onChange?.(undefined, false) setIsOpen(false) }, [onChange]) // `isNegated` is true when we want to display users that don't meet a condition within // the specified date range. // Negation doesn't require the `Apply` button to be disabled because when no date range // is selected we assume a date range from the beginning of time till the current time. // If `isNegated` is false, we only need to disable the button if it is required and there // is no date range selected. const isApplyButtonDisabled = isNegated ? false : isRequired && !range const { tooltip, label } = useMemo(() => { let tooltipText = '' let labelText = '' if (negation?.value) { tooltipText += 'Not in ' labelText = '-:' } if (value) { tooltipText += ` ${format(value[0], 'MMM d, yyyy')} - ${format(value[1], 'MMM d, yyyy')}` labelText += `${format(value[0], 'M/d')}-${format(value[1], 'M/d')}` } else if (negation?.value) { tooltipText += 'all available time' labelText += 'all time' } else { labelText = placeholder } return { label: labelText, tooltip: tooltipText } }, [negation?.value, placeholder, value]) return (

{label}

{negation && ( setIsNegated(event.target.checked)} label={negation.label} message={negation.message} /> )}

{predefinedDates.map(([start, end, label]) => ( ))}

) }