devextreme/esm/__internal/events/gesture/m_swipeable.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/events/gesture/m_swipeable.js)
 * Version: 25.2.5
 * Build date: Fri Feb 20 2026
 *
 * Copyright (c) 2012 - 2026 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 {
    end as swipeEventEnd,
    start as swipeEventStart,
    swipe as swipeEventSwipe
} from "../../../common/core/events/swipe";
import {
    addNamespace
} from "../../../common/core/events/utils/index";
import {
    each
} from "../../../core/utils/iterator";
import {
    name
} from "../../../core/utils/public_component";
import DOMComponent from "../../core/widget/dom_component";
const DX_SWIPEABLE = "dxSwipeable";
const SWIPEABLE_CLASS = "dx-swipeable";
const ACTION_TO_EVENT_MAP = {
    onStart: swipeEventStart,
    onUpdated: swipeEventSwipe,
    onEnd: swipeEventEnd,
    onCancel: "dxswipecancel"
};
const IMMEDIATE_TIMEOUT = 180;
class Swipeable extends DOMComponent {
    _getDefaultOptions() {
        return Object.assign({}, super._getDefaultOptions(), {
            elastic: true,
            immediate: false,
            immediateTimeout: 180,
            direction: "horizontal",
            itemSizeFunc: null,
            onStart: null,
            onUpdated: null,
            onEnd: null,
            onCancel: null
        })
    }
    _render() {
        super._render();
        this.$element().addClass("dx-swipeable");
        this._attachEventHandlers()
    }
    _attachEventHandlers() {
        this._detachEventHandlers();
        if (this.option("disabled")) {
            return
        }
        const {
            NAME: NAME
        } = this;
        this._createEventData();
        each(ACTION_TO_EVENT_MAP, ((actionName, eventName) => {
            const action = this._createActionByOption(actionName, {
                context: this
            });
            const event = addNamespace(eventName, NAME);
            eventsEngine.on(this.$element(), event, this._eventData, (e => action({
                event: e
            })))
        }))
    }
    _createEventData() {
        this._eventData = {
            elastic: this.option("elastic"),
            itemSizeFunc: this.option("itemSizeFunc"),
            direction: this.option("direction"),
            immediate: this.option("immediate"),
            immediateTimeout: this.option("immediateTimeout")
        }
    }
    _detachEventHandlers() {
        eventsEngine.off(this.$element(), `.${DX_SWIPEABLE}`)
    }
    _optionChanged(args) {
        switch (args.name) {
            case "disabled":
            case "onStart":
            case "onUpdated":
            case "onEnd":
            case "onCancel":
            case "elastic":
            case "immediate":
            case "itemSizeFunc":
            case "direction":
                this._detachEventHandlers();
                this._attachEventHandlers();
                break;
            case "rtlEnabled":
                break;
            default:
                super._optionChanged(args)
        }
    }
    _useTemplates() {
        return false
    }
}
name(Swipeable, DX_SWIPEABLE);
export default Swipeable;