From 92f22d13311b2e18b224a6d909e944b582a534e1 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 19 Feb 2025 19:55:36 +1100
Subject: [PATCH] feat: add onSelect callback to SingleDatePicker and integrate
 with WeekPicker

---
 playground/app.tsx                  | 16 +++++++++++-----
 src/components/SingleDatePicker.tsx | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/playground/app.tsx b/playground/app.tsx
index 7311990..b2497c5 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -4,14 +4,20 @@ import './app.scss'
 
 export default () => {
 
+	function onSelect(value) {
+		alert(`You select ${value.year}-${value.month}-${value.day}`)
+	}
 
 	return (<div className='app'>
 		<div className="border">
-			<WeekPicker value={{
-				year: 2025,
-				month: 1,
-				day: 1
-			}} />
+			<WeekPicker 
+				value={{
+					year: 2025,
+					month: 1,
+					day: 1
+				}}
+				onSelect={onSelect}
+			/>
 		</div>
 	</div>)
 }
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 286167e..2b8dae0 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -5,6 +5,11 @@ import { getCalendarDates, getL10Weekday } from '../utils'
 
 interface Props {
 	value?: Date | { year: number, month: number, day: number }
+	onSelect?: (date: {
+		year: number,
+		month: number,
+		day: number
+	}) => void
 }
 
 /**
@@ -16,8 +21,10 @@ interface Props {
  * @param {Date | { year: number, month: number, day: number }} props.value - Control the selected
  * date programmatically, including situations like provide a default value or control the selected 
  * date by parent component.
+ * @param {(date: { year: number, month: number, day: number }) => void} props.onSelect - A callback
+ * function that will be called when a date is selected inside the panel.
  */
-export default ({ value }: Props) => {
+export default ({ value, onSelect }: Props) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedDate, setSelectedDate] = useState(new Date())
@@ -39,6 +46,11 @@ export default ({ value }: Props) => {
 
 	function selectDate(date: Date) {
 		setSelectedDate(date)
+		onSelect?.({
+			year: date.getFullYear(),
+			month: date.getMonth() + 1,
+			day: date.getDate()
+		})
 	}
 
 	function skipToLastMonth() {