Repository URL to install this package:
|
Version:
3.1.1 ▾
|
"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