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

dev #7

Merged
Astrian merged 5 commits from dev into main 2025-02-22 23:02:05 +00:00
Conversation 0 Commits 5 Files Changed 7 +73 -73
3 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cd0d6d1cba - Show all commits

40
src/components/SingleDatePicker.tsx
View File

@ -219,24 +219,24 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
}
if (selectMonth) return (
<div className='datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
<div className='header'>
<button className='stepper' onClick={() => {
<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
<div className='__datenel_header'>
<button className='__datenel_stepper' onClick={() => {
if (currentYear <= 100) return
setCurrentYear(currentYear - 1)
}} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<input className='indicator'
<input className='__datenel_indicator'
value={currentYear}
onChange={e => changeYear(e.target.value)}
onBlur={adjustYear}
aria-label="Year input, type a year to go to that year"
/>
<button className='stepper' onClick={() => {
<button className='__datenel_stepper' onClick={() => {
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='body'>
<div className='month-selector-body'>
<div className='__datenel_body'>
<div className='__datenel_month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => {
function calculateNotAvailable() {
// When the last day of a month not inside the range of available dates
@ -248,7 +248,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
return false
}
return <button
className={`item ${calculateNotAvailable() && 'not-available'}`}
className={`__datenel_item ${calculateNotAvailable() && '__datenel_not-available'}`}
key={index}
onClick={() => {
setCurrentMonth(index)
@ -263,26 +263,26 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
})}
</div>
</div>
{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
</div>
)
else return (
<div className='datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
<div className='header'>
<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
<div className='__datenel_header'>
<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
</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='__datenel_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='body'>
<div className='calendar-view-body grid' aria-live="polite">
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
<div className='__datenel_body'>
<div className='__datenel_calendar-view-body __datenel_grid' aria-live="polite">
{l10nDays.map((day, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{day}</div>)}
{dates.map(date => {
const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth()
return <button
className={`item date ${notAvailable && 'not-available'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
className={`__datenel_item __datenel_date ${notAvailable && '__datenel_not-available'} ${selectedDate.toDateString() === date.toDateString() && '__datenel_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`}
@ -291,12 +291,12 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
disabled={notAvailable}
>
{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='__datenel_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='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
</div>
)
}

50
src/components/SingleWeekPicker.tsx
View File

@ -160,25 +160,25 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
}
if (selectMonth) {
return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
<div className='header'>
<button className='stepper' onClick={() => {
return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
<div className='__datenel_header'>
<button className='__datenel_stepper' onClick={() => {
if (currentYear <= 100) return
setCurrentYear(currentYear - 1)
}} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<input className='indicator'
<input className='__datenel_indicator'
value={currentYear}
onChange={e => changeYear(e.target.value)}
onBlur={adjustYear}
aria-label="Year input, type a year to go to that year"
/>
<button className='stepper' onClick={() => {
<button className='__datenel_stepper' onClick={() => {
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='body'>
<div className='month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
<div className='__datenel_body'>
<div className='__datenel_month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => <button className={`__datenel_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}`}>
@ -186,50 +186,50 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
</button>)}
</div>
</div>
{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
</div>
} else {
return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
<div className='header'>
<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
<div className='__datenel_header'>
<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last 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="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
</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='__datenel_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="body">
<div className="week-indicator">
<div className="item title">Wk</div>
<div className="__datenel_body">
<div className="__datenel_week-indicator">
<div className="__datenel_item __datenel_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])}>
{calendarWeeks.map(week => <div className={`__datenel_item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? '__datenel_active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
{calculateWeekNum(week[0]).weekNum}
</div>)}
</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='__datenel_calendar-view-body __datenel_flex' aria-live="polite">
<div className="__datenel_listitem">
{Array.from({ length: 7 }).map((_, index) => <div className='__datenel_item __datenel_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])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
return <button className={`__datenel_listitem ${isSelected ? '__datenel_active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
{week.map(date => <div
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
className={`__datenel_item __datenel_date ${currentMonth !== date.getMonth() && '__datenel_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>}
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='__datenel_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>
{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
</div>
}
}

56
src/style.scss
View File

@ -1,4 +1,4 @@
.datenel-component {
.__datenel_datenel-component {
user-select: none;
color: var(--datenel-main-color);
@ -13,7 +13,7 @@
}
}
button.sr-only {
button.__datenel_sr-only {
position: absolute;
width: 1px;
height: 1px;
@ -24,7 +24,7 @@
border: 0;
}
.header {
.__datenel_header {
padding: 0.75rem;
display: flex;
justify-content: space-between;
@ -37,7 +37,7 @@
height: 1rem;
}
&.stepper {
&.__datenel_stepper {
width: 1.75rem;
height: 1.75rem;
display: flex;
@ -46,14 +46,14 @@
border-radius: 50%;
}
&.indicator {
&.__datenel_indicator {
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
}
}
input.indicator {
input.__datenel_indicator {
border: none;
background: none;
text-align: center;
@ -70,49 +70,49 @@
}
}
.body {
.__datenel_body {
display: flex;
.calendar-view-body {
.__datenel_calendar-view-body {
padding: 0.75rem;
gap: 0.125rem;
&.grid {
&.__datenel_grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
.item.date {
.__datenel_item.__datenel_date {
border-radius: 50%;
&.extra-month, &.not-available {
&.__datenel_extra-month, &.__datenel_not-available {
cursor: default;
}
&.active {
&.__datenel_active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
}
}
}
&.flex {
&.__datenel_flex {
display: flex;
flex-direction: column;
.listitem {
.__datenel_listitem {
padding: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
border-radius: 1rem;
.item.date {
.__datenel_item.__datenel_date {
background: none;
}
&.active {
&.__datenel_active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
.extra-month, .not-available {
.__datenel_extra-month, .__datenel_not-available {
opacity: 0.5;
}
}
@ -120,7 +120,7 @@
}
.item {
.__datenel_item {
width: 2rem;
height: 2rem;
display: flex;
@ -129,18 +129,18 @@
font-size: 0.75rem;
position: relative;
&.extra-month, &.not-available {
&.__datenel_extra-month, &.__datenel_not-available {
opacity: 0.3;
&:hover {
background: none;
};
}
&.day-indicator {
&.__datenel_day-indicator {
opacity: 0.5;
}
.today-indicator {
.__datenel_today-indicator {
position: absolute;
bottom: 0.25rem;
width: 0.25rem;
@ -149,18 +149,18 @@
}
}
.month-selector-body {
.__datenel_month-selector-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.75rem;
gap: 0.125rem;
.item {
.__datenel_item {
border-radius: 0.25rem;
height: 2rem;
padding: 0 0.5rem;
&.not-available {
&.__datenel_not-available {
opacity: 0.3;
cursor: default;
&:hover {
@ -170,14 +170,14 @@
}
}
.week-indicator {
.__datenel_week-indicator {
display: flex;
flex-direction: column;
border-right: 1px solid var(--datenel-border-color);
gap: 0.125rem;
padding: 0.75rem;
.item {
.__datenel_item {
font-size: 0.75rem;
width: 2rem;
height: 2rem;
@ -187,10 +187,10 @@
border-radius: 50%;
}
.item.title {
.__datenel_item.__datenel_title {
opacity: 0.5;
}
.item.active {
.__datenel_item.__datenel_active {
background: var(--datenel-accent-color);
color: var(--datenel-reversed-color);
}