devextreme/cjs/ui/date_box/ui.date_box.strategy.calendar.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/ui/date_box/ui.date_box.strategy.calendar.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.default = void 0;
var _calendar = _interopRequireDefault(require("../calendar"));
var _uiDate_box = _interopRequireDefault(require("./ui.date_box.strategy"));
var _date = _interopRequireDefault(require("../../core/utils/date"));
var _common = require("../../core/utils/common");
var _type = require("../../core/utils/type");
var _extend = require("../../core/utils/extend");
var _message = _interopRequireDefault(require("../../localization/message"));
var _themes = require("../themes");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}
const TODAY_BUTTON_CLASS = "dx-button-today";
const CalendarStrategy = _uiDate_box.default.inherit({
    NAME: "Calendar",
    getDefaultOptions: function() {
        return (0, _extend.extend)(this.callBase(), {
            todayButtonText: _message.default.format("dxCalendar-todayButtonText")
        })
    },
    supportedKeys: function() {
        const homeEndHandler = function(e) {
            if (this.option("opened")) {
                e.preventDefault();
                return true
            }
            return false
        };
        return {
            rightArrow: function() {
                if (this.option("opened")) {
                    return true
                }
            },
            leftArrow: function() {
                if (this.option("opened")) {
                    return true
                }
            },
            enter: function(e) {
                if (this.dateBox.option("opened")) {
                    e.preventDefault();
                    if (this._widget.option("zoomLevel") === this._widget.option("maxZoomLevel")) {
                        const viewValue = this._getContouredValue();
                        const lastActionElement = this._lastActionElement;
                        const shouldCloseDropDown = this._closeDropDownByEnter();
                        if (shouldCloseDropDown && viewValue && "calendar" === lastActionElement) {
                            this.dateBoxValue(viewValue, e)
                        }
                        shouldCloseDropDown && this.dateBox.close();
                        this.dateBox._valueChangeEventHandler(e);
                        return !shouldCloseDropDown
                    } else {
                        return true
                    }
                } else {
                    this.dateBox._valueChangeEventHandler(e)
                }
            }.bind(this),
            home: homeEndHandler,
            end: homeEndHandler
        }
    },
    getDisplayFormat: function(displayFormat) {
        return displayFormat || "shortdate"
    },
    _closeDropDownByEnter: () => true,
    _getWidgetName: function() {
        return _calendar.default
    },
    _getContouredValue: function() {
        return this._widget._view.option("contouredDate")
    },
    getKeyboardListener() {
        return this._widget
    },
    _getWidgetOptions: function() {
        const disabledDates = this.dateBox.option("disabledDates");
        return (0, _extend.extend)(this.dateBox.option("calendarOptions"), {
            value: this.dateBoxValue() || null,
            selectionMode: "single",
            dateSerializationFormat: null,
            min: this.dateBox.dateOption("min"),
            max: this.dateBox.dateOption("max"),
            onValueChanged: this._valueChangedHandler.bind(this),
            onCellClick: this._cellClickHandler.bind(this),
            disabledDates: (0, _type.isFunction)(disabledDates) ? this._injectComponent(disabledDates.bind(this.dateBox)) : disabledDates,
            onContouredChanged: this._refreshActiveDescendant.bind(this),
            skipFocusCheck: true
        })
    },
    _injectComponent: function(func) {
        const that = this;
        return function(params) {
            (0, _extend.extend)(params, {
                component: that.dateBox
            });
            return func(params)
        }
    },
    _refreshActiveDescendant: function(e) {
        this._lastActionElement = "calendar";
        this.dateBox.setAria("activedescendant", e.actionValue)
    },
    _getTodayButtonConfig() {
        const buttonsLocation = this.dateBox.option("buttonsLocation");
        const isButtonsLocationDefault = "default" === buttonsLocation;
        const position = isButtonsLocationDefault ? ["bottom", "center"] : (0, _common.splitPair)(buttonsLocation);
        const stylingMode = (0, _themes.isMaterial)() ? "text" : "outlined";
        return {
            widget: "dxButton",
            toolbar: position[0],
            location: "after" === position[1] ? "before" : position[1],
            options: {
                onClick: args => {
                    this._widget._toTodayView(args)
                },
                text: this.dateBox.option("todayButtonText"),
                elementAttr: {
                    class: "dx-button-today"
                },
                stylingMode: stylingMode
            }
        }
    },
    _isCalendarVisible: function() {
        const {
            calendarOptions: calendarOptions
        } = this.dateBox.option();
        return (0, _type.isEmptyObject)(calendarOptions) || false !== calendarOptions.visible
    },
    _getPopupToolbarItems(toolbarItems) {
        const useButtons = "useButtons" === this.dateBox.option("applyValueMode");
        const shouldRenderTodayButton = useButtons && this._isCalendarVisible();
        if (shouldRenderTodayButton) {
            const todayButton = this._getTodayButtonConfig();
            return [todayButton, ...toolbarItems]
        }
        return toolbarItems
    },
    popupConfig: function(popupConfig) {
        return (0, _extend.extend)(true, popupConfig, {
            position: {
                collision: "flipfit flip"
            },
            width: "auto"
        })
    },
    _valueChangedHandler: function(e) {
        const value = e.value;
        const prevValue = e.previousValue;
        if (_date.default.sameDate(value, prevValue) && _date.default.sameHoursAndMinutes(value, prevValue)) {
            return
        }
        if ("instantly" === this.dateBox.option("applyValueMode")) {
            this.dateBoxValue(this.getValue(), e.event)
        }
    },
    _updateValue: function() {
        if (!this._widget) {
            return
        }
        this._widget.option("value", this.dateBoxValue())
    },
    textChangedHandler: function() {
        this._lastActionElement = "input";
        if (this.dateBox.option("opened") && this._widget) {
            this._updateValue(true)
        }
    },
    _cellClickHandler: function(e) {
        const dateBox = this.dateBox;
        if ("instantly" === dateBox.option("applyValueMode")) {
            dateBox.option("opened", false);
            this.dateBoxValue(this.getValue(), e.event)
        }
    }
});
var _default = CalendarStrategy;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;