From 7d9dfadfa4c9f50148c766b8a55b28631297dec8 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 22 Jan 2019 18:52:02 -0700 Subject: [PATCH 1/8] reset showPrettyDuration on new props --- .../date_picker/super_date_picker/super_date_picker.js | 1 + 1 file changed, 1 insertion(+) 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..1ff2046d393 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) }; } From d57152587eeee8750d3e298c00526a7f3b85baab Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 22 Jan 2019 18:59:37 -0700 Subject: [PATCH 2/8] pass interval on toogleRefresh --- .../quick_select_popover/refresh_interval.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) 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..51a95595cfa 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,7 +19,7 @@ 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) { if (milliseconds > MILLISECONDS_IN_HOUR) { return { units: 'h', @@ -33,12 +33,18 @@ function convertMilliseconds(milliseconds) { }; } +function toMilliseconds(units, value) { + return units === 'h' + ? value * MILLISECONDS_IN_HOUR + : 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, @@ -63,9 +69,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 +79,7 @@ export class EuiRefreshInterval extends Component { toogleRefresh = () => { this.props.applyRefreshInterval({ + refreshInterval: toMilliseconds(this.state.units, this.state.value), isPaused: !this.props.isPaused }); } From 2d5ee7ba2f315a63d49c9179047e1df906b7335c Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 22 Jan 2019 19:20:16 -0700 Subject: [PATCH 3/8] clean up --- .../super_date_picker/super_date_picker.js | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) 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 1ff2046d393..77bda68b295 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 @@ -88,7 +88,8 @@ export class EuiSuperDatePicker extends Component { } static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.start !== prevState.prevProps.start + if (!prevState.prevProps + || nextProps.start !== prevState.prevProps.start || nextProps.end !== prevState.prevProps.end) { return { prevProps: { @@ -99,34 +100,14 @@ export class EuiSuperDatePicker extends Component { end: nextProps.end, isInvalid: false, hasChanged: false, - showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges) + showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges), }; } return null; } - constructor(props) { - super(props); - - const { - start, - end, - commonlyUsedRanges - } = this.props; - - this.state = { - prevProps: { - start: props.start, - end: props.end, - }, - start, - end, - isInvalid: false, - hasChanged: false, - showPrettyDuration: showPrettyDuration(start, end, commonlyUsedRanges), - }; - } + state = {} componentWillUnmount() { this._isMounted = false; From bffa251655ccf73dd267e6311747c610be267a63 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 22 Jan 2019 19:48:13 -0700 Subject: [PATCH 4/8] cleanup --- .../views/date_picker/super_date_picker.js | 8 +++--- .../quick_select_popover/refresh_interval.js | 5 ++-- .../super_date_picker/super_date_picker.js | 25 ++++++++++++++++--- 3 files changed, 28 insertions(+), 10 deletions(-) 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 51a95595cfa..872af01220d 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 @@ -1,3 +1,4 @@ +import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component, Fragment } from 'react'; import { timeUnits } from '../time_units'; @@ -23,13 +24,13 @@ function fromMilliseconds(milliseconds) { if (milliseconds > MILLISECONDS_IN_HOUR) { return { units: 'h', - value: milliseconds / MILLISECONDS_IN_HOUR + value: _.round(milliseconds / MILLISECONDS_IN_HOUR, 3) }; } return { units: 'm', - value: milliseconds / MILLISECONDS_IN_MINUTE + value: _.round(milliseconds / MILLISECONDS_IN_MINUTE, 3) }; } 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 77bda68b295..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 @@ -88,8 +88,7 @@ export class EuiSuperDatePicker extends Component { } static getDerivedStateFromProps(nextProps, prevState) { - if (!prevState.prevProps - || nextProps.start !== prevState.prevProps.start + if (nextProps.start !== prevState.prevProps.start || nextProps.end !== prevState.prevProps.end) { return { prevProps: { @@ -107,7 +106,27 @@ export class EuiSuperDatePicker extends Component { return null; } - state = {} + constructor(props) { + super(props); + + const { + start, + end, + commonlyUsedRanges + } = this.props; + + this.state = { + prevProps: { + start: props.start, + end: props.end, + }, + start, + end, + isInvalid: false, + hasChanged: false, + showPrettyDuration: showPrettyDuration(start, end, commonlyUsedRanges), + }; + } componentWillUnmount() { this._isMounted = false; From ee77c40c1b4a679d29ade05e65afb6fb6b5bc447 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 23 Jan 2019 05:13:39 -0700 Subject: [PATCH 5/8] change log --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e9afeeb4fa..95834220d8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ - Fixed `textProps` and `contentProps` of `EuiButton` and `EuiButtonEmpty` so they don’t override classes ([#1455](https://github.com/elastic/eui/pull/1455)) - Fixed `closeButtonProps` of `EuiBadge` so it doesn't override classes ([#1455](https://github.com/elastic/eui/pull/1455)) - Fixed font weight shift of `EuiFilterButton` when notification is present ([#1455](https://github.com/elastic/eui/pull/1455)) +- 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)) ## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1) From 29f2e6b2ad39e55c6429dfdb036c9c5cb4fba48e Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 23 Jan 2019 07:54:21 -0700 Subject: [PATCH 6/8] allow decimals in refreshInterval input --- CHANGELOG.md | 1 + .../quick_select_popover/refresh_interval.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95834220d8f..f3acdd866cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Fixed font weight shift of `EuiFilterButton` when notification is present ([#1455](https://github.com/elastic/eui/pull/1455)) - 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.5.1`](https://github.com/elastic/eui/tree/v6.5.1) 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 872af01220d..59b8f580411 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 @@ -36,8 +36,8 @@ function fromMilliseconds(milliseconds) { function toMilliseconds(units, value) { return units === 'h' - ? value * MILLISECONDS_IN_HOUR - : value * MILLISECONDS_IN_MINUTE; + ? Math.round(value * MILLISECONDS_IN_HOUR) + : Math.round(value * MILLISECONDS_IN_MINUTE); } export class EuiRefreshInterval extends Component { @@ -53,7 +53,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); From 490039742ba03580a3bd22ea84b0c2e688f296ae Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 23 Jan 2019 13:01:03 -0700 Subject: [PATCH 7/8] avoid lodash round dependency --- .../quick_select_popover/refresh_interval.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 59b8f580411..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 @@ -1,4 +1,3 @@ -import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component, Fragment } from 'react'; import { timeUnits } from '../time_units'; @@ -21,16 +20,19 @@ const MILLISECONDS_IN_MINUTE = 1000 * 60; const MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60; function fromMilliseconds(milliseconds) { + function round(value) { + return parseFloat(value.toFixed(2)); + } if (milliseconds > MILLISECONDS_IN_HOUR) { return { units: 'h', - value: _.round(milliseconds / MILLISECONDS_IN_HOUR, 3) + value: round(milliseconds / MILLISECONDS_IN_HOUR) }; } return { units: 'm', - value: _.round(milliseconds / MILLISECONDS_IN_MINUTE, 3) + value: round(milliseconds / MILLISECONDS_IN_MINUTE) }; } From 0f40d78c57f3b9d979e4c8f5beb50a5b1d7838d5 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 23 Jan 2019 14:54:12 -0700 Subject: [PATCH 8/8] merge with master --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 506b77fe522..2ba90f9e965 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,6 @@ - Fixed `closeButtonProps` of `EuiBadge` so it doesn't override classes ([#1455](https://github.com/elastic/eui/pull/1455)) - Fixed font weight shift of `EuiFilterButton` when notification is present ([#1455](https://github.com/elastic/eui/pull/1455)) - Fixed `$euiCodeFontFamily` monospace font stack and subsequent JSON asset build ([#1465](https://github.com/elastic/eui/pull/1465)) ->>>>>>> b349c9675690b0a89efeaf4140cab33e600c99d3 ## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1)