@try-at-software/input-elements
Version:
A package providing different input elements that are extensible and easily configurable for your custom needs.
124 lines (123 loc) • 6.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DynamicListInputElement = void 0;
const React = require("react");
const ExtendedInputElement_1 = require("../ExtendedInputElement");
const DynamicListInputElementWrapper_1 = require("./InternalPresentationComponents/DynamicListInputElementWrapper");
const Menu_1 = require("./Menu");
class DynamicListInputElement extends ExtendedInputElement_1.ExtendedInputElement {
constructor(config, inputOptions, update) {
super(update);
this.renderMenu = (index) => {
var _a, _b, _c, _d, _e;
return (React.createElement(Menu_1.DynamicListMenu, { options: this.inputOptions, onAddClicked: (createdInput) => {
var _a;
this._inputs.splice(index + 1, 0, this.convert(createdInput));
(_a = this._componentRef.current) === null || _a === void 0 ? void 0 : _a.update(this._inputs);
this.updateInternally();
}, onRemoveClicked: () => {
var _a;
this._inputs.splice(index, 1);
(_a = this._componentRef.current) === null || _a === void 0 ? void 0 : _a.update(this._inputs);
this.updateInternally();
}, insertButtonConfig: Object.assign(Object.assign({}, (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.insertButtonConfig), { isEnabled: true, show: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.canInsertValues }), removeButtonConfig: Object.assign(Object.assign({}, (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.removeButtonConfig), { isEnabled: this.inputs.length > 1 || ((_d = this._configuration) === null || _d === void 0 ? void 0 : _d.canRemoveAllInputs), show: (_e = this._configuration) === null || _e === void 0 ? void 0 : _e.canRemoveValues }) }));
};
this.renderFooterMenu = () => {
var _a, _b, _c, _d, _e, _f;
return (React.createElement(Menu_1.DynamicListMenu, { options: this.inputOptions, onAddClicked: this.onAddNewValue, insertButtonConfig: {
className: (_b = (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.addButtonConfig) === null || _b === void 0 ? void 0 : _b.className,
iconName: (_d = (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.addButtonConfig) === null || _d === void 0 ? void 0 : _d.iconName,
label: ((_f = (_e = this._configuration) === null || _e === void 0 ? void 0 : _e.addButtonConfig) === null || _f === void 0 ? void 0 : _f.label) || 'Add new element',
isEnabled: true,
show: true
}, removeButtonConfig: {
show: false
} }));
};
this.onAddNewValue = (createdInput) => {
var _a;
this._inputs.push(this.convert(createdInput));
(_a = this._componentRef.current) === null || _a === void 0 ? void 0 : _a.update(this._inputs);
this.updateInternally();
};
this.onDragEnd = (result) => {
if (!(result === null || result === void 0 ? void 0 : result.destination))
return;
this.reorder(result.source.index, result.destination.index);
this.update();
};
this._configuration = config;
this._inputs = [];
this.inputOptions = inputOptions;
}
/** @inheritdoc */
validate() {
this.inputs.forEach((x) => x.validate());
}
/** @inheritdoc */
get hasChanges() {
return this.inputs.some((x) => x.hasChanges);
}
/** @inheritdoc */
get inputs() {
return this.filterInputs().map((i) => i.input);
}
/** @inheritdoc */
get isValid() {
var _a, _b;
return ((!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.isRequired) && (!this.inputs || this.inputs.length <= 0)) ||
(!!this.inputs && this.inputs.length > 0 && ((_b = this.inputs) === null || _b === void 0 ? void 0 : _b.every((i) => i.isValid))));
}
/** @inheritdoc */
get value() {
var _a;
return (_a = this.inputs) === null || _a === void 0 ? void 0 : _a.map((i) => i.value);
}
/** @inheritdoc */
renderComponent() {
var _a, _b;
return (React.createElement(DynamicListInputElementWrapper_1.DynamicListInputElementWrapper, { className: this._configuration.className, inputs: this.filterInputs(), onDragEnd: this.onDragEnd, renderMenu: this.renderMenu, renderFooterMenu: this.renderFooterMenu, loadingComponent: (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.loadingComponent, renderMoveGripper: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderMoveGripper, ref: this._componentRef }));
}
reorder(startIndex, endIndex) {
const [removed] = this._inputs.splice(startIndex, 1);
this._inputs.splice(endIndex, 0, removed);
}
convert(input) {
if (!input)
return null;
return {
uniqueId: DynamicListInputElement.counter++,
input: input
};
}
setInternalValue(valueChange, isInitial) {
var _a;
if (!valueChange || !Array.isArray(valueChange))
return;
const newInputs = [];
valueChange
.filter((x) => !!(x === null || x === void 0 ? void 0 : x.inputCreationCallback))
.forEach((vc) => {
const createdInput = vc.inputCreationCallback();
if (!createdInput)
return;
if (isInitial)
createdInput.setInitialValue(vc.value);
else
createdInput.setValue(vc.value);
newInputs.push(this.convert(createdInput));
});
this._inputs = newInputs;
(_a = this._componentRef.current) === null || _a === void 0 ? void 0 : _a.update(this._inputs);
}
/** @inheritdoc */
resetInternalValue() {
this._inputs = [];
}
filterInputs() {
var _a;
return (_a = this._inputs) === null || _a === void 0 ? void 0 : _a.filter((i) => !!(i === null || i === void 0 ? void 0 : i.input));
}
}
exports.DynamicListInputElement = DynamicListInputElement;
DynamicListInputElement.counter = 0;