Apeman-react-builder NPM

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
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
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
style	object	{}
highlightColor	string	ApStyle.DEFAULT_HIGHLIGHT_COLOR
backgroundColor		ApStyle.DEFAULT_BACKGROUND_COLOR

ApBuilder

Props

Name	Type	Default
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 |