@mantine/schedule 9.5.2 → 9.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/_virtual/_rolldown/runtime.cjs +1 -1
- package/cjs/components/AgendaView/AgendaView.cjs +7 -6
- package/cjs/components/AgendaView/AgendaView.cjs.map +1 -1
- package/cjs/components/AgendaView/get-agenda-view-events.cjs.map +1 -1
- package/cjs/components/CurrentTimeIndicator/CurrentTimeIndicator.cjs +3 -2
- package/cjs/components/CurrentTimeIndicator/CurrentTimeIndicator.cjs.map +1 -1
- package/cjs/components/DayView/DayView.cjs +153 -80
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/DayView/DayView.module.cjs +1 -0
- package/cjs/components/DayView/DayView.module.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-positioned-events.cjs +12 -7
- package/cjs/components/DayView/get-day-view-events/get-day-positioned-events.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-view-events.cjs +3 -2
- package/cjs/components/DayView/get-day-view-events/get-day-view-events.cjs.map +1 -1
- package/cjs/components/DragContext/DragContext.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.cjs +7 -6
- package/cjs/components/MobileMonthView/MobileMonthView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/get-mobile-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.cjs +24 -34
- package/cjs/components/MonthView/MonthView.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.module.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/find-available-row.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-positioned-events.cjs +4 -2
- package/cjs/components/MonthView/get-month-view-events/get-month-positioned-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-weeks-in-range.cjs +3 -2
- package/cjs/components/MonthView/get-month-view-events/get-weeks-in-range.cjs.map +1 -1
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs +1 -1
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs.map +1 -1
- package/cjs/components/MoreEvents/MoreEvents.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs +137 -53
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs +2 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs.map +1 -1
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs.map +1 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs +3 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +151 -60
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs +2 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs +6 -3
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs.map +1 -1
- package/cjs/components/Schedule/Schedule.cjs +4 -1
- package/cjs/components/Schedule/Schedule.cjs.map +1 -1
- package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs +53 -0
- package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs.map +1 -0
- package/cjs/components/ScheduleEvent/ScheduleEvent.cjs.map +1 -1
- package/cjs/components/ScheduleEvent/ScheduleEvent.module.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs +15 -14
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeader.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +168 -84
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.module.cjs +1 -0
- package/cjs/components/WeekView/WeekView.module.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-label/get-week-label.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-offset.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-width.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-event-days.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-event-end-date.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-hanging-status.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-week-positioned-events.cjs +4 -2
- package/cjs/components/WeekView/get-week-view-events/get-week-positioned-events.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs +7 -6
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/cjs/components/YearView/get-visible-week-days.cjs.map +1 -1
- package/cjs/components/YearView/get-year-view-events/get-year-view-events.cjs.map +1 -1
- package/cjs/hooks/use-auto-scroll-on-drag.cjs.map +1 -1
- package/cjs/hooks/use-day-grid-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-drag-drop-handlers.cjs +13 -2
- package/cjs/hooks/use-drag-drop-handlers.cjs.map +1 -1
- package/cjs/hooks/use-drag-state.cjs.map +1 -1
- package/cjs/hooks/use-event-resize.cjs +30 -15
- package/cjs/hooks/use-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-horizontal-event-resize.cjs +30 -15
- package/cjs/hooks/use-horizontal-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-slot-drag-select.cjs.map +1 -1
- package/cjs/index.cjs +6 -0
- package/cjs/utils/apply-cascade-layout/apply-cascade-layout.cjs +21 -0
- package/cjs/utils/apply-cascade-layout/apply-cascade-layout.cjs.map +1 -0
- package/cjs/utils/calculate-drop-time/calculate-drop-time.cjs +25 -4
- package/cjs/utils/calculate-drop-time/calculate-drop-time.cjs.map +1 -1
- package/cjs/utils/calculate-month-drop-date/calculate-month-drop-date.cjs.map +1 -1
- package/cjs/utils/calculate-month-resize-dates/calculate-month-resize-dates.cjs.map +1 -1
- package/cjs/utils/expand-recurring-events/expand-recurring-events.cjs.map +1 -1
- package/cjs/utils/format-date/format-date.cjs.map +1 -1
- package/cjs/utils/get-current-time-position/get-current-time-position.cjs.map +1 -1
- package/cjs/utils/get-day-position/get-day-position.cjs.map +1 -1
- package/cjs/utils/get-end-of-week/get-end-of-week.cjs.map +1 -1
- package/cjs/utils/get-month-days/get-month-days.cjs +4 -2
- package/cjs/utils/get-month-days/get-month-days.cjs.map +1 -1
- package/cjs/utils/get-month-range/get-month-range.cjs.map +1 -1
- package/cjs/utils/get-months-by-quarter/get-months-by-quarter.cjs.map +1 -1
- package/cjs/utils/get-months-list/get-months-list.cjs.map +1 -1
- package/cjs/{components/ResourcesDayView → utils}/get-overlap-clusters/get-overlap-clusters.cjs +2 -2
- package/cjs/utils/get-overlap-clusters/get-overlap-clusters.cjs.map +1 -0
- package/cjs/utils/get-start-of-week/get-start-of-week.cjs.map +1 -1
- package/cjs/utils/get-week-days/get-week-days.cjs.map +1 -1
- package/cjs/utils/get-week-number/get-week-number.cjs +4 -1
- package/cjs/utils/get-week-number/get-week-number.cjs.map +1 -1
- package/cjs/utils/get-weekdays-names/get-weekdays-names.cjs.map +1 -1
- package/cjs/utils/is-after-min-date/is-after-min-date.cjs.map +1 -1
- package/cjs/utils/is-all-day-event/is-all-day-event.cjs.map +1 -1
- package/cjs/utils/is-before-max-date/is-before-max-date.cjs.map +1 -1
- package/cjs/utils/is-event-in-time-range/is-event-in-time-range.cjs +2 -1
- package/cjs/utils/is-event-in-time-range/is-event-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-events-overlap/is-events-overlap.cjs.map +1 -1
- package/cjs/utils/is-in-time-range/is-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-multiday-event/is-multiday-event.cjs.map +1 -1
- package/cjs/utils/is-same-month/is-same-month.cjs.map +1 -1
- package/cjs/utils/is-within-week/is-within-week.cjs.map +1 -1
- package/cjs/utils/next-week/next-week.cjs.map +1 -1
- package/cjs/utils/previous-week/previous-week.cjs.map +1 -1
- package/cjs/utils/sort-events/sort-events.cjs.map +1 -1
- package/cjs/utils/to-date-string/to-date-string.cjs.map +1 -1
- package/cjs/utils/validate-event/validate-event.cjs.map +1 -1
- package/esm/components/AgendaView/AgendaView.mjs +7 -6
- package/esm/components/AgendaView/AgendaView.mjs.map +1 -1
- package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs +4 -3
- package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs.map +1 -1
- package/esm/components/DayView/DayView.mjs +154 -81
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/DayView/DayView.module.mjs +1 -0
- package/esm/components/DayView/DayView.module.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs +12 -7
- package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs +3 -2
- package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.mjs +7 -6
- package/esm/components/MobileMonthView/MobileMonthView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.mjs +25 -35
- package/esm/components/MonthView/MonthView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.module.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-month-positioned-events.mjs +4 -2
- package/esm/components/MonthView/get-month-view-events/get-month-positioned-events.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-weeks-in-range.mjs +3 -2
- package/esm/components/MonthView/get-month-view-events/get-weeks-in-range.mjs.map +1 -1
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs +1 -1
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs.map +1 -1
- package/esm/components/MoreEvents/MoreEvents.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs +139 -55
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs +2 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs.map +1 -1
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs.map +1 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs +3 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +153 -62
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs +2 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs +6 -3
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs.map +1 -1
- package/esm/components/Schedule/Schedule.mjs +4 -1
- package/esm/components/Schedule/Schedule.mjs.map +1 -1
- package/esm/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs +53 -0
- package/esm/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs.map +1 -0
- package/esm/components/ScheduleEvent/ScheduleEvent.mjs.map +1 -1
- package/esm/components/ScheduleEvent/ScheduleEvent.module.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs +15 -14
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeader.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +169 -85
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.module.mjs +1 -0
- package/esm/components/WeekView/WeekView.module.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/get-week-positioned-events.mjs +4 -2
- package/esm/components/WeekView/get-week-view-events/get-week-positioned-events.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +7 -6
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/esm/hooks/use-drag-drop-handlers.mjs +13 -2
- package/esm/hooks/use-drag-drop-handlers.mjs.map +1 -1
- package/esm/hooks/use-event-resize.mjs +30 -15
- package/esm/hooks/use-event-resize.mjs.map +1 -1
- package/esm/hooks/use-horizontal-event-resize.mjs +30 -15
- package/esm/hooks/use-horizontal-event-resize.mjs.map +1 -1
- package/esm/index.mjs +4 -1
- package/esm/utils/apply-cascade-layout/apply-cascade-layout.mjs +21 -0
- package/esm/utils/apply-cascade-layout/apply-cascade-layout.mjs.map +1 -0
- package/esm/utils/calculate-drop-time/calculate-drop-time.mjs +25 -4
- package/esm/utils/calculate-drop-time/calculate-drop-time.mjs.map +1 -1
- package/esm/utils/get-month-days/get-month-days.mjs +4 -2
- package/esm/utils/get-month-days/get-month-days.mjs.map +1 -1
- package/esm/{components/ResourcesDayView → utils}/get-overlap-clusters/get-overlap-clusters.mjs +2 -2
- package/esm/utils/get-overlap-clusters/get-overlap-clusters.mjs.map +1 -0
- package/esm/utils/get-week-number/get-week-number.mjs +4 -1
- package/esm/utils/get-week-number/get-week-number.mjs.map +1 -1
- package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs +2 -1
- package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs.map +1 -1
- package/lib/components/DayView/DayView.d.ts +12 -2
- package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts +4 -2
- package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts +3 -2
- package/lib/components/MonthView/MonthView.d.ts +2 -0
- package/lib/components/ResourcesDayView/ResourcesDayView.d.ts +7 -1
- package/lib/components/ResourcesDayView/ResourcesDayViewColumn.d.ts +1 -1
- package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts +3 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts +7 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekViewRow.d.ts +1 -1
- package/lib/components/Schedule/Schedule.d.ts +3 -1
- package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.d.ts +19 -0
- package/lib/components/ScheduleBackgroundEvent/index.d.ts +2 -0
- package/lib/components/ScheduleHeader/HeaderControl/HeaderControl.d.ts +3 -3
- package/lib/components/ScheduleHeader/ScheduleHeaderBase.d.ts +1 -1
- package/lib/components/WeekView/WeekView.d.ts +12 -2
- package/lib/components/WeekView/WeekViewDay.d.ts +1 -1
- package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts +4 -2
- package/lib/components/YearView/YearViewMonth.d.ts +1 -1
- package/lib/hooks/use-drag-drop-handlers.d.ts +10 -1
- package/lib/hooks/use-event-resize.d.ts +2 -1
- package/lib/hooks/use-horizontal-event-resize.d.ts +2 -1
- package/lib/index.d.mts +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/types.d.ts +3 -1
- package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts +6 -0
- package/lib/utils/calculate-drop-time/calculate-drop-time.d.ts +11 -1
- package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts +2 -0
- package/lib/utils/index.d.ts +3 -0
- package/package.json +8 -5
- package/styles.css +221 -0
- package/styles.layer.css +221 -0
- package/cjs/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs.map +0 -1
- package/esm/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs.map +0 -1
- package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts +0 -2
|
@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
}
|
|
17
17
|
return to;
|
|
18
18
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
|
|
20
20
|
value: mod,
|
|
21
21
|
enumerable: true
|
|
22
22
|
}) : target, mod));
|
|
@@ -42,15 +42,16 @@ const AgendaView = (0, _mantine_core.factory)((_props) => {
|
|
|
42
42
|
varsResolver,
|
|
43
43
|
rootSelector: "agendaView"
|
|
44
44
|
});
|
|
45
|
+
const expandedEvents = require_expand_recurring_events.expandRecurringEvents({
|
|
46
|
+
events,
|
|
47
|
+
rangeStart: (0, dayjs.default)(rangeStart).startOf("day").toDate(),
|
|
48
|
+
rangeEnd: (0, dayjs.default)(rangeEnd).endOf("day").toDate(),
|
|
49
|
+
expansionLimit: recurrenceExpansionLimit
|
|
50
|
+
});
|
|
45
51
|
const groupedEvents = require_get_agenda_view_events.getAgendaViewEvents({
|
|
46
52
|
rangeStart,
|
|
47
53
|
rangeEnd,
|
|
48
|
-
events:
|
|
49
|
-
events,
|
|
50
|
-
rangeStart: (0, dayjs.default)(rangeStart).startOf("day").toDate(),
|
|
51
|
-
rangeEnd: (0, dayjs.default)(rangeEnd).endOf("day").toDate(),
|
|
52
|
-
expansionLimit: recurrenceExpansionLimit
|
|
53
|
-
})
|
|
54
|
+
events: expandedEvents
|
|
54
55
|
});
|
|
55
56
|
const sortedDates = Object.keys(groupedEvents).sort();
|
|
56
57
|
const headerLabel = `${require_format_date.formatDate({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgendaView.cjs","names":["getAgendaViewEvents","expandRecurringEvents","formatDate","sortEvents","isMultidayEvent","isAllDayEvent","Box","Text","getLabel","React","UnstyledButton","classes"],"sources":["../../../src/components/AgendaView/AgendaView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineRadius,\n StylesApiProps,\n Text,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { AnyDateValue, DateLabelFormat, ScheduleEventData, ScheduleMode } from '../../types';\nimport {\n expandRecurringEvents,\n formatDate,\n isAllDayEvent,\n isMultidayEvent,\n sortEvents,\n} from '../../utils';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getAgendaViewEvents } from './get-agenda-view-events';\nimport classes from './AgendaView.module.css';\n\nexport type AgendaViewStylesNames =\n | 'agendaView'\n | 'agendaViewHeader'\n | 'agendaViewHeaderLabel'\n | 'agendaViewBody'\n | 'agendaViewDateGroup'\n | 'agendaViewDateHeader'\n | 'agendaViewEvent'\n | 'agendaViewEventBody'\n | 'agendaViewEventColor'\n | 'agendaViewEventTitle'\n | 'agendaViewEventTime'\n | 'agendaViewNoEvents';\n\nexport type AgendaViewCssVariables = {\n agendaView: '--agenda-view-radius';\n};\n\nexport interface AgendaViewProps\n extends BoxProps, StylesApiProps<AgendaViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Start of the date range to display events for */\n rangeStart: AnyDateValue;\n\n /** End of the date range to display events for */\n rangeEnd: AnyDateValue;\n\n /** Events to display */\n events?: ScheduleEventData[];\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n mode?: ScheduleMode;\n\n /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n renderEvent?: RenderEvent;\n\n /** Format for the date group headers @default 'dddd, MMMM D' */\n dateHeaderFormat?: DateLabelFormat;\n\n /** Format for the header label showing the date range @default 'MMMM D, YYYY' */\n headerFormat?: DateLabelFormat;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n}\n\nexport type AgendaViewFactory = Factory<{\n props: AgendaViewProps;\n ref: HTMLDivElement;\n stylesNames: AgendaViewStylesNames;\n vars: AgendaViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AgendaView',\n mode: 'default',\n dateHeaderFormat: 'dddd, MMMM D',\n headerFormat: 'MMMM D, YYYY',\n} satisfies Partial<AgendaViewProps>;\n\nconst varsResolver = createVarsResolver<AgendaViewFactory>((_theme, { radius }) => ({\n agendaView: {\n '--agenda-view-radius': getRadius(radius),\n },\n}));\n\nexport const AgendaView = factory<AgendaViewFactory>((_props) => {\n const props = useProps('AgendaView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n __staticSelector,\n rangeStart,\n rangeEnd,\n events,\n locale,\n radius,\n labels,\n mode,\n renderEvent,\n dateHeaderFormat,\n headerFormat,\n onEventClick,\n recurrenceExpansionLimit,\n ...others\n } = props;\n\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n\n const getStyles = useStyles<AgendaViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'agendaView',\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(rangeStart).startOf('day').toDate(),\n rangeEnd: dayjs(rangeEnd).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const groupedEvents = getAgendaViewEvents({\n rangeStart,\n rangeEnd,\n events: expandedEvents,\n });\n\n const sortedDates = Object.keys(groupedEvents).sort();\n\n const headerLabel = `${formatDate({\n locale: ctx.getLocale(locale),\n date: rangeStart,\n format: headerFormat,\n })} – ${formatDate({\n locale: ctx.getLocale(locale),\n date: rangeEnd,\n format: headerFormat,\n })}`;\n\n const dateGroups = sortedDates.map((dateStr) => {\n const dateEvents = sortEvents(groupedEvents[dateStr]);\n\n const eventNodes = dateEvents.map((event) => {\n const startTime = dayjs(event.start).format('HH:mm');\n const endTime = dayjs(event.end).format('HH:mm');\n const isAllDay = isMultidayEvent(event) || isAllDayEvent({ event, date: dateStr });\n\n const eventChildren = (\n <Box {...getStyles('agendaViewEventBody')}>\n <div\n {...getStyles('agendaViewEventColor', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n />\n <div>\n <Text {...getStyles('agendaViewEventTitle')}>{event.title}</Text>\n <Text {...getStyles('agendaViewEventTime')}>\n {isAllDay ? getLabel('allDay', labels) : `${startTime} – ${endTime}`}\n </Text>\n </div>\n </Box>\n );\n\n const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n ...getStyles('agendaViewEvent'),\n onClick:\n mode === 'static'\n ? undefined\n : (e: React.MouseEvent<HTMLButtonElement>) => {\n onEventClick?.(event, e);\n },\n tabIndex: mode === 'static' ? -1 : 0,\n children: eventChildren,\n };\n\n if (typeof renderEvent === 'function') {\n return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n }\n\n return <UnstyledButton {...rootProps} key={event.id} />;\n });\n\n return (\n <div {...getStyles('agendaViewDateGroup')} key={dateStr}>\n <Text {...getStyles('agendaViewDateHeader')}>\n {formatDate({\n locale: ctx.getLocale(locale),\n date: dateStr,\n format: dateHeaderFormat,\n })}\n </Text>\n {eventNodes}\n </div>\n );\n });\n\n return (\n <Box {...getStyles('agendaView')} {...others}>\n <div {...getStyles('agendaViewHeader')}>\n <Text {...getStyles('agendaViewHeaderLabel')}>{headerLabel}</Text>\n </div>\n\n <Box {...getStyles('agendaViewBody')}>\n {dateGroups.length > 0 ? (\n dateGroups\n ) : (\n <Text {...getStyles('agendaViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n )}\n </Box>\n </Box>\n );\n});\n\nAgendaView.displayName = '@mantine/schedule/AgendaView';\nAgendaView.classes = classes;\nAgendaView.varsResolver = varsResolver;\n\nexport namespace AgendaView {\n export type Props = AgendaViewProps;\n export type Factory = AgendaViewFactory;\n export type StylesNames = AgendaViewStylesNames;\n export type CssVariables = AgendaViewCssVariables;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AgendaView.cjs","names":["createVarsResolver","getRadius","factory","useProps","useDatesContext","useMantineTheme","useStyles","expandRecurringEvents","getAgendaViewEvents","formatDate","sortEvents","isMultidayEvent","isAllDayEvent","Box","getThemeColor","Text","getLabel","React","UnstyledButton","classes"],"sources":["../../../src/components/AgendaView/AgendaView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineRadius,\n StylesApiProps,\n Text,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { AnyDateValue, DateLabelFormat, ScheduleEventData, ScheduleMode } from '../../types';\nimport {\n expandRecurringEvents,\n formatDate,\n isAllDayEvent,\n isMultidayEvent,\n sortEvents,\n} from '../../utils';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getAgendaViewEvents } from './get-agenda-view-events';\nimport classes from './AgendaView.module.css';\n\nexport type AgendaViewStylesNames =\n | 'agendaView'\n | 'agendaViewHeader'\n | 'agendaViewHeaderLabel'\n | 'agendaViewBody'\n | 'agendaViewDateGroup'\n | 'agendaViewDateHeader'\n | 'agendaViewEvent'\n | 'agendaViewEventBody'\n | 'agendaViewEventColor'\n | 'agendaViewEventTitle'\n | 'agendaViewEventTime'\n | 'agendaViewNoEvents';\n\nexport type AgendaViewCssVariables = {\n agendaView: '--agenda-view-radius';\n};\n\nexport interface AgendaViewProps\n extends BoxProps, StylesApiProps<AgendaViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Start of the date range to display events for */\n rangeStart: AnyDateValue;\n\n /** End of the date range to display events for */\n rangeEnd: AnyDateValue;\n\n /** Events to display */\n events?: ScheduleEventData[];\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n mode?: ScheduleMode;\n\n /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n renderEvent?: RenderEvent;\n\n /** Format for the date group headers @default 'dddd, MMMM D' */\n dateHeaderFormat?: DateLabelFormat;\n\n /** Format for the header label showing the date range @default 'MMMM D, YYYY' */\n headerFormat?: DateLabelFormat;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n}\n\nexport type AgendaViewFactory = Factory<{\n props: AgendaViewProps;\n ref: HTMLDivElement;\n stylesNames: AgendaViewStylesNames;\n vars: AgendaViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AgendaView',\n mode: 'default',\n dateHeaderFormat: 'dddd, MMMM D',\n headerFormat: 'MMMM D, YYYY',\n} satisfies Partial<AgendaViewProps>;\n\nconst varsResolver = createVarsResolver<AgendaViewFactory>((_theme, { radius }) => ({\n agendaView: {\n '--agenda-view-radius': getRadius(radius),\n },\n}));\n\nexport const AgendaView = factory<AgendaViewFactory>((_props) => {\n const props = useProps('AgendaView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n __staticSelector,\n rangeStart,\n rangeEnd,\n events,\n locale,\n radius,\n labels,\n mode,\n renderEvent,\n dateHeaderFormat,\n headerFormat,\n onEventClick,\n recurrenceExpansionLimit,\n ...others\n } = props;\n\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n\n const getStyles = useStyles<AgendaViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'agendaView',\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(rangeStart).startOf('day').toDate(),\n rangeEnd: dayjs(rangeEnd).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const groupedEvents = getAgendaViewEvents({\n rangeStart,\n rangeEnd,\n events: expandedEvents,\n });\n\n const sortedDates = Object.keys(groupedEvents).sort();\n\n const headerLabel = `${formatDate({\n locale: ctx.getLocale(locale),\n date: rangeStart,\n format: headerFormat,\n })} – ${formatDate({\n locale: ctx.getLocale(locale),\n date: rangeEnd,\n format: headerFormat,\n })}`;\n\n const dateGroups = sortedDates.map((dateStr) => {\n const dateEvents = sortEvents(groupedEvents[dateStr]);\n\n const eventNodes = dateEvents.map((event) => {\n const startTime = dayjs(event.start).format('HH:mm');\n const endTime = dayjs(event.end).format('HH:mm');\n const isAllDay = isMultidayEvent(event) || isAllDayEvent({ event, date: dateStr });\n\n const eventChildren = (\n <Box {...getStyles('agendaViewEventBody')}>\n <div\n {...getStyles('agendaViewEventColor', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n />\n <div>\n <Text {...getStyles('agendaViewEventTitle')}>{event.title}</Text>\n <Text {...getStyles('agendaViewEventTime')}>\n {isAllDay ? getLabel('allDay', labels) : `${startTime} – ${endTime}`}\n </Text>\n </div>\n </Box>\n );\n\n const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n ...getStyles('agendaViewEvent'),\n onClick:\n mode === 'static'\n ? undefined\n : (e: React.MouseEvent<HTMLButtonElement>) => {\n onEventClick?.(event, e);\n },\n tabIndex: mode === 'static' ? -1 : 0,\n children: eventChildren,\n };\n\n if (typeof renderEvent === 'function') {\n return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n }\n\n return <UnstyledButton {...rootProps} key={event.id} />;\n });\n\n return (\n <div {...getStyles('agendaViewDateGroup')} key={dateStr}>\n <Text {...getStyles('agendaViewDateHeader')}>\n {formatDate({\n locale: ctx.getLocale(locale),\n date: dateStr,\n format: dateHeaderFormat,\n })}\n </Text>\n {eventNodes}\n </div>\n );\n });\n\n return (\n <Box {...getStyles('agendaView')} {...others}>\n <div {...getStyles('agendaViewHeader')}>\n <Text {...getStyles('agendaViewHeaderLabel')}>{headerLabel}</Text>\n </div>\n\n <Box {...getStyles('agendaViewBody')}>\n {dateGroups.length > 0 ? (\n dateGroups\n ) : (\n <Text {...getStyles('agendaViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n )}\n </Box>\n </Box>\n );\n});\n\nAgendaView.displayName = '@mantine/schedule/AgendaView';\nAgendaView.classes = classes;\nAgendaView.varsResolver = varsResolver;\n\nexport namespace AgendaView {\n export type Props = AgendaViewProps;\n export type Factory = AgendaViewFactory;\n export type StylesNames = AgendaViewStylesNames;\n export type CssVariables = AgendaViewCssVariables;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-agenda-view-events.cjs","names":["isMultidayEvent","validateEvent"],"sources":["../../../src/components/AgendaView/get-agenda-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, ScheduleEventData } from '../../types';\nimport { isMultidayEvent, validateEvent } from '../../utils';\n\nfunction getEffectiveEndDate(event: ScheduleEventData) {\n const endDate = dayjs(event.end).startOf('day');\n if (dayjs(event.end).hour() === 0 && dayjs(event.end).minute() === 0) {\n return endDate.subtract(1, 'day');\n }\n return endDate;\n}\n\nexport type AgendaGroupedEvents = Record<DateStringValue, ScheduleEventData[]>;\n\nfunction groupEventByDate(\n event: ScheduleEventData,\n groupedEvents: AgendaGroupedEvents,\n rangeStart: dayjs.Dayjs,\n rangeEnd: dayjs.Dayjs\n) {\n if (isMultidayEvent(event)) {\n const startDate = dayjs(event.start).startOf('day');\n const endDate = getEffectiveEndDate(event);\n\n for (\n let date = startDate;\n date.isBefore(endDate) || date.isSame(endDate);\n date = date.add(1, 'day')\n ) {\n if (date.isBefore(rangeStart) || date.isAfter(rangeEnd)) {\n continue;\n }\n const dateKey = date.format('YYYY-MM-DD');\n if (!groupedEvents[dateKey]) {\n groupedEvents[dateKey] = [];\n }\n groupedEvents[dateKey].push(event);\n }\n\n return;\n }\n\n const eventDate = dayjs(event.start).format('YYYY-MM-DD');\n if (!groupedEvents[eventDate]) {\n groupedEvents[eventDate] = [];\n }\n groupedEvents[eventDate].push(event);\n}\n\ninterface GetAgendaViewEventsInput {\n rangeStart: AnyDateValue;\n rangeEnd: AnyDateValue;\n events: ScheduleEventData[] | undefined;\n}\n\nexport function getAgendaViewEvents({ rangeStart, rangeEnd, events }: GetAgendaViewEventsInput) {\n const groupedEvents: AgendaGroupedEvents = {};\n\n if (events === undefined) {\n return groupedEvents;\n }\n\n const start = dayjs(rangeStart).startOf('day');\n const end = dayjs(rangeEnd).startOf('day');\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (event.display === 'background') {\n continue;\n }\n\n const eventStart = dayjs(event.start).startOf('day');\n const eventEnd = dayjs(event.end).startOf('day');\n\n if (eventEnd.isBefore(start) || eventStart.isAfter(end)) {\n continue;\n }\n\n if (!ids.has(event.id)) {\n ids.add(event.id);\n } else {\n throw new Error(`[@mantine/schedule] AgendaView: Duplicated event ids found: ${event.id}`);\n }\n\n groupEventByDate(validateEvent(event), groupedEvents, start, end);\n }\n\n return groupedEvents;\n}\n"],"mappings":";;;;;;;AAIA,SAAS,oBAAoB,OAA0B;CACrD,MAAM,WAAA,
|
|
1
|
+
{"version":3,"file":"get-agenda-view-events.cjs","names":["isMultidayEvent","validateEvent"],"sources":["../../../src/components/AgendaView/get-agenda-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, ScheduleEventData } from '../../types';\nimport { isMultidayEvent, validateEvent } from '../../utils';\n\nfunction getEffectiveEndDate(event: ScheduleEventData) {\n const endDate = dayjs(event.end).startOf('day');\n if (dayjs(event.end).hour() === 0 && dayjs(event.end).minute() === 0) {\n return endDate.subtract(1, 'day');\n }\n return endDate;\n}\n\nexport type AgendaGroupedEvents = Record<DateStringValue, ScheduleEventData[]>;\n\nfunction groupEventByDate(\n event: ScheduleEventData,\n groupedEvents: AgendaGroupedEvents,\n rangeStart: dayjs.Dayjs,\n rangeEnd: dayjs.Dayjs\n) {\n if (isMultidayEvent(event)) {\n const startDate = dayjs(event.start).startOf('day');\n const endDate = getEffectiveEndDate(event);\n\n for (\n let date = startDate;\n date.isBefore(endDate) || date.isSame(endDate);\n date = date.add(1, 'day')\n ) {\n if (date.isBefore(rangeStart) || date.isAfter(rangeEnd)) {\n continue;\n }\n const dateKey = date.format('YYYY-MM-DD');\n if (!groupedEvents[dateKey]) {\n groupedEvents[dateKey] = [];\n }\n groupedEvents[dateKey].push(event);\n }\n\n return;\n }\n\n const eventDate = dayjs(event.start).format('YYYY-MM-DD');\n if (!groupedEvents[eventDate]) {\n groupedEvents[eventDate] = [];\n }\n groupedEvents[eventDate].push(event);\n}\n\ninterface GetAgendaViewEventsInput {\n rangeStart: AnyDateValue;\n rangeEnd: AnyDateValue;\n events: ScheduleEventData[] | undefined;\n}\n\nexport function getAgendaViewEvents({ rangeStart, rangeEnd, events }: GetAgendaViewEventsInput) {\n const groupedEvents: AgendaGroupedEvents = {};\n\n if (events === undefined) {\n return groupedEvents;\n }\n\n const start = dayjs(rangeStart).startOf('day');\n const end = dayjs(rangeEnd).startOf('day');\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (event.display === 'background') {\n continue;\n }\n\n const eventStart = dayjs(event.start).startOf('day');\n const eventEnd = dayjs(event.end).startOf('day');\n\n if (eventEnd.isBefore(start) || eventStart.isAfter(end)) {\n continue;\n }\n\n if (!ids.has(event.id)) {\n ids.add(event.id);\n } else {\n throw new Error(`[@mantine/schedule] AgendaView: Duplicated event ids found: ${event.id}`);\n }\n\n groupEventByDate(validateEvent(event), groupedEvents, start, end);\n }\n\n return groupedEvents;\n}\n"],"mappings":";;;;;;;AAIA,SAAS,oBAAoB,OAA0B;CACrD,MAAM,WAAA,GAAU,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,KAAK;CAC9C,KAAA,GAAI,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,MAAA,GAAK,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,OAAO,MAAM,GACjE,OAAO,QAAQ,SAAS,GAAG,KAAK;CAElC,OAAO;AACT;AAIA,SAAS,iBACP,OACA,eACA,YACA,UACA;CACA,IAAIA,0BAAAA,gBAAgB,KAAK,GAAG;EAC1B,MAAM,aAAA,GAAY,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,KAAK;EAClD,MAAM,UAAU,oBAAoB,KAAK;EAEzC,KACE,IAAI,OAAO,WACX,KAAK,SAAS,OAAO,KAAK,KAAK,OAAO,OAAO,GAC7C,OAAO,KAAK,IAAI,GAAG,KAAK,GACxB;GACA,IAAI,KAAK,SAAS,UAAU,KAAK,KAAK,QAAQ,QAAQ,GACpD;GAEF,MAAM,UAAU,KAAK,OAAO,YAAY;GACxC,IAAI,CAAC,cAAc,UACjB,cAAc,WAAW,CAAC;GAE5B,cAAc,QAAQ,CAAC,KAAK,KAAK;EACnC;EAEA;CACF;CAEA,MAAM,aAAA,GAAY,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,OAAO,YAAY;CACxD,IAAI,CAAC,cAAc,YACjB,cAAc,aAAa,CAAC;CAE9B,cAAc,UAAU,CAAC,KAAK,KAAK;AACrC;AAQA,SAAgB,oBAAoB,EAAE,YAAY,UAAU,UAAoC;CAC9F,MAAM,gBAAqC,CAAC;CAE5C,IAAI,WAAW,KAAA,GACb,OAAO;CAGT,MAAM,SAAA,GAAQ,MAAA,QAAA,CAAM,UAAU,CAAC,CAAC,QAAQ,KAAK;CAC7C,MAAM,OAAA,GAAM,MAAA,QAAA,CAAM,QAAQ,CAAC,CAAC,QAAQ,KAAK;CACzC,MAAM,sBAAM,IAAI,IAAqB;CAErC,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,MAAM,YAAY,cACpB;EAGF,MAAM,cAAA,GAAa,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,KAAK;EAGnD,KAAA,GAFiB,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,KAE/B,CAAC,CAAC,SAAS,KAAK,KAAK,WAAW,QAAQ,GAAG,GACpD;EAGF,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,GACnB,IAAI,IAAI,MAAM,EAAE;OAEhB,MAAM,IAAI,MAAM,+DAA+D,MAAM,IAAI;EAG3F,iBAAiBC,uBAAAA,cAAc,KAAK,GAAG,eAAe,OAAO,GAAG;CAClE;CAEA,OAAO;AACT"}
|
|
@@ -38,8 +38,9 @@ const CurrentTimeIndicator = (0, _mantine_core.factory)((_props) => {
|
|
|
38
38
|
rootSelector: "currentTimeIndicator"
|
|
39
39
|
});
|
|
40
40
|
const ctx = (0, _mantine_dates.useDatesContext)();
|
|
41
|
+
const mounted = (0, _mantine_hooks.useMounted)();
|
|
41
42
|
const [, setTick] = (0, react.useState)(0);
|
|
42
|
-
(0, _mantine_hooks.useInterval)(() => setTick((tick) => tick + 1),
|
|
43
|
+
(0, _mantine_hooks.useInterval)(() => setTick((tick) => tick + 1), 6e4, { autoInvoke: true });
|
|
43
44
|
const now = getCurrentTime ? (0, dayjs.default)(getCurrentTime()) : (0, dayjs.default)();
|
|
44
45
|
const offsetPercent = require_get_current_time_position.getCurrentTimePosition({
|
|
45
46
|
startTime,
|
|
@@ -52,7 +53,7 @@ const CurrentTimeIndicator = (0, _mantine_core.factory)((_props) => {
|
|
|
52
53
|
date: now,
|
|
53
54
|
format: currentTimeFormat
|
|
54
55
|
}) : "";
|
|
55
|
-
if (!require_is_in_time_range.isInTimeRange({
|
|
56
|
+
if (!mounted || !require_is_in_time_range.isInTimeRange({
|
|
56
57
|
date: now,
|
|
57
58
|
startTime,
|
|
58
59
|
endTime
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CurrentTimeIndicator.cjs","names":["getCurrentTimePosition","formatDate","isInTimeRange","Box","classes"],"sources":["../../../src/components/CurrentTimeIndicator/CurrentTimeIndicator.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval } from '@mantine/hooks';\nimport { AnyDateValue, DateLabelFormat } from '../../types';\nimport { formatDate, getCurrentTimePosition, isInTimeRange } from '../../utils';\nimport classes from './CurrentTimeIndicator.module.css';\n\nexport type CurrentTimeIndicatorStylesNames =\n | 'currentTimeIndicator'\n | 'currentTimeIndicatorLine'\n | 'currentTimeIndicatorThumb'\n | 'currentTimeIndicatorTimeBubble';\n\nexport type CurrentTimeIndicatorCssVariables = {\n currentTimeIndicator: '--indicator-color';\n};\n\nexport interface CurrentTimeIndicatorProps\n extends BoxProps, StylesApiProps<CurrentTimeIndicatorFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Key of `theme.colors` or any valid CSS color value @default 'red' */\n color?: MantineColor;\n\n /** Offset from the left side */\n startOffset?: string;\n\n /** Offset from the right side */\n endOffset?: string;\n\n /** Extra configurable offset from the top */\n topOffset?: string;\n\n /** Offset for the time bubble */\n timeBubbleStartOffset?: string;\n\n /** If set, displays a bubble with the current time @default @true */\n withTimeBubble?: boolean;\n\n /** If set, displays thumb next to the line @default true */\n withThumb?: boolean;\n\n /** Format of the time displayed in the time bubble @default 'HH:mm' */\n currentTimeFormat?: DateLabelFormat;\n\n /** Locale passed down to dayjs during formatting */\n locale?: string;\n\n /** Start time of the day */\n startTime?: string;\n\n /** End time of the day */\n endTime?: string;\n\n /** Number of minutes per time slot. Used to align the indicator to whole slots when `endTime` does not divide evenly. */\n intervalMinutes?: number;\n\n /** A function to get the current time, called on every tick. Can be used to display the indicator in a different timezone. @default () => dayjs() */\n getCurrentTime?: () => AnyDateValue;\n}\n\nexport type CurrentTimeIndicatorFactory = Factory<{\n props: CurrentTimeIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CurrentTimeIndicatorStylesNames;\n vars: CurrentTimeIndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'CurrentTimeIndicator',\n withTimeBubble: true,\n withThumb: true,\n currentTimeFormat: 'HH:mm',\n topOffset: '0rem',\n} satisfies Partial<CurrentTimeIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CurrentTimeIndicatorFactory>((theme, { color }) => ({\n currentTimeIndicator: {\n '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const CurrentTimeIndicator = factory<CurrentTimeIndicatorFactory>((_props) => {\n const props = useProps('CurrentTimeIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n startOffset,\n endOffset,\n color,\n withTimeBubble,\n withThumb,\n currentTimeFormat,\n locale,\n timeBubbleStartOffset,\n __staticSelector,\n topOffset,\n startTime,\n endTime,\n intervalMinutes,\n getCurrentTime,\n ...others\n } = props;\n\n const getStyles = useStyles<CurrentTimeIndicatorFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'currentTimeIndicator',\n });\n\n const ctx = useDatesContext();\n const [, setTick] = useState(0);\n useInterval(() => setTick((tick) => tick + 1), 1000 * 60, {\n autoInvoke: true,\n });\n\n const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();\n const offsetPercent = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n const formattedTime = withTimeBubble\n ? formatDate({ locale: ctx.getLocale(locale), date: now, format: currentTimeFormat })\n : '';\n\n if (!isInTimeRange({ date: now, startTime, endTime })) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('currentTimeIndicator')}\n __vars={{\n '--top-offset': `calc(${offsetPercent}% + ${topOffset})`,\n '--start-offset': startOffset,\n '--end-offset': endOffset,\n '--time-bubble-start-offset': timeBubbleStartOffset,\n\n // Adjust time bubble width for formats including AM/PM\n '--time-bubble-width': formattedTime?.toString().toLowerCase().includes('m')\n ? '64px'\n : '46px',\n }}\n {...others}\n >\n {withTimeBubble && (\n <div {...getStyles('currentTimeIndicatorTimeBubble')}>{formattedTime}</div>\n )}\n\n {withThumb && <div {...getStyles('currentTimeIndicatorThumb')} />}\n\n <div {...getStyles('currentTimeIndicatorLine')} />\n </Box>\n );\n});\n\nCurrentTimeIndicator.displayName = '@mantine/schedule/CurrentTimeIndicator';\nCurrentTimeIndicator.classes = classes;\nCurrentTimeIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;AAkFA,MAAM,eAAe;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,mBAAmB;CACnB,WAAW;AACb;AAEA,MAAM,gBAAA,
|
|
1
|
+
{"version":3,"file":"CurrentTimeIndicator.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useStyles","useDatesContext","useMounted","useState","getCurrentTimePosition","formatDate","isInTimeRange","Box","classes"],"sources":["../../../src/components/CurrentTimeIndicator/CurrentTimeIndicator.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval, useMounted } from '@mantine/hooks';\nimport { AnyDateValue, DateLabelFormat } from '../../types';\nimport { formatDate, getCurrentTimePosition, isInTimeRange } from '../../utils';\nimport classes from './CurrentTimeIndicator.module.css';\n\nexport type CurrentTimeIndicatorStylesNames =\n | 'currentTimeIndicator'\n | 'currentTimeIndicatorLine'\n | 'currentTimeIndicatorThumb'\n | 'currentTimeIndicatorTimeBubble';\n\nexport type CurrentTimeIndicatorCssVariables = {\n currentTimeIndicator: '--indicator-color';\n};\n\nexport interface CurrentTimeIndicatorProps\n extends BoxProps, StylesApiProps<CurrentTimeIndicatorFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Key of `theme.colors` or any valid CSS color value @default 'red' */\n color?: MantineColor;\n\n /** Offset from the left side */\n startOffset?: string;\n\n /** Offset from the right side */\n endOffset?: string;\n\n /** Extra configurable offset from the top */\n topOffset?: string;\n\n /** Offset for the time bubble */\n timeBubbleStartOffset?: string;\n\n /** If set, displays a bubble with the current time @default @true */\n withTimeBubble?: boolean;\n\n /** If set, displays thumb next to the line @default true */\n withThumb?: boolean;\n\n /** Format of the time displayed in the time bubble @default 'HH:mm' */\n currentTimeFormat?: DateLabelFormat;\n\n /** Locale passed down to dayjs during formatting */\n locale?: string;\n\n /** Start time of the day */\n startTime?: string;\n\n /** End time of the day */\n endTime?: string;\n\n /** Number of minutes per time slot. Used to align the indicator to whole slots when `endTime` does not divide evenly. */\n intervalMinutes?: number;\n\n /** A function to get the current time, called on every tick. Can be used to display the indicator in a different timezone. @default () => dayjs() */\n getCurrentTime?: () => AnyDateValue;\n}\n\nexport type CurrentTimeIndicatorFactory = Factory<{\n props: CurrentTimeIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CurrentTimeIndicatorStylesNames;\n vars: CurrentTimeIndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'CurrentTimeIndicator',\n withTimeBubble: true,\n withThumb: true,\n currentTimeFormat: 'HH:mm',\n topOffset: '0rem',\n} satisfies Partial<CurrentTimeIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CurrentTimeIndicatorFactory>((theme, { color }) => ({\n currentTimeIndicator: {\n '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const CurrentTimeIndicator = factory<CurrentTimeIndicatorFactory>((_props) => {\n const props = useProps('CurrentTimeIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n startOffset,\n endOffset,\n color,\n withTimeBubble,\n withThumb,\n currentTimeFormat,\n locale,\n timeBubbleStartOffset,\n __staticSelector,\n topOffset,\n startTime,\n endTime,\n intervalMinutes,\n getCurrentTime,\n ...others\n } = props;\n\n const getStyles = useStyles<CurrentTimeIndicatorFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'currentTimeIndicator',\n });\n\n const ctx = useDatesContext();\n const mounted = useMounted();\n const [, setTick] = useState(0);\n useInterval(() => setTick((tick) => tick + 1), 1000 * 60, {\n autoInvoke: true,\n });\n\n const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();\n const offsetPercent = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n const formattedTime = withTimeBubble\n ? formatDate({ locale: ctx.getLocale(locale), date: now, format: currentTimeFormat })\n : '';\n\n if (!mounted || !isInTimeRange({ date: now, startTime, endTime })) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('currentTimeIndicator')}\n __vars={{\n '--top-offset': `calc(${offsetPercent}% + ${topOffset})`,\n '--start-offset': startOffset,\n '--end-offset': endOffset,\n '--time-bubble-start-offset': timeBubbleStartOffset,\n\n // Adjust time bubble width for formats including AM/PM\n '--time-bubble-width': formattedTime?.toString().toLowerCase().includes('m')\n ? '64px'\n : '46px',\n }}\n {...others}\n >\n {withTimeBubble && (\n <div {...getStyles('currentTimeIndicatorTimeBubble')}>{formattedTime}</div>\n )}\n\n {withThumb && <div {...getStyles('currentTimeIndicatorThumb')} />}\n\n <div {...getStyles('currentTimeIndicatorLine')} />\n </Box>\n );\n});\n\nCurrentTimeIndicator.displayName = '@mantine/schedule/CurrentTimeIndicator';\nCurrentTimeIndicator.classes = classes;\nCurrentTimeIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;AAkFA,MAAM,eAAe;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,mBAAmB;CACnB,WAAW;AACb;AAEA,MAAM,gBAAA,GAAeA,cAAAA,mBAAAA,EAAiD,OAAO,EAAE,aAAa,EAC1F,sBAAsB,EACpB,qBAAqB,SAAA,GAAQC,cAAAA,cAAAA,CAAc,OAAO,KAAK,IAAI,KAAA,EAC7D,EACF,EAAE;AAEF,MAAa,wBAAA,GAAuBC,cAAAA,QAAAA,EAAsC,WAAW;CACnF,MAAM,SAAA,GAAQC,cAAAA,SAAAA,CAAS,wBAAwB,cAAc,MAAM;CACnE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,aACA,WACA,OACA,gBACA,WACA,mBACA,QACA,uBACA,kBACA,WACA,WACA,SACA,iBACA,gBACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAYC,cAAAA,UAAAA,CAAuC;EACvD,MAAM;EACN,SAAA,oCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,OAAA,GAAMC,eAAAA,gBAAAA,CAAgB;CAC5B,MAAM,WAAA,GAAUC,eAAAA,WAAAA,CAAW;CAC3B,MAAM,GAAG,YAAA,GAAWC,MAAAA,SAAAA,CAAS,CAAC;CAC9B,CAAA,GAAA,eAAA,YAAA,OAAkB,SAAS,SAAS,OAAO,CAAC,GAAG,KAAW,EACxD,YAAY,KACd,CAAC;CAED,MAAM,MAAM,kBAAA,GAAiB,MAAA,QAAA,CAAM,eAAe,CAAC,KAAA,GAAI,MAAA,QAAA,CAAM;CAC7D,MAAM,gBAAgBC,kCAAAA,uBAAuB;EAAE;EAAW;EAAS;EAAiB;CAAI,CAAC;CACzF,MAAM,gBAAgB,iBAClBC,oBAAAA,WAAW;EAAE,QAAQ,IAAI,UAAU,MAAM;EAAG,MAAM;EAAK,QAAQ;CAAkB,CAAC,IAClF;CAEJ,IAAI,CAAC,WAAW,CAACC,yBAAAA,cAAc;EAAE,MAAM;EAAK;EAAW;CAAQ,CAAC,GAC9D,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,KAAD;EACE,GAAI,UAAU,sBAAsB;EACpC,QAAQ;GACN,gBAAgB,QAAQ,cAAc,MAAM,UAAU;GACtD,kBAAkB;GAClB,gBAAgB;GAChB,8BAA8B;GAG9B,uBAAuB,eAAe,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,GAAG,IACvE,SACA;EACN;EACA,GAAI;EAbN,UAAA;GAeG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,gCAAgC;IAAI,UAAA;GAAmB,CAAA;GAG3E,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,GAAI,UAAU,2BAA2B,EAAI,CAAA;GAEhE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,GAAI,UAAU,0BAA0B,EAAI,CAAA;EAC9C;;AAET,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,UAAUC,oCAAAA;AAC/B,qBAAqB,eAAe"}
|
|
@@ -7,6 +7,7 @@ const require_get_day_time_intervals = require("../../utils/get-day-time-interva
|
|
|
7
7
|
const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
|
|
8
8
|
const require_is_all_day_event = require("../../utils/is-all-day-event/is-all-day-event.cjs");
|
|
9
9
|
const require_get_visible_events = require("../../utils/get-visible-events/get-visible-events.cjs");
|
|
10
|
+
const require_get_day_position = require("../../utils/get-day-position/get-day-position.cjs");
|
|
10
11
|
const require_get_time_axis_event_style = require("../../utils/get-time-axis-event-style/get-time-axis-event-style.cjs");
|
|
11
12
|
const require_calculate_drop_time = require("../../utils/calculate-drop-time/calculate-drop-time.cjs");
|
|
12
13
|
const require_get_business_hours_mod = require("../../utils/get-business-hours-mod/get-business-hours-mod.cjs");
|
|
@@ -20,6 +21,7 @@ const require_CurrentTimeIndicator = require("../CurrentTimeIndicator/CurrentTim
|
|
|
20
21
|
const require_DragContext = require("../DragContext/DragContext.cjs");
|
|
21
22
|
const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
|
|
22
23
|
const require_MoreEvents = require("../MoreEvents/MoreEvents.cjs");
|
|
24
|
+
const require_ScheduleBackgroundEvent = require("../ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs");
|
|
23
25
|
const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
|
|
24
26
|
const require_get_day_view_events = require("./get-day-view-events/get-day-view-events.cjs");
|
|
25
27
|
const require_DayView_module = require("./DayView.module.cjs");
|
|
@@ -47,7 +49,10 @@ const defaultProps = {
|
|
|
47
49
|
withEventsDragAndDrop: false,
|
|
48
50
|
withDragSlotSelect: false,
|
|
49
51
|
withEventResize: false,
|
|
50
|
-
mode: "default"
|
|
52
|
+
mode: "default",
|
|
53
|
+
withInteractiveBackgroundEvents: false,
|
|
54
|
+
eventOverlapMode: "columns",
|
|
55
|
+
eventOverlapRaiseDelay: 600
|
|
51
56
|
};
|
|
52
57
|
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, slotHeight, allDaySlotHeight }) => ({ dayView: {
|
|
53
58
|
"--day-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0,
|
|
@@ -56,7 +61,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, sl
|
|
|
56
61
|
} }));
|
|
57
62
|
const DayView = (0, _mantine_core.factory)((_props) => {
|
|
58
63
|
const props = (0, _mantine_core.useProps)("DayView", defaultProps, _props);
|
|
59
|
-
const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withSubHourGridLines, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, getCurrentTime, withCurrentTimeIndicator, withCurrentTimeBubble, withHeader, radius, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, slotHeight, allDaySlotHeight, scrollAreaProps, events, moreEventsProps, renderEventBody, renderEvent, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
|
|
64
|
+
const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withSubHourGridLines, eventOverlapMode, eventOverlapRaiseDelay, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, getCurrentTime, withCurrentTimeIndicator, withCurrentTimeBubble, withHeader, radius, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, slotHeight, allDaySlotHeight, scrollAreaProps, events, moreEventsProps, renderEventBody, renderEvent, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
|
|
60
65
|
const [agendaOpen, setAgendaOpen] = (0, react.useState)(false);
|
|
61
66
|
const getStyles = (0, _mantine_core.useStyles)({
|
|
62
67
|
name: __staticSelector,
|
|
@@ -84,7 +89,6 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
84
89
|
__staticSelector,
|
|
85
90
|
radius
|
|
86
91
|
};
|
|
87
|
-
const theme = (0, _mantine_core.useMantineTheme)();
|
|
88
92
|
const ctx = (0, _mantine_dates.useDatesContext)();
|
|
89
93
|
const resolveNow = () => getCurrentTime ? (0, dayjs.default)(getCurrentTime()) : (0, dayjs.default)();
|
|
90
94
|
const showCurrentTimeIndicator = withCurrentTimeIndicator ?? (0, dayjs.default)(date).isSame(resolveNow(), "day");
|
|
@@ -114,20 +118,43 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
114
118
|
top: slotRect.top - viewportRect.top
|
|
115
119
|
});
|
|
116
120
|
}, []);
|
|
121
|
+
const dragOffsetRef = (0, react.useRef)({
|
|
122
|
+
offset: 0,
|
|
123
|
+
size: 0
|
|
124
|
+
});
|
|
117
125
|
const getSlotIndexFromDragPoint = (0, react.useCallback)((event) => {
|
|
118
126
|
const slotIndex = slotsRef.current.findIndex((slotNode) => {
|
|
119
127
|
if (!slotNode) return false;
|
|
120
128
|
const rect = slotNode.getBoundingClientRect();
|
|
121
129
|
return event.clientY >= rect.top && event.clientY <= rect.bottom;
|
|
122
130
|
});
|
|
123
|
-
if (slotIndex >= 0)
|
|
131
|
+
if (slotIndex >= 0) {
|
|
132
|
+
const rect = slotsRef.current[slotIndex].getBoundingClientRect();
|
|
133
|
+
dragOffsetRef.current = {
|
|
134
|
+
offset: event.clientY - rect.top,
|
|
135
|
+
size: rect.height
|
|
136
|
+
};
|
|
137
|
+
return slotIndex;
|
|
138
|
+
}
|
|
124
139
|
const firstSlot = slotsRef.current[0];
|
|
125
140
|
const lastSlot = slotsRef.current[slotsRef.current.length - 1];
|
|
126
141
|
if (!firstSlot || !lastSlot) return null;
|
|
127
142
|
const firstRect = firstSlot.getBoundingClientRect();
|
|
128
143
|
const lastRect = lastSlot.getBoundingClientRect();
|
|
129
|
-
if (event.clientY < firstRect.top)
|
|
130
|
-
|
|
144
|
+
if (event.clientY < firstRect.top) {
|
|
145
|
+
dragOffsetRef.current = {
|
|
146
|
+
offset: 0,
|
|
147
|
+
size: firstRect.height
|
|
148
|
+
};
|
|
149
|
+
return 0;
|
|
150
|
+
}
|
|
151
|
+
if (event.clientY > lastRect.bottom) {
|
|
152
|
+
dragOffsetRef.current = {
|
|
153
|
+
offset: lastRect.height,
|
|
154
|
+
size: lastRect.height
|
|
155
|
+
};
|
|
156
|
+
return slotsRef.current.length - 1;
|
|
157
|
+
}
|
|
131
158
|
return null;
|
|
132
159
|
}, []);
|
|
133
160
|
const handleSlotKeyDown = (event, slotIndex) => {
|
|
@@ -148,27 +175,67 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
148
175
|
onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
|
|
149
176
|
}
|
|
150
177
|
});
|
|
178
|
+
const expandedEvents = require_expand_recurring_events.expandRecurringEvents({
|
|
179
|
+
events,
|
|
180
|
+
rangeStart: (0, dayjs.default)(date).startOf("day").toDate(),
|
|
181
|
+
rangeEnd: (0, dayjs.default)(date).endOf("day").toDate(),
|
|
182
|
+
expansionLimit: recurrenceExpansionLimit
|
|
183
|
+
});
|
|
151
184
|
const eventsData = require_get_day_view_events.getDayViewEvents({
|
|
152
|
-
events:
|
|
153
|
-
events,
|
|
154
|
-
rangeStart: (0, dayjs.default)(date).startOf("day").toDate(),
|
|
155
|
-
rangeEnd: (0, dayjs.default)(date).endOf("day").toDate(),
|
|
156
|
-
expansionLimit: recurrenceExpansionLimit
|
|
157
|
-
}),
|
|
185
|
+
events: expandedEvents,
|
|
158
186
|
date,
|
|
159
187
|
startTime,
|
|
160
188
|
endTime,
|
|
161
|
-
intervalMinutes
|
|
189
|
+
intervalMinutes,
|
|
190
|
+
eventOverlapMode
|
|
162
191
|
});
|
|
163
192
|
const handleExternalDrop = (0, react.useCallback)((e, slotIndex) => {
|
|
164
193
|
if (!onExternalEventDrop) return;
|
|
165
194
|
const slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
|
|
166
|
-
|
|
195
|
+
const slotTime = slots[slotIndex].startTime;
|
|
196
|
+
if (eventDragInterval == null) {
|
|
197
|
+
onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
const slotStart = `${slotDate} ${slotTime}`;
|
|
201
|
+
const { start } = require_calculate_drop_time.calculateDropTime({
|
|
202
|
+
draggedEvent: {
|
|
203
|
+
start: slotStart,
|
|
204
|
+
end: slotStart
|
|
205
|
+
},
|
|
206
|
+
targetDate: date,
|
|
207
|
+
targetSlotTime: slotTime,
|
|
208
|
+
intervalMinutes,
|
|
209
|
+
dragIntervalMinutes: eventDragInterval,
|
|
210
|
+
slotOffset: dragOffsetRef.current.offset,
|
|
211
|
+
slotSize: dragOffsetRef.current.size,
|
|
212
|
+
startTime,
|
|
213
|
+
endTime
|
|
214
|
+
});
|
|
215
|
+
onExternalEventDrop(e.dataTransfer, (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss"));
|
|
167
216
|
}, [
|
|
168
217
|
onExternalEventDrop,
|
|
169
218
|
date,
|
|
170
|
-
slots
|
|
219
|
+
slots,
|
|
220
|
+
eventDragInterval,
|
|
221
|
+
intervalMinutes,
|
|
222
|
+
startTime,
|
|
223
|
+
endTime
|
|
171
224
|
]);
|
|
225
|
+
const getDropTimeForSlot = (slotIndex, draggedEvent) => {
|
|
226
|
+
const slotTime = slots[slotIndex].startTime;
|
|
227
|
+
return require_calculate_drop_time.calculateDropTime({
|
|
228
|
+
draggedEvent,
|
|
229
|
+
targetDate: date,
|
|
230
|
+
targetSlotTime: slotTime,
|
|
231
|
+
intervalMinutes,
|
|
232
|
+
dragIntervalMinutes: eventDragInterval,
|
|
233
|
+
slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
|
|
234
|
+
slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
|
|
235
|
+
startTime,
|
|
236
|
+
endTime
|
|
237
|
+
});
|
|
238
|
+
};
|
|
172
239
|
const dragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
|
|
173
240
|
enabled: withEventsDragAndDrop,
|
|
174
241
|
mode,
|
|
@@ -176,23 +243,27 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
176
243
|
canDragEvent,
|
|
177
244
|
onEventDragStart,
|
|
178
245
|
onEventDragEnd,
|
|
179
|
-
calculateDropTarget:
|
|
180
|
-
const slotTime = slots[slotIndex].startTime;
|
|
181
|
-
return require_calculate_drop_time.calculateDropTime({
|
|
182
|
-
draggedEvent,
|
|
183
|
-
targetDate: date,
|
|
184
|
-
targetSlotTime: slotTime,
|
|
185
|
-
intervalMinutes
|
|
186
|
-
});
|
|
187
|
-
},
|
|
246
|
+
calculateDropTarget: getDropTimeForSlot,
|
|
188
247
|
onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
|
|
189
248
|
});
|
|
249
|
+
const updateDragPreview = (slotIndex) => {
|
|
250
|
+
const draggedEvent = dragDrop.dragContextValue.draggedEvent;
|
|
251
|
+
if (eventDragInterval == null || !draggedEvent) return;
|
|
252
|
+
const { start, end } = getDropTimeForSlot(slotIndex, draggedEvent);
|
|
253
|
+
const newStart = (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss");
|
|
254
|
+
if (dragDrop.dragPreview?.start !== newStart) dragDrop.setDragPreview({
|
|
255
|
+
start: newStart,
|
|
256
|
+
end: (0, dayjs.default)(end).format("YYYY-MM-DD HH:mm:ss"),
|
|
257
|
+
target: slotIndex
|
|
258
|
+
});
|
|
259
|
+
};
|
|
190
260
|
const eventResize = require_use_event_resize.useEventResize({
|
|
191
261
|
enabled: withEventResize,
|
|
192
262
|
mode,
|
|
193
263
|
startTime,
|
|
194
264
|
endTime,
|
|
195
265
|
intervalMinutes,
|
|
266
|
+
resizeIntervalMinutes: eventResizeInterval,
|
|
196
267
|
onEventResize,
|
|
197
268
|
canResizeEvent
|
|
198
269
|
});
|
|
@@ -231,13 +302,16 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
231
302
|
if (!eventResize.wasResizing()) onEventClick(event, e);
|
|
232
303
|
} : void 0,
|
|
233
304
|
...stylesApiProps,
|
|
305
|
+
mod: { cascade: eventOverlapMode === "cascade" },
|
|
234
306
|
style: {
|
|
235
307
|
...stylesApiProps.styles?.event,
|
|
236
308
|
top: `${eventTop}%`,
|
|
237
309
|
height: `${eventHeight}%`,
|
|
238
310
|
insetInlineStart: `${event.position.offset}%`,
|
|
239
311
|
width: `${event.position.width}%`,
|
|
240
|
-
position: "absolute"
|
|
312
|
+
position: "absolute",
|
|
313
|
+
"--event-z-index": event.position.column + 3,
|
|
314
|
+
"--event-z-index-raised": event.position.overlaps + 3
|
|
241
315
|
}
|
|
242
316
|
}, event.id);
|
|
243
317
|
});
|
|
@@ -257,8 +331,9 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
257
331
|
...stylesApiProps
|
|
258
332
|
}, event.id));
|
|
259
333
|
const dayGroup = (0, dayjs.default)(date).format("YYYY-MM-DD");
|
|
334
|
+
const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
|
|
260
335
|
const items = slots.map((slot, index) => {
|
|
261
|
-
const isDropTarget = dragDrop.isDropTarget(index);
|
|
336
|
+
const isDropTarget = !suppressDropHighlight && dragDrop.isDropTarget(index);
|
|
262
337
|
const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
|
|
263
338
|
const slotStart = `${dayGroup} ${slot.startTime}`;
|
|
264
339
|
const slotEnd = `${dayGroup} ${slot.endTime}`;
|
|
@@ -324,61 +399,37 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
324
399
|
}
|
|
325
400
|
return acc;
|
|
326
401
|
}, []);
|
|
327
|
-
const
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
theme,
|
|
356
|
-
variant: "light",
|
|
357
|
-
autoContrast: true
|
|
358
|
-
});
|
|
359
|
-
const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
|
|
360
|
-
const bgEventProps = {
|
|
361
|
-
key: event.id,
|
|
362
|
-
...getStyles("dayViewBackgroundEvent", { style: {
|
|
363
|
-
...require_get_time_axis_event_style.getTimeAxisEventStyle({
|
|
364
|
-
start: event.position.top,
|
|
365
|
-
span: event.position.height,
|
|
366
|
-
axis: "vertical"
|
|
367
|
-
}),
|
|
368
|
-
width: "100%"
|
|
369
|
-
} }),
|
|
370
|
-
__vars: {
|
|
371
|
-
"--bg-event-bg": colors.background,
|
|
372
|
-
"--bg-event-color": colors.color
|
|
373
|
-
},
|
|
374
|
-
children: bgEventBody
|
|
375
|
-
};
|
|
376
|
-
if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
|
|
377
|
-
const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
|
|
378
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...restBgEventProps }, bgEventKey);
|
|
379
|
-
});
|
|
402
|
+
const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
|
|
403
|
+
const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
|
|
404
|
+
event,
|
|
405
|
+
renderEvent,
|
|
406
|
+
renderEventBody,
|
|
407
|
+
interactive: interactiveBackgroundEvents,
|
|
408
|
+
onEventClick,
|
|
409
|
+
...getStyles("dayViewBackgroundEvent", { style: {
|
|
410
|
+
top: 0,
|
|
411
|
+
height: "100%",
|
|
412
|
+
width: "100%"
|
|
413
|
+
} })
|
|
414
|
+
}, `bg-allday-${event.id}`));
|
|
415
|
+
const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
|
|
416
|
+
event,
|
|
417
|
+
renderEvent,
|
|
418
|
+
renderEventBody,
|
|
419
|
+
interactive: interactiveBackgroundEvents,
|
|
420
|
+
onEventClick,
|
|
421
|
+
...getStyles("dayViewBackgroundEvent", { style: {
|
|
422
|
+
...require_get_time_axis_event_style.getTimeAxisEventStyle({
|
|
423
|
+
start: event.position.top,
|
|
424
|
+
span: event.position.height,
|
|
425
|
+
axis: "vertical"
|
|
426
|
+
}),
|
|
427
|
+
width: "100%"
|
|
428
|
+
} })
|
|
429
|
+
}, event.id));
|
|
380
430
|
const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
|
|
381
431
|
...getStyles("dayView"),
|
|
432
|
+
__vars: { "--event-raise-delay": `${eventOverlapRaiseDelay}ms` },
|
|
382
433
|
mod: {
|
|
383
434
|
static: mode === "static",
|
|
384
435
|
"slot-dragging": slotDragSelect.isDragging,
|
|
@@ -478,7 +529,10 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
478
529
|
...getStyles("dayViewTimeSlots"),
|
|
479
530
|
onDragOver: withDragHandlers ? (event) => {
|
|
480
531
|
const slotIndex = getSlotIndexFromDragPoint(event);
|
|
481
|
-
if (slotIndex !== null)
|
|
532
|
+
if (slotIndex !== null) {
|
|
533
|
+
dragDrop.handleDragOver(event, slotIndex);
|
|
534
|
+
updateDragPreview(slotIndex);
|
|
535
|
+
}
|
|
482
536
|
} : void 0,
|
|
483
537
|
onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
|
|
484
538
|
onDrop: withDragHandlers ? (event) => {
|
|
@@ -488,6 +542,25 @@ const DayView = (0, _mantine_core.factory)((_props) => {
|
|
|
488
542
|
children: [
|
|
489
543
|
backgroundTimedEventNodes,
|
|
490
544
|
eventsNodes,
|
|
545
|
+
dragDrop.dragPreview && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...getStyles("dayViewDragPreview", { style: (() => {
|
|
546
|
+
const { top, height } = require_get_day_position.getDayPosition({
|
|
547
|
+
event: {
|
|
548
|
+
...dragDrop.dragContextValue.draggedEvent,
|
|
549
|
+
start: dragDrop.dragPreview.start,
|
|
550
|
+
end: dragDrop.dragPreview.end
|
|
551
|
+
},
|
|
552
|
+
startTime,
|
|
553
|
+
endTime,
|
|
554
|
+
intervalMinutes
|
|
555
|
+
});
|
|
556
|
+
return {
|
|
557
|
+
position: "absolute",
|
|
558
|
+
insetInlineStart: 0,
|
|
559
|
+
insetInlineEnd: 0,
|
|
560
|
+
top: `${top}%`,
|
|
561
|
+
height: `${height}%`
|
|
562
|
+
};
|
|
563
|
+
})() }) }),
|
|
491
564
|
showCurrentTimeIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CurrentTimeIndicator.CurrentTimeIndicator, {
|
|
492
565
|
startOffset: "calc(var(--day-view-slot-labels-width) * -1)",
|
|
493
566
|
endOffset: "0rem",
|