@talend/react-forms

Introduction

This library is designed to be used on top of react-jsonschema-form, a React component for building Web forms from JSONSchema.

In addition of Mozilla lib, this wrapper uses react-bootstrap to not have to maintain Bootstrap markup.

Installation

Run npm install --save @talend/react-forms.

Usage

The forms can be used like any other React components. You'll have to pass it a JSONSchema and a onSubmit callback as a minimum to handle forms rendering and get the data back.

import Form from '@talend/react-forms';

class MyForm extends React.Component {
	onSubmit(formData) {
		console.log(formData);
	}

	onCancel() {
		console.log('Cancelled');
	}

	render() {
		const actions = [
			{ style: 'link', onClick: this.onCancel, type: 'button', label: 'CANCEL' },
			{ style: 'primary', type: 'submit', label: 'VALIDATE' },
		];
		return <Form data={this.props.data} actions={actions} onSubmit={this.onSubmit} />;
	}
}

Here is the archetype of the data property required to render the form:

{
	"jsonSchema": {},
	"uiSchema": {},
	"properties": {}
}

Actions

Forms now render a react-talend-components Action component for each action given to it. Each action accept the following properties :

| property | propType | required | default | doc | | ---------------- | :----------------: | :------: | :-------: | :-------------------------------------------------------------------------------------------: | | iconPosition | other | no | - | | icon | string | no | - | | hideLabel | bool | no | - | | disabled | bool | no | {false} | | style | string | no | "default" | equivalent to action bsStyle props | | iconTransform | string | no | - | | id | string | no | - | | inProgress | bool | no | {false} | | label | string | yes | - | | link | bool | no | - | | model | object | no | - | | name | string | no | - | render a name button html property | | onClick | func | yes | - | execute the callback with formData, formId, propertyName, propertyValue as parameters | | tooltip | bool | no | - | | tooltipPlacement | other | no | "top" | | type | 'submit'|'button' | no | - | by default render a button without submit type |

Handlers

If uiSchema has some triggers like

{
	"jsonSchema": {
		"id": "ListExample",
		"type": "object",
		"properties": {
			"propertyName": {
				"type": "string",
				"enum": ["option 0", "option 1", "option 2"]
			}
		}
	},
	"uiSchema": {
		"propertyName": {
			"ui:trigger": ["after"]
		}
	},
	"properties": {}
}

Then onChange will be triggered when propertyName field value has changed.

import Form from '@talend/react-forms';

class MyForm extends React.Component {
	onChange(formData, formId, propertyName, propertyValue) {
		console.log(formData, formId, propertyName, propertyValue);
	}

	onSubmit(formData) {
		console.log(formData);
	}

	render() {
		return <Form data={this.props.data} onChange={this.onChange} onSubmit={this.onSubmit} />;
	}
}

PropTypes

The data and actions PropTypes are exported for easy reuse. You can use them by importing the DataPropTypes and ActionsPropTypes functions.

import Form, { DataPropTypes, ActionsPropTypes } from '@talend/react-forms';

Validation

You can use validation from outside (let say button outside the form) this way:

import validate from '@talend/react-forms/lib/validate';

function isValid({ payload }) {
	return validate(payload.jsonSchema, payload.formData);
}

Build with webpack

@talend/react-forms comes with react-ace lazy loaded. Modes are loaded from CDN. No more additional config is required.

LICENSE

Copyright (c) 2006-2016 Talend

Licensed under the Apache V2 License