@dooboostore/dom-render
Version:
html view template engine
86 lines • 4.32 kB
JavaScript
import { ComponentBase } from '../ComponentBase';
import { DomRender } from '../../DomRender';
import { RawSet } from '../../rawsets/RawSet';
import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
import { map } from '@dooboostore/core/message/operators/map';
import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
import { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';
export var Input;
(function (Input_1) {
Input_1.selector = `dr-input`;
class Base extends ComponentBase {
}
Input_1.Base = Base;
// @Component({
// selector: `${selector}`,
// template,
// styles,
// })
class Input extends Base {
onCreateRender(...param) {
}
onInitRender(param, rawSet) {
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'));
const makeDeboundceDistinctUtilChanged = () => {
// let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');
let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(map(event => event.target.value.trim()));
if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
result$ = result$.pipe(debounceTime(debounceTimeValue));
}
if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
result$ = result$.pipe(distinctUntilChanged());
}
return result$;
};
this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
var _a;
// console.log('change?????????????', it);
(_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
});
if (inputElement && inputElement.form) {
this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, 'reset').subscribe(it => {
var _a;
// console.log('rrrraaa?,', this.inputSubscription, it)
(_a = this.inputSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
var _a;
// console.log('rrrr?')
(_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
});
});
}
}
onChangeAttrRender(name, value, other) {
super.onChangeAttrRender(name, value, other);
// console.log('-------->',name, value)
if (name === 'value') {
// console.log('changeAttribu', name, value)
// this.wow = {value: value};
// this.name = value;
}
}
onDestroyRender(metaData) {
var _a, _b;
(_a = this.resetSubscripton) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this.inputSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
}
}
Input_1.Input = Input;
})(Input || (Input = {}));
export 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: config });
}
});
},
};
//# sourceMappingURL=Input.js.map