devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
269 lines (266 loc) • 8.9 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/toast/m_toast.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _pointer = _interopRequireDefault(require("../../../common/core/events/pointer"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _dom_adapter = _interopRequireDefault(require("../../../core/dom_adapter"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _extend = require("../../../core/utils/extend");
var _ready_callbacks = _interopRequireDefault(require("../../../core/utils/ready_callbacks"));
var _type = require("../../../core/utils/type");
var _ui = _interopRequireDefault(require("../../../ui/overlay/ui.overlay"));
var _themes = require("../../../ui/themes");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function(n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) {
({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
}
}
return n
}, _extends.apply(null, arguments)
}
const ready = _ready_callbacks.default.add;
const TOAST_CLASS = "dx-toast";
const TOAST_CLASS_PREFIX = "dx-toast-";
const TOAST_WRAPPER_CLASS = "dx-toast-wrapper";
const TOAST_CONTENT_CLASS = "dx-toast-content";
const TOAST_MESSAGE_CLASS = "dx-toast-message";
const TOAST_ICON_CLASS = "dx-toast-icon";
const WIDGET_NAME = "dxToast";
const toastTypes = ["info", "warning", "error", "success"];
const TOAST_STACK = [];
const FIRST_Z_INDEX_OFFSET = 8e3;
const POSITION_ALIASES = {
top: {
my: "top",
at: "top",
of: null,
offset: "0 0"
},
bottom: {
my: "bottom",
at: "bottom",
of: null,
offset: "0 -20"
},
center: {
my: "center",
at: "center",
of: null,
offset: "0 0"
},
right: {
my: "center right",
at: "center right",
of: null,
offset: "0 0"
},
left: {
my: "center left",
at: "center left",
of: null,
offset: "0 0"
}
};
const DEFAULT_BOUNDARY_OFFSET = {
h: 0,
v: 0
};
const DEFAULT_MARGIN = 20;
ready((() => {
_events_engine.default.subscribeGlobal(_dom_adapter.default.getDocument(), _pointer.default.down, (e => {
for (let i = TOAST_STACK.length - 1; i >= 0; i--) {
if (!TOAST_STACK[i]._proxiedDocumentDownHandler(e)) {
return
}
}
}))
}));
class Toast extends _ui.default {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
message: "",
type: "info",
displayTime: 2e3,
position: "bottom center",
animation: {
show: {
type: "fade",
duration: 400,
from: 0,
to: 1
},
hide: {
type: "fade",
duration: 400,
from: 1,
to: 0
}
},
shading: false,
height: "auto",
hideTopOverlayHandler: null,
preventScrollEvents: false,
closeOnSwipe: true,
closeOnClick: false
})
}
_defaultOptionsRules() {
const tabletAndMobileCommonOptions = {
displayTime: (0, _themes.isMaterialBased)() ? 4e3 : 2e3,
hideOnOutsideClick: true,
animation: {
show: {
type: "fade",
duration: 200,
from: 0,
to: 1
},
hide: {
type: "fade",
duration: 200,
from: 1,
to: 0
}
}
};
return super._defaultOptionsRules().concat([{
device: device => "phone" === device.deviceType,
options: _extends({
width: "calc(100vw - 40px)"
}, tabletAndMobileCommonOptions)
}, {
device: device => "tablet" === device.deviceType,
options: _extends({
width: "auto",
maxWidth: "80vw"
}, tabletAndMobileCommonOptions)
}, {
device: device => (0, _themes.isMaterialBased)() && "desktop" === device.deviceType,
options: {
minWidth: 344,
maxWidth: 568,
displayTime: 4e3
}
}])
}
_init() {
super._init();
this._posStringToObject()
}
_renderContentImpl() {
const {
message: message,
type: type
} = this.option();
this._message = (0, _renderer.default)("<div>").addClass("dx-toast-message").text(message).appendTo(this.$content());
this.setAria("role", "alert", this._message);
if (toastTypes.includes(type.toLowerCase())) {
this.$content().prepend((0, _renderer.default)("<div>").addClass("dx-toast-icon"))
}
super._renderContentImpl()
}
_render() {
super._render();
this.$element().addClass("dx-toast");
this.$wrapper().addClass("dx-toast-wrapper");
const {
type: type
} = this.option();
this.$content().addClass("dx-toast-" + String(type).toLowerCase());
this.$content().addClass("dx-toast-content");
this._toggleCloseEvents("Swipe");
this._toggleCloseEvents("Click")
}
_toggleCloseEvents(event) {
const dxEvent = `dx${event.toLowerCase()}`;
_events_engine.default.off(this.$content(), dxEvent);
this.option(`closeOn${event}`) && _events_engine.default.on(this.$content(), dxEvent, this.hide.bind(this))
}
_posStringToObject() {
const {
position: position
} = this.option();
if (!(0, _type.isString)(position)) {
return
}
const verticalPosition = position.split(" ")[0];
const horizontalPosition = position.split(" ")[1];
this.option("position", (0, _extend.extend)({
boundaryOffset: DEFAULT_BOUNDARY_OFFSET
}, POSITION_ALIASES[verticalPosition]));
switch (horizontalPosition) {
case "center":
case "left":
case "right":
this.option("position").at += ` ${horizontalPosition}`;
this.option("position").my += ` ${horizontalPosition}`
}
}
_show() {
return super._show.apply(this, arguments).always((() => {
clearTimeout(this._hideTimeout);
const {
displayTime: displayTime
} = this.option();
this._hideTimeout = setTimeout(this.hide.bind(this), displayTime)
}))
}
_overlayStack() {
return TOAST_STACK
}
_zIndexInitValue() {
return super._zIndexInitValue() + 8e3
}
_dispose() {
clearTimeout(this._hideTimeout);
super._dispose()
}
_optionChanged(args) {
const {
name: name,
value: value,
previousValue: previousValue
} = args;
switch (name) {
case "type":
this.$content().removeClass("dx-toast-" + previousValue);
this.$content().addClass("dx-toast-" + String(value).toLowerCase());
break;
case "message":
if (this._message) {
this._message.text(value)
}
break;
case "closeOnSwipe":
this._toggleCloseEvents("Swipe");
break;
case "closeOnClick":
this._toggleCloseEvents("Click");
break;
case "displayTime":
break;
default:
super._optionChanged(args)
}
}
}(0, _component_registrator.default)("dxToast", Toast);
var _default = exports.default = Toast;