chore: remove now un-used modal component
This commit is contained in:
Nicolas Meienberger
parent
e9590f8806
commit
9647ec9aa9
7 changed files with 0 additions and 282 deletions
|
|
@ -1,37 +0,0 @@
|
|||
@keyframes zoomIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dimmedBackground {
|
||||
from {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
to {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.dimmedBackground {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
animation-name: dimmedBackground;
|
||||
animation-duration: 0.2s;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
animation-name: zoomIn;
|
||||
animation-duration: 0.25s;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: spring;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import React from 'react';
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
import { fireEvent, render } from '../../../../../tests/test-utils';
|
||||
import { Modal } from './Modal';
|
||||
import { ModalBody } from './ModalBody';
|
||||
import { ModalFooter } from './ModalFooter';
|
||||
import { ModalHeader } from './ModalHeader';
|
||||
|
||||
describe('Modal component', () => {
|
||||
it('should render without errors', () => {
|
||||
const { container } = render(
|
||||
<Modal onClose={() => {}}>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not be visible by default', () => {
|
||||
const { queryByTestId } = render(
|
||||
<Modal onClose={() => {}}>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
// display should be none
|
||||
expect(queryByTestId('modal')).toHaveStyle('display: none');
|
||||
});
|
||||
|
||||
it('should be visible when `isOpen` prop is true', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
// display should be block
|
||||
expect(getByTestId('modal')).toHaveStyle('display: block');
|
||||
});
|
||||
|
||||
it('should not be visible when `isOpen` prop is false', () => {
|
||||
const { queryByTestId } = render(
|
||||
<Modal onClose={() => {}}>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
expect(queryByTestId('modal')).toHaveStyle('display: none');
|
||||
});
|
||||
|
||||
it('should call the `onClose` prop when the close button is clicked', () => {
|
||||
const onClose = jest.fn();
|
||||
const { getByLabelText } = render(
|
||||
<Modal onClose={onClose} isOpen>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
fireEvent.click(getByLabelText('Close'));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call the `onClose` callback when user clicks outside of the modal', () => {
|
||||
const onClose = jest.fn();
|
||||
const { container } = render(
|
||||
<Modal onClose={onClose} isOpen>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
fireEvent.click(container);
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should have the correct `size` class when the `size` prop is passed', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen size="sm">
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal')).toHaveClass('modal-sm');
|
||||
});
|
||||
|
||||
it('should have the correct `type` class when the `type` prop is passed', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen type="primary">
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal-status')).toHaveClass('bg-primary');
|
||||
expect(getByTestId('modal-status')).not.toHaveClass('d-none');
|
||||
});
|
||||
|
||||
it('should render the modal content as a child of the modal', () => {
|
||||
const { getByTestId, getByText } = render(
|
||||
<Modal onClose={() => {}} isOpen>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal')).toContainElement(getByText('Test modal content'));
|
||||
});
|
||||
|
||||
it('should call the `onClose` callback when the escape key is pressed', () => {
|
||||
const onClose = jest.fn();
|
||||
render(
|
||||
<Modal onClose={onClose} isOpen>
|
||||
<p>Test modal content</p>
|
||||
</Modal>,
|
||||
);
|
||||
fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should correctly render with ModalBody', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen>
|
||||
<ModalBody>
|
||||
<p>Test modal content</p>
|
||||
</ModalBody>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal-body')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should correctly render with ModalFooter', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen>
|
||||
<ModalFooter>
|
||||
<p>Test modal content</p>
|
||||
</ModalFooter>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal-footer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should correctly render with ModalHeader', () => {
|
||||
const { getByTestId } = render(
|
||||
<Modal onClose={() => {}} isOpen>
|
||||
<ModalHeader>
|
||||
<p>Test modal content</p>
|
||||
</ModalHeader>
|
||||
</Modal>,
|
||||
);
|
||||
expect(getByTestId('modal-header')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import styles from './Modal.module.scss';
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactNode;
|
||||
isOpen?: boolean;
|
||||
onClose: () => void;
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
type?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
|
||||
}
|
||||
|
||||
export const Modal: React.FC<IProps> = ({ children, isOpen, onClose, size = 'lg', type }) => {
|
||||
const style = { display: 'none' };
|
||||
|
||||
if (isOpen) {
|
||||
style.display = 'block';
|
||||
}
|
||||
|
||||
const [modal, setModal] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
// On click outside
|
||||
const handleClickOutside = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
if (modal && !modal.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[modal, onClose],
|
||||
);
|
||||
|
||||
// On click outside
|
||||
useEffect(() => {
|
||||
document.addEventListener('click', handleClickOutside, true);
|
||||
return () => document.removeEventListener('click', handleClickOutside, true);
|
||||
}, [handleClickOutside]);
|
||||
|
||||
// Close on escape
|
||||
const handleEscape = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[onClose],
|
||||
);
|
||||
|
||||
// Close on escape
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleEscape, true);
|
||||
return () => document.removeEventListener('keydown', handleEscape, true);
|
||||
}, [handleEscape]);
|
||||
|
||||
return (
|
||||
<div data-testid="modal" className={clsx('modal modal-sm', styles.dimmedBackground)} tabIndex={-1} style={style} role="dialog">
|
||||
<div ref={setModal} className={clsx(`modal-dialog modal-dialog-centered modal-${size}`, styles.zoomIn)} role="document">
|
||||
<div className="shadow modal-content">
|
||||
<button data-testid="modal-close-button" type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={onClose} />
|
||||
<div data-testid="modal-status" className={clsx('modal-status', { [`bg-${type}`]: Boolean(type), 'd-none': !type })} />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ModalBody: React.FC<IProps> = ({ children, className }) => (
|
||||
<div data-testid="modal-body" className={clsx('modal-body', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ModalFooter: React.FC<IProps> = ({ children }) => (
|
||||
<div data-testid="modal-footer" className="modal-footer">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ModalHeader: React.FC<IProps> = ({ children }) => (
|
||||
<div data-testid="modal-header" className="modal-header">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export { Modal } from './Modal';
|
||||
export { ModalBody } from './ModalBody';
|
||||
export { ModalFooter } from './ModalFooter';
|
||||
export { ModalHeader } from './ModalHeader';
|
||||
Loading…
Add table
Reference in a new issue