devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
320 lines (317 loc) • 11.7 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/m_action_sheet.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/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _message = _interopRequireDefault(require("../../common/core/localization/message"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _bindable_template = require("../../core/templates/bindable_template");
var _common = require("../../core/utils/common");
var _deferred = require("../../core/utils/deferred");
var _extend = require("../../core/utils/extend");
var _window = require("../../core/utils/window");
var _button = _interopRequireDefault(require("../../ui/button"));
var _m_collection_widget = _interopRequireDefault(require("../ui/collection/m_collection_widget.edit"));
var _m_popover = _interopRequireDefault(require("../ui/popover/m_popover"));
var _m_popup = _interopRequireDefault(require("../ui/popup/m_popup"));
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 window = (0, _window.getWindow)();
const ACTION_SHEET_CLASS = "dx-actionsheet";
const ACTION_SHEET_CONTAINER_CLASS = "dx-actionsheet-container";
const ACTION_SHEET_POPUP_WRAPPER_CLASS = "dx-actionsheet-popup-wrapper";
const ACTION_SHEET_POPOVER_WRAPPER_CLASS = "dx-actionsheet-popover-wrapper";
const ACTION_SHEET_CANCEL_BUTTON_CLASS = "dx-actionsheet-cancel";
const ACTION_SHEET_ITEM_CLASS = "dx-actionsheet-item";
const ACTION_SHEET_ITEM_DATA_KEY = "dxActionSheetItemData";
const ACTION_SHEET_WITHOUT_TITLE_CLASS = "dx-actionsheet-without-title";
const ACTION_SHEET_BUTTON_DEFAULT_STYLING_MODE = "outlined";
class ActionSheet extends _m_collection_widget.default {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
usePopover: false,
target: null,
title: "",
showTitle: true,
showCancelButton: true,
cancelText: _message.default.format("Cancel"),
onCancelClick: null,
visible: false,
noDataText: "",
focusStateEnabled: false,
selectByClick: false
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: {
platform: "ios",
tablet: true
},
options: {
usePopover: true
}
}])
}
_initTemplates() {
super._initTemplates();
this._templateManager.addDefaultTemplates({
item: new _bindable_template.BindableTemplate((($container, data) => {
const button = new _button.default((0, _renderer.default)("<div>"), (0, _extend.extend)({
onClick: null === data || void 0 === data ? void 0 : data.click,
stylingMode: (null === data || void 0 === data ? void 0 : data.stylingMode) || "outlined"
}, data));
$container.append(button.$element())
}), ["disabled", "icon", "text", "type", "onClick", "click", "stylingMode"], this.option("integrationOptions.watchMethod"))
})
}
_itemContainer() {
return this._$itemContainer
}
_itemClass() {
return "dx-actionsheet-item"
}
_itemDataKey() {
return "dxActionSheetItemData"
}
_toggleVisibility() {}
_renderDimensions() {}
_initMarkup() {
super._initMarkup();
this.$element().addClass("dx-actionsheet");
this._createItemContainer()
}
_render() {
this._renderPopup()
}
_createItemContainer() {
this._$itemContainer = (0, _renderer.default)("<div>").addClass("dx-actionsheet-container");
this._renderDisabled()
}
_renderDisabled() {
const {
disabled: disabled
} = this.option();
this._$itemContainer.toggleClass("dx-state-disabled", disabled)
}
_renderPopup() {
this._$popup = (0, _renderer.default)("<div>").appendTo(this.$element());
this._isPopoverMode() ? this._createPopover() : this._createPopup();
this._renderPopupTitle();
this._mapPopupOption("visible")
}
_mapPopupOption(optionName) {
var _this$_popup;
null === (_this$_popup = this._popup) || void 0 === _this$_popup || _this$_popup.option(optionName, this.option(optionName))
}
_isPopoverMode() {
const {
usePopover: usePopover,
target: target
} = this.option();
return usePopover && target
}
_renderPopupTitle() {
var _this$_popup2;
this._mapPopupOption("showTitle");
null === (_this$_popup2 = this._popup) || void 0 === _this$_popup2 || _this$_popup2.$wrapper().toggleClass("dx-actionsheet-without-title", !this.option("showTitle"))
}
_clean() {
if (this._$popup) {
this._$popup.remove()
}
super._clean()
}
_overlayConfig() {
return {
onInitialized: function(args) {
this._popup = args.component
}.bind(this),
disabled: false,
showTitle: true,
title: this.option("title"),
deferRendering: true,
onContentReady: this._popupContentReadyAction.bind(this),
onHidden: this.hide.bind(this)
}
}
_createPopover() {
this._createComponent(this._$popup, _m_popover.default, (0, _extend.extend)(this._overlayConfig(), {
width: this.option("width") || 200,
height: this.option("height") || "auto",
target: this.option("target")
}));
this._popup.$overlayContent().attr("role", "dialog");
this._popup.$wrapper().addClass("dx-actionsheet-popover-wrapper")
}
_createPopup() {
this._createComponent(this._$popup, _m_popup.default, (0, _extend.extend)(this._overlayConfig(), {
dragEnabled: false,
width: this.option("width") || "100%",
height: this.option("height") || "auto",
showCloseButton: false,
position: {
my: "bottom",
at: "bottom",
of: window
},
animation: {
show: {
type: "slide",
duration: 400,
from: {
position: {
my: "top",
at: "bottom",
of: window
}
},
to: {
position: {
my: "bottom",
at: "bottom",
of: window
}
}
},
hide: {
type: "slide",
duration: 400,
from: {
position: {
my: "bottom",
at: "bottom",
of: window
}
},
to: {
position: {
my: "top",
at: "bottom",
of: window
}
}
}
}
}));
this._popup.$wrapper().addClass("dx-actionsheet-popup-wrapper")
}
_popupContentReadyAction() {
this._popup.$content().append(this._$itemContainer);
this._attachClickEvent();
this._attachHoldEvent();
this._prepareContent();
this._renderContent();
this._renderCancelButton()
}
_renderCancelButton() {
if (this._isPopoverMode()) {
return
}
if (this._$cancelButton) {
this._$cancelButton.remove()
}
if (this.option("showCancelButton")) {
var _this$_popup3;
const cancelClickAction = this._createActionByOption("onCancelClick") || _common.noop;
const that = this;
this._$cancelButton = (0, _renderer.default)("<div>").addClass("dx-actionsheet-cancel").appendTo(null === (_this$_popup3 = this._popup) || void 0 === _this$_popup3 ? void 0 : _this$_popup3.$content());
this._createComponent(this._$cancelButton, _button.default, {
disabled: false,
stylingMode: "outlined",
text: this.option("cancelText"),
onClick(e) {
const hidingArgs = {
event: e,
cancel: false
};
cancelClickAction(hidingArgs);
if (!hidingArgs.cancel) {
that.hide()
}
},
integrationOptions: {}
})
}
}
_attachItemClickEvent() {}
_itemClickHandler(e) {
super._itemClickHandler(e);
if (!(0, _renderer.default)(e.target).is(".dx-state-disabled, .dx-state-disabled *")) {
this.hide()
}
}
_itemHoldHandler(e) {
super._itemHoldHandler(e);
if (!(0, _renderer.default)(e.target).is(".dx-state-disabled, .dx-state-disabled *")) {
this.hide()
}
}
_optionChanged(args) {
switch (args.name) {
case "width":
case "height":
case "visible":
case "title":
this._mapPopupOption(args.name);
break;
case "disabled":
this._renderDisabled();
break;
case "showTitle":
this._renderPopupTitle();
break;
case "showCancelButton":
case "onCancelClick":
case "cancelText":
this._renderCancelButton();
break;
case "target":
case "usePopover":
case "items":
this._invalidate();
break;
default:
super._optionChanged(args)
}
}
toggle(showing) {
const that = this;
const d = (0, _deferred.Deferred)();
that._popup.toggle(showing).done((() => {
that.option("visible", showing);
d.resolveWith(that)
}));
return d.promise()
}
show() {
return this.toggle(true)
}
hide() {
return this.toggle(false)
}
}(0, _component_registrator.default)("dxActionSheet", ActionSheet);
var _default = exports.default = ActionSheet;