Merge branch 'dev' of github.com:pedronauck/docz into feature/react-n…

…ative * 'dev' of github.com:pedronauck/docz: feat(docz-theme-default): add scrollbar on playground (#279) feat(docz): move docz/docz-core to dev dependency on examples
doczjs · Sep 1, 2018 · 768b58f · 768b58f
2 parents a57ac6d + 0f6ea2a
commit 768b58f
Show file tree

Hide file tree

Showing 15 changed files with 251 additions and 95 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -7,15 +7,15 @@
     "build": "docz build"
   },
   "dependencies": {
-    "docz": "^0.10.3",
-    "docz-core": "^0.10.3",
     "emotion": "^9.2.8",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-emotion": "^9.2.8"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
+    "docz-core": "^0.10.3",
     "babel-plugin-emotion": "^9.2.8"
   }
 }
diff --git a/examples/css-less/package.json b/examples/css-less/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "docz": "^0.10.3",
-    "docz-core": "^0.10.3",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
+    "docz-core": "^0.10.3",
     "docz-plugin-css": "^0.10.3"
   }
 }
diff --git a/examples/css-postcss/package.json b/examples/css-postcss/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "docz": "^0.10.3",
-    "docz-core": "^0.10.3",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
+    "docz-core": "^0.10.3",
     "docz-plugin-css": "^0.10.3"
   }
 }
diff --git a/examples/css-sass/package.json b/examples/css-sass/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "docz": "^0.10.3",
-    "docz-core": "^0.10.3",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
+    "docz-core": "^0.10.3",
     "docz-plugin-css": "^0.10.3"
   }
 }
diff --git a/examples/css-stylus/package.json b/examples/css-stylus/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "docz": "^0.10.3",
-    "docz-core": "^0.10.3",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
+    "docz-core": "^0.10.3",
     "docz-plugin-css": "^0.10.3"
   }
 }
diff --git a/examples/flow/package.json b/examples/flow/package.json
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "@babel/preset-flow": "^7.0.0",
-    "docz": "^0.10.3",
     "emotion": "^9.2.8",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-emotion": "^9.2.8"
   },
   "devDependencies": {
+    "docz": "^0.10.3",
     "babel-plugin-emotion": "^9.2.8",
     "flow-bin": "^0.79.1",
     "flow-typed": "^2.5.1"

diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -41,6 +41,7 @@
     "react-feather": "^1.1.1",
     "react-lightweight-tooltip": "^1.0.0",
     "react-live": "^1.11.0",
+    "react-perfect-scrollbar": "^1.2.0",
     "react-powerplug": "^1.0.0-rc.1",
     "webfontloader": "^1.6.28"
   },

diff --git a/packages/docz-theme-default/src/components/ui/Editor/index.tsx b/packages/docz-theme-default/src/components/ui/Editor/index.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react'
-import { SFC } from 'react'
+import { SFC, Component } from 'react'
 import { ThemeConfig } from 'docz'
-import { Value } from 'react-powerplug'
 import styled from 'react-emotion'
 import rgba from 'polished/lib/color/rgba'
 import BaseCheck from 'react-feather/dist/icons/check'
 import Clipboard from 'react-feather/dist/icons/clipboard'
 import { Controlled as CodeMirror } from 'react-codemirror2'
+import PerfectScrollbar from 'react-perfect-scrollbar'
 import copy from 'copy-text-to-clipboard'
 import get from 'lodash.get'
 
 import { ButtonSwap } from '../ButtonSwap'
 import { ButtonLink } from '../Button'
 import * as themes from '../../../styles/codemirror'
 
