feat(docz-theme-default): set max lines before scroll editor (#519)

(cherry picked from commit 7bf3803)
doczjs · Dec 17, 2018 · 8d511e5 · 8d511e5
1 parent 30c358b
commit 8d511e5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/packages/docz-theme-default/README.md b/packages/docz-theme-default/README.md
@@ -68,6 +68,10 @@ const config = {
    * Show/hide Playground editor by default
    */
   showPlaygroundEditor: true,
+  /**
+   * Set the numbers of max lines before scroll editor
+   */
+  linesToScrollEditor: 14
   /**
    * Customize codemirror theme
    */

diff --git a/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx b/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx
@@ -1,5 +1,6 @@
 import { jsx } from '@emotion/core'
 import { SFC } from 'react'
+import { ThemeConfig } from 'docz'
 import { Controlled as BaseCodeMirror } from 'react-codemirror2'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 import styled from '@emotion/styled'
@@ -20,7 +21,7 @@ import 'codemirror/addon/fold/xml-fold'
 const Scrollbar = styled(PerfectScrollbar)<any>`
   overflow: auto;
   position: relative;
-  max-height: 360px;
+  max-height: ${p => 25 * p.linesToScroll}px;
 
   .ps__rail-y {
     z-index: 9;
@@ -70,8 +71,15 @@ const scrollbarOpts = {
 }
 
 export const CodeMirror: SFC<any> = props => (
-  <Scrollbar option={scrollbarOpts}>
-    {global}
-    <EditorStyled {...props} />
-  </Scrollbar>
+  <ThemeConfig>
+    {({ themeConfig }) => (
+      <Scrollbar
+        option={scrollbarOpts}
+        linesToScroll={themeConfig.linesToScrollEditor || 14}
+      >
+        {global}
+        <EditorStyled {...props} />
+      </Scrollbar>
+    )}
+  </ThemeConfig>
 )
diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts
@@ -7,4 +7,5 @@ export const config = {
   radii: '2px',
   mode: 'light',
   showPlaygroundEditor: false,
+  linesToScrollEditor: 18,
 }
diff --git a/packages/docz/src/components/Playground.tsx b/packages/docz/src/components/Playground.tsx
@@ -28,12 +28,11 @@ const BasePlayground: SFC<PlaygroundProps> = ({
   __codesandbox,
 }) => {
   if (!components || !components.render) return null
+  const props = { className, style, components }
 
   return (
     <components.render
-      className={className}
-      style={style}
-      components={components}
+      {...props}
       component={Wrapper ? <Wrapper>{children}</Wrapper> : children}
       scope={__scope}
       position={__position}