var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; import React from 'react'; import Form from '../forms/form'; import WaitIcon from './wait-icon'; import { server } from '../commons/server'; import { isFunction } from '../commons/utils'; /** * Remote form - Load the schema, document and resources from a remote path. * It uses a FormDialog component to display a form that is loaded from the * server using the *remotePath* property, which is a string pointing to a * server resource (using GET) or a function that returns a promise to be * resolved with (schema, doc, resources) * */ export default class RemoteForm extends React.Component { /** * Parse a js code represented as a string to java-script. It is used to parse the * schema that comes from the server to the client */ static resolveSchema(data) { /* eslint no-new-func: "off" */ const func = new Function('', 'return ' + data + ';'); return func(); } constructor(props) { super(props); this.resolveForm = this.resolveForm.bind(this); } componentWillMount() { this.loadForm(this.props.remotePath); } componentWillReceiveProps(nextProps) { if (nextProps.remotePath !== this.props.remotePath) { this.loadForm(nextProps.remotePath); } } /** * Load the data from the remote path */ loadForm(remotePath) { this.setState({ fetching: true }); const p = isFunction(remotePath) ? remotePath() : server.get(remotePath); p.then(this.resolveForm); } /** * Resolve a form by a given string containing java script code */ resolveForm(data) { /* eslint no-new-func: "off" */ const res = RemoteForm.resolveSchema(data.schema); if (this.props.onLoadForm) { this.props.onLoadForm(res, data.doc); } this.setState({ schema: res, doc: data.doc, resources: data.resources, fetching: false }); } /** * Validate the form and return validation messages, if any erro is found * @return {[type]} [description] */ validate() { return this.refs.form.validate(); } render() { if (this.state.fetching) { return React.createElement(WaitIcon, { type: 'card' }); } // create the properties of the form dialog const props = Object.assign({}, this.props, { schema: this.state.schema, doc: this.state.doc, resources: this.state.resources }); delete props.remotePath; return React.createElement(Form, _extends({ ref: 'form' }, props)); } } RemoteForm.propTypes = { // the location in the server where form is located remotePath: React.PropTypes.any.isRequired, onLoadForm: React.PropTypes.func, // Form props errors: React.PropTypes.array, onChange: React.PropTypes.func, readOnly: React.PropTypes.bool, className: React.PropTypes.string };