@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

Licensed under the Apache V2 License

包详细信息