'use strict'
import React from 'react'
import ApBuilder from '../../lib/ap_builder'
import ApBuilderStyle from '../../lib/ap_builder_style'
import {ApTabStyle} from 'apeman-react-tab'
import {ApFrameStyle} from 'apeman-react-frame'
import {ApButtonStyle} from 'apeman-react-button'
const Demo = React.createClass({
getInitialState () {
return {
html: `
<html>
<head>
</head>
<body>
<p>This is the building html</p>
<p>Count: <span id="counter">0</span></p>
</body>
</html>
`,
script: `
console.log('hoge', window.hoge)
var count = 0
setInterval(function () {
count++
document.getElementById('counter').innerHTML = count
}, 800)
console.log('see bellow↓↓')
console.log('here you are')
`,
globals: {
hoge: 'This is hoge!!'
}
}
},
render () {
const s = this
let { state } = s
return (
<div>
<ApBuilderStyle highlightColor='#b35600'/>
<ApTabStyle highlightColor='#b35600'/>
<ApButtonStyle highlightColor='#b35600'/>
<ApFrameStyle highlightColor='#b35600'/>
<ApBuilder html={ state.html }
script={ state.script }
compile={ (script) => s._delay(() => `${script} console.log('Via compile')`, 1200) }
globals={ state.globals }
style={ { height: 480 } }
onHtmlEdit={ (e) => s._delay(() => s.setState({ html: e.value }), 500) }
onScriptEdit={ (e) => s._delay(() => s.setState({ script: e.value}), 800) }
htmlActions={ [
{ text: 'Restore Default', handle(){ console.log('Restore default!')} }
] }
/>
</div>
)
},
_delay (action, duration) {
return new Promise((resolve) =>
setTimeout(() => {
resolve(action())
}, duration)
)
}
})
export default Demo