diff --git a/src/components/common.ts b/src/components/common.ts index 6e61a578fa7..a60a433a356 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -32,6 +32,26 @@ export type PropsOf = C extends SFC ? ComponentProps : never; +// Utility methods for ApplyClassComponentDefaults +type ExtractDefaultProps = T extends { defaultProps: infer D } ? D : never; +type ExtractProps< + C extends new (...args: any) => any, + IT = InstanceType +> = IT extends Component ? P : never; + +/** + * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx) + * we can't directly export the props definition as the defaulted values are not made optional, + * because it isn't processed by LibraryManagedAttributes. To get around this, we: + * - remove the props which have default values applied + * - export (Props - Defaults) & Partial + */ +export type ApplyClassComponentDefaults< + C extends new (...args: any) => any, + D = ExtractDefaultProps, + P = ExtractProps +> = Omit & Partial; + /* https://github.com/Microsoft/TypeScript/issues/28339 Problem: Pick and Omit do not distribute over union types, which manifests when diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index ad2f12f647c..bc0c1cba780 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -9,7 +9,7 @@ import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form import { EuiErrorBoundary } from '../error_boundary'; import { EuiI18nConsumer } from '../context'; -import { CommonProps } from '../common'; +import { ApplyClassComponentDefaults, CommonProps } from '../common'; // @ts-ignore the type is provided by react-datepicker.d.ts import { ReactDatePicker as _ReactDatePicker } from '../../../packages'; @@ -72,9 +72,13 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps { showIcon?: boolean; } -export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps; +type _EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps; -export class EuiDatePicker extends Component { +export type EuiDatePickerProps = ApplyClassComponentDefaults< + typeof EuiDatePicker +>; + +export class EuiDatePicker extends Component<_EuiDatePickerProps> { static defaultProps = { adjustDateOnChange: true, dateFormat: euiDatePickerDefaultDateFormat, diff --git a/src/components/date_picker/index.ts b/src/components/date_picker/index.ts index d21663b3dce..b9421dfe6b7 100644 --- a/src/components/date_picker/index.ts +++ b/src/components/date_picker/index.ts @@ -19,6 +19,7 @@ export { RelativeDateMode, NowDateMode, DateMode, + OnRefreshChangeProps, ShortDate, RelativeParts, RelativeOption, diff --git a/src/components/date_picker/super_date_picker/index.ts b/src/components/date_picker/super_date_picker/index.ts index b7143ade4e9..dca40703a6a 100644 --- a/src/components/date_picker/super_date_picker/index.ts +++ b/src/components/date_picker/super_date_picker/index.ts @@ -5,6 +5,8 @@ export { AsyncInterval } from './async_interval'; export { EuiSuperDatePicker, EuiSuperDatePickerProps, + OnTimeChangeProps, + OnRefreshProps, } from './super_date_picker'; export { diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index c14e09ec2d1..1d770187765 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -33,12 +33,12 @@ import { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named export { prettyDuration, commonDurationRanges }; -interface OnTimeChangeProps extends DurationRange { +export interface OnTimeChangeProps extends DurationRange { isInvalid: boolean; isQuickSelection: boolean; } -interface OnRefreshProps extends DurationRange { +export interface OnRefreshProps extends DurationRange { refreshInterval: number; } diff --git a/src/components/date_picker/types.ts b/src/components/date_picker/types.ts index 627f97d98d4..d071c825c93 100644 --- a/src/components/date_picker/types.ts +++ b/src/components/date_picker/types.ts @@ -49,10 +49,12 @@ export interface RelativeOption { value: TimeUnitId | TimeUnitFromNowId; } -export type ApplyRefreshInterval = (args: { - isPaused?: boolean; +export type OnRefreshChangeProps = { + isPaused: boolean; refreshInterval: number; -}) => void; +}; + +export type ApplyRefreshInterval = (args: OnRefreshChangeProps) => void; export interface QuickSelect { timeTense: string;