converts all DatePicker family of components to TypeScript

src/components/date_picker/date_picker.js → src/components/date_picker/date_picker.tsx

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
-import moment from 'moment';
+import { Moment } from 'moment'; // eslint-disable-line import/named
 import { ReactDatePicker as DatePicker } from '../../../packages';
 
 import { EuiFormControlLayout } from '../form/form_control_layout';
@@ -12,11 +11,86 @@ import { EuiValidatableControl } from '../form/validatable_control';
 import { EuiErrorBoundary } from '../error_boundary';
 
 import { EuiI18nConsumer } from '../context';
+import { CommonProps } from '../common';
+
+import ReactDatePicker, { ReactDatePickerProps } from './react-datepicker'; // eslint-disable-line import/no-unresolved
+import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
 
 export const euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
 export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
 
-export class EuiDatePicker extends Component {
+interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
+  /**
+   * Applies classes to the numbered days provided. Check docs for example.
+   */
+  dayClassName?: (date: Moment) => string | null;
+
+  /**
+   * Makes the input full width
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Adds additional times to the time selector other then :30 increments
+   */
+  injectTimes?: Moment[]; // added here because the type is missing in @types/[email protected]
+
+  /**
+   * Applies ref to the input
+   */
+  inputRef?: React.Ref<typeof ReactDatePicker>;
+
+  /**
+   * Provides styling to the input when invalid
+   */
+  isInvalid?: boolean;
+
+  /**
+   * Provides styling to the input when loading
+   */
+  isLoading?: boolean;
+
+  /**
+   * What to do when the input is cleared by the x icon
+   */
+  onClear?: MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * Opens to this date (in moment format) on first press, regardless of selection
+   */
+  openToDate?: Moment;
+
+  /**
+   * Shows only when no date is selected
+   */
+  placeholder?: string;
+
+  /**
+   * Can turn the shadow off if using the inline prop
+   */
+  shadow?: boolean;
+
+  /**
+   * Show the icon in input
+   */
+  showIcon?: boolean;
+}
+
+export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
+
+export class EuiDatePicker extends Component<EuiDatePickerProps> {
+  defaultProps = {
+    adjustDateOnChange: true,
+    dateFormat: euiDatePickerDefaultDateFormat,
+    fullWidth: false,
+    isLoading: false,
+    shadow: true,
+    shouldCloseOnSelect: true,
+    showIcon: true,
+    showTimeSelect: false,
+    timeFormat: euiDatePickerDefaultTimeFormat,
+  };
+
   render() {
     const {
       adjustDateOnChange,
@@ -27,7 +101,7 @@ export class EuiDatePicker extends Component {
       dayClassName,
       disabled,
       excludeDates,
-      filterDates,
+      filterDate,
       fullWidth,
       injectTimes,
       inline,
@@ -72,9 +146,9 @@ export class EuiDatePicker extends Component {
       className
     );
 
-    let optionalIcon;
+    let optionalIcon: EuiFormControlLayoutIconsProps['icon'];
     if (inline || customInput || !showIcon) {
-      optionalIcon = null;
+      optionalIcon = undefined;
     } else if (showTimeSelectOnly) {
       optionalIcon = 'clock';
     } else {
@@ -130,7 +204,7 @@ export class EuiDatePicker extends Component {
           <EuiFormControlLayout
             icon={optionalIcon}
             fullWidth={fullWidth}
-            clear={selected && onClear ? { onClick: onClear } : null}
+            clear={selected && onClear ? { onClick: onClear } : undefined}
             isLoading={isLoading}>
             <EuiValidatableControl isInvalid={isInvalid}>
               <EuiI18nConsumer>
@@ -145,7 +219,7 @@ export class EuiDatePicker extends Component {
                       dayClassName={dayClassName}
                       disabled={disabled}
                       excludeDates={excludeDates}
-                      filterDates={filterDates}
+                      filterDate={filterDate}
                       injectTimes={injectTimes}
                       inline={inline}
                       locale={locale || contextLocale}
@@ -180,136 +254,3 @@ export class EuiDatePicker extends Component {
     );
   }
 }
-
-EuiDatePicker.propTypes = {
-  /**
-   * Whether changes to Year and Month (via dropdowns) should trigger `onChange`
-   */
-  adjustDateOnChange: PropTypes.bool,
-  /**
-   * Optional class added to the calendar portion of datepicker
-   */
-  calendarClassName: PropTypes.string,
-
-  /**
-   * Added to the actual input of the calendar
-   */
-  className: PropTypes.string,
-  /**
-   * Replaces the input with any node, like a button
-   */
-  customInput: PropTypes.node,
-  /**
-   * Accepts any moment format string
-   */
-  dateFormat: PropTypes.string,
-  /**
-   * Applies classes to the numbered days provided. Check docs for example.
-   */
-  dayClassName: PropTypes.func,
-
-  /**
-   * Array of dates allowed. Check docs for example.
-   */
-  filterDates: PropTypes.array,
-  /**
-   * Makes the input full width
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * Adds additional times to the time selector other then :30 increments
-   */
-  injectTimes: PropTypes.array,
-  /**
-   * Applies ref to the input
-   */
-  inputRef: PropTypes.func,
-  /**
-   * Provides styling to the input when invalid
-   */
-  isInvalid: PropTypes.bool,
-  /**
-   * Provides styling to the input when loading
-   */
-  isLoading: PropTypes.bool,
-  /**
-   * Switches the locale / display. "en-us", "zn-ch"...etc
-   */
-  locale: PropTypes.string,
-  /**
-   * The max date accepted (in moment format) as a selection
-   */
-  maxDate: PropTypes.instanceOf(moment),
-  /**
-   * The max time accepted (in moment format) as a selection
-   */
-  maxTime: PropTypes.instanceOf(moment),
-  /**
-   * The min date accepted (in moment format) as a selection
-   */
-  minDate: PropTypes.instanceOf(moment),
-  /**
-   * The min time accepted (in moment format) as a selection
-   */
-  minTime: PropTypes.instanceOf(moment),
-  /**
-   * What to do when the input changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * What to do when the input is cleared by the x icon
-   */
-  onClear: PropTypes.func,
-  /**
-   * Opens to this date (in moment format) on first press, regardless of selection
-   */
-  openToDate: PropTypes.instanceOf(moment),
-  /**
-   * Shows only when no date is selected
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Class applied to the popup, when inline is false
-   */
-  popperClassName: PropTypes.string,
-  /**
-   * The selected datetime (in moment format)
-   */
-  selected: PropTypes.instanceOf(moment),
-  /**
-   * Can turn the shadow off if using the inline prop
-   */
-  shadow: PropTypes.bool,
-  /**
-   * Will close the popup on selection
-   */
-  shouldCloseOnSelect: PropTypes.bool,
-  /**
-   * Show the icon in input
-   */
-  showIcon: PropTypes.bool,
-  /**
-   * Show the time selection alongside the calendar
-   */
-  showTimeSelect: PropTypes.bool,
-  /**
-   * Only show the time selector, not the calendar
-   */
-  showTimeSelectOnly: PropTypes.bool,
-  /**
-   * The format of the time within the selector, in moment notation
-   */
-  timeFormat: PropTypes.string,
-};
-
-EuiDatePicker.defaultProps = {
-  adjustDateOnChange: true,
-  dateFormat: euiDatePickerDefaultDateFormat,
-  fullWidth: false,
-  isLoading: false,
-  shadow: true,
-  shouldCloseOnSelect: true,
-  showIcon: true,
-  showTimeSelect: false,
-  timeFormat: euiDatePickerDefaultTimeFormat,
-};

src/components/date_picker/date_picker_range.js → src/components/date_picker/date_picker_range.tsx

@@ -1,16 +1,41 @@
-import React, { cloneElement, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { cloneElement, Fragment, FC, ReactElement } from 'react';
 import classNames from 'classnames';
 
 import { EuiText } from '../text';
-import { EuiIcon } from '../icon';
+import { EuiIcon, IconType } from '../icon';
+import { CommonProps } from '../common';
+import { EuiDatePickerProps } from './date_picker';
 
-export const EuiDatePickerRange = ({
+export type EuiDatePickerRangeProps = CommonProps & {
+  /**
+   * The end date `EuiDatePicker` element
+   */
+  endDateControl: ReactElement<EuiDatePickerProps>;
+  fullWidth?: boolean;
+
+  /**
+   * Pass either an icon type or set to `false` to remove icon entirely
+   */
+  iconType?: boolean | IconType;
+
+  /**
+   * Won't apply any additional props to start and end date components
+   */
+  isCustom?: boolean;
+  readOnly?: boolean;
+
+  /**
+   * The start date `EuiDatePicker` element
+   */
+  startDateControl: ReactElement<EuiDatePickerProps>;
+};
+
+export const EuiDatePickerRange: FC<EuiDatePickerRangeProps> = ({
   children,
   className,
   startDateControl,
   endDateControl,
-  iconType,
+  iconType = true,
   fullWidth,
   isCustom,
   readOnly,
@@ -75,34 +100,3 @@ export const EuiDatePickerRange = ({
     </div>
   );
 };
-
-EuiDatePickerRange.propTypes = {
-  /**
-   * The start date `EuiDatePicker` element
-   */
-  startDateControl: PropTypes.node.isRequired,
-  /**
-   * The end date `EuiDatePicker` element
-   */
-  endDateControl: PropTypes.node.isRequired,
-  /**
-   * Pass either an icon type or set to `false` to remove icon entirely
-   */
-  iconType: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  ]),
-  fullWidth: PropTypes.bool,
-  /**
-   * Won't apply any additional props to start and end date components
-   */
-  isCustom: PropTypes.bool,
-  /**
-   * Including any children will replace all innerds with the provided children
-   */
-  children: PropTypes.node,
-};
-
-EuiDatePickerRange.defaultProps = {
-  iconType: true,
-};