From c20e766e3860a0bd439306a0ae30f1534e623dbf Mon Sep 17 00:00:00 2001
From: Hayk Simonyan <hayk.simonyan@sflpro.com>
Date: Fri, 17 Sep 2021 13:09:51 +0400
Subject: [PATCH] fix: add disabled to DateRangePicker

---
 src/DateRangePicker/dateRangePicker.css |  9 +++++++--
 src/DateRangePicker/index.js            | 10 ++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/DateRangePicker/dateRangePicker.css b/src/DateRangePicker/dateRangePicker.css
index 8d163a7..8d79d22 100644
--- a/src/DateRangePicker/dateRangePicker.css
+++ b/src/DateRangePicker/dateRangePicker.css
@@ -17,8 +17,13 @@
   width: 100%;
 }
 
-.disabled .dayPicker,
-.DayPicker-Day .disabled {
+.disabled .dayPicker {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.disabled,
+.disabled:hover {
   opacity: 0.4;
   pointer-events: none;
 }
diff --git a/src/DateRangePicker/index.js b/src/DateRangePicker/index.js
index af442f9..2ff6342 100644
--- a/src/DateRangePicker/index.js
+++ b/src/DateRangePicker/index.js
@@ -214,6 +214,7 @@ export class DateRangePicker extends React.Component {
       showOutsideDays,
       className,
       pickerClassName,
+      dayPickerClasses,
       style,
       onChange,
       disabledDays,
@@ -241,7 +242,7 @@ export class DateRangePicker extends React.Component {
     });
 
     const dayPickerDefaultClasses = DayPicker.defaultProps.classNames;
-    const dayPickerClasses = {
+    const dayPickerClassNames = {
       ...dayPickerDefaultClasses,
       container: `${dayPickerDefaultClasses.container} ${styles.dayPicker}`,
       wrapper: `${dayPickerDefaultClasses.wrapper} ${styles.dayPickerWrapper}`,
@@ -252,9 +253,11 @@ export class DateRangePicker extends React.Component {
       weekdaysRow: `${dayPickerDefaultClasses.weekdaysRow} ${styles.dayPickerWeekdaysRow}`,
       week: `${dayPickerDefaultClasses.week} ${styles.dayPickerWeek}`,
       day: `${dayPickerDefaultClasses.day} ${styles.dayPickerDay}`,
+      disabled: `${dayPickerDefaultClasses.day} ${styles.disabled}`,
       outside: `${styles.dayPickerDayOutside}`,
       today: `${styles.dayPickerToday}`,
       selected: `${styles.dayPickerSelectedDay}`,
+      ...dayPickerClasses,
     };
 
     const pickerClasses = classNames({
@@ -273,7 +276,7 @@ export class DateRangePicker extends React.Component {
         className={datePickerClasses}
       >
         <DayPicker
-          classNames={dayPickerClasses}
+          classNames={dayPickerClassNames}
           captionElement={({ date }) => (
             <DatePickerCaption
               onClick={() => this.handleDayCaptionClick(date, VIEW_TYPES.YEAR)}
@@ -381,6 +384,8 @@ DateRangePicker.propTypes = {
   className: PropTypes.string,
   /** String, pickerClassName that will be added to picker  element */
   pickerClassName: PropTypes.string,
+  /** Object, classNames that will be added to dayPicker element */
+  dayPickerClasses: PropTypes.object,
   /** Object, styles that will be added to date picker */
   style: PropTypes.object,
   /** Array of the Date object, to disable days */
@@ -398,6 +403,7 @@ DateRangePicker.defaultProps = {
   onChange: null,
   className: '',
   pickerClassName: '',
+  dayPickerClasses: {},
   style: undefined,
   disabledDays: [],
 };