feat(docz-theme-default): add close on esc on playground fullscreen

doczjs · Jul 23, 2018 · 4ebf202 · 4ebf202
1 parent 917f8c9
commit 4ebf202
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -36,6 +36,7 @@
     "react-dom": "^16.2.0",
     "react-emotion": "^9.2.6",
     "react-feather": "^1.1.1",
+    "react-hot-keys": "^1.2.0",
     "react-lightweight-tooltip": "^1.0.0",
     "react-powerplug": "^1.0.0-rc.1",
     "react-syntax-highlighter": "^8.0.1",

diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -11,11 +11,13 @@ import copy from 'copy-text-to-clipboard'
 import { ButtonSwap } from './ButtonSwap'
 import { ButtonLink } from './Button'
 
+const TOP_PADDING = '25px'
+
 const PrismTheme = styled('pre')`
   ${p => p.theme.prismTheme};
   ${p => p.theme.mq(p.theme.styles.pre)};
   overflow-y: hidden;
-  padding: 30px;
+  padding: ${TOP_PADDING} 20px;
   margin: 0;
   flex: 1;
 `
@@ -46,7 +48,7 @@ const Wrapper = styled('div')`
 
   .react-syntax-highlighter-line-number {
     display: block;
-    padding: 0 15px;
+    padding: 0 10px;
     opacity: 0.3;
     text-align: right;
   }
@@ -56,7 +58,7 @@ const Actions = styled('div')`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 10px;
+  padding: 5px 10px;
 `
 
 export const ActionButton = styled(ButtonSwap)`
@@ -90,7 +92,7 @@ export const ClipboardAction: SFC<{ content: string }> = ({ content }) => (
 const Nullable: SFC = ({ children }) => <Fragment>{children}</Fragment>
 
 const linesStyle = (colors: any) => ({
-  padding: '30px 0',
+  padding: `${TOP_PADDING} 0`,
   borderRight: `1px solid ${colors.border}`,
   background: rgba(colors.background, 0.5),
   left: 0,
@@ -115,7 +117,6 @@ export class Pre extends Component<PreProps> {
               language="javascript"
               showLineNumbers
               useInlineStyles={false}
-              lineProps={{ class: 'helo' }}
               lineNumberContainerStyle={linesStyle(config.colors)}
               PreTag={Nullable}
               CodeTag={getCode(children)}

diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx
@@ -4,29 +4,34 @@ import { RenderComponent } from 'docz'
 import { Toggle } from 'react-powerplug'
 import lighten from 'polished/lib/color/lighten'
 import darken from 'polished/lib/color/darken'
-import Resizable from 're-resizable'
 import Maximize from 'react-feather/dist/icons/maximize'
 import Minimize from 'react-feather/dist/icons/minimize'
+import Resizable from 're-resizable'
+import Hotkeys from 'react-hot-keys'
 import styled, { css } from 'react-emotion'
 
 import { Pre as PreBase, ActionButton, ClipboardAction } from './Pre'
 
-const HANDLE_WIDTH = 24
+const HANDLE_WIDTH = 20
 
 interface WrapperProps {
   full: boolean
 }
 
+const whenFull = (on: any, off: any) => (p: WrapperProps) => (p.full ? on : off)
+
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
-  z-index: ${(p: WrapperProps) => (p.full ? 99999 : 0)};
-  position: ${(p: WrapperProps) => (p.full ? 'fixed' : 'initial')};
+  z-index: ${whenFull(99999, 0)};
+  position: ${whenFull('fixed', 'initial')};
   top: 0;
   left: 0;
-  height: ${(p: WrapperProps) => (p.full ? '100vh' : '100%')};
-  width: ${(p: WrapperProps) =>
-    p.full ? '100vw' : `calc(100% - ${HANDLE_WIDTH - 4}px)`};
+  padding: ${whenFull('20px', '0')};
+  margin: 0 0 30px;
+  height: ${whenFull('100vh', '100%')};
+  width: ${whenFull('100vw', `calc(100% - ${HANDLE_WIDTH - 10}px)`)};
+  background: ${whenFull('rgba(0,0,0,0.5)', 'transparent')};
 `
 
 const Playground = styled('div')`
@@ -39,7 +44,7 @@ const Playground = styled('div')`
 
 const Pre = styled(PreBase)`
   margin: 0;
-  border-radius: ${(p: WrapperProps) => (p.full ? 0 : '0 0 4px 4px')};
+  border-radius: 0 0 4px 4px;
   border-top: 0;
 `
 
@@ -95,30 +100,33 @@ export const Render: RenderComponent = ({
         </Fragment>
       )
 
+      const resizableEnable = {
+        top: false,
+        right: true,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false,
+      }
+
       return (
         <Resizable
           minWidth={320}
           maxWidth="100%"
-          enable={{
-            top: false,
-            right: true,
-            bottom: false,
-            left: false,
-            topRight: false,
-            bottomRight: false,
-            bottomLeft: false,
-            topLeft: false,
-          }}
+          enable={resizableEnable}
+          handleComponent={{ right: Handle }}
         >
-          <Wrapper full={on}>
-            <Playground className={className} style={style}>
-              {component}
-            </Playground>
-            <Pre actions={actions} full={on}>
-              {rawCode}
-            </Pre>
-            {!on && <Handle />}
-          </Wrapper>
+          <Hotkeys keyName="esc" onKeyUp={() => on && toggle()}>
+            <Wrapper full={on}>
+              <Playground className={className} style={style}>
+                {component}
+              </Playground>
+              <Pre actions={actions}>{rawCode}</Pre>
+              {/* {!on && <Handle />} */}
+            </Wrapper>
+          </Hotkeys>
         </Resizable>
       )
     }}

diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
@@ -6,6 +6,7 @@ declare module 'react-feather/dist/icons/clipboard'
 declare module 'react-feather/dist/icons/check'
 declare module 'react-feather/dist/icons/maximize'
 declare module 'react-feather/dist/icons/minimize'
+declare module 'react-hot-keys'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
 declare module 'react-syntax-highlighter/prism-light'