Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

Commit 251a1a5

Browse files
mickaelzhangmickaelzhang
authored
chore(gatsby-theme-docz): clean playground style (#1397)
* chore: clean playground style * Update index.js
1 parent ab384ee commit 251a1a5

4 files changed

Lines changed: 88 additions & 62 deletions

File tree

‎core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎core/gatsby-theme-docz/src/components/Playground/Wrapper.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/** @jsx jsx */
2+
import { useState } from 'react'
3+
import { jsx } from 'theme-ui'
4+
import { useConfig } from 'docz'
5+
import Iframe from 'react-frame-component'
6+
import ReactResizeDetector from 'react-resize-detector'
7+
8+
import * as styles from './styles'
9+
10+
const CLEAR_PADDING = `<style> body { padding: 0; margin: 0; } </style>`
11+
const INITIAL_IFRAME_CONTENT = `<!DOCTYPE html><html><head> ${CLEAR_PADDING} </head><body><div></div></body></html>`
12+
13+
const IframeWrapper = ({ children, style }) => {
14+
const [containerHeight, setHeight] = useState()
15+
return (
16+
<Iframe
17+
initialContent={INITIAL_IFRAME_CONTENT}
18+
sx={{
19+
...styles.wrapper(),
20+
style,
21+
height: containerHeight,
22+
}}
23+
>
24+
{children}
25+
<ReactResizeDetector
26+
handleHeight
27+
onResize={({ height }) => {
28+
setHeight(height)
29+
}}
30+
/>
31+
</Iframe>
32+
)
33+
}
34+
35+
const NormalWrapper = ({ children, style }) => {
36+
return (
37+
<div
38+
sx={{
39+
...styles.wrapper(),
40+
...style,
41+
}}
42+
>
43+
{children}
44+
</div>
45+
)
46+
}
47+
48+
export const Wrapper = ({ children, content, useScoping, showingCode }) => {
49+
const {
50+
themeConfig: { useScopingInPlayground },
51+
} = useConfig()
52+
53+
const Element =
54+
useScoping || useScopingInPlayground ? IframeWrapper : NormalWrapper
55+
56+
return (
57+
<Element style={styles.wrapperBorder(content, showingCode)}>
58+
{children}
59+
</Element>
60+
)
61+
}

‎core/gatsby-theme-docz/src/components/Playground/index.js‎

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import { useConfig } from 'docz'
55
import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
66
import { Resizable } from 're-resizable'
77
import copy from 'copy-text-to-clipboard'
8-
import ReactResizeDetector from 'react-resize-detector'
98

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

4645
export const Playground = ({ code, scope, language, useScoping = false }) => {
4746
const {
48-
themeConfig: {
49-
showPlaygroundEditor,
50-
showLiveError,
51-
showLivePreview,
52-
useScopingInPlayground,
53-
},
47+
themeConfig: { showPlaygroundEditor, showLiveError, showLivePreview },
5448
} = useConfig()
5549

56-
const [previewHeight, setPreviewHeight] = React.useState()
57-
const [editorHeight, setEditorHeight] = React.useState()
58-
const Wrapper = React.useCallback(
59-
useScoping || useScopingInPlayground
60-
? props => <IframeWrapper {...props}>{props.children}</IframeWrapper>
61-
: props => (
62-
<div sx={styles.previewInner(showingCode)}>{props.children}</div>
63-
),
64-
[useScoping]
65-
)
66-
6750
// Makes sure scope is only given on mount to avoid infinite re-render on hot reloads
6851
const [scopeOnMount] = React.useState(scope)
6952
const theme = usePrismTheme()
@@ -84,16 +67,14 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
8467
theme={theme}
8568
>
8669
<div sx={styles.previewWrapper}>
87-
<Wrapper height={previewHeight}>
70+
<Wrapper
71+
content="preview"
72+
useScoping={useScoping}
73+
showingCode={showingCode}
74+
>
8875
{showLivePreview && (
8976
<LivePreview sx={styles.preview} data-testid="live-preview" />
9077
)}
91-
<ReactResizeDetector
92-
handleHeight
93-
onResize={({ height }) => {
94-
setPreviewHeight(height)
95-
}}
96-
/>
9778
</Wrapper>
9879
<div sx={styles.buttons}>
9980
<button sx={styles.button} onClick={copyCode}>
@@ -105,16 +86,14 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
10586
</div>
10687
</div>
10788
{showingCode && (
108-
<Wrapper height={editorHeight}>
89+
<Wrapper
90+
content="editor"
91+
useScoping={useScoping}
92+
showingCode={showingCode}
93+
>
10994
<div sx={styles.editor(theme)}>
11095
<LiveEditor data-testid="live-editor" />
11196
</div>
112-
<ReactResizeDetector
113-
handleHeight
114-
onResize={({ height }) => {
115-
setEditorHeight(height)
116-
}}
117-
/>
11897
</Wrapper>
11998
)}
12099
{showLiveError && (

‎core/gatsby-theme-docz/src/components/Playground/styles.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import * as mixins from '~utils/mixins'
22

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

29-
export const previewInner = (showingCode, height = 'auto') => ({
30-
height,
27+
export const wrapper = () => ({
28+
height: 'auto',
3129
display: 'block',
3230
minHeight: '100%',
3331
width: 'calc(100% - 2px)',
3432
bg: 'playground.bg',
35-
border: t => `1px solid ${t.colors.playground.border}`,
36-
borderRadius: showingCode ? '4px 4px 0 0' : '4px',
3733
})
3834

35+
export const wrapperBorder = (content, showingCode) => {
36+
let borderRadius = 4
37+
if (showingCode) {
38+
borderRadius = content === 'preview' ? '4px 4px 0 0' : '0 0 4px 4px'
39+
}
40+
41+
return {
42+
border: t => `1px solid ${t.colors.playground.border}`,
43+
borderTop: content === 'editor' ? 0 : undefined,
44+
borderRadius,
45+
}
46+
}
47+
3948
export const preview = {
4049
margin: 0,
4150
padding: '20px',

0 commit comments

Comments
 (0)