devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
231 lines (230 loc) • 7.99 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/load_panel.js)
* Version: 25.2.7
* Build date: Tue May 05 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["src"];
import messageLocalization from "../../common/core/localization/message";
import registerComponent from "../../core/component_registrator";
import $ from "../../core/renderer";
import {
noop
} from "../../core/utils/common";
import {
Deferred
} from "../../core/utils/deferred";
import LoadIndicator from "../../ui/load_indicator";
import {
current,
isFluent,
isMaterial
} from "../../ui/themes";
import Overlay from "../ui/overlay/overlay";
const LOADPANEL_CLASS = "dx-loadpanel";
const LOADPANEL_WRAPPER_CLASS = "dx-loadpanel-wrapper";
const LOADPANEL_INDICATOR_CLASS = "dx-loadpanel-indicator";
const LOADPANEL_MESSAGE_CLASS = "dx-loadpanel-message";
const LOADPANEL_CONTENT_CLASS = "dx-loadpanel-content";
const LOADPANEL_CONTENT_WRAPPER_CLASS = "dx-loadpanel-content-wrapper";
const LOADPANEL_PANE_HIDDEN_CLASS = "dx-loadpanel-pane-hidden";
class LoadPanel extends Overlay {
_supportedKeys() {
return Object.assign({}, super._supportedKeys(), {
escape: noop
})
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
message: messageLocalization.format("Loading"),
width: 222,
height: 90,
animation: null,
showIndicator: true,
indicatorSrc: "",
showPane: true,
delay: 0,
templatesRenderAsynchronously: false,
hideTopOverlayHandler: null,
focusStateEnabled: false,
propagateOutsideClick: true,
preventScrollEvents: false
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: {
platform: "generic"
},
options: {
shadingColor: "transparent"
}
}, {
device: () => isMaterial(current()),
options: {
message: "",
width: 60,
height: 60,
maxHeight: 60,
maxWidth: 60
}
}, {
device: () => isFluent(current()),
options: {
width: "auto",
height: "auto"
}
}])
}
_init() {
super._init()
}
_render() {
var _this$$wrapper;
super._render();
this.$element().addClass("dx-loadpanel");
null === (_this$$wrapper = this.$wrapper()) || void 0 === _this$$wrapper || _this$$wrapper.addClass("dx-loadpanel-wrapper");
this._updateWrapperAria()
}
_setDeprecatedOptions() {
super._setDeprecatedOptions();
this._deprecatedOptions = Object.assign({}, this._deprecatedOptions, {
indicatorSrc: {
since: "25.2",
alias: "indicatorOptions.src"
}
})
}
_updateWrapperAria() {
var _this$$wrapper2;
null === (_this$$wrapper2 = this.$wrapper()) || void 0 === _this$$wrapper2 || _this$$wrapper2.removeAttr("aria-label").removeAttr("role");
const showIndicator = this.option("showIndicator");
if (!showIndicator) {
const aria = this._getAriaAttributes();
this.$wrapper().attr(aria)
}
}
_getAriaAttributes() {
const {
message: message
} = this.option();
const label = message || messageLocalization.format("Loading");
const aria = {
role: "alert",
"aria-label": label
};
return aria
}
_renderContentImpl() {
const $content = this.$content();
if (!$content) {
return Promise.resolve(void 0)
}
const result = super._renderContentImpl();
$content.addClass("dx-loadpanel-content");
this._$loadPanelContentWrapper = $("<div>").addClass("dx-loadpanel-content-wrapper");
this._$loadPanelContentWrapper.appendTo($content);
this._togglePaneVisible();
this._cleanPreviousContent();
this._renderLoadIndicator();
this._renderMessage();
return result
}
_show() {
const {
delay: delay
} = this.option();
if (!delay) {
return super._show()
}
const deferred = Deferred();
const callBase = super._show.bind(this);
this._clearShowTimeout();
this._showTimeout = setTimeout(() => {
callBase().done(() => {
deferred.resolve()
})
}, delay);
return deferred.promise()
}
_hide() {
this._clearShowTimeout();
return super._hide()
}
_clearShowTimeout() {
clearTimeout(this._showTimeout)
}
_renderMessage() {
if (!this._$loadPanelContentWrapper) {
return
}
const {
message: message
} = this.option();
if (!message) {
return
}
const $message = $("<div>").addClass("dx-loadpanel-message").text(message);
this._$loadPanelContentWrapper.append($message)
}
_renderLoadIndicator() {
if (!this._$loadPanelContentWrapper || !this.option("showIndicator")) {
return
}
if (!this._$indicator) {
this._$indicator = $("<div>").addClass("dx-loadpanel-indicator").appendTo(this._$loadPanelContentWrapper)
}
const {
indicatorOptions: indicatorOptions = {},
indicatorSrc: indicatorSrc
} = this.option();
const {
src: src
} = indicatorOptions, restIndicatorOptions = _objectWithoutPropertiesLoose(indicatorOptions, _excluded);
this._createComponent(this._$indicator, LoadIndicator, Object.assign({
elementAttr: this._getAriaAttributes(),
indicatorSrc: src ?? indicatorSrc
}, restIndicatorOptions))
}
_cleanPreviousContent() {
var _this$$content, _this$$content2;
null === (_this$$content = this.$content()) || void 0 === _this$$content || _this$$content.find(".dx-loadpanel-message").remove();
null === (_this$$content2 = this.$content()) || void 0 === _this$$content2 || _this$$content2.find(".dx-loadpanel-indicator").remove();
this._$indicator = void 0
}
_togglePaneVisible() {
var _this$$content3;
null === (_this$$content3 = this.$content()) || void 0 === _this$$content3 || _this$$content3.toggleClass("dx-loadpanel-pane-hidden", !this.option("showPane"))
}
_optionChanged(args) {
switch (args.name) {
case "delay":
break;
case "message":
case "showIndicator":
this._cleanPreviousContent();
this._renderLoadIndicator();
this._renderMessage();
this._updateWrapperAria();
break;
case "showPane":
this._togglePaneVisible();
break;
case "indicatorSrc":
case "indicatorOptions":
this._renderLoadIndicator();
break;
default:
super._optionChanged(args)
}
}
_dispose() {
this._clearShowTimeout();
super._dispose()
}
}
registerComponent("dxLoadPanel", LoadPanel);
export default LoadPanel;