From f1937b2c4b307a3f13361ca097ee467e8eb94872 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 5 Oct 2020 14:46:05 +0300
Subject: [PATCH] use custom hook for resize in progress
---
editors/editoria/src/Editoria.js | 72 +++++++++++++++++++++-----------
1 file changed, 47 insertions(+), 25 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index a44c0a09c..f77fd9490 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
import { createGlobalStyle } from 'styled-components';
import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
@@ -34,31 +34,53 @@ const user = {
userId: '1234',
username: 'demo',
};
+console.log(config);
+const Editoria = () => {
+ const [width, height] = useWindowSize();
+ if (width < 600) {
+ return (
+ <>
+ <GlobalStyle />
+ <Wax
+ config={configMobile}
+ autoFocus
+ placeholder="Type Something..."
+ fileUpload={file => renderImage(file)}
+ value={demo}
+ layout={EditoriaMobileLayout}
+ user={user}
+ />
+ </>
+ );
+ } else {
+ return (
+ <>
+ <GlobalStyle />
+ <Wax
+ config={config}
+ autoFocus
+ placeholder="Type Something..."
+ fileUpload={file => renderImage(file)}
+ value={demo}
+ layout={EditoriaLayout}
+ user={user}
+ />
+ </>
+ );
+ }
+};
-let layout = EditoriaLayout;
-let conf = config;
-
-if (window.innerWidth < 600) {
- layout = EditoriaMobileLayout;
- conf = configMobile;
+function useWindowSize() {
+ const [size, setSize] = useState([0, 0]);
+ useLayoutEffect(() => {
+ function updateSize() {
+ setSize([window.innerWidth, window.innerHeight]);
+ }
+ window.addEventListener('resize', updateSize);
+ updateSize();
+ return () => window.removeEventListener('resize', updateSize);
+ }, []);
+ return size;
}
-const Editoria = () => (
- <Fragment>
- <GlobalStyle />
- <Wax
- config={conf}
- autoFocus
- placeholder="Type Something..."
- fileUpload={file => renderImage(file)}
- value={demo}
- // value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the second paragraph</p><p class="author">This is an author</p>`}
- layout={layout}
- // debug
- // onChange={source => console.log(source)}
- user={user}
- />
- </Fragment>
-);
-
export default Editoria;
--
GitLab