diff --git a/CHANGELOG.md b/CHANGELOG.md index 957cdce5275..d2abe1ffc91 100644 --- a/CHANGELOG.md +++ b/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)) 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 b9bd254b90f..76d10cac7e6 100644 --- a/src-docs/src/views/date_picker/super_date_picker.js +++ b/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, }); } diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js index 92ffa01bc8a..369bd2ce351 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js +++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js @@ -19,26 +19,35 @@ 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, @@ -46,7 +55,7 @@ export class EuiRefreshInterval extends Component { } 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 }); } diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js index 444bc7dcf37..6d3123621d1 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.js +++ b/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), }; }