@try-at-software/input-elements/lib/SingleValueInputElements/SingleValueInputElement.js

A package providing different input elements that are extensible and easily configurable for your custom needs.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SingleValueInputElement = void 0;
const React = require("react");
const ExtendedInputElement_1 = require("../ExtendedInputElement");
const Utilities_1 = require("../Utilities");
const SingleValueInputElementWrapper_1 = require("./InternalPresentationComponents/SingleValueInputElementWrapper");
class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElement {
    constructor(config, component, props, update, ...validationRules) {
        super(update);
        this.valueChangeSubscriptions = [];
        this.initialValueChangeSubscriptions = [];
        this.invalidValueChangeSubscriptions = [];
        this._isInvalidated = false;
        this.setError = (errorMessage) => {
            this.errorMessage = errorMessage;
            if (this._componentRef.current)
                this._componentRef.current.setError(errorMessage);
        };
        this.valueIsValid = () => {
            var _a;
            if (!!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.comparator))
                return this._configuration.comparator.isValid(this.value);
            return !!this.value;
        };
        this.invalidateInput = (options) => {
            this._isInvalidated = true;
            if (options === null || options === void 0 ? void 0 : options.errorMessage)
                this.setError(options.errorMessage);
            this.updateInternally();
            this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
        };
        this._configuration = config;
        this.componentToRender = component;
        this.componentProps = props;
        this.validationRules = [];
        validationRules.forEach((rule) => {
            if (!rule)
                return;
            this.validationRules.push(rule);
        });
    }
    /** @inheritdoc */
    subscribeToValueChange(subscription) {
        if (!subscription)
            return;
        this.valueChangeSubscriptions.push(subscription);
    }
    /** @inheritdoc */
    subscribeToInitialValueChange(subscription) {
        if (!subscription)
            return;
        this.initialValueChangeSubscriptions.push(subscription);
    }
    /** @inheritdoc */
    subscribeToInvalidValueChange(subscription) {
        if (!subscription)
            return;
        this.invalidValueChangeSubscriptions.push(subscription);
    }
    /** @inheritdoc */
    setInternalValue(value, isInitial) {
        var _a;
        if (this._isInvalidated)
            this._isInvalidated = false;
        const previousValue = this.value;
        this.value = value;
        if ((_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.current)
            this._componentRef.current.update(value);
        this.validate();
        if (this.isValid) {
            if (isInitial)
                this.initialValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value, previousValue));
            else
                this.valueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value, previousValue));
        }
        else
            this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
    }
    /** @inheritdoc */
    resetInternalValue() {
        var _a;
        this.setError(undefined);
        this.value = undefined;
        if (this._isInvalidated)
            this._isInvalidated = false;
        if ((_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.current)
            this._componentRef.current.update(undefined);
        this.updateInternally();
    }
    /** @inheritdoc */
    get hasChanges() {
        var _a;
        return !!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.comparator)
            ? !this._configuration.comparator.areEqual(this.value, this.initialValue)
            : this.value !== this.initialValue;
    }
    /** @inheritdoc */
    get isValid() {
        if (this._isInvalidated || this.isLoading || this.errorMessage)
            return false;
        return (!!this._configuration && !this._configuration.isRequired) || this._valueIsSet || this._initialValueIsSet;
    }
    /** @inheritdoc */
    getDynamicProps() {
        return this._dynamicProps;
    }
    /** @inheritdoc */
    renderComponent() {
        var _a, _b, _c, _d, _e, _f;
        return (React.createElement("div", { className: Utilities_1.combineClasses('tas-input-element', (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.className) },
            React.createElement("div", { className: "tas-input-element-content" },
                React.createElement(SingleValueInputElementWrapper_1.SingleValueInputElementWrapper, { internalComponent: this.componentToRender, renderErrors: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderErrors, loadingIndicator: (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.loadingComponent, inputProps: {
                        label: (_d = this._configuration) === null || _d === void 0 ? void 0 : _d.label,
                        value: this.value,
                        isRequired: this._configuration.isRequired,
                        renderRequiredIndicator: ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.isRequired) && ((_f = this._configuration) === null || _f === void 0 ? void 0 : _f.renderRequiredIndicator),
                        errorMessage: this.errorMessage,
                        onChange: (newValue) => this.setValue(newValue),
                        invalidateInput: this.invalidateInput
                    }, operativeProps: this.componentProps, initialDynamicProps: this._dynamicProps, isInitiallyLoading: this.isLoading, isInitiallyVisible: this.isVisible, ref: this._componentRef }))));
    }
    /** @inheritdoc */
    changeDynamicProps(dynamicProps) {
        var _a;
        if (!dynamicProps)
            return;
        this._dynamicProps = Object.assign(Object.assign({}, this._dynamicProps), dynamicProps);
        if (!((_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.current))
            return;
        this._componentRef.current.changeDynamicProps(this._dynamicProps);
    }
    /** @inheritdoc */
    validate() {
        var _a, _b, _c, _d, _e;
        if (!!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.shouldExecuteValidation) && this._configuration.shouldExecuteValidation() === false)
            return;
        let errorMessage = undefined;
        if (((_b = this._configuration) === null || _b === void 0 ? void 0 : _b.isRequired) && !this.valueIsValid()) {
            // If a value is required but the input field is empty.
            errorMessage = ((_c = this._configuration) === null || _c === void 0 ? void 0 : _c.requiredValidationMessage) || `The field is required`;
        }
        else if (((_d = this._configuration) === null || _d === void 0 ? void 0 : _d.isRequired) || this.value || ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.executeAllValidations)) {
            // If a value is provided.
            for (const validationRule of this.validationRules) {
                const currentError = validationRule(this.value);
                if (currentError) {
                    errorMessage = currentError;
                    break;
                }
            }
        }
        this.setError(errorMessage);
    }
}
exports.SingleValueInputElement = SingleValueInputElement;