wip(lab): Moved draft to wrapper
This commit is contained in:
parent
e62a862559
commit
153bff0536
11 changed files with 208 additions and 80 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue