Add react-split-pane

antvis · Nov 6, 2019 · 4928c88 · 4928c88
1 parent f2c9876
commit 4928c88
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 66 deletions.
diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json
@@ -79,6 +79,7 @@
     "react-github-corner": "^2.3.0",
     "react-helmet": "^5.2.1",
     "react-i18next": "^11.0.0",
+    "react-split-pane": "^0.1.87",
     "typescript": "^3.6.3"
   },
   "license": "MIT",

diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.module.less b/@antv/gatsby-theme-antv/site/components/PlayGround.module.less
@@ -5,28 +5,26 @@
   padding: 0;
   border: 1px solid #efefef;
   border-radius: 4px;
-  display: flex;
   background: #fff;
   height: @editor-height;
   overflow: hidden;
+  position: relative;
 
   .preview,
   .editor {
     height: 100%;
   }
 
   .preview {
-    flex: 2;
-    border-right: 1px solid #efefef;
     padding: 24px 16px;
     overflow: auto;
     height: 100%;
   }
 
   .editor {
-    flex: 1.5;
     overflow: hidden;
     height: 100%;
+    max-width: 400px;
 
     .toolbar {
       height: 36px;

diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.tsx b/@antv/gatsby-theme-antv/site/components/PlayGround.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react-i18next';
 import { transform } from '@babel/standalone';
 import { Result } from 'antd';
+import SplitPane from 'react-split-pane';
 import styles from './PlayGround.module.less';
 
 const { Paragraph } = Typography;
@@ -117,65 +118,67 @@ const PlayGround: React.FC<PlayGroundProps> = ({
 
   return (
     <div className={styles.playground} ref={fullscreenNode}>
-      <div className={styles.preview}>
-        {error ? (
-          <Result
-            status="error"
-            title={t('演示代码报错，请检查')}
-            subTitle={<pre>{error && error.message}</pre>}
-          />
-        ) : (
-          <div ref={playpround} className={styles.exampleContainerWrapper} />
-        )}
-      </div>
-      <div className={styles.editor}>
-        <div className={styles.toolbar}>
-          <Tooltip title={isFullScreen ? t('离开全屏') : t('进入全屏')}>
-            <Icon
-              type={isFullScreen ? 'fullscreen-exit' : 'fullscreen'}
-              onClick={toggleFullscreen}
+      <SplitPane split="vertical" minSize={400} defaultSize="calc(50% + 100px)">
+        <div className={styles.preview}>
+          {error ? (
+            <Result
+              status="error"
+              title={t('演示代码报错，请检查')}
+              subTitle={<pre>{error && error.message}</pre>}
             />
-          </Tooltip>
-          <Paragraph copyable={{ text: currentSourceCode }} />
+          ) : (
+            <div ref={playpround} className={styles.exampleContainerWrapper} />
+          )}
         </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 className={styles.editor}>
+          <div className={styles.toolbar}>
+            <Tooltip title={isFullScreen ? t('离开全屏') : t('进入全屏')}>
+              <Icon
+                type={isFullScreen ? 'fullscreen-exit' : 'fullscreen'}
+                onClick={toggleFullscreen}
+              />
+            </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>
-      </div>
+      </SplitPane>
     </div>
   );
 };

diff --git a/@antv/gatsby-theme-antv/site/global.less b/@antv/gatsby-theme-antv/site/global.less
@@ -5,3 +5,50 @@ html {
 body {
   overflow-x: hidden;
 }
+
+.Resizer {
+  background: #000;
+  opacity: 0.1;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+
+  &:hover {
+    transition: all 2s ease;
+  }
+
+  &.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%;
+
+    &:hover {
+      border-top: 5px solid rgba(0, 0, 0, 0.5);
+      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  &.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;
+
+    &:hover {
+      border-left: 5px solid rgba(0, 0, 0, 0.5);
+      border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9831,12 +9831,7 @@ lodash.zip@^4.2.0:
   resolved "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz#ec6662e4896408ed4ab6c542a3990b72cc080020"
   integrity sha1-7GZi5IlkCO1KtsVCo5kLcswIACA=
 
-lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.5:
-  version "4.17.15"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lodash@^4.17.15:
+lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.5:
   version "4.17.15"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=
@@ -13202,6 +13197,22 @@ react-slick@~0.25.2:
     lodash.debounce "^4.0.8"
     resize-observer-polyfill "^1.5.0"
 
+react-split-pane@^0.1.87:
+  version "0.1.87"
+  resolved "https://registry.npm.taobao.org/react-split-pane/download/react-split-pane-0.1.87.tgz#a7027ae554abfacca35f5f780288b07fe4ec4cbd"
+  integrity sha1-pwJ65VSr+syjX194Aoiwf+TsTL0=
+  dependencies:
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.0.0"
+
+react-style-proptype@^3.0.0:
+  version "3.2.2"
+  resolved "https://registry.npm.taobao.org/react-style-proptype/download/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha1-2OmY5iznnsNbCHJSuQ8Z8cM5aKA=
+  dependencies:
+    prop-types "^15.5.4"
+
 react-test-renderer@^16.9.0:
   version "16.11.0"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.11.0.tgz#72574566496462c808ac449b0287a4c0a1a7d8f8"