diff --git a/ui/src/dashboards/components/template_variables/Manager.js b/ui/src/dashboards/components/template_variables/Manager.js index d1360cf050..3432b9f758 100644 --- a/ui/src/dashboards/components/template_variables/Manager.js +++ b/ui/src/dashboards/components/template_variables/Manager.js @@ -241,7 +241,7 @@ TemplateVariableManagerWrapper.propTypes = { }) ), onRunQueryFailure: func.isRequired, - onDismissOverlay: func.isRequired, + onDismissOverlay: func, } export default TemplateVariableManagerWrapper diff --git a/ui/src/shared/actions/overlayTechnology.ts b/ui/src/shared/actions/overlayTechnology.ts index 060da329f6..1d922df550 100644 --- a/ui/src/shared/actions/overlayTechnology.ts +++ b/ui/src/shared/actions/overlayTechnology.ts @@ -1,4 +1,14 @@ -export const showOverlay = (overlayNode, options) => ({ +import {ReactElement} from 'react' + +type OverlayNode = ReactElement + +interface Options { + dismissOnClickOutside?: boolean + dismissOnEscape?: boolean + transitionTime?: number +} + +export const showOverlay = (overlayNode: OverlayNode, options: Options) => ({ type: 'SHOW_OVERLAY', payload: {overlayNode, options}, }) diff --git a/ui/src/shared/components/OverlayTechnology.tsx b/ui/src/shared/components/OverlayTechnology.tsx index cdb36adb78..30fee0967f 100644 --- a/ui/src/shared/components/OverlayTechnology.tsx +++ b/ui/src/shared/components/OverlayTechnology.tsx @@ -5,15 +5,11 @@ import {ErrorHandling} from 'src/shared/decorators/errors' import {dismissOverlay} from 'src/shared/actions/overlayTechnology' -interface Options { +interface Props { + overlayNode?: ReactElement dismissOnClickOutside?: boolean dismissOnEscape?: boolean transitionTime?: number -} - -interface Props { - overlayNode?: ReactElement - options: Options handleDismissOverlay: () => void } @@ -23,6 +19,12 @@ interface State { @ErrorHandling class Overlay extends PureComponent { + public static defaultProps: Partial = { + dismissOnClickOutside: false, + dismissOnEscape: false, + transitionTime: 300, + } + private animationTimer: number constructor(props) { @@ -60,20 +62,8 @@ class Overlay extends PureComponent { return `overlay-tech ${visible ? 'show' : ''}` } - private get options(): Options { - const {options} = this.props - const defaultOptions = { - dismissOnClickOutside: false, - dismissOnEscape: false, - transitionTime: 300, - } - - return {...defaultOptions, ...options} - } - public handleClickOutside = () => { - const {handleDismissOverlay, options} = this.props - const {dismissOnClickOutside} = options + const {handleDismissOverlay, dismissOnClickOutside} = this.props if (dismissOnClickOutside) { handleDismissOverlay() @@ -81,7 +71,7 @@ class Overlay extends PureComponent { } public handleAnimateDismiss = () => { - const {transitionTime} = this.options + const {transitionTime} = this.props this.setState({visible: false}) this.animationTimer = window.setTimeout(this.handleDismiss, transitionTime) } @@ -93,9 +83,16 @@ class Overlay extends PureComponent { } } -const mapStateToProps = ({overlayTechnology: {overlayNode, options}}) => ({ +const mapStateToProps = ({ + overlayTechnology: { + overlayNode, + options: {dismissOnClickOutside, dismissOnEscape, transitionTime}, + }, +}) => ({ overlayNode, - options, + dismissOnClickOutside, + dismissOnEscape, + transitionTime, }) const mapDispatchToProps = dispatch => ({ diff --git a/ui/src/shared/reducers/overlayTechnology.ts b/ui/src/shared/reducers/overlayTechnology.ts index 30a9ce4360..284d4c32eb 100644 --- a/ui/src/shared/reducers/overlayTechnology.ts +++ b/ui/src/shared/reducers/overlayTechnology.ts @@ -2,6 +2,7 @@ const initialState = { options: { dismissOnClickOutside: false, dismissOnEscape: false, + transitionTime: 300, }, overlayNode: null, }