Adding a rangeOpacity prop per web-ridge#85

crussell122 · Aug 13, 2021 · 9981fc1 · 9981fc1
1 parent 83028e4
commit 9981fc1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/Date/Calendar.tsx b/src/Date/Calendar.tsx
@@ -37,10 +37,12 @@ export type BaseCalendarProps = {
   dates?: CalendarDates
   startDate?: CalendarDate
   endDate?: CalendarDate
+  rangeOpacity?: RangeOpacity
 }
 
 export type CalendarDate = Date | undefined
 export type CalendarDates = Date[] | undefined | null
+export type RangeOpacity = number | 0.9
 
 export type RangeChange = (params: {
   startDate: CalendarDate
@@ -68,12 +70,14 @@ export interface CalendarRangeProps extends BaseCalendarProps {
   startDate: CalendarDate
   endDate: CalendarDate
   onChange: RangeChange
+  rangeOpacity: RangeOpacity
 }
 
 export interface CalendarMultiProps extends BaseCalendarProps {
   mode: 'multiple'
   dates: CalendarDates
   onChange: MultiChange
+  rangeOpacity: RangeOpacity
 }
 
 function Calendar(
@@ -89,6 +93,7 @@ function Calendar(
     disableWeekDays,
     dates,
     validRange,
+    rangeOpacity,
   } = props
 
   const theme = useTheme()
@@ -97,7 +102,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).hex()
   }, [theme])
 
   const scrollMode =

diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx
@@ -7,6 +7,7 @@ import Calendar, {
   MultiChange,
   MultiConfirm,
   RangeChange,
+  RangeOpacity,
   SingleChange,
 } from './Calendar'
 
@@ -42,6 +43,7 @@ export interface DatePickerModalContentRangeProps
   endDate: CalendarDate
   onChange?: RangeChange
   onConfirm: RangeChange
+  rangeOpacity: RangeOpacity
 }
 
 export interface DatePickerModalContentSingleProps
@@ -62,6 +64,7 @@ export interface DatePickerModalContentMultiProps
   dates?: CalendarDates
   onChange?: MultiChange
   onConfirm: MultiConfirm
+  rangeOpacity: RangeOpacity
 }
 
 export function DatePickerModalContent(
@@ -79,6 +82,7 @@ export function DatePickerModalContent(
     disableWeekDays,
     locale,
     validRange,
+    rangeOpacity,
   } = props
 
   const anyProps = props as any
@@ -169,6 +173,7 @@ export function DatePickerModalContent(
             disableWeekDays={disableWeekDays}
             dates={state.dates}
             validRange={validRange}
+            rangeOpacity={rangeOpacity}
           />
         }
         calendarEdit={