feat: added new class dayIsToday and rebased

This commit is contained in:
jongomez 2023-09-28 10:42:39 +01:00 committed by Jon
parent 2537acf89d
commit 1249d98ac0
4 changed files with 12 additions and 2 deletions

View File

@ -77,6 +77,9 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
ModalStyles, ModalStyles,
ModalFooterStyles, ModalFooterStyles,
ModalBodyStyles, ModalBodyStyles,
DatePickerStyles,
DateFieldStyles,
CalendarStyles,
] ]
export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

View File

@ -18,6 +18,7 @@ export const calendarClasses = {
day: 'lsd-calendar-day', day: 'lsd-calendar-day',
daySelected: 'lsd-calendar-day--selected', daySelected: 'lsd-calendar-day--selected',
dayDisabled: 'lsd-calendar-day--disabled', dayDisabled: 'lsd-calendar-day--disabled',
dayIsToday: 'lsd-calendar-day--today',
todayIndicator: 'lsd-calendar-day__today_indicator', todayIndicator: 'lsd-calendar-day__today_indicator',
dayRange: 'lsd-calendar-day--range', dayRange: 'lsd-calendar-day--range',
} }

View File

@ -43,6 +43,9 @@ export const Day = ({ day, date, disabled = false }: DayProps) => {
return null return null
} }
const isToday =
new Date(date).setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0)
return ( return (
<button <button
onClick={(e) => !disabled && onClick()} onClick={(e) => !disabled && onClick()}
@ -55,11 +58,11 @@ export const Day = ({ day, date, disabled = false }: DayProps) => {
calendarClasses.day, calendarClasses.day,
!disabled && isDateFocused(date) && calendarClasses.daySelected, !disabled && isDateFocused(date) && calendarClasses.daySelected,
disabled && calendarClasses.dayDisabled, disabled && calendarClasses.dayDisabled,
isToday && calendarClasses.dayIsToday,
)} )}
> >
<Typography variant="label2">{parseInt(day, 10)}</Typography> <Typography variant="label2">{parseInt(day, 10)}</Typography>
{new Date(date).setHours(0, 0, 0, 0) === {isToday && (
new Date().setHours(0, 0, 0, 0) && (
<Typography variant="label2" className={calendarClasses.todayIndicator}> <Typography variant="label2" className={calendarClasses.todayIndicator}>
</Typography> </Typography>

View File

@ -34,3 +34,6 @@ export * from './components/NumberInput'
export * from './components/Modal' export * from './components/Modal'
export * from './components/ModalBody' export * from './components/ModalBody'
export * from './components/ModalFooter' export * from './components/ModalFooter'
export * from './components/DateField'
export * from './components/DatePicker'
export * from './components/Calendar'