UNPKG

devextreme

Version:

JavaScript/TypeScript Component Suite for Responsive Web Development

149 lines (147 loc) 6.5 kB
/** * DevExtreme (cjs/__internal/scheduler/appointments_new/appointment/base_appointment.js) * Version: 26.1.3 * Build date: Wed Jun 10 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.BaseAppointmentView = 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 _events_engine = _interopRequireDefault(require("../../../../events/core/events_engine")); var _utils = require("../../../../events/utils"); var _m_element = require("../../../core/m_element"); var _m_empty_template = require("../../../core/templates/m_empty_template"); var _m_function_template = require("../../../core/templates/m_function_template"); var _m_short = require("../../../events/m_short"); var _const = require("../const"); var _get_date_text = require("../utils/get_date_text"); var _view_item = require("../view_item"); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e } } const DOUBLE_CLICK_EVENT_NAME = (0, _utils.addNamespace)("dxdblclick", _view_item.EVENTS_NAMESPACE.namespace); const CONTEXT_MENU_EVENT_NAME = (0, _utils.addNamespace)("dxcontextmenu", _view_item.EVENTS_NAMESPACE.namespace); class BaseAppointmentView extends _view_item.ViewItem { get targetedAppointmentData() { return this.option().targetedAppointmentData } get appointmentData() { return this.option().appointmentData } _setOptionsByReference() { super._setOptionsByReference(); this._optionsByReference = Object.assign({}, this._optionsByReference, { appointmentData: true, targetedAppointmentData: true }) } _init() { super._init(); this.defaultAppointmentTemplate = new _m_function_template.FunctionTemplate(options => { this.defaultAppointmentContent((0, _renderer.default)(options.container)) }) } _initMarkup() { super._initMarkup(); this.resize(); this.applyElementClasses(); this.applyAria(); this.attachFocusEvents(); this.attachClickEvent(); this.attachDblClickEvent(); this.attachContextMenuEvent(); this.attachKeydownEvents(); this.renderContentTemplate() } _dispose() { super._dispose(); _m_short.dxClick.off(this.$element(), _view_item.EVENTS_NAMESPACE); _events_engine.default.off(this.$element(), DOUBLE_CLICK_EVENT_NAME); _events_engine.default.off(this.$element(), CONTEXT_MENU_EVENT_NAME) } applyElementClasses() { this.$element().addClass(_const.APPOINTMENT_CLASSES.CONTAINER).toggleClass(_const.APPOINTMENT_TYPE_CLASSES.RECURRING, this.isRecurring()).toggleClass(_const.APPOINTMENT_TYPE_CLASSES.ALL_DAY, this.isAllDay()) } applyAria() { this.$element().attr("role", "button").attr("tabindex", this.option().tabIndex) } attachClickEvent() { _m_short.dxClick.off(this.$element(), _view_item.EVENTS_NAMESPACE); _m_short.dxClick.on(this.$element(), event => this.option().onClick(this, event), _view_item.EVENTS_NAMESPACE) } attachDblClickEvent() { _events_engine.default.off(this.$element(), DOUBLE_CLICK_EVENT_NAME); _events_engine.default.on(this.$element(), DOUBLE_CLICK_EVENT_NAME, event => this.option().onDblClick(this, event)) } attachContextMenuEvent() { _events_engine.default.off(this.$element(), CONTEXT_MENU_EVENT_NAME); _events_engine.default.on(this.$element(), CONTEXT_MENU_EVENT_NAME, event => this.option().onContextMenu(this, event)) } onFocusIn() { this.$element().addClass(_const.FOCUSED_STATE_CLASS); super.onFocusIn() } onFocusOut(e) { this.$element().removeClass(_const.FOCUSED_STATE_CLASS); super.onFocusOut(e) } setTabIndex(tabIndex) { super.setTabIndex(tabIndex); this.$element().attr("tabindex", tabIndex ?? null) } getTitleText() { const dataAccessor = this.option().getDataAccessor(); const titleText = dataAccessor.get("text", this.targetedAppointmentData); if (!titleText) { return _message.default.format("dxScheduler-noSubject") } return titleText } getDateText() { const dateText = (0, _get_date_text.getDateTextFromTargetAppointment)(this.targetedAppointmentData, this.isAllDay() ? _get_date_text.DateFormatType.DATE : _get_date_text.DateFormatType.TIME); return dateText } isRecurring() { const dataAccessor = this.option().getDataAccessor(); const recurrenceRule = dataAccessor.get("recurrenceRule", this.targetedAppointmentData); return Boolean(recurrenceRule) } isAllDay() { const dataAccessor = this.option().getDataAccessor(); const allDay = dataAccessor.get("allDay", this.targetedAppointmentData); return Boolean(allDay) } renderContentTemplate() { const $content = (0, _renderer.default)("<div>").addClass(_const.APPOINTMENT_CLASSES.CONTENT).appendTo(this.$element()); const template = this.option().appointmentTemplate instanceof _m_empty_template.EmptyTemplate ? this.defaultAppointmentTemplate : this.option().appointmentTemplate; template.render({ container: (0, _m_element.getPublicElement)($content), model: { appointmentData: this.appointmentData, targetedAppointmentData: this.targetedAppointmentData }, index: this.option().index, onRendered: () => { this.option().onRendered({ appointmentElement: (0, _m_element.getPublicElement)(this.$element()), appointmentData: this.appointmentData, targetedAppointmentData: this.targetedAppointmentData }) } }) } defaultAppointmentContent($container) { return $container } } exports.BaseAppointmentView = BaseAppointmentView; (0, _component_registrator.default)("dxSchedulerNewAppointment", BaseAppointmentView);