react-application-core
Version:
A react-based application core for the business applications.
389 lines • 15.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Form = void 0;
var React = require("react");
var R = require("ramda");
var ts_smart_logger_1 = require("ts-smart-logger");
var definition_1 = require("../../definition");
var util_1 = require("../../util");
var base_1 = require("../base");
var button_1 = require("../button");
var field_component_1 = require("../field/field/field.component");
var di_1 = require("../../di");
var Form = /** @class */ (function (_super) {
__extends(Form, _super);
/**
* @stable [02.09.2020]
* @param originalProps
*/
function Form(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.doReset = _this.doReset.bind(_this);
_this.doSubmit = _this.doSubmit.bind(_this);
_this.onChange = _this.onChange.bind(_this);
return _this;
}
/**
* @stable [02.09.2020]
*/
Form.prototype.render = function () {
var _a = this.originalProps, actionsRendered = _a.actionsRendered, compact = _a.compact, formId = _a.formId, style = _a.style;
var nodes = this.formNodes;
var formElement = (React.createElement("form", { ref: this.actualRef, style: style, autoComplete: 'off', className: this.className },
compact
? nodes
: (React.createElement("div", { className: definition_1.FormClassesEnum.FORM_BODY }, nodes)),
actionsRendered && (util_1.ConditionUtils.ifNotEmptyThanValue(this.formActionsElements, function (formActionsElements) { return (React.createElement("div", { className: definition_1.FormClassesEnum.FORM_ACTIONS }, formActionsElements)); }))));
if (R.isNil(formId)) {
return formElement;
}
return (React.createElement(definition_1.UniversalIdProviderContext.Provider, { value: formId }, formElement));
};
/**
* @stable [30.06.2020]
*/
Form.prototype.componentDidMount = function () {
if (this.originalProps.validateOnMount) {
this.doValid();
}
};
/**
* @stable [02.09.2020]
* @param prevProps
*/
Form.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
util_1.ConditionUtils.ifNotNilThanValue(this.form, function (form) {
if (form.validateAfterReset) {
_this.doValid();
}
});
};
/**
* @stable [30.06.2020]
*/
Form.prototype.submit = function () {
var _this = this;
util_1.ConditionUtils.ifNotNilThanValue(this.originalProps.onSubmit, function (onSubmit) { return onSubmit(_this.apiEntity); });
};
/**
* @stable [07.08.2020]
* @param name
* @param value
* @private
*/
Form.prototype.onChange = function (name, value) {
var _a;
var onChange = this.originalProps.onChange;
if (util_1.TypeUtils.isFn(onChange)) {
if (util_1.ObjectUtils.isObjectNotEmpty(name)) {
onChange((_a = {}, _a[name] = value, _a));
this.doValid();
}
else {
Form.logger.warn('[$Form][onChange] The field has no name. The field value:', value);
}
}
};
/**
* @stable [07.08.2020]
*/
Form.prototype.doValid = function () {
var _this = this;
var _a = this.originalProps, onValid = _a.onValid, valid = _a.valid;
util_1.ConditionUtils.ifNotNilThanValue(onValid, function () { return onValid(util_1.TypeUtils.isBoolean(valid) || _this.actualRef.current.checkValidity()); });
};
/**
* @stable [01.09.2020]
*/
Form.prototype.doSubmit = function () {
var onBeforeSubmit = this.originalProps.onBeforeSubmit;
if (util_1.TypeUtils.isFn(onBeforeSubmit)) {
var apiEntity = this.apiEntity;
if (onBeforeSubmit(apiEntity) !== false) {
this.submit();
}
}
else {
this.submit();
}
};
/**
* @stable [01.09.2020]
* @private
*/
Form.prototype.doReset = function () {
util_1.ConditionUtils.ifNotNilThanValue(this.originalProps.onReset, function (onReset) {
onReset();
});
};
Object.defineProperty(Form.prototype, "isFormValid", {
/**
* @stable [11.05.2020]
* @returns {boolean}
*/
get: function () {
return util_1.FormUtils.isValid(this.props);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "isFormSubmittable", {
/**
* @stable [23.03.2020]
* @returns {boolean}
*/
get: function () {
return util_1.isFormSubmittable(this.props);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "isFormResettable", {
/**
* @stable [23.03.2020]
* @returns {boolean}
*/
get: function () {
return util_1.isFormResettable(this.props);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "isFormOfNewEntity", {
/**
* @stable [31.07.2020]
*/
get: function () {
return util_1.EntityUtils.isNewEntity(this.originalProps.entity);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "isFormBusy", {
/**
* @stable [11.05.2020]
* @returns {boolean}
*/
get: function () {
return util_1.FormUtils.inProgress(this.props);
},
enumerable: false,
configurable: true
});
/**
* @stable [23.03.2020]
* @param {IField} field
* @returns {boolean}
*/
Form.prototype.isFieldDisabled = function (field) {
return util_1.isFormFieldDisabled(this.props, field.props);
};
/**
* @stable [16.11.2019]
* @param {IField} field
* @returns {AnyT}
*/
Form.prototype.getFieldValue = function (field) {
return util_1.getFormFieldValue(this.originalProps, field.props);
};
/**
* @stable [10.09.2020]
* @param field
* @private
*/
Form.prototype.getFieldOriginalValue = function (field) {
return util_1.FormUtils.fieldOriginalValue(this.originalProps, field.props);
};
/**
* @stable [11.05.2020]
* @param {IField} field
* @param {IFieldProps} defaultProps
* @returns {AnyT}
*/
Form.prototype.getFieldDisplayValue = function (field, defaultProps) {
return util_1.FormUtils.fieldDisplayValue(this.originalProps, field.props, defaultProps);
};
/**
* @stable [03.02.2020]
* @param {IField} field
* @returns {IFieldProps}
*/
Form.prototype.getPredefinedFieldProps = function (field) {
var props = this.fieldsPresets[field.props.name];
var resultProps;
if (util_1.TypeUtils.isString(props)) {
resultProps = { label: props };
}
else if (util_1.TypeUtils.isFn(props)) {
resultProps = props(field);
}
else {
resultProps = props;
}
return resultProps;
};
Object.defineProperty(Form.prototype, "formActionsElements", {
/**
* @stable [02.09.2020]
* @private
*/
get: function () {
var _this = this;
var actionsFactory = this.originalProps.actionsFactory;
var actions = this.actions;
var actualActions = util_1.FilterUtils.notNilValuesArrayFilter.apply(util_1.FilterUtils, util_1.TypeUtils.isFn(actionsFactory)
? actionsFactory(actions)
: actions);
return (actualActions
.map(function (action, index) { return (React.createElement(button_1.Button, __assign({ key: "form-action-" + (action.text || index) }, action, { onClick: util_1.ConditionUtils.ifNotNilThanValue(action.onClick, function (onClick) { return function () { return onClick(_this.apiEntity); }; }) }))); }));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "formNodes", {
/**
* @stable [03.02.2020]
* @returns {React.ReactNode[]}
*/
get: function () {
var _this = this;
return (util_1.cloneReactNodes(this, function (field) {
var fieldProps = field.props; // TODO Props
var predefinedOptions = _this.getPredefinedFieldProps(field);
return util_1.FilterUtils.defValuesFilter(__assign(__assign({ value: _this.getFieldValue(field), originalValue: _this.getFieldOriginalValue(field), displayValue: _this.getFieldDisplayValue(field, predefinedOptions), readOnly: _this.isFieldReadOnly(field), disabled: _this.isFieldDisabled(field), changeable: _this.isFieldChangeable(field), onFormChange: _this.onChange }, predefinedOptions), util_1.FilterUtils.defValuesFilter({
label: fieldProps.label,
placeholder: fieldProps.placeholder,
prefixLabel: fieldProps.prefixLabel,
type: fieldProps.type,
})));
}, function (child) { return field_component_1.Field.isPrototypeOf(child.type); }, function (child) { return child.props.rendered; }));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "actions", {
/**
* @stable [02.09.2020]
* @private
*/
get: function () {
var _a = this.originalProps, _b = _a.buttonConfiguration, buttonConfiguration = _b === void 0 ? {} : _b, resetActionRendered = _a.resetActionRendered, _c = _a.resetConfiguration, resetConfiguration = _c === void 0 ? {} : _c, resetIcon = _a.resetIcon, resetText = _a.resetText, _d = _a.submitConfiguration, submitConfiguration = _d === void 0 ? {} : _d, submitIcon = _a.submitIcon, submitText = _a.submitText;
var messages = this.settings.messages;
return util_1.FilterUtils.objectValuesArrayFilter(resetActionRendered && util_1.FilterUtils.notNilValuesFilter(__assign(__assign({ icon: resetIcon || definition_1.IconsEnum.TIMES, text: resetText || messages.RESET, type: 'button',
/**/
disabled: !this.isFormResettable,
/**/
onClick: this.doReset }, buttonConfiguration), resetConfiguration)), util_1.FilterUtils.notNilValuesFilter(__assign(__assign({ icon: this.isFormValid ? (submitIcon || definition_1.IconsEnum.CHECK_CIRCLE) : definition_1.IconsEnum.EXCLAMATION, text: submitText || (this.isFormOfNewEntity ? messages.CREATE : messages.SAVE), type: 'button',
/**/
disabled: !this.isFormSubmittable, error: this.hasError, progress: this.isFormBusy, raised: true,
/**/
onClick: this.doSubmit }, buttonConfiguration), submitConfiguration)));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "className", {
/**
* @stable [12.06.2020]
* @returns {string}
*/
get: function () {
var originalProps = this.originalProps;
var className = originalProps.className;
return util_1.ClsUtils.joinClassName(definition_1.FormClassesEnum.FORM, util_1.WrapperUtils.isFull(originalProps) && definition_1.FormClassesEnum.FULL_FORM, util_1.CalcUtils.calc(className));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "apiEntity", {
/**
* @stable [31.07.2020]
*/
get: function () {
return util_1.Mappers.extendedEntityAsApiEntity(__assign(__assign({}, util_1.Mappers.extendedEntity(this.originalProps)), { changes: this.form.changes }));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Form.prototype, "hasError", {
/**
* @stable [31.07.2020]
*/
get: function () {
return util_1.ObjectUtils.isObjectNotEmpty(this.form.error);
},
enumerable: false,
configurable: true
});
/**
* @stable [21.08.2020]
* @param field
*/
Form.prototype.isFieldReadOnly = function (field) {
return util_1.FormUtils.isFieldReadOnly(this.originalProps, field.props);
};
/**
* @stable [21.08.2020]
* @param field
*/
Form.prototype.isFieldChangeable = function (field) {
return util_1.FormUtils.isFieldChangeable(this.originalProps, field.props);
};
Object.defineProperty(Form.prototype, "form", {
/**
* @stable [21.08.2020]
*/
get: function () {
return this.originalProps.form;
},
enumerable: false,
configurable: true
});
Form.defaultProps = {
actionsRendered: true,
alwaysDirty: false,
validateOnMount: true,
};
Form.logger = ts_smart_logger_1.LoggerFactory.makeLogger('Form');
__decorate([
di_1.lazyInject(di_1.DI_TYPES.FieldsPresets),
__metadata("design:type", Object)
], Form.prototype, "fieldsPresets", void 0);
return Form;
}(base_1.GenericComponent));
exports.Form = Form;
//# sourceMappingURL=form.component.js.map