From 9220f09fe5ea21a24d10bf1026d1e48736adbb71 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 2 Aug 2019 18:02:36 +0700
Subject: [PATCH] fixing dialogs

---
 .../dialogs/ExampleDialog/index.tsx           | 34 ++++++++++++++++---
 src/containers/dialogs/Modal/index.tsx        |  4 +--
 .../dialogs/ScrollDialog/styles.scss          |  6 ++--
 .../examples/HorizontalExample/styles.scss    |  3 +-
 src/redux/types.ts                            |  6 ++++
 src/utils/hooks.ts                            | 34 +++++++++++++++++++
 6 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/hooks.ts

diff --git a/src/containers/dialogs/ExampleDialog/index.tsx b/src/containers/dialogs/ExampleDialog/index.tsx
index 0ff75375..17159d07 100644
--- a/src/containers/dialogs/ExampleDialog/index.tsx
+++ b/src/containers/dialogs/ExampleDialog/index.tsx
@@ -1,14 +1,40 @@
 import React, { FC } from "react";
 import { ScrollDialog } from "../ScrollDialog";
+import { IDialogProps } from "~/redux/modal/constants";
+import { useCloseOnEscape } from "~/utils/hooks";
+import { Group } from "~/components/containers/Group";
+import { InputText } from "~/components/input/InputText";
+import { Button } from "../../../components/input/Button/index";
+import { Padder } from "~/components/containers/Padder";
+import * as styles from "~/containers/examples/HorizontalExample/styles.scss";
 
-interface IProps {}
+type IProps = IDialogProps & {};
 
-const ExampleDialog: FC<IProps> = ({}) => {
+const ExampleDialog: FC<IProps> = ({ onRequestClose }) => {
   const title = <div>title</div>;
-  const buttons = <div>buttons</div>;
+
+  const buttons = (
+    <Padder>
+      <Group horizontal>
+        <InputText title="Название" />
+
+        <Button title="Сохранить" iconRight="check" />
+      </Group>
+    </Padder>
+  );
+
+  useCloseOnEscape(onRequestClose);
+
   return (
     <ScrollDialog buttons={buttons} width={720}>
-      <div style={{ height: 1400 }}>test</div>
+      <div className={styles.uploads}>
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+      </div>
     </ScrollDialog>
   );
 };
diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx
index e371e0b0..63ba3c29 100644
--- a/src/containers/dialogs/Modal/index.tsx
+++ b/src/containers/dialogs/Modal/index.tsx
@@ -3,7 +3,7 @@ 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 { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants";
 import ReactDOM from "react-dom";
 
 const mapStateToProps = ({ modal }: IState) => ({ ...modal });
@@ -38,7 +38,7 @@ const ModalUnconnected: FC<IProps> = ({
             {React.createElement(DIALOG_CONTENT[dialog], {
               onRequestClose,
               onDialogChange: modalShowDialog
-            } as Attributes)}
+            } as IDialogProps)}
           </div>
         </div>
       </div>
diff --git a/src/containers/dialogs/ScrollDialog/styles.scss b/src/containers/dialogs/ScrollDialog/styles.scss
index a90d3400..c9fc3af3 100644
--- a/src/containers/dialogs/ScrollDialog/styles.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.scss
@@ -39,19 +39,19 @@
   width: 100%;
   height: 64px;
   position: absolute;
-  top: 20px;
+  top: 15px;
   bottom: auto;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $gap;
+  padding: 0 20px;
   box-sizing: border-box;
   z-index: 2;
 }
 
 .bottom {
-  bottom: 20px;
+  bottom: 15px;
   top: auto;
 
   .pan {
diff --git a/src/containers/examples/HorizontalExample/styles.scss b/src/containers/examples/HorizontalExample/styles.scss
index 9d26e32a..f28ba120 100644
--- a/src/containers/examples/HorizontalExample/styles.scss
+++ b/src/containers/examples/HorizontalExample/styles.scss
@@ -26,6 +26,7 @@
   justify-content: stretch;
   flex-direction: column;
   flex: 1;
+
   @include outer_shadow();
 }
 
@@ -69,7 +70,7 @@
 .uploads {
   flex: 1;
   padding: $gap;
-  padding-bottom: 0;
+  // padding-bottom: 0;
   display: grid;
   align-items: center;
   justify-content: center;
diff --git a/src/redux/types.ts b/src/redux/types.ts
index f90f4c5b..42b5e01a 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -1,4 +1,5 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { DIALOGS } from "~/redux/modal/constants";
 
 export type ITag = {
   title: string;
@@ -25,3 +26,8 @@ export type IInputTextProps = DetailedHTMLProps<
 export type IIcon = string;
 
 export type ValueOf<T> = T[keyof T];
+
+export interface IDialogProps {
+  onRequestClose: () => void;
+  onDialogChange: (dialog: ValueOf<typeof DIALOGS>) => void;
+}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
new file mode 100644
index 00000000..f66d9442
--- /dev/null
+++ b/src/utils/hooks.ts
@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
+  const onEscape = useCallback(
+    event => {
+      if (event.key !== "Escape") return;
+      if (
+        ignore_inputs &&
+        (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA")
+      )
+        return;
+
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keyup", onEscape);
+
+    return () => {
+      window.removeEventListener("keyup", onEscape);
+    };
+  }, [onEscape]);
+};
+
+export const useDelayedReady = (setReady: (val: boolean) => void, delay: number = 500) => {
+  useEffect(() => {
+    const timer = setTimeout(() => setReady(true), delay);
+
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, []);
+};