Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding a date range opacity prop for light mode #96

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/Date/Calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type BaseCalendarProps = {
dates?: CalendarDates
startDate?: CalendarDate
endDate?: CalendarDate
rangeOpacity?: number
}

export type CalendarDate = Date | undefined
Expand Down Expand Up @@ -68,12 +69,14 @@ export interface CalendarRangeProps extends BaseCalendarProps {
startDate: CalendarDate
endDate: CalendarDate
onChange: RangeChange
rangeOpacity: number
}

export interface CalendarMultiProps extends BaseCalendarProps {
mode: 'multiple'
dates: CalendarDates
onChange: MultiChange
rangeOpacity: number
}

function Calendar(
Expand All @@ -89,6 +92,7 @@ function Calendar(
disableWeekDays,
dates,
validRange,
rangeOpacity,
} = props

const theme = useTheme()
Expand All @@ -97,7 +101,7 @@ function Calendar(
if (theme.dark) {
return darkenBy(Color(theme.colors.primary), 0.9).hex()
}
return lightenBy(Color(theme.colors.primary), 0.9).hex()
return lightenBy(Color(theme.colors.primary), rangeOpacity ? rangeOpacity : 0.9).hex()
}, [theme])

const scrollMode =
Expand Down
4 changes: 4 additions & 0 deletions src/Date/DatePickerModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface DatePickerModalContentRangeProps
endDate: CalendarDate
onChange?: RangeChange
onConfirm: RangeChange
rangeOpacity?: number
}

export interface DatePickerModalContentSingleProps
Expand All @@ -62,6 +63,7 @@ export interface DatePickerModalContentMultiProps
dates?: CalendarDates
onChange?: MultiChange
onConfirm: MultiConfirm
rangeOpacity?: number
}

export function DatePickerModalContent(
Expand All @@ -79,6 +81,7 @@ export function DatePickerModalContent(
disableWeekDays,
locale,
validRange,
rangeOpacity,
} = props

const anyProps = props as any
Expand Down Expand Up @@ -169,6 +172,7 @@ export function DatePickerModalContent(
disableWeekDays={disableWeekDays}
dates={state.dates}
validRange={validRange}
rangeOpacity={rangeOpacity}
/>
}
calendarEdit={
Expand Down