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,
+});