IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

grafana/ui: Fix modal component (#19987)

Browse Source 
* Fix modal

* Fix test message
This commit is contained in:
Andrej Ocenas 2019-10-25 09:41:58 +02:00 committed by GitHub
parent fc08c26025
commit fc1ded5026
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/grafana-ui/src/components/Modal/Modal.test.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { mount } from 'enzyme';
import { Modal } from './Modal';
describe('Modal', () => {
it('renders without error', () => {
mount(<Modal title={'Some Title'} isOpen={true} />);
});
it('renders nothing by default or when isOpen is false', () => {
const wrapper = mount(<Modal title={'Some Title'} />);
expect(wrapper.html()).toBe(null);
wrapper.setProps({ ...wrapper.props(), isOpen: false });
expect(wrapper.html()).toBe(null);
});
it('renders correct contents', () => {
const wrapper = mount(
<Modal title={'Some Title'} isOpen={true}>
<div id={'modal-content'}>Content</div>
</Modal>
);
expect(wrapper.find('div#modal-content').length).toBe(1);
expect(wrapper.contains('Some Title')).toBeTruthy();
});
});

27
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import { Portal } from '../Portal/Portal';
import { css, cx } from 'emotion';
import { GrafanaTheme } from '../../types/theme';
import { ThemeContext } from '../../themes/ThemeContext';
import { stylesFactory, withTheme } from '../../themes';
import { GrafanaTheme } from '../../types';
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
modal: css`
position: fixed;
z-index: ${theme.zIndex.modal};
@ -27,8 +27,8 @@ const getStyles = (theme: GrafanaTheme) => ({
right: 0;
bottom: 0;
left: 0;
z-index: ${theme.zIndex.modalBackdrop}
background-color: ${theme.colors.bodyBg}
z-index: ${theme.zIndex.modalBackdrop};
background-color: ${theme.colors.bodyBg};
opacity: 0.8;
backdrop-filter: blur(4px);
`,
@ -50,19 +50,20 @@ const getStyles = (theme: GrafanaTheme) => ({
modalContent: css`
padding: calc(${theme.spacing.d} * 2);
`,
});
}));
interface Props {
title: string | JSX.Element;
theme: GrafanaTheme;
isOpen?: boolean;
onDismiss?: () => void;
// If not set will call onDismiss if that is set.
onClickBackdrop?: () => void;
}
export class Modal extends React.PureComponent<Props> {
static contextType = ThemeContext;
context!: React.ContextType<typeof ThemeContext>;
export class UnthemedModal extends React.PureComponent<Props> {
onDismiss = () => {
if (this.props.onDismiss) {
this.props.onDismiss();
@ -74,8 +75,8 @@ export class Modal extends React.PureComponent<Props> {
};
render() {
const { title, isOpen = false } = this.props;
const styles = getStyles(this.context);
const { title, isOpen = false, theme } = this.props;
const styles = getStyles(theme);
if (!isOpen) {
return null;
@ -97,3 +98,5 @@ export class Modal extends React.PureComponent<Props> {
);
}
}
export const Modal = withTheme(UnthemedModal);