diff --git a/CHANGELOG.md b/CHANGELOG.md index b7295fb4451..e64f0aa0f46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added pseudo-localization mode to docs ([#1541](https://github.com/elastic/eui/pull/1541)) - New docs page listing localization tokens ([#1541](https://github.com/elastic/eui/pull/1541)) - Added support for OR group clauses in `EuiQuery` and `EuiSearchBar` ([#1204](https://github.com/elastic/eui/pull/1204)) +- Added `customQuickSelectPanels` prop to `EuiSuperDatePicker` ([#1549](https://github.com/elastic/eui/pull/1549)) **Bug fixes** diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js index d2ce91c4bbd..3cbf018c4df 100644 --- a/src-docs/src/views/date_picker/super_date_picker.js +++ b/src-docs/src/views/date_picker/super_date_picker.js @@ -7,8 +7,22 @@ import { EuiSpacer, EuiFormRow, EuiFieldText, + EuiLink, } from '../../../../src/components'; +function MyCustomQuickSelectPanel({ applyTime }) { + + function applyMyCustomTime() { + applyTime({ start: 'now-30d', end: 'now+7d' }); + } + + return ( + + entire dataset timerange + + ); +} + export default class extends Component { state = { @@ -16,6 +30,7 @@ export default class extends Component { isLoading: false, showUpdateButton: true, isAutoRefreshOnly: false, + showCustomQuickSelectPanel: false, start: 'now-30m', end: 'now', } @@ -77,6 +92,12 @@ export default class extends Component { })); } + toggleShowCustomQuickSelectPanel = () => { + this.setState(prevState => ({ + showCustomQuickSelectPanel: !prevState.showCustomQuickSelectPanel, + })); + } + renderTimeRange = () => { if (this.state.isAutoRefreshOnly) { return null; @@ -107,6 +128,15 @@ export default class extends Component { } render() { + let customQuickSelectPanels; + if (this.state.showCustomQuickSelectPanel) { + customQuickSelectPanels = [ + { + title: 'My custom panel', + content: (), + } + ]; + } return ( + +   + + diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js index 1efb1a30370..32f27c3a80c 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js @@ -1,19 +1,15 @@ import PropTypes from 'prop-types'; import React, { Component, Fragment } from 'react'; -import { commonlyUsedRangeShape, recentlyUsedRangeShape } from '../types'; +import { commonlyUsedRangeShape, recentlyUsedRangeShape, quickSelectPanelShape } from '../types'; -import { - EuiButtonEmpty, -} from '../../../button'; - -import { - EuiIcon, -} from '../../../icon'; - -import { - EuiPopover, -} from '../../../popover'; +import { EuiButtonEmpty } from '../../../button'; +import { EuiIcon } from '../../../icon'; +import { EuiPopover } from '../../../popover'; +import { EuiTitle } from '../../../title'; +import { EuiSpacer } from '../../../spacer'; +import { EuiHorizontalRule } from '../../../horizontal_rule'; +import { EuiText } from '../../../text'; import { EuiQuickSelect } from './quick_select'; import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges'; @@ -72,10 +68,30 @@ export class EuiQuickSelectPopover extends Component { dateFormat={this.props.dateFormat} recentlyUsedRanges={this.props.recentlyUsedRanges} /> + {this.renderCustomQuickSelectPanels()} ); } + renderCustomQuickSelectPanels = () => { + if (!this.props.customQuickSelectPanels) { + return null; + } + + return this.props.customQuickSelectPanels.map(({ title, content }) => { + return ( + + {title} + + + {React.cloneElement(content, { applyTime: this.applyTime })} + + + + ); + }); + } + render() { const quickSelectButton = ( ); diff --git a/src/components/date_picker/super_date_picker/types.js b/src/components/date_picker/super_date_picker/types.js index 7e58ad0acfa..2f334117777 100644 --- a/src/components/date_picker/super_date_picker/types.js +++ b/src/components/date_picker/super_date_picker/types.js @@ -10,3 +10,8 @@ export const recentlyUsedRangeShape = PropTypes.shape({ start: PropTypes.string.isRequired, end: PropTypes.string.isRequired, }); + +export const quickSelectPanelShape = PropTypes.shape({ + title: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, +});