mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import styled from 'styled-components';
|
|
|
|
const DialogModalLayer = styled.div`
|
|
z-index: 9999;
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.6);
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const DialogRoot = styled.div`
|
|
background-color: ${props => props.theme.backgroundColor};
|
|
padding: 16px;
|
|
box-shadow: 6px 6px 20px rgba(0,0,0,0.5);
|
|
margin: 20px;
|
|
min-height: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
`;
|
|
|
|
interface Props {
|
|
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
|
|
renderContent: Function;
|
|
className?: string;
|
|
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
|
|
onClose?: Function;
|
|
}
|
|
|
|
export default function Dialog(props: Props) {
|
|
return (
|
|
<DialogModalLayer className={props.className}>
|
|
<DialogRoot>
|
|
{props.renderContent()}
|
|
</DialogRoot>
|
|
</DialogModalLayer>
|
|
);
|
|
}
|