test
1 month ago
useCompleteOnboarding.js
1 month ago
useDateRangePicker.js
2 months ago
useEmail.ts
2 months ago
useEngagementChartData.js
2 months ago
useLicenseSettings.js
2 months ago
useLink.js
2 months ago
useMediaDetail.js
2 months ago
useMediaLibrary.js
2 months ago
useMediaList.ts
1 month ago
usePerformanceSettings.js
2 months ago
useRegisterActivePage.js
2 months ago
useSettingOption.js
2 months ago
useSimpleSettingsPage.js
2 months ago
useTopPerforming.js
2 months ago
useTopVideosPaginated.js
2 months ago
useUpgradeCTA.js
2 months ago
useUserDetail.js
2 months ago
useDateRangePicker.js
73 lines
| 1 | import { useState, useEffect, useRef, useCallback } from "@wordpress/element"; |
| 2 | |
| 3 | /** |
| 4 | * Encapsulates date range picker state, handlers, and side-effects |
| 5 | * used by analytics detail pages. |
| 6 | * |
| 7 | * @param {Function} refetchFn - Called with (from, to) when dates change, or with no args on clear. |
| 8 | */ |
| 9 | const useDateRangePicker = (refetchFn) => { |
| 10 | const [selectedDates, setSelectedDates] = useState({ from: null, to: null }); |
| 11 | const [isDatePickerOpen, setIsDatePickerOpen] = useState(false); |
| 12 | const datePickerRef = useRef(null); |
| 13 | |
| 14 | const handleDateApply = useCallback((dates) => { |
| 15 | const { from, to } = dates; |
| 16 | if (from && to) { |
| 17 | const fromDate = new Date(from); |
| 18 | const toDate = new Date(to); |
| 19 | setSelectedDates(fromDate > toDate ? { from: to, to: from } : dates); |
| 20 | } else if (from && !to) { |
| 21 | setSelectedDates({ from, to: from }); |
| 22 | } else { |
| 23 | setSelectedDates({ from: null, to: null }); |
| 24 | } |
| 25 | setIsDatePickerOpen(false); |
| 26 | }, []); |
| 27 | |
| 28 | const handleDateCancel = useCallback(() => { |
| 29 | setIsDatePickerOpen(false); |
| 30 | }, []); |
| 31 | |
| 32 | const handleClearFilters = useCallback(() => { |
| 33 | setSelectedDates({ from: null, to: null }); |
| 34 | refetchFn(); |
| 35 | }, [refetchFn]); |
| 36 | |
| 37 | // Refetch when date range changes |
| 38 | useEffect(() => { |
| 39 | if (selectedDates.from && selectedDates.to) { |
| 40 | refetchFn(selectedDates.from, selectedDates.to); |
| 41 | } |
| 42 | }, [selectedDates.from, selectedDates.to, refetchFn]); |
| 43 | |
| 44 | // Close on click outside |
| 45 | useEffect(() => { |
| 46 | if (!isDatePickerOpen) return; |
| 47 | |
| 48 | function handleClickOutside(event) { |
| 49 | if ( |
| 50 | datePickerRef.current && |
| 51 | !datePickerRef.current.contains(event.target) |
| 52 | ) { |
| 53 | setIsDatePickerOpen(false); |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | document.addEventListener("mousedown", handleClickOutside); |
| 58 | return () => document.removeEventListener("mousedown", handleClickOutside); |
| 59 | }, [isDatePickerOpen]); |
| 60 | |
| 61 | return { |
| 62 | selectedDates, |
| 63 | isDatePickerOpen, |
| 64 | setIsDatePickerOpen, |
| 65 | datePickerRef, |
| 66 | handleDateApply, |
| 67 | handleDateCancel, |
| 68 | handleClearFilters, |
| 69 | }; |
| 70 | }; |
| 71 | |
| 72 | export default useDateRangePicker; |
| 73 |