Modal

src/containers/dialogs/Modal/index.tsx

@@ -0,0 +1,55 @@
+import React, { Attributes, FC, useCallback } from "react";
+import * as styles from "./styles.scss";
+import { IState } from "~/redux/store";
+import * as ACTIONS from "~/redux/modal/actions";
+import { connect } from "react-redux";
+import { DIALOG_CONTENT } from "~/redux/modal/constants";
+import ReactDOM from "react-dom";
+
+const mapStateToProps = ({ modal }: IState) => ({ ...modal });
+const mapDispatchToProps = {
+  modalSetShown: ACTIONS.modalSetShown,
+  modalSetDialog: ACTIONS.modalSetDialog,
+  modalShowDialog: ACTIONS.modalShowDialog
+};
+
+type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
+
+const ModalUnconnected: FC<IProps> = ({
+  modalSetShown,
+  modalSetDialog,
+  modalShowDialog,
+  is_shown,
+  dialog
+}) => {
+  const onRequestClose = useCallback(() => {
+    modalSetShown(false);
+    modalSetDialog(null);
+  }, [modalSetShown, modalSetDialog]);
+
+  if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
+
+  return ReactDOM.createPortal(
+    <div className={styles.fixed}>
+      <div className={styles.overlay} onClick={onRequestClose} />
+      <div className={styles.content}>
+        <div className={styles.content_scroller}>
+          <div className={styles.content_padder}>
+            {React.createElement(DIALOG_CONTENT[dialog], {
+              onRequestClose,
+              onDialogChange: modalShowDialog
+            } as Attributes)}
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+const Modal = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ModalUnconnected);
+
+export { ModalUnconnected, Modal };

src/containers/dialogs/Modal/styles.scss

@@ -0,0 +1,54 @@
+.fixed {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  animation: appear 0.25s forwards;
+}
+
+.content_scroller {
+  width: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+.content_padder {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparentize($color: #000000, $amount: 0.5);
+  cursor: pointer;
+}