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 `sortMatchesBy` prop for `EuiComboBox` ([#3089](https://github.com/elastic/eui/pull/3089))
 - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))

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,68 @@
+/**
+ * This function returns time value, time unit and time tense for a given time string.
+ * For example: for `now-40m` it will parse output as time value to `40`
+ * time unit to `m` and time unit to `last`.
+ * If given a datetime string it will return a default value.
+ * If the given string is in the format such as `now/d` it will parse the string to moment object
+ * and find the time value, time unit and time tense using moment
+ *
+ * @param {string} value The time string to be parsed
+ * @returns {object} time value, time unit and time tense
+ */
+
+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;
+};