devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
121 lines (120 loc) • 4.76 kB
JavaScript
/**
* 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;