UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

121 lines (120 loc) 4.76 kB
/** * DevExtreme (esm/__internal/ui/chat/confirmationpopup.js) * Version: 25.1.3 * Build date: Wed Jun 25 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; const _excluded = ["onApplyButtonClick", "onCancelButtonClick"]; import eventsEngine from "../../../common/core/events/core/events_engine"; import Guid from "../../../core/guid"; import $ from "../../../core/renderer"; import { extend } from "../../../core/utils/extend"; import messageLocalization from "../../../localization/message"; import Popup from "../../../ui/popup"; import { BUTTON_CLASS } from "../../ui/button/button"; export const CHAT_CONFIRMATION_POPUP_WRAPPER_CLASS = "dx-chat-confirmation-popup-wrapper"; const POPUP_WIDTH = 240; class ConfirmationPopup { constructor($container, config) { this._$container = $container; const _ref = config ?? {}, { onApplyButtonClick: onApplyButtonClick, onCancelButtonClick: onCancelButtonClick } = _ref, popupConfig = _objectWithoutPropertiesLoose(_ref, _excluded); this._actions = { onApplyButtonClick: onApplyButtonClick, onCancelButtonClick: onCancelButtonClick }; this._popupConfig = popupConfig; this._renderPopup() } _renderPopup() { const $popupContainer = $("<div>").appendTo(this._$container); this._popup = new Popup($popupContainer.get(0), this._getPopupConfig()) } _getPopupConfig() { const messageId = (new Guid).toString(); const $message = $("<div>").html(messageLocalization.format("dxChat-editingDeleteConfirmText")).attr("id", messageId); return extend(_extends({ width: 240, height: "auto", showTitle: false, showCloseButton: false, shading: true, dragEnabled: false, hideOnOutsideClick: true, toolbarItems: this._getToolbarItems(), onContentReady(args) { args.component.$content().append($message); args.component.$overlayContent().attr("aria-labelledby", messageId) }, onShown: e => { const $firstButton = e.component.bottomToolbar().find(`.${BUTTON_CLASS}`).first(); eventsEngine.trigger($firstButton, "focus") }, wrapperAttr: { class: "dx-chat-confirmation-popup-wrapper" }, focusStateEnabled: true, position: { my: "center", at: "center", of: this._$container } }, this._popupConfig)) } _getApplyButtonConfig() { return { widget: "dxButton", toolbar: "bottom", location: "before", options: { text: messageLocalization.format("Yes"), type: "default", stylingMode: "contained", onClick: () => { var _this$_actions, _this$_actions$onAppl; null === (_this$_actions = this._actions) || void 0 === _this$_actions || null === (_this$_actions$onAppl = _this$_actions.onApplyButtonClick) || void 0 === _this$_actions$onAppl || _this$_actions$onAppl.call(_this$_actions); this._popup.hide() } } } } _getCancelButtonConfig() { return { widget: "dxButton", toolbar: "bottom", location: "after", options: { text: messageLocalization.format("No"), type: "normal", stylingMode: "outlined", onClick: () => { var _this$_actions2, _this$_actions2$onCan; null === (_this$_actions2 = this._actions) || void 0 === _this$_actions2 || null === (_this$_actions2$onCan = _this$_actions2.onCancelButtonClick) || void 0 === _this$_actions2$onCan || _this$_actions2$onCan.call(_this$_actions2); this._popup.hide() } } } } _getToolbarItems() { return [this._getApplyButtonConfig(), this._getCancelButtonConfig()] } show() { this._popup.show() } dispose() { this._popup.dispose() } } export default ConfirmationPopup;