| Current Path : /var/www/homesaver/www/bitrix/js/ui/date-picker/src/ |
| Current File : /var/www/homesaver/www/bitrix/js/ui/date-picker/src/base-picker.js |
import { Dom, Tag } from 'main.core';
import { MemoryCache } from 'main.core.cache';
import type { BaseCache } from 'main.core.cache';
import { EventEmitter } from 'main.core.events';
import type { DatePicker } from './date-picker';
export class BasePicker extends EventEmitter
{
#datePicker: DatePicker = null;
#refs: BaseCache<HTMLElement> = new MemoryCache();
#rendered: boolean = false;
constructor(datePicker)
{
super();
this.setEventNamespace('BX.UI.DatePicker.BasePicker');
this.#datePicker = datePicker;
}
getContainer(): HTMLElement
{
throw new Error('You must implement getContainer method');
}
getHeaderContainer(...children: HTMLElement): HTMLElement
{
return this.#refs.remember('header', () => {
return Tag.render`<div class="ui-date-picker-header">${children}</div>`;
});
}
getContentContainer(...children: HTMLElement): HTMLElement
{
return this.#refs.remember('content', () => {
return Tag.render`<div class="ui-date-picker-content">${children}</div>`;
});
}
getPrevBtn(): HTMLButtonElement
{
return this.#refs.remember('prev-button', () => {
return Tag.render`
<button type="button" class="ui-date-picker-button --left-arrow" onclick="${this.handlePrevBtnClick.bind(this)}">
<span class="ui-icon-set --chevron-left" style="--ui-icon-set__icon-size: 20px"></span>
</button>
`;
});
}
getNextBtn(): HTMLButtonElement
{
return this.#refs.remember('next-button', () => {
return Tag.render`
<button type="button" class="ui-date-picker-button --right-arrow" onclick="${this.handleNextBtnClick.bind(this)}">
<span class="ui-icon-set --chevron-right" style="--ui-icon-set__icon-size: 20px"></span>
</button>
`;
});
}
handlePrevBtnClick()
{
this.emit('onPrevBtnClick');
}
handleNextBtnClick()
{
this.emit('onNextBtnClick');
}
render(): void
{
throw new Error('You must implement render method');
}
onShow(): void
{
// you can override this method
}
onHide(): void
{
// you can override this method
}
getDatePicker(): DatePicker
{
return this.#datePicker;
}
isRendered(): boolean
{
return this.#rendered;
}
renderTo(container: HTMLElement): void
{
Dom.append(this.getContainer(), container);
this.#rendered = true;
}
}