EuiSuperDatePicker small changes (#1464)

* reset showPrettyDuration on new props

* pass interval on toogleRefresh

* clean up

* cleanup

* change log

* allow decimals in refreshInterval input

* avoid lodash round dependency

* merge with master

CHANGELOG.md

@@ -3,6 +3,12 @@
 - Re-added EuiI18n, EuiI18nNumber, and EuiContext for localization ([#1466](https://github.com/elastic/eui/pull/1466))
 - Set `type="button"` on accordion buttons ([#1468](https://github.com/elastic/eui/pull/1468))
 
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` not updating derived `showPrettyDuration` state on prop update ([#1464](https://github.com/elastic/eui/pull/1464))
+- Fixed `EuiSuperDatePicker` not passing `refreshInterval` to callback when refresh internval start/stop toggle button clicked ([#1464](https://github.com/elastic/eui/pull/1464))
+- Fixed `EuiSuperDatePicker` `refreshInterval` input not allowing decimals ([#1464](https://github.com/elastic/eui/pull/1464))
+
 ## [`6.6.0`](https://github.com/elastic/eui/tree/v6.6.0)
 
 - Added `uptimeApp` icon ([#1445](https://github.com/elastic/eui/pull/1463))

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

@@ -47,11 +47,9 @@ export default class extends Component {
   }
 
   onRefreshChange = ({ isPaused, refreshInterval }) => {
-    this.setState((prevState) => {
-      return {
-        isPaused: isPaused == null ? prevState.isPaused : isPaused,
-        refreshInterval: refreshInterval == null ? prevState.refreshInterval : refreshInterval,
-      };
+    this.setState({
+      isPaused,
+      refreshInterval,
     });
   }
 

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

@@ -19,34 +19,43 @@ const refreshUnitsOptions = Object.keys(timeUnits)
 const MILLISECONDS_IN_MINUTE = 1000 * 60;
 const MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60;
 
-function convertMilliseconds(milliseconds) {
+function fromMilliseconds(milliseconds) {
+  function round(value) {
+    return parseFloat(value.toFixed(2));
+  }
   if (milliseconds > MILLISECONDS_IN_HOUR) {
     return {
       units: 'h',
-      value: milliseconds / MILLISECONDS_IN_HOUR
+      value: round(milliseconds / MILLISECONDS_IN_HOUR)
     };
   }
 
   return {
     units: 'm',
-    value: milliseconds / MILLISECONDS_IN_MINUTE
+    value: round(milliseconds / MILLISECONDS_IN_MINUTE)
   };
 }
 
+function toMilliseconds(units, value) {
+  return units === 'h'
+    ? Math.round(value * MILLISECONDS_IN_HOUR)
+    : Math.round(value * MILLISECONDS_IN_MINUTE);
+}
+
 export class EuiRefreshInterval extends Component {
 
   constructor(props) {
     super(props);
 
-    const { value, units } = convertMilliseconds(props.refreshInterval);
+    const { value, units } = fromMilliseconds(props.refreshInterval);
     this.state = {
       value,
       units,
     };
   }
 
   onValueChange = (evt) => {
-    const sanitizedValue = parseInt(evt.target.value, 10);
+    const sanitizedValue = parseFloat(evt.target.value);
     this.setState({
       value: isNaN(sanitizedValue) ? '' : sanitizedValue,
     }, this.applyRefreshInterval);
@@ -63,9 +72,7 @@ export class EuiRefreshInterval extends Component {
       return;
     }
 
-    const valueInMilliSeconds = this.state.units === 'h'
-      ? this.state.value * MILLISECONDS_IN_HOUR
-      : this.state.value * MILLISECONDS_IN_MINUTE;
+    const valueInMilliSeconds = toMilliseconds(this.state.units, this.state.value);
 
     this.props.applyRefreshInterval({
       refreshInterval: valueInMilliSeconds,
@@ -75,6 +82,7 @@ export class EuiRefreshInterval extends Component {
 
   toogleRefresh = () => {
     this.props.applyRefreshInterval({
+      refreshInterval: toMilliseconds(this.state.units, this.state.value),
       isPaused: !this.props.isPaused
     });
   }

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -99,6 +99,7 @@ export class EuiSuperDatePicker extends Component {
         end: nextProps.end,
         isInvalid: false,
         hasChanged: false,
+        showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges),
       };
     }