fix defaultProps issue & calendar.current !== null

src/Calendar.js

@@ -7,27 +7,27 @@ import { useLocaleUtils, useLocaleLanguage } from './shared/hooks';
 import { Header, MonthSelector, YearSelector, DaysList } from './components';
 
 const Calendar = ({
-  value,
+  value = null,
   onChange,
   onDisabledDayError,
-  calendarClassName,
+  calendarClassName = '',
   calendarTodayClassName,
   calendarSelectedDayClassName,
   calendarRangeStartClassName,
   calendarRangeBetweenClassName,
   calendarRangeEndClassName,
   disabledDays,
-  colorPrimary,
-  colorPrimaryLight,
-  slideAnimationDuration,
-  minimumDate,
-  maximumDate,
+  colorPrimary = '#0eca2d',
+  colorPrimaryLight = '#cff4d5',
+  slideAnimationDuration = '0.4s',
+  minimumDate = null,
+  maximumDate = null,
   selectorStartingYear,
   selectorEndingYear,
-  locale,
+  locale = 'en',
   shouldHighlightWeekends,
-  renderFooter,
-  customDaysClassName,
+  renderFooter = () => null,
+  customDaysClassName = [],
 }) => {
   const calendarElement = useRef(null);
   const [mainState, setMainState] = useState({
@@ -38,15 +38,21 @@ const Calendar = ({
   });
 
   useEffect(() => {
+    if (calendarElement.current === null) {
+      return;
+    }
+
     const handleKeyUp = ({ key }) => {
       /* istanbul ignore else */
       if (key === 'Tab') calendarElement.current.classList.remove('-noFocusOutline');
     };
     calendarElement.current.addEventListener('keyup', handleKeyUp, false);
     return () => {
-      calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
+      if (calendarElement.current !== null) {
+        calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
+      }
     };
-  });
+  }, [calendarElement]);
 
   const { getToday } = useLocaleUtils(locale);
   const { weekDays: weekDaysList, isRtl } = useLocaleLanguage(locale);
@@ -179,17 +185,4 @@ const Calendar = ({
   );
 };
 
-Calendar.defaultProps = {
-  minimumDate: null,
-  maximumDate: null,
-  colorPrimary: '#0eca2d',
-  colorPrimaryLight: '#cff4d5',
-  slideAnimationDuration: '0.4s',
-  calendarClassName: '',
-  locale: 'en',
-  value: null,
-  renderFooter: () => null,
-  customDaysClassName: [],
-};
-
 export { Calendar };

src/DatePicker.js

@@ -13,14 +13,14 @@ const DatePicker = ({
   inputClassName,
   inputName,
   renderInput,
-  wrapperClassName,
+  wrapperClassName = '',
   calendarClassName,
   calendarTodayClassName,
   calendarSelectedDayClassName,
   calendarRangeStartClassName,
   calendarRangeBetweenClassName,
   calendarRangeEndClassName,
-  calendarPopperPosition,
+  calendarPopperPosition = 'auto',
   disabledDays,
   onDisabledDayError,
   colorPrimary,
@@ -30,7 +30,7 @@ const DatePicker = ({
   maximumDate,
   selectorStartingYear,
   selectorEndingYear,
-  locale,
+  locale = 'en',
   shouldHighlightWeekends,
   renderFooter,
   customDaysClassName,
@@ -194,10 +194,4 @@ const DatePicker = ({
   );
 };
 
-DatePicker.defaultProps = {
-  wrapperClassName: '',
-  locale: 'en',
-  calendarPopperPosition: 'auto',
-};
-
 export default DatePicker;

src/DatePickerInput.js

@@ -6,7 +6,15 @@ import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './shared/constant
 
 const DatePickerInput = React.forwardRef(
   (
-    { value, inputPlaceholder, inputClassName, inputName, formatInputText, renderInput, locale },
+    {
+      value,
+      inputPlaceholder = '',
+      inputClassName = '',
+      inputName = '',
+      formatInputText = () => {},
+      renderInput = () => null,
+      locale,
+    },
     ref,
   ) => {
     const { getLanguageDigits } = useLocaleUtils(locale);
@@ -82,12 +90,4 @@ const DatePickerInput = React.forwardRef(
   },
 );
 
-DatePickerInput.defaultProps = {
-  formatInputText: () => '',
-  renderInput: () => null,
-  inputPlaceholder: '',
-  inputClassName: '',
-  inputName: '',
-};
-
 export default DatePickerInput;

src/components/DaysList.js

@@ -16,18 +16,18 @@ const DaysList = ({
   value,
   monthChangeDirection,
   onSlideChange,
-  disabledDays,
-  onDisabledDayError,
+  disabledDays = [],
+  onDisabledDayError = () => {},
   minimumDate,
   maximumDate,
-  onChange,
+  onChange = () => {},
   locale,
-  calendarTodayClassName,
-  calendarSelectedDayClassName,
-  calendarRangeStartClassName,
-  calendarRangeEndClassName,
-  calendarRangeBetweenClassName,
-  shouldHighlightWeekends,
+  calendarTodayClassName = '',
+  calendarSelectedDayClassName = '',
+  calendarRangeStartClassName = '',
+  calendarRangeEndClassName = '',
+  calendarRangeBetweenClassName = '',
+  shouldHighlightWeekends = false,
   isQuickSelectorOpen,
   customDaysClassName,
 }) => {
@@ -276,16 +276,4 @@ const DaysList = ({
   );
 };
 
-DaysList.defaultProps = {
-  onChange: () => {},
-  onDisabledDayError: () => {},
-  disabledDays: [],
-  calendarTodayClassName: '',
-  calendarSelectedDayClassName: '',
-  calendarRangeStartClassName: '',
-  calendarRangeBetweenClassName: '',
-  calendarRangeEndClassName: '',
-  shouldHighlightWeekends: false,
-};
-
 export default DaysList;

src/components/YearSelector.js

@@ -8,8 +8,8 @@ const YearSelector = ({
   isOpen,
   activeDate,
   onYearSelect,
-  selectorStartingYear,
-  selectorEndingYear,
+  selectorStartingYear = 0,
+  selectorEndingYear = 0,
   maximumDate,
   minimumDate,
   locale,
@@ -91,9 +91,4 @@ const YearSelector = ({
   );
 };
 
-YearSelector.defaultProps = {
-  selectorStartingYear: 0,
-  selectorEndingYear: 0,
-};
-
 export default YearSelector;