diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d30abed51e..3e866221d99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added styling support for `valign` prop on `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283)) - Added `remark-breaks` plugin to mimic GitHub-flavored markdown line breaks within `EuiMarkdownEditor` ([#5272](https://github.com/elastic/eui/pull/5272)) +- Removed `EuiErrorBoundary` from `EuiDatePicker` when unsupported props are used ([#5318](https://github.com/elastic/eui/pull/5318)) **Bug fixes** diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js index c388da9c205..8cdc14ca262 100644 --- a/src-docs/src/views/date_picker/custom_input.js +++ b/src-docs/src/views/date_picker/custom_input.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { forwardRef, useState } from 'react'; import PropTypes from 'prop-types'; @@ -7,15 +7,14 @@ import moment from 'moment'; import { EuiDatePicker, EuiButton } from '../../../../src/components'; // Should be a component because the date picker does some ref stuff behind the scenes -// eslint-disable-next-line react/prefer-stateless-function - -const ExampleCustomInput = ({ onClick, value }) => { +// eslint-disable-next-line +const ExampleCustomInput = forwardRef(({ onClick, value }, ref) => { return ( {value} ); -}; +}); ExampleCustomInput.propTypes = { onClick: PropTypes.func, diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js index 6732be7d630..55dd3987b8c 100644 --- a/src-docs/src/views/date_picker/date_picker_example.js +++ b/src-docs/src/views/date_picker/date_picker_example.js @@ -331,15 +331,17 @@ export const DatePickerExample = { }, ], text: ( -

+ <>

Dynamic minDate and maxDate

- By using minDate and maxDate, - and updating the values based on startDate and{' '} - endDate, users get immediate feedback on what range - values are allowed. -

+

+ By using minDate and maxDate, + and updating the values based on startDate and{' '} + endDate, users get immediate feedback on what + range values are allowed. +

+ ), demo: , props: { EuiDatePickerRange }, diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 54eab93a3ea..ff87196c002 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -14,8 +14,6 @@ import { Moment } from 'moment'; // eslint-disable-line import/named import { EuiFormControlLayout, EuiValidatableControl } from '../form'; import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons'; -import { EuiErrorBoundary } from '../error_boundary'; - import { EuiI18nConsumer } from '../context'; import { ApplyClassComponentDefaults, CommonProps } from '../common'; @@ -28,7 +26,38 @@ export const euiDatePickerDefaultTimeFormat = 'hh:mm A'; const DatePicker = _ReactDatePicker as typeof ReactDatePicker; -interface EuiExtendedDatePickerProps extends ReactDatePickerProps { +// EuiDatePicker only supports a subset of props from react-datepicker. +const unsupportedProps = [ + // We don't want to show multiple months next to each other + 'monthsShown', + // There is no need to show week numbers + 'showWeekNumbers', + // Our css adapts to height, no need to fix it + 'fixedHeight', + // We force the month / year selection UI. No need to configure it + 'dropdownMode', + // Short month is unnecessary. Our UI has plenty of room for full months + 'useShortMonthInDropdown', + // The today button is not needed. This should always be external to the calendar + 'todayButton', + // We hide the time caption, so there is no need to overwrite its text + 'timeCaption', + // We always want keyboard accessibility on + 'disabledKeyboardNavigation', + // This is easy enough to do. It can conflict with isLoading state + 'isClearable', + // There is no reason to launch the datepicker in its own modal. Can always build these ourselves + 'withPortal', + // Causes Error: Cannot read property 'clone' of undefined + 'showMonthYearDropdown', + // We overridde this with `popoverPlacement` + 'popperPlacement', +] as const; + +type UnsupportedProps = typeof unsupportedProps[number]; + +interface EuiExtendedDatePickerProps + extends Omit { /** * Applies classes to the numbered days provided. Check docs for example. */ @@ -85,7 +114,7 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps { iconType?: EuiFormControlLayoutIconsProps['icon']; /** - * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"left-start"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"` + * Sets the placement of the popover */ popoverPlacement?: ReactDatePickerProps['popperPlacement']; } @@ -187,44 +216,6 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { fullDateFormat = `${dateFormat} ${timeFormat}`; } - // EuiDatePicker only supports a subset of props from react-datepicker. Using any of - // the unsupported props below will spit out an error. - const PropNotSupported = () => { - throw new Error(`You are using a prop from react-datepicker that EuiDatePicker - does not support. Please check the EUI documentation for more information.`); - }; - - if ( - // We don't want to show multiple months next to each other - this.props.monthsShown || - // There is no need to show week numbers - this.props.showWeekNumbers || - // Our css adapts to height, no need to fix it - this.props.fixedHeight || - // We force the month / year selection UI. No need to configure it - this.props.dropdownMode || - // Short month is unnecessary. Our UI has plenty of room for full months - this.props.useShortMonthInDropdown || - // The today button is not needed. This should always be external to the calendar - this.props.todayButton || - // We hide the time caption, so there is no need to overwrite its text - this.props.timeCaption || - // We always want keyboard accessibility on - this.props.disabledKeyboardNavigation || - // This is easy enough to do. It can conflict with isLoading state - this.props.isClearable || - // There is no reason to launch the datepicker in its own modal. Can always build these ourselves - this.props.withPortal || - // Causes Error: Cannot read property 'clone' of undefined - this.props.showMonthYearDropdown - ) { - return ( - - - - ); - } - return (