+import './ps-scrollbar'
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/jsx/jsx'
@@ -38,22 +39,33 @@ const getChildren = (children: any) =>
 const Wrapper = styled('div')`
   margin: 30px 0;
   position: relative;
-  overflow-y: auto;
+  width: 100%;
+  border: 1px solid ${p => p.theme.docz.colors.border};
+  border-radius: 3px;
+`
+
+const Scrollbar = styled(PerfectScrollbar)`
+  overflow: auto;
+  position: relative;
+  max-height: 360px;
+
+  .ps__rail-y {
+    z-index: 9;
+    opacity: 0.4;
+  }
 `
 
 const EditorStyled = styled(CodeMirror)`
   ${themes.dark()};
   ${themes.light()};
   ${p => p.theme.docz.mq(p.theme.docz.styles.pre)};
   position: relative;
-  border-radius: 5px;
-  border: 1px solid ${p => p.theme.docz.colors.border};
-  overflow-y: auto;
+  border-radius: 3px;
   flex: 1;
 
   .CodeMirror {
     max-width: 100%;
-    height: auto;
+    height: 100%;
   }
 
   .CodeMirror pre {
@@ -125,7 +137,7 @@ export const ClipboardAction: SFC<ClipboardActionProps> = ({
   </ActionButton>
 )
 
-interface PreProps {
+interface EditorProps {
   children: any
   className?: string
   editorClassName?: string
@@ -139,73 +151,90 @@ interface PreProps {
   withLastLine?: boolean
 }
 
-export const Editor: SFC<PreProps> = ({
-  mode,
-  children,
-  actions,
-  onChange,
-  className,
-  editorClassName,
-  language: defaultLanguage,
-  withLastLine,
-  ...props
-}) => {
-  const code = getChildren(children)
-  const language = defaultLanguage || getLanguage(children)
-
-  const options = {
-    ...props,
-    tabSize: 2,
-    mode: language || mode,
-    lineNumbers: true,
-    lineWrapping: true,
-    autoCloseTags: true,
-    theme: 'docz-light',
+interface EditorState {
+  code: string
+}
+
+export class Editor extends Component<EditorProps, EditorState> {
+  public static defaultProps = {
+    mode: 'js',
+    readOnly: true,
+    matchBrackets: true,
+    indentUnit: 2,
   }
 
-  return (
-    <Wrapper className={className}>
-      <ThemeConfig>
-        {config => (
-          <Value initial={code}>
-            {({ set, value }: any) => (
-              <EditorStyled
-                value={value}
-                className={editorClassName}
-                editorDidMount={(editor: any) => {
-                  if (editor && !withLastLine && props.readOnly) {
-                    const lastLine = editor.lastLine()
-                    editor.doc.replaceRange(
-                      '',
-                      { line: lastLine - 1 },
-                      { line: lastLine }
-                    )
-                  }
-                }}
-                onBeforeChange={(editor: any, data: any, value: string) => {
-                  onChange && onChange(value)
-                  set(value)
-                }}
-                options={{
-                  ...options,
-                  theme:
-                    config && config.themeConfig
-                      ? config.themeConfig.codemirrorTheme
-                      : options.theme,
-                }}
-              />
-            )}
-          </Value>
-        )}
-      </ThemeConfig>
-      <Actions>{actions || <ClipboardAction content={code} />}</Actions>
-    </Wrapper>
-  )
-}
+  public state = {
+    code: getChildren(this.props.children),
+  }
+
+  public render(): React.ReactNode {
+    const { code } = this.state
+    const {
+      mode,
+      children,
+      actions,
+      onChange,
+      className,
+      editorClassName,
+      language: defaultLanguage,
+      ...props
+    } = this.props
+
+    const language = defaultLanguage || getLanguage(children)
+    const options = {
+      ...props,
+      tabSize: 2,
+      mode: language || mode,
+      lineNumbers: true,
+      lineWrapping: true,
+      autoCloseTags: true,
+      theme: 'docz-light',
+    }
+
+    const editorProps = (config: any) => ({
+      value: this.state.code,
+      className: editorClassName,
+      editorDidMount: this.removeLastLine,
+      onBeforeChange: this.handleChange,
+      options: {
+        ...options,
+        theme:
+          config && config.themeConfig
+            ? config.themeConfig.codemirrorTheme
+            : options.theme,
+      },
+    })
+
+    const scrollbarOpts = {
+      wheelSpeed: 2,
+      wheelPropagation: true,
+      minScrollbarLength: 20,
+      suppressScrollX: true,
+    }
+
+    return (
+      <Wrapper className={className}>
+        <ThemeConfig>
+          {config => (
+            <Scrollbar option={scrollbarOpts}>
+              <EditorStyled {...editorProps(config)} />
+            </Scrollbar>
+          )}
+        </ThemeConfig>
+        <Actions>{actions || <ClipboardAction content={code} />}</Actions>
+      </Wrapper>
+    )
+  }
+
+  private removeLastLine = (editor: any) => {
+    if (editor && !this.props.withLastLine && this.props.readOnly) {
+      const lastLine = editor.lastLine()
+      editor.doc.replaceRange('', { line: lastLine - 1 }, { line: lastLine })
+    }
+  }
 
-Editor.defaultProps = {
-  mode: 'js',
-  readOnly: true,
-  matchBrackets: true,
-  indentUnit: 2,
+  private handleChange = (editor: any, data: any, code: string) => {
+    this.props.onChange && this.props.onChange(code)
+    this.setState({ code })
+  }
 }