mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
grafana/ui: Fix modal component (#19987)
* Fix modal * Fix test message
This commit is contained in:
parent
fc08c26025
commit
fc1ded5026
27
packages/grafana-ui/src/components/Modal/Modal.test.tsx
Normal file
27
packages/grafana-ui/src/components/Modal/Modal.test.tsx
Normal 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();
|
||||||
|
});
|
||||||
|
});
|
@ -1,10 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Portal } from '../Portal/Portal';
|
import { Portal } from '../Portal/Portal';
|
||||||
import { css, cx } from 'emotion';
|
import { css, cx } from 'emotion';
|
||||||
import { GrafanaTheme } from '../../types/theme';
|
import { stylesFactory, withTheme } from '../../themes';
|
||||||
import { ThemeContext } from '../../themes/ThemeContext';
|
import { GrafanaTheme } from '../../types';
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme) => ({
|
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||||
modal: css`
|
modal: css`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: ${theme.zIndex.modal};
|
z-index: ${theme.zIndex.modal};
|
||||||
@ -27,8 +27,8 @@ const getStyles = (theme: GrafanaTheme) => ({
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: ${theme.zIndex.modalBackdrop}
|
z-index: ${theme.zIndex.modalBackdrop};
|
||||||
background-color: ${theme.colors.bodyBg}
|
background-color: ${theme.colors.bodyBg};
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
`,
|
`,
|
||||||
@ -50,19 +50,20 @@ const getStyles = (theme: GrafanaTheme) => ({
|
|||||||
modalContent: css`
|
modalContent: css`
|
||||||
padding: calc(${theme.spacing.d} * 2);
|
padding: calc(${theme.spacing.d} * 2);
|
||||||
`,
|
`,
|
||||||
});
|
}));
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string | JSX.Element;
|
title: string | JSX.Element;
|
||||||
|
theme: GrafanaTheme;
|
||||||
|
|
||||||
isOpen?: boolean;
|
isOpen?: boolean;
|
||||||
onDismiss?: () => void;
|
onDismiss?: () => void;
|
||||||
|
|
||||||
|
// If not set will call onDismiss if that is set.
|
||||||
onClickBackdrop?: () => void;
|
onClickBackdrop?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Modal extends React.PureComponent<Props> {
|
export class UnthemedModal extends React.PureComponent<Props> {
|
||||||
static contextType = ThemeContext;
|
|
||||||
context!: React.ContextType<typeof ThemeContext>;
|
|
||||||
|
|
||||||
onDismiss = () => {
|
onDismiss = () => {
|
||||||
if (this.props.onDismiss) {
|
if (this.props.onDismiss) {
|
||||||
this.props.onDismiss();
|
this.props.onDismiss();
|
||||||
@ -74,8 +75,8 @@ export class Modal extends React.PureComponent<Props> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { title, isOpen = false } = this.props;
|
const { title, isOpen = false, theme } = this.props;
|
||||||
const styles = getStyles(this.context);
|
const styles = getStyles(theme);
|
||||||
|
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
return null;
|
return null;
|
||||||
@ -97,3 +98,5 @@ export class Modal extends React.PureComponent<Props> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const Modal = withTheme(UnthemedModal);
|
||||||
|
Loading…
Reference in New Issue
Block a user