Modal

src/containers/App.tsx

@@ -13,36 +13,41 @@ import { EditorExample } from "~/containers/examples/EditorExample";
 import { HorizontalExample } from "~/containers/examples/HorizontalExample";
 import { Sprites } from "~/sprites/Sprites";
 import { URLS } from "~/constants/urls";
+import { Modal } from "~/containers/dialogs/Modal";
+import { selectModal } from "~/redux/modal/selectors";
+import { BlurWrapper } from "../components/containers/BlurWrapper/index";
 
-interface IAppProps {}
-interface IAppState {}
+const mapStateToProps = selectModal;
+const mapDispatchToProps = {};
 
-class Component extends React.Component<IAppProps, IAppState> {
+type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
+
+class Component extends React.Component<IProps, {}> {
   render() {
     return (
       <ConnectedRouter history={history}>
-        <MainLayout>
-          <Sprites />
+        <BlurWrapper is_blurred={this.props.is_shown}>
+          <MainLayout>
+            <Modal />
+            <Sprites />
 
-          <Switch>
-            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-            <Route path="/examples/horizontal" component={HorizontalExample} />
-            <Route exact path={URLS.BASE} component={FlowLayout} />
+            <Switch>
+              <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+              <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+              <Route path="/examples/horizontal" component={HorizontalExample} />
+              <Route exact path={URLS.BASE} component={FlowLayout} />
 
-            <Route path={URLS.AUTH.LOGIN} component={LoginLayout} />
+              <Route path={URLS.AUTH.LOGIN} component={LoginLayout} />
 
-            <Redirect to="/" />
-          </Switch>
-        </MainLayout>
+              <Redirect to="/" />
+            </Switch>
+          </MainLayout>
+        </BlurWrapper>
       </ConnectedRouter>
     );
   }
 }
 
-const mapStateToProps = (state, props) => ({});
-const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps

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;
+}

src/containers/examples/HorizontalExample/styles.scss

@@ -12,6 +12,7 @@
   flex-direction: column;
   justify-content: center;
   background: darken($content_bg, 4%);
+  box-shadow: transparentize(black, 0.7) 0 10px 5px;
 }
 
 .editor {
@@ -29,7 +30,6 @@
 }
 
 .panel {
-
 }
 
 .features {
@@ -78,7 +78,7 @@
 
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
-  @media(max-width: 600px) {
+  @media (max-width: 600px) {
     grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
   }
 }