87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import React, { ReactChild } from "react";
|
|
import Modal, { Props } from "react-modal";
|
|
import { useThemeUI, Close } from "theme-ui";
|
|
import { useSpring, animated, config } from "react-spring";
|
|
|
|
type ModalProps = Props & {
|
|
children: ReactChild | ReactChild[];
|
|
allowClose: boolean;
|
|
};
|
|
|
|
function StyledModal({
|
|
isOpen,
|
|
onRequestClose,
|
|
children,
|
|
allowClose,
|
|
style,
|
|
...props
|
|
}: ModalProps) {
|
|
const { theme } = useThemeUI();
|
|
|
|
const openAnimation = useSpring({
|
|
opacity: isOpen ? 1 : 0,
|
|
transform: isOpen ? "scale(1)" : "scale(0.99)",
|
|
config: config.default,
|
|
});
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onRequestClose={onRequestClose}
|
|
style={{
|
|
overlay: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.73)",
|
|
zIndex: 100,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
...(style?.overlay || {}),
|
|
},
|
|
content: {
|
|
backgroundColor: theme.colors.background,
|
|
top: "initial",
|
|
left: "initial",
|
|
bottom: "initial",
|
|
right: "initial",
|
|
maxHeight: "100%",
|
|
...(style?.content || {}),
|
|
} as React.CSSProperties,
|
|
}}
|
|
contentElement={(props, content) => (
|
|
<animated.div {...props} style={{ ...props.style, ...openAnimation }}>
|
|
{content}
|
|
</animated.div>
|
|
)}
|
|
overlayElement={(props, content) => (
|
|
<div
|
|
onDragEnter={(e) => {
|
|
// Prevent drag event from triggering with a modal open
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
{...props}
|
|
>
|
|
{content}
|
|
</div>
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{allowClose && (
|
|
<Close
|
|
m={0}
|
|
sx={{ position: "absolute", top: 0, right: 0 }}
|
|
onClick={onRequestClose}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
StyledModal.defaultProps = {
|
|
allowClose: true,
|
|
style: {},
|
|
};
|
|
|
|
export default StyledModal;
|