@talend/react-forms
Version:
React forms library based on json schema form.
314 lines (303 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _UIForm2 = _interopRequireDefault(require("./UIForm.component"));
var _propTypes2 = require("./utils/propTypes");
var FormTemplate = _interopRequireWildcard(require("./FormTemplate"));
var _FieldTemplate = _interopRequireWildcard(require("./fields/FieldTemplate"));
var _Message = _interopRequireDefault(require("./Message"));
var _trigger = _interopRequireDefault(require("./trigger"));
var _utils = _interopRequireDefault(require("./utils"));
var _Widget = _interopRequireDefault(require("./Widget"));
var _customFormats = _interopRequireDefault(require("./customFormats"));
var _lang = _interopRequireDefault(require("./lang"));
var _merge = _interopRequireDefault(require("./merge"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* add error object on a formSchema if it doesn't exist
* @param {FormSchema} formSchema
* @return {FormSchema}
*/
function addErrorObject(formSchema) {
if (!formSchema.errors) {
return {
errors: {},
...formSchema
};
}
return formSchema;
}
/**
* reinit liveState with empty errors if it doesn't exist
* @param {FormSchema} newFormSchema
* @param {State} prevState
* @return {State}
*/
const reinitLiveState = newFormSchema => () => ({
liveState: addErrorObject(newFormSchema)
});
/**
* update live state with new properties derived from user interacting
* with the form
* @param {Object} properties
* @param {State} prevState
* @return {State}
*/
const setLiveStateProperties = properties => prevState => ({
...prevState,
liveState: {
...prevState.liveState,
properties
}
});
/**
* update liveState formSchema with errors
* @param {Object} errors
* @param {State} prevState
* @return {State}
*/
const setLiveStateErrors = errors => prevState => ({
...prevState,
liveState: {
...prevState.liveState,
errors
}
});
/**
* update initialState with liveState after a user submission of the form
* @param {Object} newProperties
* @param {State} prevState
* @return {State}
*/
const setLiveAsInitialState = prevState => ({
...prevState,
initialState: prevState.liveState
});
/**
* update liveState with initialState, reseting form
* @param {State} prevState
* @return {State}
*/
const setInitialStateAsLiveState = prevState => ({
...prevState,
liveState: prevState.initialState
});
class UIForm extends _react.Component {
constructor(props) {
super(props);
this.state = {
initialState: addErrorObject(this.props.data),
// eslint-disable-line react/no-unused-state
liveState: addErrorObject(this.props.data)
};
this.onChange = this.onChange.bind(this);
this.onTrigger = this.onTrigger.bind(this);
this.onReset = this.onReset.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.setErrors = this.setErrors.bind(this);
}
/**
* Update live and initialState with the new schema
* @param nextProps
*/
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.setState(reinitLiveState(this.props.data));
}
if (prevProps.initialData !== this.props.initialData) {
this.setState({
initialState: addErrorObject(this.props.initialData),
// eslint-disable-line react/no-unused-state
liveState: addErrorObject(this.props.initialData)
});
}
}
/**
* Update the model and validation
* If onChange is provided, it is triggered
* @param event The change event
* @param payload { schema, value, error } The change payload
* schema: The schema
* value: The new value
* error: The validation error
*/
onChange(event, payload) {
this.setState(setLiveStateProperties(payload.properties));
if (this.props.onChange) {
this.props.onChange(event, payload);
}
}
/**
* On user submit change local state and call this.props.onSubmit
* @param event submit event
* @param {Object} properties
* @param {Object} mergedSchema
*/
onSubmit(event, properties, mergedSchema) {
this.setState(setLiveAsInitialState);
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit(event, properties, mergedSchema);
}
}
/**
* On user reset change local state and call this.props.onReset
*/
onReset(event) {
this.setState(setInitialStateAsLiveState);
if (typeof this.props.onReset === 'function') {
this.props.onReset(event);
}
}
onTrigger(event, payload) {
return this.props.onTrigger(event, payload).then(data => {
const liveState = this.state.liveState;
if (data.errors) {
let errors = data.errors;
if (typeof data.errors === 'function') {
errors = data.errors(liveState.errors);
}
this.setErrors(event, errors);
}
if (data.properties) {
let properties = data.properties;
if (typeof properties === 'function') {
properties = properties(liveState.properties);
}
const {
schema,
value,
oldProperties
} = payload;
this.onChange(event, {
schema,
value,
oldProperties,
properties,
formData: properties
});
}
return data;
});
}
/**
* Set all fields validation in state
* @param errors the validation errors
* @param callback callback to call after setState
*/
setErrors(event, errors, callback) {
this.setState(setLiveStateErrors(errors), callback);
if (this.props.onErrors) {
this.props.onErrors(event, errors);
}
}
render() {
const props = (0, _lodash.omit)(this.props, 'data');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UIForm2.default, {
...this.state.liveState,
...props,
onChange: this.onChange,
onTrigger: this.onTrigger,
onSubmit: this.onSubmit,
onReset: this.onReset,
setErrors: this.setErrors,
children: this.props.children
});
}
}
exports.default = UIForm;
_defineProperty(UIForm, "displayName", 'Container(UIForm)');
_defineProperty(UIForm, "FormTemplate", FormTemplate);
_defineProperty(UIForm, "TextModeTemplate", _FieldTemplate.TextModeTemplate);
_defineProperty(UIForm, "FieldTemplate", _FieldTemplate.default);
_defineProperty(UIForm, "Message", _Message.default);
_defineProperty(UIForm, "callTrigger", _trigger.default);
_defineProperty(UIForm, "utils", _utils.default);
_defineProperty(UIForm, "Widget", _Widget.default);
_defineProperty(UIForm, "customFormats", _customFormats.default);
_defineProperty(UIForm, "lang", _lang.default);
_defineProperty(UIForm, "merge", _merge.default);
if (process.env.NODE_ENV !== 'production') {
UIForm.propTypes = {
..._propTypes2.formPropTypes,
/**
* if initial data is present set initial state with it
* if not use juste data
* if initial data update
* update initialData and liveData with it
*/
initialData: _propTypes.default.shape({
/** Json schema that specify the data model */
jsonSchema: _propTypes.default.object,
/** UI schema that specify how to render the fields */
uiSchema: _propTypes.default.array,
/**
* Form fields values.
* Note that it should contains @definitionName for triggers.
*/
properties: _propTypes.default.object,
/**
* Form fields errors.
*/
errors: _propTypes.default.object
}),
/** Form schema configuration */
data: _propTypes.default.shape({
/** Json schema that specify the data model */
jsonSchema: _propTypes.default.object,
/** UI schema that specify how to render the fields */
uiSchema: _propTypes.default.array,
/**
* Form fields values.
* Note that it should contains @definitionName for triggers.
*/
properties: _propTypes.default.object,
/**
* Form fields errors.
*/
errors: _propTypes.default.object
}),
/**
* Actions buttons to display at the bottom of the form.
* If not provided, a single submit button is displayed.
*/
actions: _UIForm2.default.propTypes.actions,
/**
* Custom validation function.
* Prototype: function customValidation(schema, value, properties)
* Return format : errorMessage String | falsy
* This is triggered on fields that has their uiSchema > customValidation : true
*/
customValidation: _propTypes.default.func,
/**
* The change callback.
* Prototype: function onChange(event, { schema, value, properties })
*/
onChange: _propTypes.default.func,
/**
* The errors callback.
* Prototype: function onErrors(event, errors)
*/
onErrors: _propTypes.default.func,
/**
* Trigger callback.
* Prototype: function onTrigger(event, { trigger, schema, properties })
*/
onTrigger: _propTypes.default.func,
/** Custom templates */
templates: _propTypes.default.object,
/** Custom widgets */
widgets: _propTypes.default.object,
/** Display mode: example 'text' */
displayMode: _propTypes.default.string
};
}
//# sourceMappingURL=UIForm.container.js.map