From 51a49e116591669115be5faf4186b4eee10f58e0 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 19 Feb 2025 21:00:08 +1100
Subject: [PATCH] feat: implement year/month selection in SingleDatePicker with
 updated styling

---
 src/components/SingleDatePicker.tsx | 36 ++++++++++++++++++++++++-----
 src/style.scss                      | 29 ++++++++++++++++++++---
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 2b8dae0..f5ac87d 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -31,6 +31,7 @@ export default ({ value, onSelect }: Props) => {
 	const [dates, setDates] = useState<Date[]>([])
 	const userLang = navigator.language
 	const l10nDays = getL10Weekday(userLang)
+	const [selectMonth, setSelectMonth] = useState(true)
 
 	useEffect(() => {
 		setDates(getCalendarDates(currentMonth, currentYear))
@@ -69,16 +70,39 @@ export default ({ value, onSelect }: Props) => {
 		else setCurrentMonth(currentMonth + 1)
 	}
 
-	return (<div className='datenel-component'>
+	if (selectMonth) return (<div className='datenel-component'>
 		<div className='header'>
-			<button className='month-stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button>
-			<button className='month-indicator'>
+			<button className='stepper' onClick={() => {
+				if (currentYear === 0) return
+				setCurrentYear(currentYear - 1)
+			}}><img src={LeftArrowIcon} /></button>
+			<input className='indicator' 
+				value={currentYear}
+				onChange={e => setCurrentYear(parseInt(e.target.value))}
+			/>
+			<button className='stepper' onClick={() => {
+				if (currentYear === 9999) return
+				setCurrentYear(currentYear + 1)
+			}}><img src={RightArrowIcon} /></button>
+		</div>
+		<div className='month-selector-body'>
+			{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
+				setCurrentMonth(index)
+				setSelectMonth(false)
+			}}>
+				{new Date(currentYear, index).toLocaleString(userLang, { month: 'long' })}
+			</button>)}
+		</div>
+	</div>)
+	else return (<div className='datenel-component'>
+		<div className='header'>
+			<button className='stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button>
+			<button className='indicator' onClick={() => setSelectMonth(true)}>
 				{new Date(currentYear, currentMonth).toLocaleString(userLang, { month: 'long', year: 'numeric' })}
 			</button>
-			<button className='month-stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button>
+			<button className='stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button>
 		</div>
-		<div className='body'>
-			
+		<div className='calendar-view-body'>
 			{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
 
 			{dates.map(date => <button className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`} key={date.toISOString()} onClick={() => selectDate(date)}>
diff --git a/src/style.scss b/src/style.scss
index acdf3bd..359a29e 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -31,7 +31,7 @@
 				height: 1rem;
 			}
 
-			&.month-stepper{
+			&.stepper{
 				width: 1.75rem;
 				height: 1.75rem;
 				display: flex;
@@ -40,14 +40,26 @@
 				border-radius: 50%;
 			}
 
-			&.month-indicator {
+			&.indicator {
 				padding: 0.25rem 0.5rem;
 				border-radius: 0.25rem;
 			}
 		}
+
+		input.indicator {
+			border:none;
+			background: none;
+			text-align: center;
+			outline: none;
+			border-radius: 0.25rem;
+			padding: 0.25rem 0;
+			&:hover {
+				background: var(--hover-color);
+			}
+		}
 	}
 
-	.body {
+	.calendar-view-body {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
 		padding: 0.75rem;
@@ -86,4 +98,15 @@
 			}
 		}
 	}
+
+	.month-selector-body {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		padding: 0.75rem;
+		gap: 0.125rem;
+		.item {
+			border-radius: 0.25rem;
+			height: 2rem;
+		}
+	}
 }