@talend/react-containers
Version:
Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.
193 lines (191 loc) • 6.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.DEFAULT_STATE = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutable = _interopRequireDefault(require("immutable"));
var _reactCmf = require("@talend/react-cmf");
var _reactForms = _interopRequireDefault(require("@talend/react-forms"));
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
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); }
let DefaultArrayFieldTemplate = () => null;
if (process.env.FORM_MOZ) {
DefaultArrayFieldTemplate = _reactForms.default.deprecated.templates.ArrayFieldTemplate;
}
const DEFAULT_STATE = exports.DEFAULT_STATE = new _immutable.default.Map({});
/**
* Because we don't want to loose form input
* This Component bind onChange to store the formData in it's state.
* <Form jsonSchema={} uiSchema={} data={} />
*/
class Form extends _react.Component {
/**
* return the form data in redux state
* usefull in mapStateToProps of your component
* @example
const FORM_ID = 'add-datastore-form';
*
* @param {[type]} state [description]
* @param {[type]} formId [description]
* @return {[type]} [description]
*/
static getFormData(state, formId) {
return state.cmf.components.getIn(['Container(Form)', formId, 'data'], new _immutable.default.Map());
}
static getDerivedStateFromProps(nextProps, prevState) {
if (!prevState) {
nextProps.initState();
return null;
}
if (!nextProps.state && nextProps.formId !== prevState.formId) {
nextProps.deleteState();
return null;
}
if (nextProps.data !== prevState.data) {
return {
data: nextProps.data
};
}
return null;
}
constructor(props) {
super(props);
this.state = DEFAULT_STATE.toJS();
this.formActions = this.formActions.bind(this);
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onErrors = this.onErrors.bind(this);
this.jsonSchema = this.jsonSchema.bind(this);
this.uiSchema = this.uiSchema.bind(this);
this.data = this.data.bind(this);
}
componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
this.props.setState({
data: this.state.data
});
}
}
onChange(event, form) {
this.props.setState({
data: form.formData,
dirty: true
});
if (this.props.onChange) {
this.props.onChange(form);
}
}
onErrors(event, errors) {
this.props.setState({
errors
});
if (this.props.onErrors) {
this.props.onErrors(event, errors);
}
}
onSubmit(event, formData) {
if (this.props.onSubmit) {
this.props.onSubmit(formData);
}
if (this.props.onSubmitActionCreator) {
this.props.dispatchActionCreator(this.props.onSubmitActionCreator, null, {
props: this.props,
formData
});
}
}
jsonSchema() {
const state = (this.props.state || DEFAULT_STATE).toJS();
if (typeof this.props.jsonSchema === 'function') {
return this.props.jsonSchema(state.data);
}
return this.props.jsonSchema;
}
uiSchema() {
const state = (this.props.state || DEFAULT_STATE).toJS();
if (typeof this.props.uiSchema === 'function') {
return this.props.uiSchema(state.data);
}
return this.props.uiSchema;
}
data() {
const state = (this.props.state || DEFAULT_STATE).toJS();
if (typeof this.props.data === 'function') {
return this.props.data(state.data);
}
return {
...this.props.data,
...state.data
};
}
errors() {
const state = (this.props.state || DEFAULT_STATE).toJS();
if (typeof this.props.errors === 'function') {
return this.props.errors(state.errors);
}
return {
...this.props.errors,
...state.errors
};
}
formActions() {
if (typeof this.props.actions === 'function') {
const state = (this.props.state || DEFAULT_STATE).toJS();
return this.props.actions(state.data || this.props.data);
}
return this.props.actions;
}
render() {
const state = (this.props.state || DEFAULT_STATE).toJS();
const props = {
data: {
jsonSchema: this.jsonSchema(),
uiSchema: this.uiSchema(),
properties: this.data(),
errors: this.errors()
},
className: (0, _classnames.default)('tc-form', 'rjsf', this.props.className, {
dirty: state.dirty,
pristine: !state.dirty
}),
ArrayFieldTemplate: this.props.ArrayFieldTemplate || DefaultArrayFieldTemplate,
actions: this.formActions(),
fields: this.props.fields,
onChange: this.onChange,
onTrigger: this.props.onTrigger,
onSubmit: this.onSubmit,
onErrors: this.onErrors,
customFormats: this.props.customFormats,
customValidation: this.props.customValidation,
buttonBlockClass: this.props.buttonBlockClass,
children: this.props.children,
uiform: this.props.uiform,
language: this.props.language,
widgets: this.props.widgets,
getComponent: this.props.getComponent,
loading: this.props.loading,
...this.props.formProps
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactForms.default, {
...props,
children: this.props.children
});
}
}
_defineProperty(Form, "displayName", 'Container(Form)');
_defineProperty(Form, "propTypes", {
..._reactCmf.cmfConnect.propTypes,
formId: _propTypes.default.string.isRequired,
data: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
});
_defineProperty(Form, "defaultProps", {
data: {}
});
var _default = exports.default = Form;
//# sourceMappingURL=Form.container.js.map