apeman-react-builder
apeman react package for builder components.
Installation
$ npm install apeman-react-builder --save
Demo
Live demo is hosted on GitHub Pages.
Usage
'use strict'
import React from 'react'
import {ApBuilder, ApBuilderStyle} from 'apeman-react-builder'
import {ApTabStyle} from 'apeman-react-tab'
import {ApFrameStyle} from 'apeman-react-frame'
const color = '#38E'
const ExampleComponent = React.createClass({
getInitialState () {
return {
html: `
<html><body><!-- ** --></body></html>
`,
script: `
console.log('hoge', window.foo)
/* ... */
`,
globals: {
foo: 'This is foo!!'
}
}
},
render () {
const s = this
let { state } = s
return (
<div>
<ApBuilderStyle highlightColor={ color }/>
<ApTabStyle highlightColor={ color }/>
<ApButtonStyle highlightColor={ color }/>
<ApFrameStyle highlightColor={ color }/>
<ApBuilderStyle highlightColor={ color }/>
<ApBuilder html={ state.html }
script={ state.script }
compile={ (script) => { /* ... */ return script } }
globals={ state.globals }/>
</div>
)
}
})
Components
ApBuilderEditor
Props
Name | Type | Default | Description |
---|---|---|---|
onChange | func | ||
onCancel | func | ||
onSubmit | func | ||
labels | object | { |
cancel: 'Cancel', submit: 'Submit' } | | Label texts | | src | string | | | Editting source | | mode | string | | | Editting type | | error | string|object | | | Error message | | spinning | bool | | | Show spinner | | actions | array | [] | | Custom actions |
ApBuilderFrame
Props
Name | Type | Default | Description |
---|---|---|---|
src | string | ||
onLoad | func | ||
onScriptError | func | ||
globals | object | {} | |
script | string | ||
compile | func | (script) => script | |
vr | number | ||
id | `ap-builder-frame-${uuid.v4()}` |
ApBuilderStyle
Props
Name | Type | Default | Description |
---|---|---|---|
style | object | {} | |
highlightColor | string | ApStyle.DEFAULT_HIGHLIGHT_COLOR | |
backgroundColor | ApStyle.DEFAULT_BACKGROUND_COLOR |
ApBuilder
Props
Name | Type | Default | Description |
---|---|---|---|
html | string | '' | |
script | string | '' | |
globals | object | ||
compile | func | ||
onHtmlEdit | func | () => undefined | |
onScriptEdit | func | () => undefined | |
onScriptError | func | ||
labels | object | { |
htmlTab: 'HTML', scriptTab: 'Script' } | | Labels | | errors | object | | | Errors | | htmlMode | string | 'htmlmixed' | | Codemirror mode for html | | scriptMode | string | 'javascript' | | Codemirror mode for script | | htmlActions | array | | | Custom actions for html editor | | scriptActions | array | | | Custom actions for script editor | | isSupported | func | function() { return /Chrome/.test(navigator.userAgent) } | | Check if supported |
License
This software is released under the MIT License.