make react-split-pane works

antvis · Nov 6, 2019 · f4e1ff2 · f4e1ff2
1 parent 5eda89d
commit f4e1ff2
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 40 deletions.
diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json
@@ -24,6 +24,7 @@
     "@babel/standalone": "^7.6.4",
     "@hot-loader/react-dom": "^16.9.0+4.12.11",
     "@types/classnames": "^2.2.9",
+    "@types/codemirror": "^0.0.80",
     "@types/jest": "^24.0.18",
     "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.2",

diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.module.less b/@antv/gatsby-theme-antv/site/components/PlayGround.module.less
@@ -71,11 +71,20 @@
         line-height: 1.5;
         font-size: 13px;
         padding: 8px 16px;
-        height: calc(100% - 54px);
+        height: calc(100% - 37px);
       }
     }
   }
 
+  // 非常关键
+  // 参考：https://codesandbox.io/s/mow7x4zyqx
+  :global {
+    .Pane1,
+    .Pane2 {
+      overflow: auto;
+    }
+  }
+
   .exampleContainerWrapper {
     height: 100%;
     display: flex;

diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.tsx b/@antv/gatsby-theme-antv/site/components/PlayGround.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { UnControlled as CodeMirror } from 'react-codemirror2';
+import { UnControlled as CodeMirrorEditor } from 'react-codemirror2';
+import { Editor } from 'codemirror';
 import { Typography, Icon, Tooltip } from 'antd';
 import debounce from 'lodash/debounce';
 import {
@@ -74,6 +75,7 @@ const PlayGround: React.FC<PlayGroundProps> = ({
   const { t } = useTranslation();
   const fullscreenNode = useRef<HTMLDivElement>(null);
   const playpround = useRef<HTMLDivElement>(null);
+  const cmInstance = useRef<Editor>();
   const [isFullScreen, updateIsFullScreen] = useState(false);
   const [error, setError] = useState<Error | null>();
   const [compiledCode, updateCompiledCode] = useState(babeledSource);
@@ -116,9 +118,51 @@ const PlayGround: React.FC<PlayGroundProps> = ({
     };
   }, []);
 
+  const editor = (
+    <CodeMirrorEditor
+      value={source}
+      options={{
+        mode: 'jsx',
+        theme: 'mdn-like',
+        tabSize: 2,
+        // @ts-ignore
+        styleActiveLine: true, // 当前行背景高亮
+        matchBrackets: true, // 括号匹配
+        autoCloseBrackets: true,
+        autofocus: false,
+        matchTags: {
+          bothTags: true,
+        },
+      }}
+      cursor={{
+        line: -1,
+        ch: -1,
+      }}
+      onChange={(_: any, __: any, value: string) => {
+        updateCurrentSourceCode(value);
+        try {
+          const { code } = transform(value, {
+            filename: relativePath,
+            presets: ['react', 'typescript', 'es2015', 'stage-3'],
+            plugins: ['transform-modules-umd'],
+          });
+          updateCompiledCode(code);
+        } catch (e) {
+          console.error(e);
+          setError(e);
+          return;
+        }
+        setError(null);
+      }}
+      editorDidMount={editor => {
+        cmInstance.current = editor;
+      }}
+    />
+  );
+
   return (
     <div className={styles.playground} ref={fullscreenNode}>
-      <SplitPane split="vertical" minSize={400} defaultSize="calc(50% + 100px)">
+      <SplitPane split="vertical" defaultSize="58%" minSize={100}>
         <div className={styles.preview}>
           {error ? (
             <Result
@@ -140,43 +184,7 @@ const PlayGround: React.FC<PlayGroundProps> = ({
             </Tooltip>
             <Paragraph copyable={{ text: currentSourceCode }} />
           </div>
-          <div className={styles.codemirror}>
-            <CodeMirror
-              value={source}
-              options={{
-                mode: 'jsx',
-                theme: 'mdn-like',
-                tabSize: 2,
-                styleActiveLine: true, // 当前行背景高亮
-                matchBrackets: true, // 括号匹配
-                autoCloseBrackets: true,
-                autofocus: false,
-                matchTags: {
-                  bothTags: true,
-                },
-              }}
-              cursor={{
-                line: -1,
-                ch: -1,
-              }}
-              onChange={(_: any, __: any, value: string) => {
-                updateCurrentSourceCode(value);
-                try {
-                  const { code } = transform(value, {
-                    filename: relativePath,
-                    presets: ['react', 'typescript', 'es2015', 'stage-3'],
-                    plugins: ['transform-modules-umd'],
-                  });
-                  updateCompiledCode(code);
-                } catch (e) {
-                  console.error(e);
-                  setError(e);
-                  return;
-                }
-                setError(null);
-              }}
-            />
-          </div>
+          <div className={styles.codemirror}>{editor}</div>
         </div>
       </SplitPane>
     </div>

diff --git a/yarn.lock b/yarn.lock
@@ -1540,6 +1540,13 @@
   resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
   integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
 
+"@types/codemirror@^0.0.80":
+  version "0.0.80"
+  resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.80.tgz#c047bb30462582615c3d51e5be6155315f764427"
+  integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/configstore@^2.1.1":
   version "2.1.1"
   resolved "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
@@ -1555,6 +1562,11 @@
   resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/estree@*":
+  version "0.0.39"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1714,6 +1726,13 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/tern@*":
+  version "0.23.3"
+  resolved "https://registry.npmjs.org/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
+  integrity sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
   version "6.10.0"
   resolved "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"