GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

add split pane to editor

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-06 13:20:15 +03:00
parent a9d7a13656
commit 80c97ba317
3 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -19,6 +19,7 @@
"react-flow-renderer": "^9.7.3",
"react-icons": "^4.3.1",
"react-json-editor-ajrm": "^2.5.13",
"react-split-pane": "^0.1.92",
"styled-components": "^5.3.3",
"usehooks-ts": "^2.3.0"
},
@ -32,6 +33,7 @@
"@types/node": "17.0.13",
"@types/react": "17.0.38",
"@types/react-json-editor-ajrm": "^2.5.2",
"@types/react-splitter-layout": "^3.0.2",
"@types/styled-components": "^5.1.21",
"babel-jest": "^27.4.6",
"enzyme": "^3.11.0",

2
src/containers/LiveEditor/index.tsx
View File

@ -6,7 +6,7 @@ import { FlowWrapper } from "./FlowWrapper";
const StyledLiveEditor = styled.div`
width: 100%;
height: 100%;
border-left: 1px solid ${({ theme }) => theme.SILVER_DARK};
border-left: 3px solid ${({ theme }) => theme.SILVER_DARK};
.react-flow__controls {
display: grid;

67
src/pages/editor/index.tsx
View File

@ -5,6 +5,8 @@ import { Sidebar } from "src/components/Sidebar";
import styled from "styled-components";
import { JsonEditor } from "src/containers/JsonEditor";
import { LiveEditor } from "src/containers/LiveEditor";
import SplitPane from "react-split-pane";
import Head from "next/head";
const StyledPageWrapper = styled.div`
@ -14,7 +16,7 @@ const StyledPageWrapper = styled.div`
const StyledIncompatible = styled.div`
display: none;
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 568px) {
position: fixed;
top: 0;
left: 0;
@ -33,7 +35,7 @@ const StyledIncompatible = styled.div`
}
&::before {
content: 'Uh, oh!';
content: "Uh, oh!";
font-weight: 700;
font-size: 60px;
opacity: 0.6;
@ -44,7 +46,7 @@ const StyledIncompatible = styled.div`
const StyledEditorWrapper = styled.div`
width: 100%;
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 568px) {
display: none;
}
`;
@ -59,10 +61,58 @@ const StyledTools = styled.div`
color: ${({ theme }) => theme.SILVER};
`;
const StyledEditor = styled.div`
const StyledEditor = styled(SplitPane)`
position: relative !important;
display: flex;
background: ${({ theme }) => theme.BLACK_LIGHT};
height: calc(100vh - 46px);
height: calc(100vh - 46px) !important;
.Resizer {
background: #000;
opacity: 0.2;
z-index: 1;
box-sizing: border-box;
background-clip: padding-box;
}
.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: 11px;
margin: 0 -5px;
border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize;
}
.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 = () => {
@ -76,7 +126,12 @@ const Editor: React.FC = () => {
<Sidebar />
<StyledEditorWrapper>
<StyledTools>Editor</StyledTools>
<StyledEditor>
<StyledEditor
maxSize={800}
minSize={300}
defaultSize={450}
split="vertical"
>
<JsonEditor />
<LiveEditor />
</StyledEditor>