-
Notifications
You must be signed in to change notification settings - Fork 265
/
FormBuilder.js
88 lines (75 loc) · 2.58 KB
/
FormBuilder.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import AllComponents from 'formiojs/components';
import Components from 'formiojs/components/Components';
Components.setComponents(AllComponents);
import FormBuilder from 'formiojs/FormBuilder';
export default class extends Component {
static defaultProps = {
options: {},
Builder: FormBuilder,
};
static propTypes = {
form: PropTypes.object,
options: PropTypes.object,
onSaveComponent: PropTypes.func,
onUpdateComponent: PropTypes.func,
onDeleteComponent: PropTypes.func,
onCancelComponent: PropTypes.func,
onEditComponent: PropTypes.func,
Builder: PropTypes.any,
};
componentDidMount = () => {
this.initializeBuilder(this.props);
};
componentWillUnmount = () => {
if (this.builder !== undefined) {
this.builder.instance.destroy(true);
}
};
initializeBuilder = (props) => {
const {options, form, Builder} = props;
if (this.builder !== undefined) {
this.builder.instance.destroy(true);
}
this.builder = new Builder(this.element.firstChild, form, options);
this.builderReady = this.builder.ready;
this.builderReady.then(() => {
this.builder.instance.on('saveComponent', this.emit('onSaveComponent'));
this.builder.instance.on('updateComponent', this.emit('onUpdateComponent'));
this.builder.instance.on('removeComponent', this.emit('onDeleteComponent'));
this.builder.instance.on('cancelComponent', this.emit('onCancelComponent'));
this.builder.instance.on('editComponent', this.emit('onEditComponent'));
this.builder.instance.on('saveComponent', this.onChange);
this.builder.instance.on('updateComponent', this.onChange);
this.builder.instance.on('deleteComponent', this.onChange);
});
};
componentWillReceiveProps = (nextProps) => {
const {options, form} = this.props;
if (
(form.display !== nextProps.form.display)
|| (options !== nextProps.options)
|| (form.components !== nextProps.form.components)
) {
this.initializeBuilder(nextProps);
}
};
render = () => {
return <div ref={element => this.element = element}>
<div></div>
</div>;
};
onChange = () => {
if (this.props.hasOwnProperty('onChange') && typeof this.props.onChange === 'function') {
this.props.onChange(this.builder.instance.schema);
}
};
emit = (funcName) => {
return (...args) => {
if (this.props.hasOwnProperty(funcName) && typeof (this.props[funcName]) === 'function') {
this.props[funcName](...args);
}
};
};
}