fix: refactor layout and styling for SingleWeekPicker component
All checks were successful
Publish to npm / publish (push) Successful in 29s
All checks were successful
Publish to npm / publish (push) Successful in 29s
This commit is contained in:
parent
ac798d2e67
commit
5c03b4ce50
SSH Key Fingerprint:
SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
|
|
@ -10,8 +10,9 @@ export default () => {
|
|||
|
||||
return (<div className='app'>
|
||||
<div className="border">
|
||||
<SingleWeekPicker />
|
||||
<SingleDatePicker />
|
||||
<div>
|
||||
<SingleWeekPicker />
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
|
@ -3,14 +3,14 @@ import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '.
|
|||
|
||||
export interface SingleDatePickerProps {
|
||||
/**
|
||||
* Control the selected
|
||||
* 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
|
||||
* value.
|
||||
* @example { year: 2025, month: 1, day: 1 }
|
||||
* @example new Date(2025, 0, 1)
|
||||
* @default new Date()
|
||||
*/
|
||||
*/
|
||||
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 instanceof Date)) {
|
||||
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.')
|
||||
if (value.day < 1 || value.day > 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)
|
||||
setSelectedDate(date)
|
||||
setCurrentMonth(date.getMonth())
|
||||
|
|
@ -121,7 +121,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
|
|||
hoverColor: hoverColor,
|
||||
borderColor: borderColor
|
||||
})
|
||||
} , [mainColor, accentColor, reversedColor, hoverColor, borderColor])
|
||||
}, [mainColor, accentColor, reversedColor, hoverColor, borderColor])
|
||||
|
||||
function selectDate(date: Date) {
|
||||
setSelectedDate(date)
|
||||
|
|
@ -175,15 +175,17 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
|
|||
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>
|
||||
</div>
|
||||
<div className='month-selector-body'>
|
||||
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
|
||||
setCurrentMonth(index)
|
||||
setSelectMonth(false)
|
||||
}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
|
||||
{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
|
||||
</button>)}
|
||||
<div className='body'>
|
||||
<div className='month-selector-body'>
|
||||
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
|
||||
setCurrentMonth(index)
|
||||
setSelectMonth(false)
|
||||
}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
|
||||
{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
|
||||
</button>)}
|
||||
</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>
|
||||
)
|
||||
else return (
|
||||
|
|
@ -195,23 +197,25 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
|
|||
</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 className='calendar-view-body grid' aria-live="polite">
|
||||
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
|
||||
<div className='body'>
|
||||
<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
|
||||
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
|
||||
key={date.toISOString()}
|
||||
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`}
|
||||
tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
|
||||
aria-hidden={currentMonth !== date.getMonth()}
|
||||
disabled={currentMonth !== date.getMonth()}
|
||||
>
|
||||
{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>}
|
||||
</button>)}
|
||||
{dates.map(date => <button
|
||||
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
|
||||
key={date.toISOString()}
|
||||
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`}
|
||||
tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
|
||||
aria-hidden={currentMonth !== date.getMonth()}
|
||||
disabled={currentMonth !== date.getMonth()}
|
||||
>
|
||||
{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>}
|
||||
</button>)}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
|
||||
<div className='calendar-view-body flex' aria-live="polite">
|
||||
<div className="listitem">
|
||||
{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
|
||||
<div className="body">
|
||||
<div className="week-indicator">
|
||||
<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>
|
||||
|
||||
{calendarWeeks.map((week, index) => {
|
||||
const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
|
||||
return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
|
||||
{week.map(date => <div
|
||||
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
|
||||
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 className='calendar-view-body flex' aria-live="polite">
|
||||
<div className="listitem">
|
||||
{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
|
||||
</div>
|
||||
|
||||
{calendarWeeks.map((week, index) => {
|
||||
const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
|
||||
return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
|
||||
{week.map(date => <div
|
||||
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
|
||||
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>
|
||||
}
|
||||
|
|
|
|||
170
src/style.scss
170
src/style.scss
|
|
@ -7,6 +7,7 @@
|
|||
background: none;
|
||||
cursor: pointer;
|
||||
color: var(--datenel-main-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--datenel-hover-color);
|
||||
}
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
height: 1rem;
|
||||
}
|
||||
|
||||
&.stepper{
|
||||
&.stepper {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: flex;
|
||||
|
|
@ -52,89 +53,132 @@
|
|||
}
|
||||
|
||||
input.indicator {
|
||||
border:none;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.25rem 0;
|
||||
color: var(--datenel-main-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--datenel-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-view-body {
|
||||
padding: 0.75rem;
|
||||
gap: 0.125rem;
|
||||
&.grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
.item.date {
|
||||
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;
|
||||
.body {
|
||||
display: flex;
|
||||
.calendar-view-body {
|
||||
padding: 0.75rem;
|
||||
gap: 0.125rem;
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
border-radius: 1rem;
|
||||
|
||||
.item.date {
|
||||
background: none;
|
||||
}
|
||||
&.active {
|
||||
background: var(--datenel-accent-color);
|
||||
color: var(--datenel-reversed-color);
|
||||
.extra-month {
|
||||
opacity: 0.5;
|
||||
border-radius: 50%;
|
||||
|
||||
&.extra-month {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--datenel-accent-color);
|
||||
color: var(--datenel-reversed-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.item {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
&.extra-month {
|
||||
opacity: 0.3;
|
||||
|
||||
&.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.listitem {
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
border-radius: 1rem;
|
||||
|
||||
.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;
|
||||
}
|
||||
.today-indicator {
|
||||
position: absolute;
|
||||
bottom: 0.25rem;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
.item.active {
|
||||
background: var(--datenel-accent-color);
|
||||
color: var(--datenel-reversed-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.month-selector-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 0.75rem;
|
||||
gap: 0.125rem;
|
||||
.item {
|
||||
border-radius: 0.25rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user