devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
152 lines (151 loc) • 5.94 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/calendar/calendar.navigator.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../../core/renderer";
import {
current,
isFluent,
isMaterial
} from "../../../ui/themes";
import Widget from "../../core/widget/widget";
import Button from "../../ui/button/wrapper";
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 {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
onClick: void 0,
onCaptionClick: void 0,
type: "normal",
stylingMode: "outlined",
text: ""
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: () => isMaterial(current()),
options: {
type: "default",
stylingMode: "text"
}
}, {
device: () => isFluent(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();
$(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($("<div>"), Button, {
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 = $(this._prevButton.element()).addClass("dx-calendar-navigator-previous-view").addClass("dx-calendar-navigator-previous-month");
this._nextButton = this._createComponent($("<div>"), Button, {
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 = $(this._nextButton.element()).addClass("dx-calendar-navigator-next-view").addClass("dx-calendar-navigator-next-month");
this._caption = this._createComponent($("<div>").addClass("dx-calendar-caption-button"), Button, {
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 => {
$(content).append($("<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)
}
}
}
export default Navigator;