Astrian/datenel-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: integrate onSelect callback in SingleWeekPicker and update week calculation logic
All checks were successful
Publish to npm / publish (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 19:36:24 +11:00
parent 91a370da01
commit 39ffb6f784
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
playground/app.tsx
View File

@ -5,13 +5,13 @@ import './app.scss'
export default () => { export default () => {
function onSelect(value) { function onSelect(value) {
alert(`You select ${value.year}-${value.month}-${value.day}`) alert(`You select ${value.weekYear} - ${value.weekNum}`)
} }
return (<div className='app'> return (<div className='app'>
<div className="border"> <div className="border">
<div> <div>
<SingleWeekPicker /> <SingleWeekPicker onSelect={onSelect} />
</div> </div>
</div> </div>
</div>) </div>)

7
src/components/SingleWeekPicker.tsx
View File

@ -43,8 +43,8 @@ export interface SingleWeekPickerProps {
/** /**
* A callback function that will be called when a week is selected inside the panel. Note that * A callback function that will be called when a week is selected inside the panel. Note that
* Datenel will follow the ISO 8601 standard as well as the return rules of Luxon, which will * Datenel will follow the ISO 8601 standard to calculate the week number, which means that the first
* treat the week number 53 as the first week of the next year if exist. * week of the year is the week with the first Friday in it (week started from Monday).
* @param {{ year: number, month: number, day: number }} - The date user selected. * @param {{ year: number, month: number, day: number }} - The date user selected.
* @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025 * @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
*/ */
@ -70,7 +70,7 @@ export interface SingleWeekPickerProps {
* *
* @param * @param
*/ */
export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose }: SingleWeekPickerProps) => { export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect }: SingleWeekPickerProps) => {
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth()) const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
const [currentYear, setCurrentYear] = useState(new Date().getFullYear()) const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
const [selectedWeek, setSelectedWeek] = useState<{ weekYear: number, weekNum: number }>(calculateWeekNum(new Date())) const [selectedWeek, setSelectedWeek] = useState<{ weekYear: number, weekNum: number }>(calculateWeekNum(new Date()))
@ -126,6 +126,7 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
function selectWeek(date: Date) { function selectWeek(date: Date) {
setSelectedWeek(calculateWeekNum(date)) setSelectedWeek(calculateWeekNum(date))
onSelect?.(calculateWeekNum(date))
} }
function changeYear(year: string) { function changeYear(year: string) {

8
src/utils/calculateWeekNum.ts
View File

@ -4,15 +4,15 @@ export default (date: Date): { weekYear: number, weekNum: number } => {
tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() || 7)) tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() || 7))
const firstThursday = new Date(tempDate.getFullYear(), 0, 4) const firstFriday = new Date(tempDate.getFullYear(), 0, 5) // Changed to 5 for Friday
firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() || 7)) firstFriday.setDate(firstFriday.getDate() + 3 - (firstFriday.getDay() || 7))
const diffInDays = Math.floor((tempDate.getTime() - firstThursday.getTime()) / (24 * 60 * 60 * 1000)) const diffInDays = Math.floor((tempDate.getTime() - firstFriday.getTime()) / (24 * 60 * 60 * 1000))
const weekNum = Math.ceil((diffInDays + 1) / 7) const weekNum = Math.ceil((diffInDays + 1) / 7)
return { return {
weekYear: weekNum === 53 ? tempDate.getFullYear() + 1 : tempDate.getFullYear(), weekYear: tempDate.getFullYear(),
weekNum weekNum
} }
} }