From 16ebde8f803f17d1e2f172045b9399d40a528a46 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Sat, 29 Feb 2020 21:02:34 -0500
Subject: [PATCH] enables typing for ReactDatePicker usage

---
 src/components/date_picker/date_picker.tsx       | 16 ++++++++--------
 src/components/date_picker/react-datepicker.d.ts |  5 +++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 57432fd7240b..92d4f831eb03 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -1,8 +1,9 @@
-import React, { Component, MouseEventHandler } from 'react';
+import React, { Component, MouseEventHandler, Ref } from 'react';
 import classNames from 'classnames';
 
 import { Moment } from 'moment'; // eslint-disable-line import/named
-import { ReactDatePicker as DatePicker } from '../../../packages';
+// @ts-ignore the type is provided by
+import { ReactDatePicker as _ReactDatePicker } from '../../../packages';
 
 import { EuiFormControlLayout, EuiValidatableControl } from '../form';
 
@@ -17,6 +18,8 @@ import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form
 export const euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
 export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
 
+const DatePicker = _ReactDatePicker as typeof ReactDatePicker;
+
 interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
   /**
    * Applies classes to the numbered days provided. Check docs for example.
@@ -28,15 +31,10 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
    */
   fullWidth?: boolean;
 
-  /**
-   * Adds additional times to the time selector other then :30 increments
-   */
-  injectTimes?: Moment[]; // added here because the type is missing in @types/react-datepicker@1.8.0
-
   /**
    * Applies ref to the input
    */
-  inputRef?: React.Ref<typeof ReactDatePicker>;
+  inputRef: Ref<typeof ReactDatePicker>;
 
   /**
    * Provides styling to the input when invalid
@@ -81,6 +79,7 @@ export class EuiDatePicker extends Component<EuiDatePickerProps> {
     adjustDateOnChange: true,
     dateFormat: euiDatePickerDefaultDateFormat,
     fullWidth: false,
+    inputRef: () => {},
     isLoading: false,
     shadow: true,
     shouldCloseOnSelect: true,
@@ -229,6 +228,7 @@ export class EuiDatePicker extends Component<EuiDatePickerProps> {
                       openToDate={openToDate}
                       placeholderText={placeholder}
                       popperClassName={popperClassName}
+                      // @ts-ignore this is due to `react-datepicker` (i.e. `ReactDatePicker`, this component) being a `React.ClassicComponentClass` rather than a `React.Component`.
                       ref={inputRef}
                       selected={selected}
                       shouldCloseOnSelect={shouldCloseOnSelect}
diff --git a/src/components/date_picker/react-datepicker.d.ts b/src/components/date_picker/react-datepicker.d.ts
index d8afa119ef99..27db4eff6553 100644
--- a/src/components/date_picker/react-datepicker.d.ts
+++ b/src/components/date_picker/react-datepicker.d.ts
@@ -61,6 +61,11 @@ export interface ReactDatePickerProps {
   includeDates?: moment.Moment[];
   includeTimes?: moment.Moment[];
   inline?: boolean;
+
+  /**
+   * Adds additional times to the time selector other then :30 increments
+   */
+  injectTimes?: moment.Moment[]; // added here because the type is missing in @types/react-datepicker@1.8.0
   isClearable?: boolean;
 
   /**