fixing dialogs

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

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>

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 {

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;

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

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);
+    };
+  }, []);
+};