@dooboostore/dom-render
Version:
html view template engine
83 lines (82 loc) • 3.31 kB
JavaScript
import { ComponentBase } from "../ComponentBase.js";
import { DomRender } from "../../DomRender.js";
import { RawSet } from "../../rawsets/RawSet.js";
import { ValidUtils } from "@dooboostore/core";
import { MessageOperator } from "@dooboostore/core";
import { EventUtils } from "@dooboostore/core-web";
var Input;
((_Input) => {
_Input.selector = `dr-input`;
class Base extends ComponentBase {
}
_Input.Base = Base;
class Input2 extends Base {
onCreateRender(...param) {
}
async onInitRender(param, rawSet) {
await super.onInitRender(param, rawSet);
const inputElement = this.element;
const debounceTimeAttribute = this.getAttribute("debounceTime");
const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
const distinct = ValidUtils.isNotNullUndefined(this.getAttribute("distinct"));
if (inputElement) {
const makeDeboundceDistinctUtilChanged = () => {
let result$ = EventUtils.htmlElementEventObservable(inputElement, "input").pipe(
MessageOperator.map((event) => {
const target = event.target;
if (target instanceof HTMLInputElement) {
return target.value.trim();
}
console.warn("Input event target is not an HTMLInputElement:", target);
return "";
})
);
if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
result$ = result$.pipe(MessageOperator.debounceTime(debounceTimeValue));
}
if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
result$ = result$.pipe(MessageOperator.distinctUntilChanged());
}
return result$;
};
this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe((it) => {
this.getAttribute("input")?.(it, inputElement);
});
if (inputElement.form) {
this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, "reset").subscribe((it) => {
this.inputSubscription?.unsubscribe();
this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe((it2) => {
this.getAttribute("input")?.(it2, inputElement);
});
});
}
}
}
onChangeAttrRender(name, value, other) {
super.onChangeAttrRender(name, value, other);
if (name === "value") {
}
}
onDestroyRender(metaData) {
this.resetSubscripton?.unsubscribe();
this.inputSubscription?.unsubscribe();
}
}
_Input.Input = Input2;
})(Input || (Input = {}));
var Input_default = {
input: (config) => {
return RawSet.createComponentTargetElement({
name: `${Input.selector}`,
template: `<Input type="\${@this@.getAttribute('type')}$" class="\${@this@.getAttribute('class')}$" id="\${@this@.getAttribute('id')}$" name="\${@this@.getAttribute('name')}$" dr-on-init="@this@.element=$element" >#innerHTML#`,
objFactory: (e, o, r2, counstructorParam) => {
return DomRender.run({ rootObject: new Input.Input(...counstructorParam), config });
}
});
}
};
export {
Input,
Input_default as default
};
//# sourceMappingURL=Input.js.map