Inherit selected value to quick select in EuiSuperDatePicker

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated `EuiSuperDatePicker` to inherit the selected value to quick select ([#3105](https://github.com/elastic/eui/pull/3105))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 
 ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0)

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -12,6 +12,7 @@ import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { EuiI18n } from '../../../i18n';
 import { timeUnits } from '../time_units';
 import { EuiScreenReaderOnly } from '../../../accessibility';
+import { parseTimeParts } from './quick_select_utlis';
 
 const LAST = 'last';
 const NEXT = 'next';
@@ -29,10 +30,15 @@ export class EuiQuickSelect extends Component {
     super(props);
 
     const { timeTense, timeValue, timeUnits } = this.props.prevQuickSelect;
+    const {
+      timeTenseDefault,
+      timeValueDefault,
+      timeUnitsDefault,
+    } = parseTimeParts(this.props.start);
     this.state = {
-      timeTense: timeTense ? timeTense : LAST,
-      timeValue: timeValue ? timeValue : 15,
-      timeUnits: timeUnits ? timeUnits : 'm',
+      timeTense: timeTense ? timeTense : timeTenseDefault,
+      timeValue: timeValue ? timeValue : timeValueDefault,
+      timeUnits: timeUnits ? timeUnits : timeUnitsDefault,
     };
   }
 

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_utlis.js

@@ -0,0 +1,56 @@
+import { isString } from '../../../../services/predicate';
+import dateMath from '@elastic/datemath';
+import moment from 'moment';
+import { relativeUnitsFromLargestToSmallest } from '../relative_options';
+
+const LAST = 'last';
+const NEXT = 'next';
+
+export const parseTimeParts = value => {
+  const matches =
+    isString(value) &&
+    value.match(/now(([\-\+])([0-9]+)([smhdwMy])(\/[smhdwMy])?)?/);
+
+  if (!matches) {
+    return {
+      timeValueDefault: 15,
+      timeUnitsDefault: 'm',
+      timeTenseDefault: LAST,
+    };
+  }
+
+  const operator = matches && matches[2];
+  const timeValue = matches && matches[3];
+  const timeUnitsDefault = matches && matches[4];
+
+  if (timeValue && timeUnitsDefault && operator) {
+    const timeValueDefault = parseInt(timeValue);
+    const timeTenseDefault = operator === '+' ? NEXT : LAST;
+
+    return {
+      timeValueDefault,
+      timeUnitsDefault,
+      timeTenseDefault,
+    };
+  }
+
+  const results = {
+    timeValueDefault: 15,
+    timeUnitsDefault: 'm',
+    timeTenseDefault: LAST,
+  };
+
+  const duration = moment.duration(moment().diff(dateMath.parse(value)));
+  let unitOp = '';
+  for (let i = 0; i < relativeUnitsFromLargestToSmallest.length; i++) {
+    const as = duration.as(relativeUnitsFromLargestToSmallest[i]);
+    if (as < 0) unitOp = '+';
+    if (Math.abs(as) > 1) {
+      results.timeValueDefault = Math.round(Math.abs(as));
+      results.timeUnitsDefault = relativeUnitsFromLargestToSmallest[i];
+      results.timeTenseDefault = unitOp === '+' ? NEXT : LAST;
+      break;
+    }
+  }
+  return results;
+};