Add rough TS types and some doc updates for the Date Picker components (

elastic#1574)

* Updates docs so datepicker becomes date picker

* Adds type file for date picker components

* Revert aggressive auto-formatting changes from previous commit

* Makes props optional in new types

* Improves types for eui date picker

* Locks react date picker types to the correct version

* Adds entry to changelog and reference path to components index

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.10.3`.
+**Note: this release is a backport containing changes originally made in `7.3.0`**
+
+- Added an index.d.ts file for the date picker components, including `EuiDatePicker`, `EuiDatePickerRange`, and `EuiSuperDatePicker` ([#1574](https://github.com/elastic/eui/pull/1574))
 
 ## [`6.10.3`](https://github.com/elastic/eui/tree/v6.10.3)
 

package.json

@@ -77,6 +77,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.9",
     "@types/react": "^16.3.0",
+    "@types/react-datepicker": "1.8.0",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",

src-docs/src/views/date_picker/custom_input.js

@@ -11,7 +11,7 @@ import {
   EuiButton,
 } from '../../../../src/components';
 
-// Should be a component because the datepicker does some ref stuff behind the scenes
+// Should be a component because the date picker does some ref stuff behind the scenes
 // eslint-disable-next-line react/prefer-stateless-function
 class ExampleCustomInput extends React.Component {
 

src-docs/src/views/date_picker/date_picker_example.js

@@ -64,7 +64,7 @@ const superDatePickerSource = require('!!raw-loader!./super_date_picker');
 const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 export const DatePickerExample = {
-  title: 'DatePicker',
+  title: 'Date Picker',
   sections: [{
     source: [{
       type: GuideSectionTypes.JS,
@@ -85,7 +85,7 @@ export const DatePickerExample = {
     demo: <DatePicker />,
     props: { EuiDatePicker },
   }, {
-    title: 'Datepicker states',
+    title: 'Date picker states',
     source: [{
       type: GuideSectionTypes.JS,
       code: statesSource,
@@ -140,7 +140,7 @@ export const DatePickerExample = {
     ),
     demo: <Locale />,
   }, {
-    title: 'Datepicker range',
+    title: 'Date picker range',
     source: [{
       type: GuideSectionTypes.JS,
       code: rangeSource,
@@ -227,7 +227,7 @@ export const DatePickerExample = {
     ),
     demo: <Utc />,
   }, {
-    title: 'Datepicker inline',
+    title: 'Date picker inline',
     source: [{
       type: GuideSectionTypes.JS,
       code: inlineSource,

src/components/date_picker/index.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { CommonProps } from '../common';
+import { IconType } from '../icon';
+import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import { Moment } from 'moment';
+
+declare module '@elastic/eui' {
+  interface OnTimeChangeProps {
+    start: string;
+    end: string;
+    isInvalid: boolean;
+    isQuickSelection: boolean;
+  }
+
+  interface OnRefreshChangeProps {
+    isPaused: boolean;
+    refreshInterval: number;
+  }
+
+  interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
+    fullWidth?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    injectTimes?: Moment[]; // added here because the type is missing in @types/[email protected]
+    inputRef?: React.Ref<typeof ReactDatePicker>;
+    placeholder?: string;
+    shadow?: boolean;
+    showIcon?: boolean;
+  }
+
+  export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
+  export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
+
+  export type EuiDatePickerRangeProps = CommonProps & {
+    startDateControl: React.ReactElement<EuiDatePickerProps>;
+    endDateControl: React.ReactElement<EuiDatePickerProps>;
+    iconType?: boolean | IconType;
+    fullWidth?: boolean;
+    isCustom?: boolean;
+  };
+
+  export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
+
+  export interface EuiSuperDatePickerCommonRange {
+    start: string;
+    end: string;
+    label: string;
+  }
+
+  export interface EuiSuperDatePickerRecentRange {
+    start: string;
+    end: string;
+  }
+
+  export interface EuiSuperDatePickerQuickSelectPanel {
+    title: string;
+    content: React.ReactNode;
+  }
+
+  export type EuiSuperDatePickerProps = CommonProps & {
+    start?: string;
+    end?: string;
+    isPaused?: boolean;
+    refreshInterval?: number;
+    onTimeChange: (props: OnTimeChangeProps) => void;
+    onRefreshChange?: (props: OnRefreshChangeProps) => void;
+    commonlyUsedRanges?: EuiSuperDatePickerCommonRange[];
+    dateFormat?: string;
+    recentlyUsedRanges?: EuiSuperDatePickerRecentRange[];
+    showUpdateButton?: boolean;
+    isAutoRefreshOnly?: boolean;
+    customQuickSelectPanels?: EuiSuperDatePickerQuickSelectPanel[];
+  };
+
+  export const EuiSuperDatePicker: React.SFC<EuiSuperDatePickerProps>;
+}

src/components/index.d.ts

@@ -7,6 +7,7 @@
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./context_menu/index.d.ts" />
+/// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./description_list/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />

yarn.lock

@@ -894,6 +894,15 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.3.tgz#bef071852dca2a2dbb65fecdb7bfb30cedae2de2"
   integrity sha512-sfjHrNF4zWRv3fJUGyZW46wVxhYJ/GeWIPdKxbnLIhY3bWR0Ncl2kIhZI7rpjY9KtUQAkDP8jWEmaGQGFFvruA==
 
+"@types/[email protected]":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-1.8.0.tgz#b8b4f69d3e5398500c136f5338e0746ed98d46e8"
+  integrity sha512-QyHMOFCOFIkcyDCXUGnL7OyM+Gj2aG95d3t18wgrLTxQJseVQXeQFTVnUeXmmF2cZxeWtGTfRl1uYPTr3/rAFg==
+  dependencies:
+    "@types/react" "*"
+    moment ">=2.14.0"
+    popper.js "^1.14.1"
+
 "@types/react-is@~16.3.0":
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.3.1.tgz#f3e1dee9d0eb58c049825540cb061b5588022a9e"
@@ -8866,6 +8875,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
   integrity sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==
 
+moment@>=2.14.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 moment@^2.20.1:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
@@ -10166,6 +10180,11 @@ pngjs@~2.2.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.2.0.tgz#649663609a0ebab87c8f08b3fe724048b51d9d7f"
   integrity sha1-ZJZjYJoOurh8jwiz/nJASLUdnX8=
 
+popper.js@^1.14.1:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
+  integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"