devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
246 lines (245 loc) • 8.96 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/dialog.js)
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import eventsEngine from "../../common/core/events/core/events_engine";
import messageLocalization from "../../common/core/localization/message";
import Action from "../../core/action";
import config from "../../core/config";
import devices from "../../core/devices";
import Guid from "../../core/guid";
import $ from "../../core/renderer";
import {
ensureDefined
} from "../../core/utils/common";
import {
Deferred
} from "../../core/utils/deferred";
import {
getHeight,
getWidth
} from "../../core/utils/size";
import {
isDefined,
isPlainObject
} from "../../core/utils/type";
import {
value as getViewport
} from "../../core/utils/view_port";
import {
getWindow
} from "../../core/utils/window";
import {
current,
isFluent
} from "../../ui/themes";
import errors from "../../ui/widget/ui.errors";
import domUtils from "../core/utils/m_dom";
import Popup from "../ui/popup/m_popup";
const window = getWindow();
const DX_DIALOG_CLASSNAME = "dx-dialog";
const DX_DIALOG_WRAPPER_CLASSNAME = "dx-dialog-wrapper";
const DX_DIALOG_ROOT_CLASSNAME = "dx-dialog-root";
const DX_DIALOG_CONTENT_CLASSNAME = "dx-dialog-content";
const DX_DIALOG_MESSAGE_CLASSNAME = "dx-dialog-message";
const DX_DIALOG_BUTTONS_CLASSNAME = "dx-dialog-buttons";
const DX_DIALOG_BUTTON_CLASSNAME = "dx-dialog-button";
const DX_BUTTON_CLASSNAME = "dx-button";
const DEFAULT_HORIZONTAL_OFFSET = 10;
const DEFAULT_VERTICAL_OFFSET = 0;
const DEFAULT_BOUNDARY_OFFSET = {
h: 10,
v: 0
};
const DEFAULT_BUTTON_OPTIONS = {
text: messageLocalization.format("OK"),
onClick: () => true
};
const getApplyButtonConfig = () => {
if (isFluent(current())) {
return {
stylingMode: "contained",
type: "default"
}
}
return {}
};
const getCancelButtonConfig = () => {
if (isFluent(current())) {
return {
stylingMode: "outlined",
type: "normal"
}
}
return {}
};
export const custom = params => {
var _popupInstance$$wrapp;
const {
buttons: buttons,
dragEnabled: dragEnabled,
message: message,
messageHtml: messageHtml,
popupOptions: popupOptions,
showCloseButton: showCloseButton,
showTitle: showTitle,
title: title = "",
width: width,
position: position
} = params ?? {};
const isMessageDefined = isDefined(message);
if (isMessageDefined) {
errors.log("W1013")
}
const isMessageHtmlDefined = isDefined(messageHtml);
const messageMarkup = String(isMessageHtmlDefined ? messageHtml : message);
const messageId = title ? null : (new Guid).toString();
const deferred = Deferred();
const $element = $("<div>").addClass("dx-dialog").appendTo(getViewport());
const $message = $("<div>").addClass("dx-dialog-message").html(messageMarkup).attr("id", messageId);
let popupInstance = null;
const hide = value => {
var _popupInstance3;
deferred.resolve(value);
null === (_popupInstance3 = popupInstance) || void 0 === _popupInstance3 || _popupInstance3.hide()
};
const buttonOptions = buttons ?? [DEFAULT_BUTTON_OPTIONS];
const toolbarItems = buttonOptions.map((configuration => {
const {
onClick: onClick
} = configuration;
const action = new Action(onClick, {
context: popupInstance
});
const buttonItem = {
toolbar: "bottom",
location: devices.current().android ? "after" : "center",
widget: "dxButton",
options: Object.assign({}, configuration, {
onClick: e => {
const result = action.execute(e);
hide(result)
}
})
};
return buttonItem
}));
const popupPosition = position ?? {
boundaryOffset: Object.assign({}, DEFAULT_BOUNDARY_OFFSET)
};
const configuration = {
animation: {
show: {
type: "pop",
duration: 400
},
hide: {
type: "pop",
duration: 400,
to: {
opacity: 0,
scale: 0
},
from: {
opacity: 1,
scale: 1
}
}
},
container: $element,
dragAndResizeArea: window,
dragEnabled: ensureDefined(dragEnabled, true),
height: "auto",
ignoreChildEvents: false,
onContentReady: e => {
var _component$$content;
const component = e.component;
null === (_component$$content = component.$content()) || void 0 === _component$$content || _component$$content.addClass("dx-dialog-content").append($message);
if (messageId) {
component.$overlayContent().attr("aria-labelledby", messageId)
}
},
onHiding: () => {
deferred.reject()
},
onShowing: e => {
const component = e.component;
const bottomToolbar = component.bottomToolbar();
null === bottomToolbar || void 0 === bottomToolbar || bottomToolbar.addClass("dx-dialog-buttons").find(".dx-button").addClass("dx-dialog-button");
domUtils.resetActiveElement()
},
onShown: e => {
const component = e.component;
const bottomToolbar = component.bottomToolbar();
const $firstButton = null === bottomToolbar || void 0 === bottomToolbar ? void 0 : bottomToolbar.find(".dx-button").first();
eventsEngine.trigger($firstButton, "focus")
},
position: popupPosition,
rtlEnabled: config().rtlEnabled,
showCloseButton: showCloseButton ?? false,
showTitle: ensureDefined(showTitle, true),
title: title,
toolbarItems: toolbarItems,
visualContainer: window,
width: width
};
const options = Object.assign({}, configuration, popupOptions, {
onHidden: e => {
var _popupOptions$onHidde;
$(e.element).remove();
null === popupOptions || void 0 === popupOptions || null === (_popupOptions$onHidde = popupOptions.onHidden) || void 0 === _popupOptions$onHidde || _popupOptions$onHidde.call(popupOptions, e)
}
});
popupInstance = new Popup($element, options);
null === (_popupInstance$$wrapp = popupInstance.$wrapper()) || void 0 === _popupInstance$$wrapp || _popupInstance$$wrapp.addClass("dx-dialog-wrapper").addClass("dx-dialog-root");
const dialog = {
show: () => {
var _popupInstance2;
if ("phone" === devices.real().deviceType) {
var _popupInstance;
const isPortrait = getHeight(window) > getWidth(window);
const width = isPortrait ? "90%" : "60%";
null === (_popupInstance = popupInstance) || void 0 === _popupInstance || _popupInstance.option({
width: width
})
}
null === (_popupInstance2 = popupInstance) || void 0 === _popupInstance2 || _popupInstance2.show();
return deferred.promise()
},
hide: hide
};
return dialog
};
const isCustomDialogOptions = options => isPlainObject(options);
export const alert = (messageHtml, title, showTitle) => {
const titleValue = title ?? "";
const options = isCustomDialogOptions(messageHtml) ? messageHtml : {
title: titleValue,
messageHtml: messageHtml,
showTitle: showTitle,
buttons: [Object.assign({}, DEFAULT_BUTTON_OPTIONS, getApplyButtonConfig())],
dragEnabled: showTitle
};
return custom(options).show()
};
export const confirm = (messageHtml, title, showTitle) => {
const titleValue = title ?? "";
const options = isCustomDialogOptions(messageHtml) ? messageHtml : {
title: titleValue,
messageHtml: messageHtml,
showTitle: showTitle,
buttons: [Object.assign({
text: messageLocalization.format("Yes"),
onClick: () => true
}, getApplyButtonConfig()), Object.assign({
text: messageLocalization.format("No"),
onClick: () => false
}, getCancelButtonConfig())],
dragEnabled: showTitle
};
return custom(options).show()
};