1
0
Fork 0

wip(lab): Moved draft to wrapper

This commit is contained in:
Joost De Cock 2022-01-30 15:14:44 +01:00
parent e62a862559
commit 153bff0536
11 changed files with 208 additions and 80 deletions

View file

@ -1,7 +1,5 @@
import React, { useState } from 'react'
import SvgWrapper from './svg-wrapper'
import theme from 'pkgs/plugin-theme/src/index.js'
import Robot from 'shared/components/robot/index.js'
import Error from './error.js'
import Events from './events.js'
import Json from 'shared/components/json.js'
@ -17,37 +15,28 @@ const tabClasses = active => `
const Wrap = props => <div className="max-w-screen-xl m-auto">{props.children}</div>
const LabDraft = props => {
const { app, pattern, gist, updateGist, unsetGist } = props
const { app, draft, pattern, gist, updateGist, unsetGist } = props
if (!draft) return null
const [tab, setTab] = useState(props.pattern.config.name)
const patternInstance = new pattern(gist)
const eprops = { ...props, patternInstance }
if (gist?.renderer === 'svg') patternInstance.use(theme)
// Catch errors
try { patternInstance.draft() }
catch(error) {
console.log('Failed to draft pattern', error)
return <Error error={error} {...eprops} at={'draft'} />
}
// Render as SVG
let svg
try { svg = patternInstance.render() }
catch(error) {
console.log('Failed to render pattern', error)
return <Error error={error} {...eprops} />
}
if (gist?.renderer === 'svg')
if (gist?.renderer === 'svg') {
// Render as SVG
let svg
try { svg = draft.render() }
catch(error) {
console.log('Failed to render pattern', error)
return <Error error={error} {...props} />
}
return <div dangerouslySetInnerHTML={{ __html: svg }} />
}
// Render as React
let patternProps = {}
try { patternProps = patternInstance.draft().getRenderProps() }
try { patternProps = draft.draft().getRenderProps() }
catch(error) {
console.log('Failed to get render props for pattern', error)
return <Error error={error} {...eprops} />
return <Error error={error} {...props} />
}
return (
@ -59,11 +48,11 @@ const LabDraft = props => {
className={tabClasses(tab === name)}
>{name}</button>)}
</div>
{tab === 'events' && <Wrap><Events events={patternInstance.events} /></Wrap>}
{tab === 'events' && <Wrap><Events events={draft.events} /></Wrap>}
{tab === 'json' && <Wrap><Json>{JSON.stringify(props.gist, null, 2)}</Json></Wrap>}
{tab === 'yaml' && <Wrap><Yaml json={JSON.stringify(props.gist, null, 2)} /></Wrap>}
{tab === props.pattern.config.name && <SvgWrapper
patternInstance={patternInstance}
draft={draft}
patternProps={patternProps}
gist={gist}
updateGist={updateGist}