Your IP : 216.73.216.86
import 'checkbox-list.css';
import { Dom, Type } from 'main.core';
import { EventEmitter } from 'main.core.events';
import { Popup, PopupOptions } from 'main.popup';
import 'ui.design-tokens';
import { BitrixVue, VueCreateAppResult } from 'ui.vue3';
import { Content } from './content';
export type CheckboxListEvents = {
onApply?: Function,
onCancel?: Function,
onDefault?: Function,
}
export type CheckboxListOptions = {
context?: CheckboxListContext;
lang?: CheckboxListLang;
compactField?: CheckboxListCompactField;
sections?: CheckboxListSection[];
categories: CheckboxListCategory[];
options: CheckboxListOption[];
columnCount?: number;
popupOptions?: PopupOptions;
events: CheckboxListEvents;
params?: CheckboxListParams;
customFooterElements?: Object[];
closeAfterApply?: boolean;
}
export type CheckboxListContext = {
parentType: string;
}
export type CheckboxListLang = {
title: string,
switcher: string,
placeholder: string,
defaultBtn: string,
acceptBtn: string,
cancelBtn: string,
selectAllBtn: string,
deselectAllBtn: string,
}
export type CheckboxListSection = {
key: string,
title: string,
value: boolean,
}
export type CheckboxListCategory = {
title: string,
sectionKey: string,
key: string,
}
export type CheckboxListOption = {
title: string,
value: boolean,
categoryKey: string,
defaultValue: boolean,
id: string,
locked?: boolean,
data?: Object,
}
export type CheckboxListCompactField = {
value: boolean,
defaultValue: boolean,
}
export type CheckboxListParams = {
useSearch?: boolean;
useSectioning?: boolean;
closeAfterApply?: boolean;
showBackToDefaultSettings?: boolean;
isEditableOptionsTitle?: boolean;
destroyPopupAfterClose?: boolean;
}
export class CheckboxList extends EventEmitter
{
layoutApp: ?VueCreateAppResult = null;
layoutComponent: ?Object = null;
constructor(options: CheckboxListOptions)
{
super();
this.setEventNamespace('BX.UI.Dialogs.CheckboxList');
this.subscribeFromOptions(options.events);
this.context = Type.isPlainObject(options.context) ? options.context : null;
this.compactField = Type.isPlainObject(options.compactField) ? options.compactField : null;
this.sections = Type.isArray(options.sections) ? options.sections : null;
this.lang = Type.isPlainObject(options.lang) ? options.lang : {};
this.popup = null;
this.columnCount = Type.isNumber(options.columnCount) ? options.columnCount : 4;
this.popupOptions = Type.isPlainObject(options.popupOptions) ? options.popupOptions : {};
this.params = Type.isPlainObject(options.params) ? options.params : {};
const useSectioning = (this.params.useSectioning ?? true);
if (useSectioning && !Type.isArray(options.categories))
{
throw new Error('CheckboxList: "categories" parameter is required.');
}
this.categories = options.categories;
if (useSectioning && !Type.isArray(options.options))
{
throw new Error('CheckboxList: "options" parameter is required.');
}
this.options = options.options;
this.customFooterElements = Type.isArrayFilled(options.customFooterElements) ? options.customFooterElements : [];
this.closeAfterApply = Type.isBoolean(options.closeAfterApply) ? options.closeAfterApply : true;
}
getPopup(): Popup
{
const container = Dom.create('div');
Dom.addClass(container, 'ui-checkbox-list__app-container');
if (!this.popup)
{
const { lang, layoutComponent, popupOptions } = this;
const { innerWidth, innerHeight } = window;
this.popup = new Popup({
className: 'ui-checkbox-list-popup',
width: 997,
maxWidth: Math.round(innerWidth * 0.9),
overlay: true,
autoHide: true,
minHeight: 200,
maxHeight: Math.round(innerHeight * 0.9),
borderRadius: 20,
contentPadding: 0,
contentBackground: 'transparent',
animation: 'fading-slide',
titleBar: lang.title,
content: container,
closeIcon: true,
closeByEsc: true,
...popupOptions,
events: {
onPopupClose: () => layoutComponent?.restoreOptionValues(),
},
});
const {
compactField,
customFooterElements,
sections,
categories,
options,
popup,
params,
context,
} = this;
this.layoutApp = BitrixVue.createApp(
Content,
{
compactField,
customFooterElements,
lang,
sections,
categories,
options,
popup,
columnCount: this.#getColumnCount(),
params,
context,
dialog: this,
},
);
// eslint-disable-next-line unicorn/consistent-destructuring
this.layoutComponent = this.layoutApp.mount(container);
}
return this.popup;
}
#getColumnCount(): number
{
let { columnCount } = this;
const { innerWidth } = window;
if (innerWidth <= 480)
{
columnCount = 1;
}
else if (innerWidth <= 768 && columnCount > 2)
{
columnCount = 2;
}
return columnCount;
}
show(): void
{
this.getPopup().show();
this.#getLayoutComponent().setFocusToSearchInput();
}
hide(): void
{
this.layoutComponent?.destroyOrClosePopup();
}
destroy(): void
{
if (!this.layoutApp)
{
return;
}
this.hide();
this.layoutApp.unmount();
this.layoutComponent = null;
this.popup = null;
}
isShown(): boolean
{
return this.popup && this.popup.isShown();
}
getOptions(): []
{
return this.#getLayoutComponent().getOptions();
}
getSelectedOptions(): ?string[]
{
return this.#getLayoutComponent().getCheckedOptionsId();
}
handleSwitcherToggled(id: string): void
{
return this.#getLayoutComponent().handleSwitcherToggled(id);
}
handleOptionToggled(id: string): void
{
return this.#getLayoutComponent().toggleOption(id);
}
saveColumns(columnIds: [], callback: Function): void
{
if (!Type.isArrayFilled(columnIds))
{
return;
}
columnIds.forEach((id) => this.selectOption(id));
this.apply();
}
selectOption(id: string, value: boolean): void
{
// to maintain backward compatibility without creating dependencies on main within the ticket #187991
// @todo remove later and set default value = true in the function signature
if (value !== false)
{
// eslint-disable-next-line no-param-reassign
value = true;
}
this.#getLayoutComponent().select(id, value);
}
apply(): void
{
this.#getLayoutComponent().apply();
}
#getLayoutComponent(): Object
{
if (!this.layoutComponent)
{
void this.getPopup();
}
return this.layoutComponent;
}
}