|
|
@@ -1,14 +1,11 @@
|
|
|
import React from "react";
|
|
|
import Head from "next/head";
|
|
|
-import { useRouter } from "next/router";
|
|
|
-import styled from "styled-components";
|
|
|
-import SplitPane from "react-split-pane";
|
|
|
-
|
|
|
-import { Button } from "src/components/Button";
|
|
|
import { defaultJson } from "src/constants/data";
|
|
|
import dynamic from "next/dynamic";
|
|
|
import { LiveEditor } from "src/containers/LiveEditor";
|
|
|
import { Loading } from "src/components/Loading";
|
|
|
+import { Incompatible } from "src/containers/Incompatible";
|
|
|
+import * as Styles from "src/pages/editor/styles";
|
|
|
|
|
|
const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
|
|
|
ssr: false,
|
|
|
@@ -20,116 +17,8 @@ const Sidebar = dynamic(() => import("src/components/Sidebar"), {
|
|
|
loading: () => <Loading message="Loading Sidebar..." />,
|
|
|
});
|
|
|
|
|
|
-const StyledPageWrapper = styled.div`
|
|
|
- display: flex;
|
|
|
-`;
|
|
|
-
|
|
|
-const StyledIncompatible = styled.div`
|
|
|
- display: none;
|
|
|
-
|
|
|
- @media only screen and (max-width: 568px) {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: ${({ theme }) => theme.BLACK_LIGHT};
|
|
|
- color: ${({ theme }) => theme.SILVER};
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- button {
|
|
|
- margin-top: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "Uh, oh!";
|
|
|
- font-weight: 700;
|
|
|
- font-size: 60px;
|
|
|
- opacity: 0.6;
|
|
|
- }
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
-const StyledEditorWrapper = styled.div`
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- @media only screen and (max-width: 568px) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
-const StyledTools = styled.div`
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 15px;
|
|
|
- border-bottom: 1px solid ${({ theme }) => theme.BLACK};
|
|
|
- padding: 4px 16px;
|
|
|
- background: ${({ theme }) => theme.BLACK_SECONDARY};
|
|
|
- color: ${({ theme }) => theme.SILVER};
|
|
|
-`;
|
|
|
-
|
|
|
-const StyledEditor = styled(SplitPane)`
|
|
|
- position: relative !important;
|
|
|
- display: flex;
|
|
|
- background: ${({ theme }) => theme.BLACK_LIGHT};
|
|
|
- height: calc(100vh - 26px) !important;
|
|
|
-
|
|
|
- .Resizer {
|
|
|
- background: #000;
|
|
|
- opacity: 0.2;
|
|
|
- box-sizing: border-box;
|
|
|
- background-clip: padding-box;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer:hover {
|
|
|
- transition: all 2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.horizontal {
|
|
|
- height: 11px;
|
|
|
- margin: -5px 0;
|
|
|
- border-top: 5px solid rgba(255, 255, 255, 0);
|
|
|
- border-bottom: 5px solid rgba(255, 255, 255, 0);
|
|
|
- cursor: row-resize;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.horizontal:hover {
|
|
|
- border-top: 5px solid rgba(0, 0, 0, 0.5);
|
|
|
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.vertical {
|
|
|
- width: 16px;
|
|
|
- margin: 0 -5px;
|
|
|
- border-left: 5px solid rgba(255, 255, 255, 0);
|
|
|
- border-right: 5px solid rgba(255, 255, 255, 0);
|
|
|
- cursor: col-resize;
|
|
|
- z-index: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.vertical:hover {
|
|
|
- border-left: 5px solid rgba(0, 0, 0, 0.5);
|
|
|
- border-right: 5px solid rgba(0, 0, 0, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- .Resizer.disabled:hover {
|
|
|
- border-color: transparent;
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
const Editor: React.FC = () => {
|
|
|
const [json, setJson] = React.useState(JSON.stringify(defaultJson));
|
|
|
- const route = useRouter();
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
const jsonStored = localStorage.getItem("json");
|
|
|
@@ -137,30 +26,27 @@ const Editor: React.FC = () => {
|
|
|
}, []);
|
|
|
|
|
|
return (
|
|
|
- <StyledPageWrapper>
|
|
|
+ <>
|
|
|
<Head>
|
|
|
<title>Editor | JSON Visio</title>
|
|
|
</Head>
|
|
|
- <Sidebar setJson={setJson} />
|
|
|
- <StyledEditorWrapper>
|
|
|
- <StyledTools></StyledTools>
|
|
|
- <StyledEditor
|
|
|
- maxSize={800}
|
|
|
- minSize={300}
|
|
|
- defaultSize={450}
|
|
|
- split="vertical"
|
|
|
- >
|
|
|
- <JsonEditor json={json} setJson={setJson} />
|
|
|
- <LiveEditor json={json} setJson={setJson} />
|
|
|
- </StyledEditor>
|
|
|
- </StyledEditorWrapper>
|
|
|
- <StyledIncompatible>
|
|
|
- This app is not compatible with your device!
|
|
|
- <Button className="incompatible" onClick={() => route.push("/")}>
|
|
|
- Go Back
|
|
|
- </Button>
|
|
|
- </StyledIncompatible>
|
|
|
- </StyledPageWrapper>
|
|
|
+ <Styles.StyledPageWrapper>
|
|
|
+ <Sidebar setJson={setJson} />
|
|
|
+ <Styles.StyledEditorWrapper>
|
|
|
+ <Styles.StyledTools></Styles.StyledTools>
|
|
|
+ <Styles.StyledEditor
|
|
|
+ maxSize={800}
|
|
|
+ minSize={300}
|
|
|
+ defaultSize={450}
|
|
|
+ split="vertical"
|
|
|
+ >
|
|
|
+ <JsonEditor json={json} setJson={setJson} />
|
|
|
+ <LiveEditor json={json} setJson={setJson} />
|
|
|
+ </Styles.StyledEditor>
|
|
|
+ </Styles.StyledEditorWrapper>
|
|
|
+ <Incompatible />
|
|
|
+ </Styles.StyledPageWrapper>
|
|
|
+ </>
|
|
|
);
|
|
|
};
|
|
|
|
AykutSarac