Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/forms / build / dist / src / new-forms / inputs / InputState.js
Size: Mime:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const mobx_1 = require("xmobx/mobx");
const CommonState_1 = require("../CommonState");
const deps_1 = require("../deps");
let identifierIndex = 0;
class InputState extends CommonState_1.CommonState {
    constructor() {
        super(...arguments);
        this.identifier = (identifierIndex += 1) + '-input';
        /**
         * @description this is a type that Plugins could extend
         * @todo this should have a generic
         */
        this.type = 'text';
        /** @description these are the props for the ObserverInput/plugin */
        this.attributes = {};
        this.validator = deps_1.DEFAULT_VALIDATOR;
        this.serializer = deps_1.DEFAULT_SERIALIZER;
        /** @description this is used for serializing */
        this.propertyName = '';
        /** @todo typings */
        this.store = mobx_1.observable.map();
    }
    /**
     * using this to check if an input value has been changed
     * this gets reset when the state is `reset`
     */
    get isDirty() {
        if (this.store.has('isDirty')) {
            return this.store.get('isDirty');
        }
        else {
            return this.value !== '' && this.value !== undefined;
        }
    }
    setIsDirty(isDirty) {
        this.store.set('isDirty', isDirty);
    }
    /** should not use this public-ally or at all with context */
    setFormState(formState) {
        this.formState = formState;
    }
    setType(type) {
        /**
         * @todo need to use `toType` too to detect which type
         * @example this.type = toType(type)
         */
        this.type = type;
    }
    setValidator(validator) {
        this.validator = validator;
    }
    setSerializer(serializer) {
        this.serializer = serializer;
    }
    /**
     * @description this is computed only when changed
     * @see https://mobx.js.org/refguide/computed-decorator.html
     *
     * @todo may want to trigger validation at different points
     * @example will cover in stories
     *
     * @todo this seems flawed at its core
     *
     * 1. we could `set` isValid
     * 2. we could `inherit` showing isValid
     *    since we would only show invalid inputs when the whole form shows them?
     *
     * @todo at very least, pass in just `this`...
     *       we would want just `this.value`...
     *
     * @event blur
     * - in this case, we validate on blur
     * - strategy: this will not work
     *
     * @event submit
     * - in this case, we validate on submit only
     * - strategy: this will not work
     *
     * @event onChange
     * - in this case, we validate on every keystroke or change
     * - strategy: this computed value works
     */
    get isValid() {
        if (this.store.has('isValid') === true) {
            return this.store.get('isValid');
        }
        else {
            return this.validator(this.value) === true;
        }
    }
    setIsValid(isValid) {
        this.store.set('isValid', isValid);
    }
    /**
     * @description this in the initial POC of minimalism was
     *              `return string if error, true if valid`
     * @todo may want to change
     */
    get errorText() {
        return this.validator(this.value);
    }
    setAttribute(key, value) {
        this.attributes[key] = value;
    }
    setPropertyName(named) {
        this.propertyName = named;
    }
    setIdentifier(identifier) {
        this.identifier = identifier;
    }
    toJSON() {
        return this.serializer(this);
    }
    merge(obj) {
        Object.keys(obj).forEach(key => {
            const value = obj[key];
            switch (key) {
                case 'propertyName':
                case 'name':
                    return this.setPropertyName(value);
                case 'value':
                    return this.setValue(value);
                case 'identifier':
                    return this.setIdentifier(value);
                case 'label':
                    return this.setLabel(value);
                case 'type':
                    return this.setType(value);
                case 'validator':
                    return this.setValidator(value);
                case 'serializer':
                    return this.setSerializer(value);
                case 'formState':
                    return this.setFormState(value);
                case 'isActive':
                    return this.setIsActive(value);
                case 'isSelected':
                    return this.setIsSelected(value);
                case 'isDisabled':
                    return this.setIsDisabled(value);
                // isRequired
                case 'attributes':
                    // or could curry the method
                    const setAttribute = (attribute) => this.setAttribute(attribute, value);
                    return Object.keys(value).forEach(setAttribute);
                default:
                    return this.setAttribute(key, value);
            }
        });
    }
    static from(obj) {
        const state = new InputState();
        state.merge(obj);
        return state;
    }
}
tslib_1.__decorate([
    mobx_1.observable
], InputState.prototype, "identifier", void 0);
tslib_1.__decorate([
    mobx_1.observable
], InputState.prototype, "type", void 0);
tslib_1.__decorate([
    mobx_1.observable.shallow
], InputState.prototype, "attributes", void 0);
tslib_1.__decorate([
    mobx_1.observable.ref
], InputState.prototype, "validator", void 0);
tslib_1.__decorate([
    mobx_1.observable.ref
], InputState.prototype, "serializer", void 0);
tslib_1.__decorate([
    mobx_1.observable.ref
], InputState.prototype, "formState", void 0);
tslib_1.__decorate([
    mobx_1.observable
], InputState.prototype, "propertyName", void 0);
tslib_1.__decorate([
    mobx_1.computed
], InputState.prototype, "isDirty", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setIsDirty", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setFormState", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setType", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setValidator", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setSerializer", null);
tslib_1.__decorate([
    mobx_1.computed
], InputState.prototype, "isValid", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setIsValid", null);
tslib_1.__decorate([
    mobx_1.computed
], InputState.prototype, "errorText", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setAttribute", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setPropertyName", null);
tslib_1.__decorate([
    mobx_1.action
], InputState.prototype, "setIdentifier", null);
exports.InputState = InputState;
//# sourceMappingURL=InputState.js.map