devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
159 lines (157 loc) • 6.49 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/calendar/calendar.navigator.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/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _themes = require("../../../ui/themes");
var _widget = _interopRequireDefault(require("../../core/widget/widget"));
var _wrapper = _interopRequireDefault(require("../../ui/button/wrapper"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const CALENDAR_NAVIGATOR_CLASS = "dx-calendar-navigator";
const CALENDAR_NAVIGATOR_PREVIOUS_MONTH_CLASS = "dx-calendar-navigator-previous-month";
const CALENDAR_NAVIGATOR_NEXT_MONTH_CLASS = "dx-calendar-navigator-next-month";
const CALENDAR_NAVIGATOR_PREVIOUS_VIEW_CLASS = "dx-calendar-navigator-previous-view";
const CALENDAR_NAVIGATOR_NEXT_VIEW_CLASS = "dx-calendar-navigator-next-view";
const CALENDAR_NAVIGATOR_DISABLED_LINK_CLASS = "dx-calendar-disabled-navigator-link";
const CALENDAR_NAVIGATOR_CAPTION_BUTTON_CLASS = "dx-calendar-caption-button";
const BUTTON_TEXT_CLASS = "dx-button-text";
class Navigator extends _widget.default {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
onClick: void 0,
onCaptionClick: void 0,
type: "normal",
stylingMode: "outlined",
text: ""
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: () => (0, _themes.isMaterial)((0, _themes.current)()),
options: {
type: "default",
stylingMode: "text"
}
}, {
device: () => (0, _themes.isFluent)((0, _themes.current)()),
options: {
type: "normal",
stylingMode: "text"
}
}])
}
_init() {
super._init();
this._initActions()
}
_initActions() {
this._clickAction = this._createActionByOption("onClick");
this._captionClickAction = this._createActionByOption("onCaptionClick")
}
_initMarkup() {
super._initMarkup();
(0, _renderer.default)(this.element()).addClass("dx-calendar-navigator");
this._renderButtons();
this._renderCaption()
}
_renderButtons() {
const {
rtlEnabled: rtlEnabled,
type: type,
stylingMode: stylingMode,
focusStateEnabled: focusStateEnabled
} = this.option();
this._prevButton = this._createComponent((0, _renderer.default)("<div>"), _wrapper.default, {
focusStateEnabled: focusStateEnabled,
icon: rtlEnabled ? "chevronright" : "chevronleft",
onClick: e => {
var _this$_clickAction;
null === (_this$_clickAction = this._clickAction) || void 0 === _this$_clickAction || _this$_clickAction.call(this, {
direction: -1,
event: e
})
},
type: type,
stylingMode: stylingMode,
integrationOptions: {}
});
const $prevButton = (0, _renderer.default)(this._prevButton.element()).addClass("dx-calendar-navigator-previous-view").addClass("dx-calendar-navigator-previous-month");
this._nextButton = this._createComponent((0, _renderer.default)("<div>"), _wrapper.default, {
focusStateEnabled: focusStateEnabled,
icon: rtlEnabled ? "chevronleft" : "chevronright",
onClick: e => {
var _this$_clickAction2;
null === (_this$_clickAction2 = this._clickAction) || void 0 === _this$_clickAction2 || _this$_clickAction2.call(this, {
direction: 1,
event: e
})
},
type: type,
stylingMode: stylingMode,
integrationOptions: {}
});
const $nextButton = (0, _renderer.default)(this._nextButton.element()).addClass("dx-calendar-navigator-next-view").addClass("dx-calendar-navigator-next-month");
this._caption = this._createComponent((0, _renderer.default)("<div>").addClass("dx-calendar-caption-button"), _wrapper.default, {
focusStateEnabled: focusStateEnabled,
onClick: e => {
var _this$_captionClickAc;
null === (_this$_captionClickAc = this._captionClickAction) || void 0 === _this$_captionClickAc || _this$_captionClickAc.call(this, {
event: e
})
},
type: type,
stylingMode: stylingMode,
template: (_, content) => {
const {
text: text
} = this.option();
const viewCaptionTexts = text.split(" - ");
viewCaptionTexts.forEach(captionText => {
(0, _renderer.default)(content).append((0, _renderer.default)("<span>").addClass("dx-button-text").text(captionText))
})
},
integrationOptions: {}
});
const $caption = this._caption.$element();
this.$element().append($prevButton).append($caption).append($nextButton)
}
_renderCaption() {
var _this$_caption;
const {
text: text
} = this.option();
null === (_this$_caption = this._caption) || void 0 === _this$_caption || _this$_caption.option("text", text)
}
toggleButton(buttonPrefix, value) {
const buttonName = `_${buttonPrefix}Button`;
const button = this[buttonName];
if (button) {
button.option("disabled", value);
button.$element().toggleClass("dx-calendar-disabled-navigator-link", value)
}
}
_optionChanged(args) {
const {
name: name
} = args;
if ("text" === name) {
this._renderCaption()
} else {
super._optionChanged(args)
}
}
}
var _default = exports.default = Navigator;