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

feat: add value prop to SingleWeekPicker for programmatic date control
All checks were successful
Publish to npm / publish (push) Successful in 29s
Details

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 20:35:13 +11:00
parent 4d1f8725a4
commit 1eb59aa151
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
playground/app.tsx
View File

@ -1,12 +1,12 @@
import React from 'react' import React from 'react'
import { SingleDatePicker, SingleWeekPicker } from "../dist/index.es" import { SingleDatePicker, SingleWeekPicker } from "../src"
import './app.scss' import './app.scss'
export default () => { export default () => {
return (<div className='app'> return (<div className='app'>
<div className="border"> <div className="border">
<SingleWeekPicker value={new Date(2025, 0, 1)} onSelect={(date) => console.log(date)} />
</div> </div>
</div>) </div>)
} }

30
src/components/SingleWeekPicker.tsx
View File

@ -60,6 +60,17 @@ export interface SingleWeekPickerProps {
* @default undefined * @default undefined
*/ */
onClose?: () => void onClose?: () => void
/**
* Control the selected
* date programmatically, including situations like provide a default value or control the selected
* date by parent component. When using the Date object, the week number related to the date will be
* applied to the panel.
* @example { weekYear: 2025, weekNum: 1 }
* @example new Date(2025, 0, 1)
* @default new Date()
*/
value?: { weekYear: number, weekNum: number } | Date
} }
/** /**
@ -70,7 +81,7 @@ export interface SingleWeekPickerProps {
* *
* @param * @param
*/ */
export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect }: SingleWeekPickerProps) => { export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect, value }: 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()))
@ -119,10 +130,19 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
}, [currentMonth, currentYear]) }, [currentMonth, currentYear])
useEffect(() => { useEffect(() => {
const date = new Date(2033, 0, 1) if (!value) return
console.log(date) if (!(value instanceof Date)) {
console.log(calculateWeekNum(date)) if (value.weekYear < 100) value.weekYear = Number(`20${value.weekYear}`)
}, []) if (value.weekNum < 1 || value.weekNum > 53)
return console.warn('Invalid value: Week number should be between 1 and 53.')
}
const date = value instanceof Date ? value : new Date(value.weekYear, 0, 1)
if ('weekNum' in value)
date.setDate(date.getDate() + (value.weekNum - 1) * 7)
setSelectedWeek(calculateWeekNum(date))
setCurrentMonth(date.getMonth())
setCurrentYear(date.getFullYear())
}, [value])
function selectWeek(date: Date) { function selectWeek(date: Date) {
setSelectedWeek(calculateWeekNum(date)) setSelectedWeek(calculateWeekNum(date))