apeman-react-builder
v3.0.4
Published
apeman react package for builder components.
Maintainers
okunishinishiReadme
apeman-react-builder
apeman react package for builder components.
Installation
$ npm install apeman-react-builder --saveDemo
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 | | | Handle for change | | onCancel | func | | | Handle for cancel | | onSubmit | func | | | Handle for submit | | 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 | | | Source string | | onLoad | func | | | Handler for load event | | onScriptError | func | | | Handler for script error | | globals | object | {} | | Global variables inside iframe | | script | string | | | Script to execute when loaded | | compile | func | (script) => script | | Compile script before executing | | vr | number | | | Version 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 | '' | | Html contents | | script | string | '' | | Script text | | globals | object | | | Global variables | | compile | func | | | Compile script before executing | | onHtmlEdit | func | () => undefined | | Handle html edit | | onScriptEdit | func | () => undefined | | Handle script edit | | onScriptError | func | | | Handle script error | | 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.