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

Merge pull request 'dev' (#7) from dev into main
All checks were successful
Publish to npm / publish (push) Successful in 24s
Details

Browse Source 
Reviewed-on: #7
This commit is contained in:
Astrian 2025-02-22 23:02:04 +00:00
commit 6b711db09e
7 changed files with 193 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -33,7 +33,6 @@ yarn add datenel-react # Use yarn
Here is an example of how to use Datenel in your React application: Here is an example of how to use Datenel in your React application:
```tsx ```tsx
import React from 'react'
import { SingleDatePicker } from 'datenel-react' import { SingleDatePicker } from 'datenel-react'
export default () => { export default () => {
@ -41,23 +40,19 @@ export default () => {
alert(`You selected ${value.year}-${value-month}-${value.day}`) alert(`You selected ${value.year}-${value-month}-${value.day}`)
} }
return ( return <SingleDatePicker
<div className='app'> value={{
<div className="border"> year: 2025,
<SingleDatePicker month: 1,
value={{ day: 1
year: 2025, }}
month: 1, onSelect={onSelect}
day: 1 />
}}
onSelect={onSelect}
/>
</div>
</div>
)
} }
``` ```
For more information and live demo, refer to [Datenel’s documentation](https://datenel.js.org/guide/react/gettingstart.html).
## Supported Components & Props ## Supported Components & Props
- [x] SingleDatePicker - [x] SingleDatePicker

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "datenel-react", "name": "datenel-react",
"version": "0.1.1", "version": "0.1.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "datenel-react", "name": "datenel-react",
"version": "0.1.1", "version": "0.1.2",
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.19.0", "@eslint/js": "^9.19.0",
"@types/node": "^22.13.4", "@types/node": "^22.13.4",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "datenel-react", "name": "datenel-react",
"version": "0.1.1", "version": "0.1.2",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",

10
playground/app.tsx
View File

@ -6,15 +6,7 @@ export default () => {
return (<div className='app'> return (<div className='app'>
<div className="border"> <div className="border">
<SingleDatePicker availableRange={[{ <SingleWeekPicker />
year: 2025,
month: 1,
day: 15
}, {
year: 2025,
month: 11,
day: 15
}]} />
</div> </div>
</div>) </div>)
} }

119
src/components/SingleDatePicker.tsx
View File

