From 97f0eb81950eb05e8809ca40df504f9afe9dc095 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 29 Jan 2019 15:33:55 -0700 Subject: [PATCH 1/2] move isOpen state to EuiSuperDatePicker --- .../date_popover/date_popover_button.js | 160 ++++++++---------- .../super_date_picker/super_date_picker.js | 32 +++- 2 files changed, 105 insertions(+), 87 deletions(-) diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js index 5080e931696..0c75d9fa71b 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; import classNames from 'classnames'; import { EuiPopover } from '../../../popover'; @@ -7,94 +7,82 @@ import { EuiPopover } from '../../../popover'; import { formatTimeString } from '../pretty_duration'; import { EuiDatePopoverContent } from './date_popover_content'; -export class EuiDatePopoverButton extends Component { - static propTypes = { - position: PropTypes.oneOf(['start', 'end']), - isInvalid: PropTypes.bool, - needsUpdating: PropTypes.bool, - value: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - dateFormat: PropTypes.string.isRequired, - roundUp: PropTypes.bool, - } - - state = { - isOpen: false, - } +export function EuiDatePopoverButton(props) { + const { + position, + isInvalid, + needsUpdating, + value, + buttonProps, + roundUp, + onChange, + dateFormat, + isOpen, + onPopoverToggle, + onPopoverClose, + ...rest + } = props; - togglePopover = () => { - this.setState((prevState) => { - return { isOpen: !prevState.isOpen }; - }); - } + const classes = classNames([ + 'euiDatePopoverButton', + `euiDatePopoverButton--${position}`, + { + 'euiDatePopoverButton-isSelected': isOpen, + 'euiDatePopoverButton-isInvalid': isInvalid, + 'euiDatePopoverButton-needsUpdating': needsUpdating + } + ]); - closePopover = () => { - this.setState({ - isOpen: false, - }); + let title = value; + if (isInvalid) { + title = `Invalid date: ${title}`; + } else if (needsUpdating) { + title = `Update needed: ${title}`; } - render() { - const { - position, - isInvalid, - needsUpdating, - value, - buttonProps, - roundUp, - onChange, - dateFormat, - ...rest - } = this.props; - - const classes = classNames([ - 'euiDatePopoverButton', - `euiDatePopoverButton--${position}`, - { - 'euiDatePopoverButton-isSelected': this.state.isOpen, - 'euiDatePopoverButton-isInvalid': isInvalid, - 'euiDatePopoverButton-needsUpdating': needsUpdating - } - ]); + const button = ( + + ); - let title = value; - if (isInvalid) { - title = `Invalid date: ${title}`; - } else if (needsUpdating) { - title = `Update needed: ${title}`; - } - - const button = ( - - ); - - return ( - - - - ); - } + return ( + + + + ); } + +EuiDatePopoverButton.propTypes = { + position: PropTypes.oneOf(['start', 'end']), + isInvalid: PropTypes.bool, + needsUpdating: PropTypes.bool, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + dateFormat: PropTypes.string.isRequired, + roundUp: PropTypes.bool, + isOpen: PropTypes.bool.isRequired, + onPopoverToggle: PropTypes.func.isRequired, + onPopoverClose: PropTypes.func.isRequired, +}; 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 54ea8557951..49d1db34470 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 @@ -139,6 +139,8 @@ export class EuiSuperDatePicker extends Component { isInvalid: isRangeInvalid(start, end), hasChanged: false, showPrettyDuration: showPrettyDuration(start, end, commonlyUsedRanges), + isStartDatePopoverOpen: false, + isEndDatePopoverOpen: false, }; } @@ -195,6 +197,26 @@ export class EuiSuperDatePicker extends Component { this.setState({ showPrettyDuration: false }); } + onStartDatePopoverToggle = () => { + this.setState(prevState => { + return { isStartDatePopoverOpen: !prevState.isStartDatePopoverOpen }; + }); + } + + onStartDatePopoverClose = () => { + this.setState({ isStartDatePopoverOpen: false }); + } + + onEndDatePopoverToggle = () => { + this.setState(prevState => { + return { isEndDatePopoverOpen: !prevState.isEndDatePopoverOpen }; + }); + } + + onEndDatePopoverClose = () => { + this.setState({ isEndDatePopoverOpen: false }); + } + renderDatePickerRange = () => { const { start, @@ -220,7 +242,9 @@ export class EuiSuperDatePicker extends Component { ); } - if (this.state.showPrettyDuration) { + if (this.state.showPrettyDuration + && !this.state.isStartDatePopoverOpen + && !this.state.isEndDatePopoverOpen) { return ( } endDateControl={ @@ -265,6 +292,9 @@ export class EuiSuperDatePicker extends Component { value={end} dateFormat={this.props.dateFormat} roundUp + isOpen={this.state.isEndDatePopoverOpen} + onPopoverToggle={this.onEndDatePopoverToggle} + onPopoverClose={this.onEndDatePopoverClose} /> } /> From 3e754114ef705554a63f2c04c6b9e7dc8b7475e7 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 29 Jan 2019 15:44:10 -0700 Subject: [PATCH 2/2] change log --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6c22425b22..8ef93486419 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ **Bug fixes** - Fixed popover & tooltip positioning to properly account for arrow buffer ([#1490](https://github.com/elastic/eui/pull/1490)) +- Fixed `EuiSuperDatePicker` unexpectedly closing start and end date popovers ([#1494](https://github.com/elastic/eui/pull/1494)) ## [`6.7.3`](https://github.com/elastic/eui/tree/v6.7.3)