feat: refactored json-formatter.scss;

zsmatrix62 · Mar 1, 2022 · a8d3d6e · a8d3d6e
1 parent ff2362e
commit a8d3d6e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/web-src/src/app/tool-blocks/json-formatter.scss b/web-src/src/app/tool-blocks/json-formatter.scss
@@ -3,6 +3,7 @@
   width: 96%;
 }
 
+
 .json-formatter-container {
   height: 100%;
   padding: 0 10px;
@@ -31,20 +32,30 @@
       .cm-block {
         height: 100%;
 
-        .cm-theme-light, .cm-theme-dark, .cm-editor {
-          overflow-y: scroll;
+        .cm-theme-light, .cm-theme-dark, .cm-editor, .cm-scroller {
         }
 
+
         .mod-cm-sider-collapsed {
           .cm-theme-light, .cm-theme-dark, .cm-editor {
             width: calc((100vw - 80px) / 2);
           }
+
+          .cm-content, .cm-line {
+            width: calc((100vw - 80px) / 2 - 43px);
+            //border: red 1px solid;
+          }
         }
 
         .mod-cm-sider-expanded {
-          .cm-theme-light, .cm-theme-dark, .cm-editor {
+          .cm-theme-light, .cm-theme-dark, .cm-editor, .cm-line {
             width: calc((100vw - 260px) / 2);
           }
+
+          .cm-content, .cm-line {
+            width: calc((100vw - 250px) / 2 - 46px);
+            //border: red 1px solid;
+          }
         }
 
         .mod-cm-in-tauri {

diff --git a/web-src/src/app/tool-blocks/json-formatter.tsx b/web-src/src/app/tool-blocks/json-formatter.tsx
@@ -1,4 +1,4 @@
-import {Banner, Button, Col, Input, Layout, Row, Select, SideSheet, Space, Toast} from "@douyinfe/semi-ui";
+import {Banner, Button, Col, Input, Row, Select, SideSheet, Space, Toast} from "@douyinfe/semi-ui";
 import "./json-formatter.scss"
 import {IconArrowUp, IconCopy, IconHelpCircle, IconLayers} from "@douyinfe/semi-icons";
 import * as React from "react";
@@ -91,7 +91,6 @@ export const JsonFormatterBlock = () => {
     const [jsonPathValue, setJsonPathValue] = useState<string>('')
     const [showJsonPathGuide, setShowJsonPathGuide] = useState<boolean>(false)
     const api = useContext(APIServiceContext)
-    const jsonFormatterRef = useRef<Layout>(null)
     const inputRef = useRef<HTMLTextAreaElement>(null)
     const jsonPathRef = useRef<HTMLInputElement>(null)
     const [isAPILoading, setIsAPILoading] = useObservableState<boolean>(obs => {
@@ -201,6 +200,16 @@ export const JsonFormatterBlock = () => {
 
     const isSidebarCollapsed = useObservableState(Pref.getInstance().toolsSiderCollapsed.$)
 
+    // const cmRef = useRef<ReactCodeMirrorRef>(null);
+
+    // useEffect(() => {
+    //     if (ref?.current?.view) {
+    //         console.log("reconfigure");
+    //         ref.current.view.dispatch({
+    //             filter: true
+    //         });
+    //     }
+    // });
 
     // noinspection RequiredAttributes
     return (
@@ -272,6 +281,7 @@ export const JsonFormatterBlock = () => {
                                         `} type={"flex"} gutter={10}>
                                             <Row>
                                                 <ReactCodeMirror
+                                                    // ref={cmRef}
                                                     value={outputValue}
                                                     lang="json"
                                                     extensions={[json()]}

diff --git a/web-src/src/index.scss b/web-src/src/index.scss
@@ -12,6 +12,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body, html {
+  overflow: hidden;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
   monospace;