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 () => {
function onSelect(value) {
alert(`You select ${value.year}-${value.month}-${value.day}`)
alert(`You select ${value.weekYear} - ${value.weekNum}`)
}
return (<div className='app'>
<div className="border">
<div>
<SingleWeekPicker />
<SingleWeekPicker onSelect={onSelect} />
</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
* Datenel will follow the ISO 8601 standard as well as the return rules of Luxon, which will
* treat the week number 53 as the first week of the next year if exist.
* Datenel will follow the ISO 8601 standard to calculate the week number, which means that the first
* 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.
* @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
*/
@ -70,7 +70,7 @@ export interface SingleWeekPickerProps {
*
* @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 [currentYear, setCurrentYear] = useState(new Date().getFullYear())
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) {
setSelectedWeek(calculateWeekNum(date))
onSelect?.(calculateWeekNum(date))
}
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))
const firstThursday = new Date(tempDate.getFullYear(), 0, 4)
firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() || 7))
const firstFriday = new Date(tempDate.getFullYear(), 0, 5) // Changed to 5 for Friday
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)
return {
weekYear: weekNum === 53 ? tempDate.getFullYear() + 1 : tempDate.getFullYear(),
weekYear: tempDate.getFullYear(),
weekNum
}
}