devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
188 lines (187 loc) • 7.3 kB
JavaScript
/**
* DevExtreme (esm/renovation/ui/scheduler/appointment/layout.js)
* Version: 22.1.9
* Build date: Tue Apr 18 2023
*
* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["isAllDay"];
import {
createVNode,
createComponentVNode
} from "inferno";
import {
InfernoEffect,
InfernoWrapperComponent
} from "@devextreme/runtime/inferno";
import {
Appointment
} from "./appointment";
import {
OverflowIndicator
} from "./overflow_indicator/layout";
import {
combineClasses
} from "../../../utils/combine_classes";
import {
AppointmentsContext
} from "../appointments_context";
import {
subscribeToDXPointerDownEvent
} from "../../../utils/subscribe_to_event";
var SELECTOR = {
appointment: ".dx-scheduler-appointment",
allDay: "dx-scheduler-all-day-appointment",
collector: "dx-scheduler-appointment-collector"
};
export var viewFunction = _ref => {
var {
appointments: appointments,
appointmentsContextValue: {
appointmentTemplate: appointmentTemplate,
groups: groups,
hideReducedIconTooltip: hideReducedIconTooltip,
onAppointmentClick: onAppointmentClick,
onAppointmentDoubleClick: onAppointmentDoubleClick,
overflowIndicatorTemplate: overflowIndicatorTemplate,
showReducedIconTooltip: showReducedIconTooltip
},
classes: classes,
layoutRef: layoutRef,
overflowIndicators: overflowIndicators
} = _ref;
return createVNode(1, "div", classes, [appointments.map((item, index) => createComponentVNode(2, Appointment, {
viewModel: item,
appointmentTemplate: appointmentTemplate,
index: index,
groups: groups,
onItemClick: onAppointmentClick,
onItemDoubleClick: onAppointmentDoubleClick,
showReducedIconTooltip: showReducedIconTooltip,
hideReducedIconTooltip: hideReducedIconTooltip
}, item.key)), overflowIndicators.map((item, index) => createComponentVNode(2, OverflowIndicator, {
viewModel: item,
groups: groups,
overflowIndicatorTemplate: overflowIndicatorTemplate,
"data-index": index
}, item.key))], 0, null, null, layoutRef)
};
export var AppointmentLayoutProps = {
isAllDay: false
};
import {
createReRenderEffect
} from "@devextreme/runtime/inferno";
import {
createRef as infernoCreateRef
} from "inferno";
export class AppointmentLayout extends InfernoWrapperComponent {
constructor(props) {
super(props);
this.state = {};
this.layoutRef = infernoCreateRef();
this.__getterCache = {};
this.pointerEventsEffect = this.pointerEventsEffect.bind(this);
this.onAppointmentPointerDown = this.onAppointmentPointerDown.bind(this)
}
get appointmentsContextValue() {
if ("AppointmentsContext" in this.context) {
return this.context.AppointmentsContext
}
return AppointmentsContext
}
createEffects() {
return [new InfernoEffect(this.pointerEventsEffect, [this.appointmentsContextValue]), createReRenderEffect()]
}
updateEffects() {
var _this$_effects$;
null === (_this$_effects$ = this._effects[0]) || void 0 === _this$_effects$ ? void 0 : _this$_effects$.update([this.appointmentsContextValue])
}
pointerEventsEffect() {
var disposePointerDown = subscribeToDXPointerDownEvent(this.layoutRef.current, e => this.onAppointmentPointerDown(e));
return () => {
disposePointerDown()
}
}
get classes() {
var {
isAllDay: isAllDay
} = this.props;
return combineClasses({
"dx-scheduler-scrollable-appointments": !isAllDay,
"dx-scheduler-all-day-appointments": isAllDay
})
}
get appointments() {
if (void 0 !== this.__getterCache.appointments) {
return this.__getterCache.appointments
}
return this.__getterCache.appointments = (() => {
if (this.props.isAllDay) {
return this.appointmentsContextValue.viewModel.allDay
}
return this.appointmentsContextValue.viewModel.regular
})()
}
get overflowIndicators() {
if (void 0 !== this.__getterCache.overflowIndicators) {
return this.__getterCache.overflowIndicators
}
return this.__getterCache.overflowIndicators = (() => {
if (this.props.isAllDay) {
return this.appointmentsContextValue.viewModel.allDayCompact
}
return this.appointmentsContextValue.viewModel.regularCompact
})()
}
onAppointmentPointerDown(e) {
var appointmentElement = e.target.closest(SELECTOR.appointment);
if (appointmentElement) {
var {
index: index
} = appointmentElement.dataset;
var focusedAppointmentIndex = index ? parseInt(index, 10) : -1;
var isAllDay = appointmentElement.classList.contains(SELECTOR.allDay);
var isCompact = appointmentElement.classList.contains(SELECTOR.collector);
var typeMap = {
allDayCompact: isAllDay && isCompact,
allDay: isAllDay && !isCompact,
regularCompact: !isAllDay && isCompact,
regular: !isAllDay && !isCompact
};
var appointmentType = Object.entries(typeMap).filter(item => item[1])[0][0];
this.appointmentsContextValue.updateFocusedAppointment(appointmentType, focusedAppointmentIndex)
}
}
get restAttributes() {
var _this$props = this.props,
restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
return restProps
}
componentWillUpdate(nextProps, nextState, context) {
super.componentWillUpdate();
if (this.props.isAllDay !== nextProps.isAllDay || this.context.AppointmentsContext !== context.AppointmentsContext) {
this.__getterCache.appointments = void 0
}
if (this.props.isAllDay !== nextProps.isAllDay || this.context.AppointmentsContext !== context.AppointmentsContext) {
this.__getterCache.overflowIndicators = void 0
}
}
render() {
var props = this.props;
return viewFunction({
props: _extends({}, props),
layoutRef: this.layoutRef,
appointmentsContextValue: this.appointmentsContextValue,
classes: this.classes,
appointments: this.appointments,
overflowIndicators: this.overflowIndicators,
onAppointmentPointerDown: this.onAppointmentPointerDown,
restAttributes: this.restAttributes
})
}
}
AppointmentLayout.defaultProps = AppointmentLayoutProps;