78 lines
1.5 KiB
JavaScript
78 lines
1.5 KiB
JavaScript
|
import {button, initialize, useControls} from 'theatric'
|
||
|
|
import {render} from 'react-dom'
|
||
|
|
import React, {useState} from 'react'
|
||
|
|
|
||
|
|
// initialize()
|
||
|
|
|
||
|
|
function SomeComponent({id}) {
|
||
|
|
const {foo, $get, $set} = useControls(
|
||
|
|
{
|
||
|
|
foo: 0,
|
||
|
|
bar: 0,
|
||
|
|
bez: button(() => {
|
||
|
|
$set((p) => p.foo, 2)
|
||
|
|
$set((p) => p.bar, 3)
|
||
|
|
console.log($get((p) => p.foo))
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
{folder: id},
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{id}: {foo}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function App() {
|
||
|
|
const {bar, $set, $get} = useControls({
|
||
|
|
bar: {foo: 'bar'},
|
||
|
|
baz: button(() => console.log($get((p) => p.bar))),
|
||
|
|
})
|
||
|
|
|
||
|
|
const {another, panel, yo} = useControls(
|
||
|
|
{
|
||
|
|
another: '',
|
||
|
|
panel: '',
|
||
|
|
yo: 0,
|
||
|
|
},
|
||
|
|
{panel: 'My panel'},
|
||
|
|
)
|
||
|
|
|
||
|
|
const {} = useControls({})
|
||
|
|
|
||
|
|
const [showComponent, setShowComponent] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>{JSON.stringify(bar)}</div>
|
||
|
|
<SomeComponent id="first" />
|
||
|
|
<SomeComponent id="second" />
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setShowComponent(!showComponent)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Show another component
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
$set((p) => p.bar.foo, $get((p) => p.bar.foo) + 1)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Increment stuff
|
||
|
|
</button>
|
||
|
|
{showComponent && <SomeComponent id="hidden" />}
|
||
|
|
{yo}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|