Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

feat(DateTimePicker): optimize onChange handling with ref for improved performance
All checks were successful
Build & Push Docker Image / build (push) Successful in 6m29s
Details

Browse Source
This commit is contained in:
Michelle
2026-03-04 13:25:53 +01:00
parent bb4da19f4f
commit 6aa01d39f4
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BrandLogo.jsx
View File

@@ -3,7 +3,7 @@ import { useBranding } from '../contexts/BrandingContext';
const sizes = { const sizes = {
sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' }, sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
md: { box: 'w-9 h-9', h: 'h-9', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' }, md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' }, lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
}; };

7
src/components/DateTimePicker.jsx
View File

@@ -30,6 +30,9 @@ export default function DateTimePicker({
}) { }) {
const inputRef = useRef(null); const inputRef = useRef(null);
const fpRef = useRef(null); const fpRef = useRef(null);
// Always keep a current ref to onChange so flatpickr's closure never goes stale
const onChangeRef = useRef(onChange);
useEffect(() => { onChangeRef.current = onChange; });
useEffect(() => { useEffect(() => {
if (!inputRef.current) return; if (!inputRef.current) return;
@@ -44,14 +47,14 @@ export default function DateTimePicker({
appendTo: document.body, // portal to body → never clipped appendTo: document.body, // portal to body → never clipped
static: false, static: false,
onChange: (selectedDates) => { onChange: (selectedDates) => {
if (selectedDates.length === 0) { onChange(''); return; } if (selectedDates.length === 0) { onChangeRef.current(''); return; }
const d = selectedDates[0]; const d = selectedDates[0];
const y = d.getFullYear(); const y = d.getFullYear();
const mo = String(d.getMonth() + 1).padStart(2, '0'); const mo = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0'); const day = String(d.getDate()).padStart(2, '0');
const h = String(d.getHours()).padStart(2, '0'); const h = String(d.getHours()).padStart(2, '0');
const mi = String(d.getMinutes()).padStart(2, '0'); const mi = String(d.getMinutes()).padStart(2, '0');
onChange(`${y}-${mo}-${day}T${h}:${mi}`); onChangeRef.current(`${y}-${mo}-${day}T${h}:${mi}`);
}, },
}); });