From df433c0871af946d670cd98e60a05cbbbe1f9051 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 14 Oct 2024 13:40:10 +0200 Subject: [PATCH] [EuiSuperDatePicker] Support restricted date range (#8071) --- ...erDatePicker_Custom_Quick_Select_Panel.png | Bin 22094 -> 22606 bytes ...er_EuiSuperDatePicker_Restricted_Range.png | Bin 0 -> 4684 bytes ...Picker_EuiSuperUpdateButton_Playground.png | Bin 1768 -> 1776 bytes ...erDatePicker_Custom_Quick_Select_Panel.png | Bin 40485 -> 41294 bytes ...er_EuiSuperDatePicker_Restricted_Range.png | Bin 0 -> 7222 bytes packages/eui/changelogs/upcoming/8071.md | 2 + .../super_date_picker_example.js | 35 ++++++++ .../super_date_picker_range_restricted.tsx | 29 +++++++ .../date_popover/absolute_tab.tsx | 6 ++ .../date_popover/date_popover_button.tsx | 8 +- .../date_popover/date_popover_content.tsx | 8 +- .../super_date_picker.stories.tsx | 25 ++++++ .../super_date_picker.test.tsx | 79 ++++++++++++++++++ .../super_date_picker/super_date_picker.tsx | 51 +++++++++-- 14 files changed, 235 insertions(+), 8 deletions(-) create mode 100644 packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png create mode 100644 packages/eui/changelogs/upcoming/8071.md create mode 100644 packages/eui/src-docs/src/views/super_date_picker/super_date_picker_range_restricted.tsx diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index c76efb162dccaf2bb600d7609d3dc4e04dcfc3bd..ffa99f4fdca61905b51e6f91afa40b2f319320d2 100644 GIT binary patch delta 6601 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 PV*sqC_XzvY_T~QpoxJY> delta 6095 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

!Hl(xoj_Qju zK90{?|C7834yOH2sUPnZHo##XW(MeT14b9pnc8k?&5FP^adDEo9gn#SNHTX+yH+44 zvo!i5{@dDnN_7toT0V|+Oo{A)cE?-vz0eat&-cW>1|ifIzn z`g!G7KQOxF=8fYmkJ{5z?-i6YF;V0(i~qjMg;xg7=p3cZ@*tT$(Ss)x{(T!taz?Nm mmY!j>cy&$Uj7d{Wc|AU diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png new file mode 100644 index 0000000000000000000000000000000000000000..585d9fdc75310dbee48c037148de7478ce89642e GIT binary patch literal 4684 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 R5>)^I002ovPDHLkV1lJgU*!M* diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index 28a69a2412146b0f5e5d48991d2fe61ada4eab8b..6eb2a51e3d361d9b90f12efb958fcdb4ecb72ea4 100644 GIT binary patch delta 5441 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 DfXaOc delta 4625 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 Deztb_ literal 0 HcmV?d00001 diff --git a/packages/eui/changelogs/upcoming/8071.md b/packages/eui/changelogs/upcoming/8071.md new file mode 100644 index 00000000000..0d1f53ecdbc --- /dev/null +++ b/packages/eui/changelogs/upcoming/8071.md @@ -0,0 +1,2 @@ +- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support restricting date range selections + diff --git a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_example.js b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_example.js index 4fea50c1a86..c520d7ddd6b 100644 --- a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -41,6 +41,9 @@ const superDatePickerPatternSource = require('!!raw-loader!./super_date_picker_p import SuperDatePickerLocale from './super_date_picker_locale'; const superDatePickerLocaleSource = require('!!raw-loader!./super_date_picker_locale'); +import SuperDatePickerRangeRestricted from './super_date_picker_range_restricted'; +const superDatePickerRangeRestrictedSource = require('!!raw-loader!./super_date_picker_range_restricted'); + const superDatePickerSnippet = ``; +const superDatePickerRangeRestrictedSnippet = ``; + export const SuperDatePickerExample = { title: 'Super date picker', intro: ( @@ -391,5 +403,28 @@ if (!endMoment || !endMoment.isValid()) { snippet: superDatePickerLocaleSnippet, demo: , }, + { + title: 'Restricted Range', + source: [ + { + type: GuideSectionTypes.JS, + code: superDatePickerRangeRestrictedSource, + }, + ], + text: ( + <> +

+ To limit the range from which users can choose a date, you can use{' '} + minDate and maxDate. By + updating the date input values for start and{' '} + end users get immediate feedback on what range + values are allowed. +

+ + ), + props: { EuiSuperDatePicker }, + snippet: superDatePickerRangeRestrictedSnippet, + demo: , + }, ], }; diff --git a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_range_restricted.tsx b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_range_restricted.tsx new file mode 100644 index 00000000000..583dbf00fe0 --- /dev/null +++ b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker_range_restricted.tsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react'; + +import { + EuiSuperDatePicker, + OnTimeChangeProps, +} from '../../../../src/components'; +import moment from 'moment'; + +export default () => { + const [start, setStart] = useState('now-30m'); + const [end, setEnd] = useState('now'); + const minDate = moment().subtract(1, 'M'); + const maxDate = moment().add(1, 'M'); + + const onTimeChange = ({ start, end }: OnTimeChangeProps) => { + setStart(start); + setEnd(end); + }; + + return ( + + ); +}; diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx index 76b4b2717e2..e81813a8f9b 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx @@ -45,6 +45,8 @@ export interface EuiAbsoluteTabProps { roundUp: boolean; labelPrefix: string; utcOffset?: number; + minDate?: Moment; + maxDate?: Moment; } export const EuiAbsoluteTab: FunctionComponent = ({ @@ -55,6 +57,8 @@ export const EuiAbsoluteTab: FunctionComponent = ({ locale, roundUp, utcOffset, + minDate, + maxDate, labelPrefix, }) => { const styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles); @@ -157,6 +161,8 @@ export const EuiAbsoluteTab: FunctionComponent = ({ timeFormat={timeFormat} locale={locale} utcOffset={utcOffset} + minDate={minDate} + maxDate={maxDate} /> ); diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx index cf62ac294ae..4ee97b3d971 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx @@ -7,7 +7,7 @@ */ import React, { FunctionComponent } from 'react'; -import { LocaleSpecifier } from 'moment'; +import { LocaleSpecifier, Moment } from 'moment'; import { useEuiMemoizedStyles } from '../../../../services'; import { useEuiPaddingCSS } from '../../../../global_styling'; @@ -37,6 +37,8 @@ export interface EuiDatePopoverContentProps { locale?: LocaleSpecifier; position: 'start' | 'end'; utcOffset?: number; + minDate?: Moment; + maxDate?: Moment; timeOptions: TimeOptions; } @@ -53,6 +55,8 @@ export const EuiDatePopoverContent: FunctionComponent< position, utcOffset, timeOptions, + minDate, + maxDate, }) => { const styles = useEuiMemoizedStyles(euiDatePopoverContentStyles); @@ -101,6 +105,8 @@ export const EuiDatePopoverContent: FunctionComponent< roundUp={roundUp} labelPrefix={labelPrefix} utcOffset={utcOffset} + minDate={minDate} + maxDate={maxDate} /> ), 'data-test-subj': 'superDatePickerAbsoluteTab', diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx index 528d9baf4b3..39ada5dbf93 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx @@ -7,6 +7,7 @@ */ import React from 'react'; +import moment from 'moment'; import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import { within } from '../../../../.storybook/test'; @@ -48,6 +49,8 @@ const meta: Meta = { isLoading: false, isQuickSelectOnly: false, commonlyUsedRanges: [{ start: 'now/d', end: 'now/d', label: 'Today' }], + maxDate: undefined, + minDate: undefined, }, }; enableFunctionToggleControls(meta, ['onTimeChange']); @@ -89,6 +92,28 @@ export const CustomQuickSelectPanel: Story = { }, }; +export const RestrictedRange: Story = { + parameters: { + controls: { + include: [ + 'dateFormat', + 'start', + 'end', + 'minDate', + 'maxDate', + 'onTimeChange', + ], + }, + loki: { + chromeSelector: LOKI_SELECTORS.portal, + }, + }, + args: { + minDate: moment('10/01/2024'), + maxDate: moment('11/01/2024'), + }, +}; + function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) { function applyMyCustomTime() { applyTime!({ start: 'now-30d', end: 'now+7d' }); diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index f6d9e552a08..7c9520abf10 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -16,6 +16,7 @@ import { EuiSuperDatePicker, EuiSuperDatePickerProps, } from './super_date_picker'; +import moment from 'moment'; const noop = () => {}; @@ -396,5 +397,83 @@ describe('EuiSuperDatePicker', () => { expect(startButton).toHaveTextContent('300 days ago'); }); }); + + describe('minDate', () => { + const props = { + onTimeChange: noop, + end: 'now', + }; + + it('is valid when the start value is set after the minDate', () => { + const { container } = render( + + ); + + const formWraper = container.querySelector( + '.euiFormControlLayout__childrenWrapper' + )!; + + expect(formWraper.className).not.toContain('invalid'); + }); + + it('is invalid when the start value is set before the minDate', () => { + const { container } = render( + + ); + + const formWraper = container.querySelector( + '.euiFormControlLayout__childrenWrapper' + )!; + + expect(formWraper.className).toContain('invalid'); + }); + }); + + describe('maxDate', () => { + const props = { + onTimeChange: noop, + start: '10/01/2024', + }; + + it('is valid when the end value is set before the maxDate', () => { + const { container } = render( + + ); + + const formWraper = container.querySelector( + '.euiFormControlLayout__childrenWrapper' + )!; + + expect(formWraper.className).not.toContain('invalid'); + }); + + it('is invalid when the end date exceeds the maxDate', () => { + const { container } = render( + + ); + + const formWraper = container.querySelector( + '.euiFormControlLayout__childrenWrapper' + )!; + + expect(formWraper.className).toContain('invalid'); + }); + }); }); }); diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index 0c804ca5f79..f63194683c5 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -13,7 +13,7 @@ import React, { ReactNode, } from 'react'; import classNames from 'classnames'; -import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named +import moment, { LocaleSpecifier, Moment } from 'moment'; // eslint-disable-line import/named import dateMath from '@elastic/datemath'; import { useEuiMemoizedStyles } from '../../../services'; @@ -174,6 +174,16 @@ export type EuiSuperDatePickerProps = CommonProps & { */ end?: ShortDate; + /** + * Defines min. date accepted as a selection (in moment format) + */ + minDate?: moment.Moment; + + /** + * Defines max. date accepted as a selection (in moment format) + */ + maxDate?: moment.Moment; + /** * Specifies the formatted used when displaying times * @default 'HH:mm' @@ -235,7 +245,12 @@ interface EuiSuperDatePickerState { start: ShortDate; } -function isRangeInvalid(start: ShortDate, end: ShortDate) { +function isRangeInvalid( + start: ShortDate, + end: ShortDate, + minDate?: Moment, + maxDate?: Moment +) { if (start === 'now' && end === 'now') { return true; } @@ -250,7 +265,10 @@ function isRangeInvalid(start: ShortDate, end: ShortDate) { !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || - startMoment.isAfter(endMoment); + startMoment.isAfter(endMoment) || + endMoment.isBefore(startMoment) || + (minDate != null && startMoment.isBefore(minDate)) || + (maxDate != null && endMoment.isAfter(maxDate)); return isInvalid; } @@ -283,7 +301,12 @@ export class EuiSuperDatePickerInternal extends Component< }, start: this.props.start, end: this.props.end, - isInvalid: isRangeInvalid(this.props.start, this.props.end), + isInvalid: isRangeInvalid( + this.props.start, + this.props.end, + this.props.minDate, + this.props.maxDate + ), hasChanged: false, showPrettyDuration: showPrettyDuration( this.props.start, @@ -309,7 +332,12 @@ export class EuiSuperDatePickerInternal extends Component< }, start: nextProps.start, end: nextProps.end, - isInvalid: isRangeInvalid(nextProps.start, nextProps.end), + isInvalid: isRangeInvalid( + nextProps.start, + nextProps.end, + nextProps.minDate, + nextProps.maxDate + ), hasChanged: false, showPrettyDuration: showPrettyDuration( nextProps.start, @@ -323,7 +351,12 @@ export class EuiSuperDatePickerInternal extends Component< } setTime = ({ end, start }: DurationRange) => { - const isInvalid = isRangeInvalid(start, end); + const isInvalid = isRangeInvalid( + start, + end, + this.props.minDate, + this.props.maxDate + ); this.setState({ start, @@ -516,6 +549,8 @@ export class EuiSuperDatePickerInternal extends Component< locale, timeFormat, utcOffset, + minDate, + maxDate, compressed, onFocus, memoizedStyles: styles, @@ -631,6 +666,8 @@ export class EuiSuperDatePickerInternal extends Component< utcOffset={utcOffset} timeFormat={timeFormat} locale={locale || contextLocale} + minDate={minDate} + maxDate={maxDate} canRoundRelativeUnits={canRoundRelativeUnits} isOpen={this.state.isStartDatePopoverOpen} onPopoverToggle={this.onStartDatePopoverToggle} @@ -653,6 +690,8 @@ export class EuiSuperDatePickerInternal extends Component< utcOffset={utcOffset} timeFormat={timeFormat} locale={locale || contextLocale} + minDate={minDate} + maxDate={maxDate} canRoundRelativeUnits={canRoundRelativeUnits} roundUp isOpen={this.state.isEndDatePopoverOpen}