From 29a91cc2341f28e01856d92a2822922af6b1134a Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 27 Feb 2019 10:12:46 -0700 Subject: [PATCH 1/3] Move react-datepicker types into EUI --- package.json | 1 - scripts/dtsgenerator.js | 2 +- src-docs/src/i18ntokens.json | 16 +-- src/components/date_picker/index.d.ts | 9 +- .../date_picker/react-datepicker.d.ts | 99 +++++++++++++++++++ yarn.lock | 19 ---- 6 files changed, 114 insertions(+), 32 deletions(-) create mode 100644 src/components/date_picker/react-datepicker.d.ts diff --git a/package.json b/package.json index 413dd9b5fb7..88db05b551f 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,6 @@ "@types/enzyme": "^3.1.13", "@types/jest": "^24.0.6", "@types/react": "^16.8.4", - "@types/react-datepicker": "1.8.0", "@types/react-is": "~16.3.0", "@types/react-virtualized": "^9.18.6", "@types/uuid": "^3.4.4", diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js index 927ffcf4cbf..a494fe78ee4 100644 --- a/scripts/dtsgenerator.js +++ b/scripts/dtsgenerator.js @@ -54,7 +54,7 @@ const generator = dtsGenerator({ params.importedModuleId, { basedir: importFromBaseDir, - extensions: ['.ts', '.tsx'], + extensions: ['.ts', '.tsx', '.d.ts'], } ); diff --git a/src-docs/src/i18ntokens.json b/src-docs/src/i18ntokens.json index 939e6010873..1899b5f1b5a 100644 --- a/src-docs/src/i18ntokens.json +++ b/src-docs/src/i18ntokens.json @@ -5,11 +5,11 @@ "highlighting": "string", "loc": { "start": { - "line": 421, + "line": 432, "column": 10 }, "end": { - "line": 425, + "line": 436, "column": 12 } }, @@ -21,12 +21,12 @@ "highlighting": "string", "loc": { "start": { - "line": 458, - "column": 10 + "line": 468, + "column": 6 }, "end": { - "line": 458, - "column": 81 + "line": 468, + "column": 77 } }, "filepath": "src/components/basic_table/basic_table.js" @@ -37,11 +37,11 @@ "highlighting": "string", "loc": { "start": { - "line": 736, + "line": 769, "column": 8 }, "end": { - "line": 736, + "line": 769, "column": 79 } }, diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts index f8032489cd7..e243a3d3ca4 100644 --- a/src/components/date_picker/index.d.ts +++ b/src/components/date_picker/index.d.ts @@ -1,7 +1,7 @@ import React from 'react'; import { CommonProps } from '../common'; import { IconType } from '../icon'; -import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'; +import _ReactDatePicker, { ReactDatePickerProps as _ReactDatePickerProps } from './react-datepicker'; import { Moment } from 'moment'; declare module '@elastic/eui' { @@ -17,12 +17,12 @@ declare module '@elastic/eui' { refreshInterval: number; } - interface EuiExtendedDatePickerProps extends ReactDatePickerProps { + interface EuiExtendedDatePickerProps extends _ReactDatePickerProps { fullWidth?: boolean; isInvalid?: boolean; isLoading?: boolean; injectTimes?: Moment[]; // added here because the type is missing in @types/react-datepicker@1.8.0 - inputRef?: React.Ref; + inputRef?: React.Ref; placeholder?: string; shadow?: boolean; showIcon?: boolean; @@ -73,4 +73,7 @@ declare module '@elastic/eui' { }; export const EuiSuperDatePicker: React.SFC; + + export const ReactDatePicker: typeof _ReactDatePicker; + export const ReactDatePickerProps: _ReactDatePickerProps; } diff --git a/src/components/date_picker/react-datepicker.d.ts b/src/components/date_picker/react-datepicker.d.ts new file mode 100644 index 00000000000..74e48de2873 --- /dev/null +++ b/src/components/date_picker/react-datepicker.d.ts @@ -0,0 +1,99 @@ +// Type definitions for react-datepicker 1.8 +// Project: https://github.com/Hacker0x01/react-datepicker +// Definitions by: Rajab Shakirov , +// Andrey Balokha , +// Greg Smith , +// Platon Pronko +// Roy Xue +// Koala Human +// Sean Kelley +// Justin Grant +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from "react"; +import * as moment from "moment"; + +export interface ReactDatePickerProps { + adjustDateOnChange?: boolean; + allowSameDay?: boolean; + autoComplete?: string; + autoFocus?: boolean; + calendarClassName?: string; + children?: React.ReactNode; + className?: string; + customInput?: React.ReactNode; + customInputRef?: string; + dateFormat?: string | string[]; + dateFormatCalendar?: string; + dayClassName?(date: moment.Moment): string | null; + disabled?: boolean; + disabledKeyboardNavigation?: boolean; + dropdownMode?: 'scroll' | 'select'; + endDate?: moment.Moment; + excludeDates?: moment.Moment[]; + excludeTimes?: moment.Moment[]; + filterDate?(date: moment.Moment): boolean; + fixedHeight?: boolean; + forceShowMonthNavigation?: boolean; + formatWeekNumber?(date: moment.Moment): string | number; + highlightDates?: moment.Moment[]; + id?: string; + includeDates?: moment.Moment[]; + includeTimes?: moment.Moment[]; + inline?: boolean; + isClearable?: boolean; + locale?: string; + maxDate?: moment.Moment; + maxTime?: moment.Moment; + minDate?: moment.Moment; + minTime?: moment.Moment; + monthsShown?: number; + name?: string; + onBlur?(event: React.FocusEvent): void; + onChange(date: moment.Moment | null, event: React.SyntheticEvent | undefined): void; + onChangeRaw?(event: React.FocusEvent): void; + onClickOutside?(event: React.MouseEvent): void; + onFocus?(event: React.FocusEvent): void; + onKeyDown?(event: React.KeyboardEvent): void; + onMonthChange?(date: moment.Moment): void; + onSelect?(date: moment.Moment, event: React.SyntheticEvent | undefined): void; + onWeekSelect?(firstDayOfWeek: moment.Moment, weekNumber: string | number, event: React.SyntheticEvent | undefined): void; + onYearChange?(date: moment.Moment): void; + openToDate?: moment.Moment; + peekNextMonth?: boolean; + placeholderText?: string; + preventOpenOnFocus?: boolean; + readOnly?: boolean; + required?: boolean; + scrollableMonthYearDropdown?: boolean; + scrollableYearDropdown?: boolean; + selected?: moment.Moment | null; + selectsEnd?: boolean; + selectsStart?: boolean; + shouldCloseOnSelect?: boolean; + showDisabledMonthNavigation?: boolean; + showMonthDropdown?: boolean; + showMonthYearDropdown?: boolean; + showTimeSelect?: boolean; + showTimeSelectOnly?: boolean; + showWeekNumbers?: boolean; + showYearDropdown?: boolean; + startDate?: moment.Moment; + startOpen?: boolean; + tabIndex?: number; + timeCaption?: string; + timeFormat?: string; + timeIntervals?: number; + title?: string; + todayButton?: string; + useShortMonthInDropdown?: boolean; + useWeekdaysShort?: boolean; + utcOffset?: number; + value?: string; + weekLabel?: string; + withPortal?: boolean; + yearDropdownItemNumber?: number; +} +declare const ReactDatePicker: React.ClassicComponentClass; +export default ReactDatePicker; diff --git a/yarn.lock b/yarn.lock index b27a79e4c05..ad613b8ba66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -977,15 +977,6 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.9.tgz#f2d14df87b0739041bc53a7d75e3d77d726a3ec0" integrity sha512-Nha5b+jmBI271jdTMwrHiNXM+DvThjHOfyZtMX9kj/c/LUj2xiLHsG/1L3tJ8DjAoQN48cHwUwtqBotjyXaSdQ== -"@types/react-datepicker@1.8.0": - 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" @@ -9005,11 +8996,6 @@ moment@2.x.x: 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" @@ -10359,11 +10345,6 @@ 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" From 360ef89d2c1edc0b5593188520675cb128aa0163 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 27 Feb 2019 10:19:26 -0700 Subject: [PATCH 2/3] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff1253a6feb..5b8821c2517 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462)) - Adds missing `hasActiveFilters` prop for `EuiFilterButton` type and fixes `onChange` signature for `EuiButtonGroup` ([#1603](https://github.com/elastic/eui/pull/1603)) +- Included `react-datepicker` TS types in EUI itself to avoid outside dependency ([#1618](https://github.com/elastic/eui/pull/1618)) **Breaking changes** From 6a2094e442ecd3504a514febd487445d60aec833 Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Wed, 27 Feb 2019 12:48:55 -0500 Subject: [PATCH 3/3] Re-added basic popper-based props that do not require popper dependency --- src/components/date_picker/react-datepicker.d.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/date_picker/react-datepicker.d.ts b/src/components/date_picker/react-datepicker.d.ts index 74e48de2873..2629b2c3e36 100644 --- a/src/components/date_picker/react-datepicker.d.ts +++ b/src/components/date_picker/react-datepicker.d.ts @@ -63,6 +63,9 @@ export interface ReactDatePickerProps { openToDate?: moment.Moment; peekNextMonth?: boolean; placeholderText?: string; + popperClassName?: string; + popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode; + popperPlacement?: string; preventOpenOnFocus?: boolean; readOnly?: boolean; required?: boolean;