Работа с боковой панелью Web-клиента

Боковая панель Web-клиента — отображаемая по запросу правая панель, на которую могут быть добавлены требуемые элементы управления. Данный компонент реализован в классе ModalSidebar JS-модуля @Docsvision/webclient/Helpers/ModalSidebar/ModalSidebar.

Следующий код демонстрирует пример использования боковой панели для отображения текущего времени.

export function showSidebar(sender: CustomButton, e: IEventArgs) { (1)
    let host: ModalHost = new ModalHost("time-dialog", () => {
        return (
            <ModalBackdrop visible={true} onClick={() => host.unmount()} > (2)
            {/* Элемент Боковая панель */}
            <ModalSidebar isOpen={true}>

              {/* button */} (3)
              <ModalSidebarCloseButton onClick={() => host.unmount()} />

             {/* header */} (4)
             <ModalSidebarHeader>Заголовок панели</ModalSidebarHeader>

                {/* contents */} (5)
                <div>Текущее время: {(new Date()).toTimeString()}</div>
                </ModalSidebar>
            </ModalBackdrop>
        );
    });

    host.mount(); (6)

    setInterval(() => host.forceUpdate(), 1000); (7)
}

1	Создаем контейнер для размещения модальных окон, которым является боковая панель. Первый параметр конструктора `ModalHost` — класс, который будет задан элементу-контейнеру в DOM. Второй параметр — функция, выполняющая отрисовку модального окна.
2	Элемент `ModalBackdrop` создаёт темный фон при отображении боковой панели. При клике по элементу `ModalBackdrop` боковая панель будет закрыта.
3	Кнопка для закрытия боковой панели.
4	Заголовок боковой панели.
5	Содержимое боковой панели. В данном случае на боковой панели отображается текущее время.
6	Вызов метода, добавляющего проинициализированный контейнер с боковой панелью в DOM.
7	Периодически вызываемый метод перерисовки контейнера с боковой панелью. Метод обновляет отображаемое значение текущего времени.