Skip to content

Commit

Permalink
chore(gatsby-theme-docz): clean playground style (doczjs#1397)
Browse files Browse the repository at this point in the history
* chore: clean playground style

* Update index.js
mickaelzhang authored Feb 22, 2020
1 parent ab384ee commit 251a1a5
Showing 4 changed files with 88 additions and 62 deletions.
23 changes: 0 additions & 23 deletions core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js

This file was deleted.

61 changes: 61 additions & 0 deletions core/gatsby-theme-docz/src/components/Playground/Wrapper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/** @jsx jsx */
import { useState } from 'react'
import { jsx } from 'theme-ui'
import { useConfig } from 'docz'
import Iframe from 'react-frame-component'
import ReactResizeDetector from 'react-resize-detector'

import * as styles from './styles'

const CLEAR_PADDING = `<style> body { padding: 0; margin: 0; } </style>`
const INITIAL_IFRAME_CONTENT = `<!DOCTYPE html><html><head> ${CLEAR_PADDING} </head><body><div></div></body></html>`

const IframeWrapper = ({ children, style }) => {
const [containerHeight, setHeight] = useState()
return (
<Iframe
initialContent={INITIAL_IFRAME_CONTENT}
sx={{
...styles.wrapper(),
style,
height: containerHeight,
}}
>
{children}
<ReactResizeDetector
handleHeight
onResize={({ height }) => {
setHeight(height)
}}
/>
</Iframe>
)
}

const NormalWrapper = ({ children, style }) => {
return (
<div
sx={{
...styles.wrapper(),
...style,
}}
>
{children}
</div>
)
}

export const Wrapper = ({ children, content, useScoping, showingCode }) => {
const {
themeConfig: { useScopingInPlayground },
} = useConfig()

const Element =
useScoping || useScopingInPlayground ? IframeWrapper : NormalWrapper

return (
<Element style={styles.wrapperBorder(content, showingCode)}>
{children}
</Element>
)
}
45 changes: 12 additions & 33 deletions core/gatsby-theme-docz/src/components/Playground/index.js
Original file line number Diff line number Diff line change
@@ -5,9 +5,8 @@ import { useConfig } from 'docz'
import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
import { Resizable } from 're-resizable'
import copy from 'copy-text-to-clipboard'
import ReactResizeDetector from 'react-resize-detector'

import { IframeWrapper } from './IframeWrapper'
import { Wrapper } from './Wrapper'
import { usePrismTheme } from '~utils/theme'
import * as styles from './styles'
import * as Icons from '../Icons'
@@ -45,25 +44,9 @@ const transformCode = code => {

export const Playground = ({ code, scope, language, useScoping = false }) => {
const {
themeConfig: {
showPlaygroundEditor,
showLiveError,
showLivePreview,
useScopingInPlayground,
},
themeConfig: { showPlaygroundEditor, showLiveError, showLivePreview },
} = useConfig()

const [previewHeight, setPreviewHeight] = React.useState()
const [editorHeight, setEditorHeight] = React.useState()
const Wrapper = React.useCallback(
useScoping || useScopingInPlayground
? props => <IframeWrapper {...props}>{props.children}</IframeWrapper>
: props => (
<div sx={styles.previewInner(showingCode)}>{props.children}</div>
),
[useScoping]
)

// Makes sure scope is only given on mount to avoid infinite re-render on hot reloads
const [scopeOnMount] = React.useState(scope)
const theme = usePrismTheme()
@@ -84,16 +67,14 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
theme={theme}
>
<div sx={styles.previewWrapper}>
<Wrapper height={previewHeight}>
<Wrapper
content="preview"
useScoping={useScoping}
showingCode={showingCode}
>
{showLivePreview && (
<LivePreview sx={styles.preview} data-testid="live-preview" />
)}
<ReactResizeDetector
handleHeight
onResize={({ height }) => {
setPreviewHeight(height)
}}
/>
</Wrapper>
<div sx={styles.buttons}>
<button sx={styles.button} onClick={copyCode}>
@@ -105,16 +86,14 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
</div>
</div>
{showingCode && (
<Wrapper height={editorHeight}>
<Wrapper
content="editor"
useScoping={useScoping}
showingCode={showingCode}
>
<div sx={styles.editor(theme)}>
<LiveEditor data-testid="live-editor" />
</div>
<ReactResizeDetector
handleHeight
onResize={({ height }) => {
setEditorHeight(height)
}}
/>
</Wrapper>
)}
{showLiveError && (
21 changes: 15 additions & 6 deletions core/gatsby-theme-docz/src/components/Playground/styles.js
Original file line number Diff line number Diff line change
@@ -2,8 +2,6 @@ import * as mixins from '~utils/mixins'

export const editor = theme => ({
p: 2,
border: t => `1px solid ${t.colors.border}`,
borderRadius: '0 0 4px 4px',
background: theme.plain.backgroundColor,
borderTop: 0,
fontFamily: 'monospace',
@@ -26,16 +24,27 @@ export const previewWrapper = {
position: 'relative',
}

export const previewInner = (showingCode, height = 'auto') => ({
height,
export const wrapper = () => ({
height: 'auto',
display: 'block',
minHeight: '100%',
width: 'calc(100% - 2px)',
bg: 'playground.bg',
border: t => `1px solid ${t.colors.playground.border}`,
borderRadius: showingCode ? '4px 4px 0 0' : '4px',
})

export const wrapperBorder = (content, showingCode) => {
let borderRadius = 4
if (showingCode) {
borderRadius = content === 'preview' ? '4px 4px 0 0' : '0 0 4px 4px'
}

return {
border: t => `1px solid ${t.colors.playground.border}`,
borderTop: content === 'editor' ? 0 : undefined,
borderRadius,
}
}

export const preview = {
margin: 0,
padding: '20px',

0 comments on commit 251a1a5

Please sign in to comment.