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

fix: refactor layout and styling for SingleWeekPicker component
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 19:12:21 +11:00
parent ac798d2e67
commit 5c03b4ce50
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
4 changed files with 168 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
playground/app.tsx
View File

@ -10,8 +10,9 @@ export default () => {
return (<div className='app'> return (<div className='app'>
<div className="border"> <div className="border">
<SingleWeekPicker /> <div>
<SingleDatePicker /> <SingleWeekPicker />
</div>
</div> </div>
</div>) </div>)
} }

60
src/components/SingleDatePicker.tsx
View File

@ -3,14 +3,14 @@ import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '.
export interface SingleDatePickerProps { export interface SingleDatePickerProps {
/** /**
* Control the selected * Control the selected
* date programmatically, including situations like provide a default value or control the selected * date programmatically, including situations like provide a default value or control the selected
* date by parent component. Use 1-12 for month, instead of 0-11, if you are using object to set the * date by parent component. Use 1-12 for month, instead of 0-11, if you are using object to set the
* value. * value.
* @example { year: 2025, month: 1, day: 1 } * @example { year: 2025, month: 1, day: 1 }
* @example new Date(2025, 0, 1) * @example new Date(2025, 0, 1)
* @default new Date() * @default new Date()
*/ */
value?: Date | { year: number, month: number, day: number } value?: Date | { year: number, month: number, day: number }
/** /**
@ -97,11 +97,11 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
if (!value) return if (!value) return
if (!(value instanceof Date)) { if (!(value instanceof Date)) {
if (value.year < 100) value.year = Number(`20${value.year}`) if (value.year < 100) value.year = Number(`20${value.year}`)
if (value.month < 0 || value.month > 11) if (value.month < 0 || value.month > 11)
return console.warn('Invalid value: Month should be between 1 and 12.') return console.warn('Invalid value: Month should be between 1 and 12.')
if (value.day < 1 || value.day > 31) if (value.day < 1 || value.day > 31)
return console.warn('Invalid value: Day should be between 1 and 31.') return console.warn('Invalid value: Day should be between 1 and 31.')
} }
const date = value instanceof Date ? value : new Date(value.year, value.month - 1, value.day) const date = value instanceof Date ? value : new Date(value.year, value.month - 1, value.day)
setSelectedDate(date) setSelectedDate(date)
setCurrentMonth(date.getMonth()) setCurrentMonth(date.getMonth())
@ -121,7 +121,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
hoverColor: hoverColor, hoverColor: hoverColor,
borderColor: borderColor borderColor: borderColor
}) })
} , [mainColor, accentColor, reversedColor, hoverColor, borderColor]) }, [mainColor, accentColor, reversedColor, hoverColor, borderColor])
function selectDate(date: Date) { function selectDate(date: Date) {
setSelectedDate(date) setSelectedDate(date)
@ -175,15 +175,17 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
setCurrentYear(currentYear + 1) setCurrentYear(currentYear + 1)
}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button> }} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
</div> </div>
<div className='month-selector-body'> <div className='body'>
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => { <div className='month-selector-body'>
setCurrentMonth(index) {Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
setSelectMonth(false) setCurrentMonth(index)
}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}> setSelectMonth(false)
{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} }} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
</button>)} {new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
</button>)}
</div>
</div> </div>
{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> } {!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
</div> </div>
) )
else return ( else return (
@ -195,23 +197,25 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
</button> </button>
<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button> <button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
</div> </div>
<div className='calendar-view-body grid' aria-live="polite"> <div className='body'>
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)} <div className='calendar-view-body grid' aria-live="polite">
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
{dates.map(date => <button {dates.map(date => <button
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`} className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
key={date.toISOString()} key={date.toISOString()}
onClick={() => selectDate(date)} onClick={() => selectDate(date)}
aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`} aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
tabIndex={currentMonth !== date.getMonth() ? -1 : 0} tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
aria-hidden={currentMonth !== date.getMonth()} aria-hidden={currentMonth !== date.getMonth()}
disabled={currentMonth !== date.getMonth()} disabled={currentMonth !== date.getMonth()}
> >
{date.getDate()} {date.getDate()}
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>} {date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
</button>)} </button>)}
</div>
</div> </div>
{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> } {!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
</div> </div>
) )
} }

41
src/components/SingleWeekPicker.tsx
View File

@ -133,23 +133,34 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button> <button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
</div> </div>
<div className='calendar-view-body flex' aria-live="polite"> <div className="body">
<div className="listitem"> <div className="week-indicator">
{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)} <div className="item title">Wk</div>
{calendarWeeks.map(week => <div className={`item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? 'active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
{calculateWeekNum(week[0]).weekNum}
</div>)}
</div> </div>
{calendarWeeks.map((week, index) => { <div className='calendar-view-body flex' aria-live="polite">
const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum <div className="listitem">
return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}> {Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
{week.map(date => <div </div>
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
key={date.getDate()} {calendarWeeks.map((week, index) => {
> const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
{date.getDate()} return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>} {week.map(date => <div
</div>)} className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
</button> key={date.getDate()}
})} >
{date.getDate()}
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
</div>)}
</button>
})}
</div>
</div> </div>
</div> </div>
} }

170
src/style.scss
View File

@ -7,6 +7,7 @@
background: none; background: none;
cursor: pointer; cursor: pointer;
color: var(--datenel-main-color); color: var(--datenel-main-color);
&:hover { &:hover {
background: var(--datenel-hover-color); background: var(--datenel-hover-color);
} }
@ -36,7 +37,7 @@
height: 1rem; height: 1rem;
} }
&.stepper{ &.stepper {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
display: flex; display: flex;
@ -52,89 +53,132 @@
} }
input.indicator { input.indicator {
border:none; border: none;
background: none; background: none;
text-align: center; text-align: center;
outline: none; outline: none;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.25rem 0; padding: 0.25rem 0;
color: var(--datenel-main-color); color: var(--datenel-main-color);
&:hover { &:hover {
background: var(--datenel-hover-color); background: var(--datenel-hover-color);
} }
} }
} }
.calendar-view-body { .body {
padding: 0.75rem; display: flex;
gap: 0.125rem; .calendar-view-body {
&.grid{ padding: 0.75rem;
display: grid; gap: 0.125rem;
grid-template-columns: repeat(7, 1fr);
.item.date { &.grid {
border-radius: 50%;
&.extra-month {
cursor: default;
}
&.active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
}
}
}
&.flex {
display: flex;
flex-direction: column;
.listitem {
padding: 0;
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
border-radius: 1rem;
.item.date { .item.date {
background: none; border-radius: 50%;
}
&.active { &.extra-month {
background: var(--datenel-accent-color); cursor: default;
color: var(--datenel-reversed-color); }
.extra-month {
opacity: 0.5; &.active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
} }
} }
} }
} &.flex {
.item { display: flex;
width: 2rem; flex-direction: column;
height: 2rem;
display: flex; .listitem {
justify-content: center; padding: 0;
align-items: center; display: grid;
font-size: 0.75rem; grid-template-columns: repeat(7, 1fr);
position: relative; border-radius: 1rem;
&.extra-month {
opacity: 0.3; .item.date {
background: none;
}
&.active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
.extra-month {
opacity: 0.5;
}
}
}
} }
&.day-indicator {
.item {
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
position: relative;
&.extra-month {
opacity: 0.3;
}
&.day-indicator {
opacity: 0.5;
}
.today-indicator {
position: absolute;
bottom: 0.25rem;
width: 0.25rem;
height: 0.25rem;
}
}
}
.month-selector-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.75rem;
gap: 0.125rem;
.item {
border-radius: 0.25rem;
height: 2rem;
}
}
.week-indicator {
display: flex;
flex-direction: column;
border-right: 1px solid var(--datenel-border-color);
gap: 0.125rem;
padding: 0.75rem;
.item {
font-size: 0.75rem;
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.item.title {
opacity: 0.5; opacity: 0.5;
} }
.today-indicator { .item.active {
position: absolute; background: var(--datenel-accent-color);
bottom: 0.25rem; color: var(--datenel-reversed-color);
width: 0.25rem;
height: 0.25rem;
} }
} }
} }
}
.month-selector-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.75rem;
gap: 0.125rem;
.item {
border-radius: 0.25rem;
height: 2rem;
}
}
}