Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | 1x 1x 1x 1x 1x 1x | /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
import { keyframes, css } from '@emotion/react';
import React from 'react';
import CloseIcon from '@lib/components/icons/Close';
interface SimpleModalRenderData {
text: string;
}
export function useSimpleModal() {
const [isOpen, setIsOpen] = React.useState(false);
const [renderData, setRenderData] = React.useState<SimpleModalRenderData>();
const onCloseRef = React.useRef(() => {
setIsOpen(false);
});
const openSimpleModalWithAwait = React.useCallback(
(nextRenderData: SimpleModalRenderData) =>
new Promise((resolve) => {
onCloseRef.current = () => {
setIsOpen(false);
resolve(true);
};
setRenderData(nextRenderData);
setIsOpen(true);
}),
[setRenderData, setIsOpen]
);
const simpleModalProps = React.useMemo(
() => ({
...renderData,
isOpen,
onClose: onCloseRef.current
}),
[renderData, isOpen, setIsOpen]
);
return {
props: simpleModalProps,
openSimpleModalWithAwait
};
}
interface SimpleModalProps {
isOpen: boolean;
onClose: () => void;
text: string;
}
export function SimpleModal({ isOpen, onClose, text }: SimpleModalProps) {
return isOpen ? (
<div css={modalWrapper}>
<div css={backDrop} onClick={onClose}>
<div css={modalBody} onClick={(e) => e.stopPropagation()}>
<div css={closeButton}>
<CloseIcon css={closeButtonIcon} onClick={onClose} />
</div>
<p>{text}</p>
</div>
</div>
</div>
) : null;
}
const showBounce = keyframes`
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
`;
const modalWrapper = css`
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 8px;
`;
const backDrop = css`
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
padding: 0px 16px;
z-index: 10000;
`;
const modalBody = css`
width: 343px;
padding: 16px;
background: #eeeeee;
border: 1px solid #505050;
border-radius: 8px;
text-align: center;
animation: ${showBounce} 0.4s;
`;
const closeButton = css`
display: flex;
justify-content: flex-end;
`;
const closeButtonIcon = css`
color: #505050;
cursor: pointer;
`;
|