EuiSuperDatePicker - add customQuickSelectPanels prop (#1549)

* custom quick select panel

* change log

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**
 

src-docs/src/views/date_picker/super_date_picker.js

@@ -7,15 +7,30 @@ import {
   EuiSpacer,
   EuiFormRow,
   EuiFieldText,
+  EuiLink,
 } from '../../../../src/components';
 
+function MyCustomQuickSelectPanel({ applyTime }) {
+
+  function applyMyCustomTime() {
+    applyTime({ start: 'now-30d', end: 'now+7d' });
+  }
+
+  return (
+    <EuiLink onClick={applyMyCustomTime}>
+      entire dataset timerange
+    </EuiLink>
+  );
+}
+
 export default class extends Component {
 
   state = {
     recentlyUsedRanges: [],
     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: (<MyCustomQuickSelectPanel/>),
+        }
+      ];
+    }
     return (
       <Fragment>
         <EuiSwitch
@@ -123,6 +153,14 @@ export default class extends Component {
           onChange={this.toggleShowRefreshOnly}
           checked={this.state.isAutoRefreshOnly}
         />
+
+        &emsp;
+
+        <EuiSwitch
+          label="Show custom quick select panel"
+          onChange={this.toggleShowCustomQuickSelectPanel}
+          checked={this.state.showCustomQuickSelectPanel}
+        />
         <EuiSpacer />
 
         <EuiSuperDatePicker
@@ -136,6 +174,7 @@ export default class extends Component {
           recentlyUsedRanges={this.state.recentlyUsedRanges}
           showUpdateButton={this.state.showUpdateButton}
           isAutoRefreshOnly={this.state.isAutoRefreshOnly}
+          customQuickSelectPanels={customQuickSelectPanels}
         />
 
         <EuiSpacer />

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()}
       </Fragment>
     );
   }
 
+  renderCustomQuickSelectPanels = () => {
+    if (!this.props.customQuickSelectPanels) {
+      return null;
+    }
+
+    return this.props.customQuickSelectPanels.map(({ title, content }) => {
+      return (
+        <Fragment key={title}>
+          <EuiTitle size="xxxs"><span>{title}</span></EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" className="euiQuickSelectPopover__section">
+            {React.cloneElement(content, { applyTime: this.applyTime })}
+          </EuiText>
+          <EuiHorizontalRule margin="s" />
+        </Fragment>
+      );
+    });
+  }
+
   render() {
     const quickSelectButton = (
       <EuiButtonEmpty
@@ -128,4 +144,6 @@ EuiQuickSelectPopover.propTypes = {
   dateFormat: PropTypes.string.isRequired,
   recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
   isAutoRefreshOnly: PropTypes.bool.isRequired,
+  isAutoRefreshOnly: PropTypes.bool.isRequired,
+  customQuickSelectPanels: PropTypes.arrayOf(quickSelectPanelShape),
 };

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { commonlyUsedRangeShape, recentlyUsedRangeShape } from './types';
+import { commonlyUsedRangeShape, recentlyUsedRangeShape, quickSelectPanelShape } from './types';
 import { prettyDuration, showPrettyDuration } from './pretty_duration';
 import { prettyInterval } from './pretty_interval';
 
@@ -81,6 +81,7 @@ export class EuiSuperDatePicker extends Component {
      * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
      */
     isAutoRefreshOnly: PropTypes.bool,
+    customQuickSelectPanels: PropTypes.arrayOf(quickSelectPanelShape),
   }
 
   static defaultProps = {
@@ -335,6 +336,7 @@ export class EuiSuperDatePicker extends Component {
         dateFormat={this.props.dateFormat}
         recentlyUsedRanges={this.props.recentlyUsedRanges}
         isAutoRefreshOnly={this.props.isAutoRefreshOnly}
+        customQuickSelectPanels={this.props.customQuickSelectPanels}
       />
     );
 

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