From ee17b72a7fb1c015bd79d594e4357650d1180fb1 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Tue, 6 Aug 2019 18:55:19 +0700
Subject: [PATCH] started editor

---
 src/components/editors/ImageEditor/index.tsx  | 15 ++++++++++
 .../editors/ImageEditor/styles.scss           |  3 ++
 src/containers/dialogs/EditorDialog/index.tsx | 28 ++++++++++---------
 .../dialogs/EditorDialog/styles.scss          | 16 +++++++++++
 4 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 src/components/editors/ImageEditor/index.tsx
 create mode 100644 src/components/editors/ImageEditor/styles.scss
 create mode 100644 src/containers/dialogs/EditorDialog/styles.scss

diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx
new file mode 100644
index 00000000..ccbbb66c
--- /dev/null
+++ b/src/components/editors/ImageEditor/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import * as styles from './styles.scss';
+
+interface IProps {
+  data: INode,
+  setData: (val: INode) => void;
+};
+
+const ImageEditor: FC<IProps> = ({
+}) => (
+    <div className={styles.uploads} />
+  )
+
+export { ImageEditor };
\ No newline at end of file
diff --git a/src/components/editors/ImageEditor/styles.scss b/src/components/editors/ImageEditor/styles.scss
new file mode 100644
index 00000000..ccbe2db8
--- /dev/null
+++ b/src/components/editors/ImageEditor/styles.scss
@@ -0,0 +1,3 @@
+.uploads {
+  min-height: 200px;
+}
\ No newline at end of file
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index adedd234..e4a1d539 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
@@ -6,22 +6,26 @@ 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';
+import * as styles from './styles.scss';
 import { connect } from 'react-redux';
 import { selectNode } from '~/redux/node/selectors';
+import { ImageEditor } from '~/components/editors/ImageEditor';
 
 const mapStateToProps = selectNode;
 const mapDispatchToProps = {};
 
-type IProps = IDialogProps & {};
+type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose }) => {
-  const title = <div>title</div>;
+const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
+  const [data, setData] = useState(editor);
+  const setTitle = useCallback(title => {
+    setData({ ...data, title });
+  }, [setData, data]);
 
   const buttons = (
     <Padder>
       <Group horizontal>
-        <InputText title="Название" />
+        <InputText title="Название" value={data.title} handler={setTitle} />
 
         <Button title="Сохранить" iconRight="check" />
       </Group>
@@ -32,13 +36,11 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose }) => {
 
   return (
     <ScrollDialog buttons={buttons} width={860}>
-      <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 className={styles.editor}>
+        <ImageEditor
+          data={data}
+          setData={setData}
+        />
       </div>
     </ScrollDialog>
   );
diff --git a/src/containers/dialogs/EditorDialog/styles.scss b/src/containers/dialogs/EditorDialog/styles.scss
new file mode 100644
index 00000000..429dac5c
--- /dev/null
+++ b/src/containers/dialogs/EditorDialog/styles.scss
@@ -0,0 +1,16 @@
+.editor {
+  flex: 1;
+  padding: $gap;
+  // padding-bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+  @media (max-width: 600px) {
+    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
+  }
+}
\ No newline at end of file