@ -3,10 +3,15 @@ import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '.
export interface SingleDatePickerProps { export interface SingleDatePickerProps {
/** /**
* Control the selected * Value of the selected date.
*
* @description 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.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#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()
@ -14,7 +19,12 @@ export interface SingleDatePickerProps {
value?: Date | { year: number, month: number, day: number } value?: Date | { year: number, month: number, day: number }
/** /**
* A callback function that will be called when a date is selected inside the panel. * Event handler when a date is selected.
* @description A callback function that will be called when a date is selected inside the panel.
* The returned month and day are 1-12 instead of 0-11.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#onselect-date-void}
*
* @param {{ year: number, month: number, day: number }} - The date user selected. * @param {{ year: number, month: number, day: number }} - The date user selected.
* @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025 * @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
*/ */
@ -25,62 +35,82 @@ export interface SingleDatePickerProps {
}) => void }) => void
/** /**
* The language code that will be used to localize the panel. * Localization
* @description The language code that will be used to localize the panel.
*
* Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note
* that it will not effect to the screen reader, but the screen reader will still read the * that it will not effect to the screen reader, but the screen reader will still read the
* date in the user’s language. * date in the user’s language.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#localization}
* @default navigator.language * @default navigator.language
*/ */
localization?: string localization?: string
/** /**
* User requires to close the panel without select a specific date. Note that the close button is not * Event handler when the panel is closed.
* visible, but can be read by screen reader. The close button for the screen reader is only available * @description User requires to close the panel without select a specific date. Note
* when this prop is not `undefined`. * that the close button is not visible, but can be read by screen reader. The close
* button for the screen reader is only available when this prop is not `undefined`.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#onclose-void}
*
* @default undefined * @default undefined
*/ */
onClose?: () => void onClose?: () => void
/** /**
* The main color of the panel, including the text color and the border color. * Main color of the panel
*@default '#000000' * @description The main color of the panel, including the text color and the border color.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#maincolor}
*
* @default '#000000'
*/ */
mainColor?: string mainColor?: string
/** /**
* The accent color of the panel, including the background color of the selected date. * Accent color of the panel
*@default '#000000' * @description The accent color of the panel, including the background color of the selected date.
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#accentcolor}
* @default '#000000'
*/ */
accentColor?: string accentColor?: string
/** /**
* The reversed color of the panel, including the text color of the selected date. * Reversed color of the panel
*@default '#ffffff' * @description The reversed color of the panel, including the text color of the selected date.
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#reversedcolor}
* @default '#ffffff'
*/ */
reversedColor?: string reversedColor?: string
/** /**
* The hover color of the panel, including the hover background color of the date. * Hover color of the panel
*@default '#00000017' * @description The hover color of the panel, including the hover background color of the date.
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#hovercolor}
* @default '#00000017'
*/ */
hoverColor?: string hoverColor?: string
/** /**
* The border color of the panel, including the divider color between the header and the body. * Border color of the panel
*@default '#e0e0e0' * @description The border color of the panel, including the divider color between the header and the body.
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#bordercolor}
* @default '#e0e0e0'
*/ */
borderColor?: string borderColor?: string
/** /**
* Limit a range of dates that can be selected. It should be an array of two dates, which the first * Available range of dates
*
* @description Limit a range of dates that can be selected. It should be an array of two dates, which the first
* one is the available range start date, and the second one is the available range end date. * one is the available range start date, and the second one is the available range end date.
* *
* If the first one is null, it means that the all dates after the second one is not available. If the second
* one is null, it means that the all dates before the first one is not available.
*
* If the first one is behind the second one, Datenel will exchange them automatically.
*
* The parameter will be ignored if the array length is not 2. * The parameter will be ignored if the array length is not 2.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#availablerange}
*
* @example [new Date(2025, 0, 1), new Date(2025, 11, 31)] * @example [new Date(2025, 0, 1), new Date(2025, 11, 31)]
* @example [new Date(2025, 0, 1), null] * @example [new Date(2025, 0, 1), null]
* @example [null, new Date(2025, 11, 31)] * @example [null, new Date(2025, 11, 31)]
@ -92,10 +122,13 @@ export interface SingleDatePickerProps {
/** /**
* SingleDatePicker * SingleDatePicker
* A panel that allows users to select a date. * @description A panel that allows users to select a date. Check out the online documentation for
* interactive examples and more details.
* *
* @component * @component
* *
* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html}
*
* @param {SingleDatePickerProps} props * @param {SingleDatePickerProps} props
*/ */
const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', availableRange: inputAvailableRange }: SingleDatePickerProps) => { const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', availableRange: inputAvailableRange }: SingleDatePickerProps) => {
@ -219,24 +252,24 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
} }
if (selectMonth) return ( 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='__datenel_datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
<div className='header'> <div className='__datenel_header'>
<button className='stepper' onClick={() => { <button className='__datenel_stepper' onClick={() => {
if (currentYear <= 100) return if (currentYear <= 100) return
setCurrentYear(currentYear - 1) 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> }} 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} value={currentYear}
onChange={e => changeYear(e.target.value)} onChange={e => changeYear(e.target.value)}
onBlur={adjustYear} onBlur={adjustYear}
aria-label="Year input, type a year to go to that year" aria-label="Year input, type a year to go to that year"
/> />
<button className='stepper' onClick={() => { <button className='__datenel_stepper' onClick={() => {
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='body'> <div className='__datenel_body'>
<div className='month-selector-body'> <div className='__datenel_month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => { {Array.from({ length: 12 }).map((_, index) => {
function calculateNotAvailable() { function calculateNotAvailable() {
// When the last day of a month not inside the range of available dates // When the last day of a month not inside the range of available dates
@ -248,7 +281,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
return false return false
} }
return <button return <button
className={`item ${calculateNotAvailable() && 'not-available'}`} className={`__datenel_item ${calculateNotAvailable() && '__datenel_not-available'}`}
key={index} key={index}
onClick={() => { onClick={() => {
setCurrentMonth(index) setCurrentMonth(index)
@ -263,26 +296,26 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
})} })}
</div> </div>
</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> </div>
) )
else return ( else return (
<div className='datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}> <div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
<div className='header'> <div className='__datenel_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='__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='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.`}> <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' })} {new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
</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='__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>
<div className='body'> <div className='__datenel_body'>
<div className='calendar-view-body grid' aria-live="polite"> <div className='__datenel_calendar-view-body __datenel_grid' aria-live="polite">
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)} {l10nDays.map((day, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{day}</div>)}
{dates.map(date => { {dates.map(date => {
const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth() const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth()
return <button 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()} 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`}
@ -291,12 +324,12 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
disabled={notAvailable} disabled={notAvailable}
> >
{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>}
</button> </button>
})} })}
</div> </div>
</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> </div>
) )
} }

123
src/components/SingleWeekPicker.tsx
View File

@ -2,42 +2,59 @@ import { useEffect, useState } from "react"
import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from "../utils" import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from "../utils"
export interface SingleWeekPickerProps { export interface SingleWeekPickerProps {
/** /**
* The language code that will be used to localize the panel. * The localization of the panel.
* @description The language code that will be used to localize the panel.
*
* Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note
* that it will not effect to the screen reader, but the screen reader will still read the * that it will not effect to the screen reader, but the screen reader will still read the
* date in the user’s language. * date in the user’s language.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#localization}
*
* @default navigator.language * @default navigator.language
*/ */
localization?: string localization?: string
/** /**
* The main color of the panel, including the text color and the border color. * Main color of the panel
*@default '#000000' * @description The main color of the panel, including the text color and the border color.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#maincolor}
*
* @default '#000000'
*/ */
mainColor?: string mainColor?: string
/** /**
* The accent color of the panel, including the background color of the selected date. * Accent color of the panel
*@default '#000000' * @description The accent color of the panel, including the background color of the selected date.
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#accentcolor}
* @default '#000000'
*/ */
accentColor?: string accentColor?: string
/** /**
* The reversed color of the panel, including the text color of the selected date. * Reversed color of the panel
*@default '#ffffff' * @description The reversed color of the panel, including the text color of the selected date.
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#reversedcolor}
* @default '#ffffff'
*/ */
reversedColor?: string reversedColor?: string
/** /**
* The hover color of the panel, including the hover background color of the date. * Hover color of the panel
* @description The hover color of the panel, including the hover background color of the date.
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#hovercolor}
*@default '#00000017' *@default '#00000017'
*/ */
hoverColor?: string hoverColor?: string
/** /**
* The border color of the panel, including the divider color between the header and the body. * Border color of the panel
*@default '#e0e0e0' * @description The border color of the panel, including the divider color between the header and the body.
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#bordercolor}
* @default '#e0e0e0'
*/ */
borderColor?: string borderColor?: string
@ -45,8 +62,11 @@ export interface SingleWeekPickerProps {
* A callback function that will be called when a week is selected inside the panel. Note that * A callback function that will be called when a week is selected inside the panel. Note that
* Datenel will follow the ISO 8601 standard to calculate the week number, which means that the first * 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). * 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 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#onselect-week-void}
*
* @param {{ weekYear: number, weekNum: number }} - The week user selected.
* @example { weekYear: 2025, weekNum: 1 } // User selected the first week of 2025
*/ */
onSelect?: (date: { onSelect?: (date: {
weekYear: number, weekYear: number,
@ -54,18 +74,23 @@ export interface SingleWeekPickerProps {
}) => void }) => void
/** /**
* User requires to close the panel without select a specific date. Note that the close button is not * Event handler when the panel is closed.
* visible, but can be read by screen reader. The close button for the screen reader is only available * @description User requires to close the panel without select a specific date. Note
* when this prop is not `undefined`. * that the close button is not visible, but can be read by screen reader. The close
* button for the screen reader is only available when this prop is not `undefined`.
*
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#onclose-void}
*
* @default undefined * @default undefined
*/ */
onClose?: () => void onClose?: () => void
/** /**
* Control the selected * Value of the panel
* date programmatically, including situations like provide a default value or control the selected * @description Control the selected week programmatically, including situations like provide a
* date by parent component. When using the Date object, the week number related to the date will be * default value or control the selected week by parent component. When using the Date object,
* applied to the panel. * the week number related to the date will be applied to the panel.
* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#value}
* @example { weekYear: 2025, weekNum: 1 } * @example { weekYear: 2025, weekNum: 1 }
* @example new Date(2025, 0, 1) * @example new Date(2025, 0, 1)
* @default new Date() * @default new Date()
@ -75,11 +100,13 @@ export interface SingleWeekPickerProps {
/** /**
* SingleWeekPicker * SingleWeekPicker
* A panel that allows users to select a week. * @description A panel that allows users to select a week.
* *
* @component * @component
* *
* @param * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html}
*
* @param {SingleWeekPickerProps} props
*/ */
export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect, value }: 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())
@ -160,25 +187,25 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
} }
if (selectMonth) { 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}`}> 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='header'> <div className='__datenel_header'>
<button className='stepper' onClick={() => { <button className='__datenel_stepper' onClick={() => {
if (currentYear <= 100) return if (currentYear <= 100) return
setCurrentYear(currentYear - 1) 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> }} 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} value={currentYear}
onChange={e => changeYear(e.target.value)} onChange={e => changeYear(e.target.value)}
onBlur={adjustYear} onBlur={adjustYear}
aria-label="Year input, type a year to go to that year" aria-label="Year input, type a year to go to that year"
/> />
<button className='stepper' onClick={() => { <button className='__datenel_stepper' onClick={() => {
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='body'> <div className='__datenel_body'>
<div className='month-selector-body'> <div className='__datenel_month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => { {Array.from({ length: 12 }).map((_, index) => <button className={`__datenel_item`} key={index} onClick={() => {
setCurrentMonth(index) setCurrentMonth(index)
setSelectMonth(false) setSelectMonth(false)
}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}> }} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
@ -186,50 +213,50 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
</button>)} </button>)}
</div> </div>
</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> </div>
} else { } 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'> <div className='__datenel_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='__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='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.`}> <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' })} {new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
</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='__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>
<div className="body"> <div className="__datenel_body">
<div className="week-indicator"> <div className="__datenel_week-indicator">
<div className="item title">Wk</div> <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} {calculateWeekNum(week[0]).weekNum}
</div>)} </div>)}
</div> </div>
<div className='calendar-view-body flex' aria-live="polite"> <div className='__datenel_calendar-view-body __datenel_flex' aria-live="polite">
<div className="listitem"> <div className="__datenel_listitem">
{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)} {Array.from({ length: 7 }).map((_, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{l10nDays[index]}</div>)}
</div> </div>
{calendarWeeks.map((week, index) => { {calendarWeeks.map((week, index) => {
const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum 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 {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()} key={date.getDate()}
> >
{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>)} </div>)}
</button> </button>
})} })}
</div> </div>
</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> </div>
} }
} }

56
src/style.scss
View File

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