@mantine/schedule 9.4.0 → 9.4.2
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/components/DayView/DayView.cjs +6 -2
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs +26 -18
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs +22 -6
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs.map +1 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs +3 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +99 -25
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs +3 -2
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs.map +1 -1
- package/cjs/components/ScheduleEvent/ScheduleEvent.module.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +7 -3
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/hooks/use-horizontal-event-resize.cjs +12 -4
- package/cjs/hooks/use-horizontal-event-resize.cjs.map +1 -1
- package/cjs/index.cjs +4 -0
- package/cjs/utils/clamp-interval-minutes/clamp-interval-minutes.cjs +13 -4
- package/cjs/utils/clamp-interval-minutes/clamp-interval-minutes.cjs.map +1 -1
- package/cjs/utils/get-day-relative-percent/get-day-relative-percent.cjs +18 -0
- package/cjs/utils/get-day-relative-percent/get-day-relative-percent.cjs.map +1 -0
- package/cjs/utils/get-time-axis-event-style/get-time-axis-event-style.cjs +21 -0
- package/cjs/utils/get-time-axis-event-style/get-time-axis-event-style.cjs.map +1 -0
- package/esm/components/DayView/DayView.mjs +6 -2
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs +26 -18
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs.map +1 -1
- package/esm/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.mjs +22 -6
- package/esm/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.mjs.map +1 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs +3 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +100 -26
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs +3 -2
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs.map +1 -1
- package/esm/components/ScheduleEvent/ScheduleEvent.module.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +7 -3
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/hooks/use-horizontal-event-resize.mjs +12 -4
- package/esm/hooks/use-horizontal-event-resize.mjs.map +1 -1
- package/esm/index.mjs +3 -1
- package/esm/utils/clamp-interval-minutes/clamp-interval-minutes.mjs +13 -4
- package/esm/utils/clamp-interval-minutes/clamp-interval-minutes.mjs.map +1 -1
- package/esm/utils/get-day-relative-percent/get-day-relative-percent.mjs +18 -0
- package/esm/utils/get-day-relative-percent/get-day-relative-percent.mjs.map +1 -0
- package/esm/utils/get-time-axis-event-style/get-time-axis-event-style.mjs +21 -0
- package/esm/utils/get-time-axis-event-style/get-time-axis-event-style.mjs.map +1 -0
- package/lib/components/DayView/DayView.d.ts +1 -1
- package/lib/components/ResourcesDayView/ResourcesDayView.d.ts +6 -2
- package/lib/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.d.ts +2 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts +17 -1
- package/lib/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.d.ts +2 -1
- package/lib/components/WeekView/WeekView.d.ts +1 -1
- package/lib/hooks/use-horizontal-event-resize.d.ts +3 -1
- package/lib/utils/clamp-interval-minutes/clamp-interval-minutes.d.ts +10 -1
- package/lib/utils/get-day-relative-percent/get-day-relative-percent.d.ts +15 -0
- package/lib/utils/get-time-axis-event-style/get-time-axis-event-style.d.ts +26 -0
- package/lib/utils/index.d.ts +2 -0
- package/package.json +4 -4
- package/styles.css +16 -1
- package/styles.layer.css +16 -1
|
@@ -8,7 +8,7 @@ const require_get_day_positioned_events = require("../../DayView/get-day-view-ev
|
|
|
8
8
|
let dayjs = require("dayjs");
|
|
9
9
|
dayjs = require_runtime.__toESM(dayjs);
|
|
10
10
|
//#region packages/@mantine/schedule/src/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.ts
|
|
11
|
-
function getResourcesDayViewEvents({ events, resources, date, startTime, endTime }) {
|
|
11
|
+
function getResourcesDayViewEvents({ events, resources, date, startTime, endTime, intervalMinutes }) {
|
|
12
12
|
const result = {
|
|
13
13
|
regularEvents: {},
|
|
14
14
|
allDayEvents: {},
|
|
@@ -37,8 +37,8 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
|
|
|
37
37
|
const eventStart = (0, dayjs.default)(event.start);
|
|
38
38
|
const eventEnd = (0, dayjs.default)(event.end);
|
|
39
39
|
const isOnDay = eventStart.isSame(dayStart, "day");
|
|
40
|
-
const
|
|
41
|
-
if (isOnDay ||
|
|
40
|
+
const overlapsDay = eventStart.isBefore(dayEnd) && eventEnd.isAfter(dayStart);
|
|
41
|
+
if (isOnDay || overlapsDay) {
|
|
42
42
|
if (isOnDay && !require_is_event_in_time_range.isEventInTimeRange({
|
|
43
43
|
event,
|
|
44
44
|
startTime,
|
|
@@ -48,7 +48,21 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
|
|
|
48
48
|
if (!ids.has(event.id)) ids.add(event.id);
|
|
49
49
|
else throw new Error(`[@mantine/schedule] ResourcesDayView: Duplicated event ids found: ${event.id}`);
|
|
50
50
|
if (event.display === "background") backgroundByResource[event.resourceId].push(validated);
|
|
51
|
-
else eventsByResource[event.resourceId].push(validated);
|
|
51
|
+
else if (isOnDay) eventsByResource[event.resourceId].push(validated);
|
|
52
|
+
else {
|
|
53
|
+
const clippedStart = eventStart.isBefore(dayStart) ? dayStart : eventStart;
|
|
54
|
+
const clippedEnd = eventEnd.isAfter(dayEnd) ? dayEnd : eventEnd;
|
|
55
|
+
const clippedEvent = {
|
|
56
|
+
...validated,
|
|
57
|
+
start: clippedStart.format("YYYY-MM-DD HH:mm:ss"),
|
|
58
|
+
end: clippedEnd.format("YYYY-MM-DD HH:mm:ss")
|
|
59
|
+
};
|
|
60
|
+
if (require_is_event_in_time_range.isEventInTimeRange({
|
|
61
|
+
event: clippedEvent,
|
|
62
|
+
startTime,
|
|
63
|
+
endTime
|
|
64
|
+
})) eventsByResource[event.resourceId].push(clippedEvent);
|
|
65
|
+
}
|
|
52
66
|
}
|
|
53
67
|
}
|
|
54
68
|
for (const resource of resources) {
|
|
@@ -56,7 +70,8 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
|
|
|
56
70
|
events: eventsByResource[resource.id],
|
|
57
71
|
startTime,
|
|
58
72
|
endTime,
|
|
59
|
-
date
|
|
73
|
+
date,
|
|
74
|
+
intervalMinutes
|
|
60
75
|
});
|
|
61
76
|
for (const event of positioned) if (event.position.allDay) result.allDayEvents[resource.id].push(event);
|
|
62
77
|
else result.regularEvents[resource.id].push(event);
|
|
@@ -89,7 +104,8 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
|
|
|
89
104
|
const { top, height } = require_get_day_position.getDayPosition({
|
|
90
105
|
event: clippedEvent,
|
|
91
106
|
startTime,
|
|
92
|
-
endTime
|
|
107
|
+
endTime,
|
|
108
|
+
intervalMinutes
|
|
93
109
|
});
|
|
94
110
|
if (height <= 0) continue;
|
|
95
111
|
result.backgroundTimedEvents[resource.id].push({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-resources-day-view-events.cjs","names":["isEventInTimeRange","validateEvent","getDayPositionedEvents","isAllDayEvent","getDayPosition"],"sources":["../../../../src/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n AnyDateValue,\n DayPositionedEventData,\n ScheduleEventData,\n ScheduleResourceData,\n} from '../../../types';\nimport { getDayPosition, isAllDayEvent, isEventInTimeRange, validateEvent } from '../../../utils';\nimport { getDayPositionedEvents } from '../../DayView/get-day-view-events/get-day-positioned-events';\n\ninterface GetResourcesDayViewEventsInput {\n events: ScheduleEventData[] | undefined;\n resources: ScheduleResourceData[];\n date: AnyDateValue;\n startTime?: string;\n endTime?: string;\n}\n\nexport interface ResourcesDayViewEventsResult {\n regularEvents: Record<string | number, DayPositionedEventData[]>;\n allDayEvents: Record<string | number, DayPositionedEventData[]>;\n backgroundTimedEvents: Record<string | number, DayPositionedEventData[]>;\n backgroundAllDayEvents: Record<string | number, DayPositionedEventData[]>;\n}\n\nexport function getResourcesDayViewEvents({\n events,\n resources,\n date,\n startTime,\n endTime,\n}: GetResourcesDayViewEventsInput): ResourcesDayViewEventsResult {\n const result: ResourcesDayViewEventsResult = {\n regularEvents: {},\n allDayEvents: {},\n backgroundTimedEvents: {},\n backgroundAllDayEvents: {},\n };\n\n for (const resource of resources) {\n result.regularEvents[resource.id] = [];\n result.allDayEvents[resource.id] = [];\n result.backgroundTimedEvents[resource.id] = [];\n result.backgroundAllDayEvents[resource.id] = [];\n }\n\n if (events === undefined) {\n return result;\n }\n\n const dayStart = dayjs(date).startOf('day');\n const dayEnd = dayjs(date).endOf('day');\n\n const eventsByResource: Record<string | number, ScheduleEventData[]> = {};\n const backgroundByResource: Record<string | number, ScheduleEventData[]> = {};\n\n for (const resource of resources) {\n eventsByResource[resource.id] = [];\n backgroundByResource[resource.id] = [];\n }\n\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (event.resourceId === undefined) {\n continue;\n }\n\n if (!(event.resourceId in eventsByResource)) {\n continue;\n }\n\n const eventStart = dayjs(event.start);\n const eventEnd = dayjs(event.end);\n const isOnDay = eventStart.isSame(dayStart, 'day');\n const
|
|
1
|
+
{"version":3,"file":"get-resources-day-view-events.cjs","names":["isEventInTimeRange","validateEvent","getDayPositionedEvents","isAllDayEvent","getDayPosition"],"sources":["../../../../src/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n AnyDateValue,\n DayPositionedEventData,\n ScheduleEventData,\n ScheduleResourceData,\n} from '../../../types';\nimport { getDayPosition, isAllDayEvent, isEventInTimeRange, validateEvent } from '../../../utils';\nimport { getDayPositionedEvents } from '../../DayView/get-day-view-events/get-day-positioned-events';\n\ninterface GetResourcesDayViewEventsInput {\n events: ScheduleEventData[] | undefined;\n resources: ScheduleResourceData[];\n date: AnyDateValue;\n startTime?: string;\n endTime?: string;\n intervalMinutes?: number;\n}\n\nexport interface ResourcesDayViewEventsResult {\n regularEvents: Record<string | number, DayPositionedEventData[]>;\n allDayEvents: Record<string | number, DayPositionedEventData[]>;\n backgroundTimedEvents: Record<string | number, DayPositionedEventData[]>;\n backgroundAllDayEvents: Record<string | number, DayPositionedEventData[]>;\n}\n\nexport function getResourcesDayViewEvents({\n events,\n resources,\n date,\n startTime,\n endTime,\n intervalMinutes,\n}: GetResourcesDayViewEventsInput): ResourcesDayViewEventsResult {\n const result: ResourcesDayViewEventsResult = {\n regularEvents: {},\n allDayEvents: {},\n backgroundTimedEvents: {},\n backgroundAllDayEvents: {},\n };\n\n for (const resource of resources) {\n result.regularEvents[resource.id] = [];\n result.allDayEvents[resource.id] = [];\n result.backgroundTimedEvents[resource.id] = [];\n result.backgroundAllDayEvents[resource.id] = [];\n }\n\n if (events === undefined) {\n return result;\n }\n\n const dayStart = dayjs(date).startOf('day');\n const dayEnd = dayjs(date).endOf('day');\n\n const eventsByResource: Record<string | number, ScheduleEventData[]> = {};\n const backgroundByResource: Record<string | number, ScheduleEventData[]> = {};\n\n for (const resource of resources) {\n eventsByResource[resource.id] = [];\n backgroundByResource[resource.id] = [];\n }\n\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (event.resourceId === undefined) {\n continue;\n }\n\n if (!(event.resourceId in eventsByResource)) {\n continue;\n }\n\n const eventStart = dayjs(event.start);\n const eventEnd = dayjs(event.end);\n\n const isOnDay = eventStart.isSame(dayStart, 'day');\n const overlapsDay = eventStart.isBefore(dayEnd) && eventEnd.isAfter(dayStart);\n\n if (isOnDay || overlapsDay) {\n if (isOnDay && !isEventInTimeRange({ event, startTime, endTime })) {\n continue;\n }\n\n const validated = validateEvent(event);\n\n if (!ids.has(event.id)) {\n ids.add(event.id);\n } else {\n throw new Error(\n `[@mantine/schedule] ResourcesDayView: Duplicated event ids found: ${event.id}`\n );\n }\n\n if (event.display === 'background') {\n backgroundByResource[event.resourceId].push(validated);\n } else if (isOnDay) {\n eventsByResource[event.resourceId].push(validated);\n } else {\n const clippedStart = eventStart.isBefore(dayStart) ? dayStart : eventStart;\n const clippedEnd = eventEnd.isAfter(dayEnd) ? dayEnd : eventEnd;\n\n const clippedEvent = {\n ...validated,\n start: clippedStart.format('YYYY-MM-DD HH:mm:ss'),\n end: clippedEnd.format('YYYY-MM-DD HH:mm:ss'),\n };\n\n if (isEventInTimeRange({ event: clippedEvent, startTime, endTime })) {\n eventsByResource[event.resourceId].push(clippedEvent);\n }\n }\n }\n }\n\n for (const resource of resources) {\n const positioned = getDayPositionedEvents({\n events: eventsByResource[resource.id],\n startTime,\n endTime,\n date,\n intervalMinutes,\n });\n\n for (const event of positioned) {\n if (event.position.allDay) {\n result.allDayEvents[resource.id].push(event);\n } else {\n result.regularEvents[resource.id].push(event);\n }\n }\n\n for (const event of backgroundByResource[resource.id]) {\n const eventStart = dayjs(event.start);\n const eventEnd = dayjs(event.end);\n const clippedStart = eventStart.isBefore(dayStart) ? dayStart : eventStart;\n const clippedEnd = eventEnd.isAfter(dayEnd) ? dayEnd : eventEnd;\n\n const clippedEvent = {\n ...event,\n start: clippedStart.format('YYYY-MM-DD HH:mm:ss'),\n end: clippedEnd.format('YYYY-MM-DD HH:mm:ss'),\n };\n\n const allDay = isAllDayEvent({ event: clippedEvent, date });\n\n if (allDay) {\n result.backgroundAllDayEvents[resource.id].push({\n ...event,\n position: {\n top: 0,\n height: 100,\n allDay: true,\n width: 100,\n offset: 0,\n column: 0,\n overlaps: 1,\n },\n });\n } else {\n const { top, height } = getDayPosition({\n event: clippedEvent,\n startTime,\n endTime,\n intervalMinutes,\n });\n if (height <= 0) {\n continue;\n }\n result.backgroundTimedEvents[resource.id].push({\n ...event,\n position: { top, height, allDay: false, width: 100, offset: 0, column: 0, overlaps: 1 },\n });\n }\n }\n }\n\n return result;\n}\n"],"mappings":"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"}
|
|
@@ -77,6 +77,9 @@ const ResourcesSchedule = (0, _mantine_core.factory)((_props) => {
|
|
|
77
77
|
case "week": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourcesWeekView.ResourcesWeekView, {
|
|
78
78
|
...commonProps,
|
|
79
79
|
onTimeSlotClick,
|
|
80
|
+
withEventResize: mode === "static" ? false : withEventResize,
|
|
81
|
+
onEventResize,
|
|
82
|
+
canResizeEvent,
|
|
80
83
|
...weekViewProps
|
|
81
84
|
});
|
|
82
85
|
case "month": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourcesMonthView.ResourcesMonthView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesSchedule.cjs","names":["ResourcesDayView","ResourcesWeekView","ResourcesMonthView","Box","classes"],"sources":["../../../src/components/ResourcesSchedule/ResourcesSchedule.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleResourceData,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n ResourcesDayView,\n ResourcesDayViewProps,\n ResourcesDayViewStylesNames,\n} from '../ResourcesDayView/ResourcesDayView';\nimport {\n ResourcesMonthView,\n ResourcesMonthViewProps,\n ResourcesMonthViewStylesNames,\n} from '../ResourcesMonthView/ResourcesMonthView';\nimport {\n ResourcesWeekView,\n ResourcesWeekViewProps,\n ResourcesWeekViewStylesNames,\n} from '../ResourcesWeekView/ResourcesWeekView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport classes from './ResourcesSchedule.module.css';\n\nexport type ResourcesScheduleStylesNames =\n | 'root'\n | ResourcesDayViewStylesNames\n | ResourcesWeekViewStylesNames\n | ResourcesMonthViewStylesNames;\n\nexport type ResourcesScheduleViewLevel = 'day' | 'week' | 'month';\n\ntype ResourcesScheduleCommonProps =\n | 'date'\n | 'onDateChange'\n | 'resources'\n | 'events'\n | 'locale'\n | 'radius'\n | 'labels'\n | 'renderEventBody'\n | 'renderResourceLabel'\n | 'withEventsDragAndDrop'\n | 'onEventDrop'\n | 'canDragEvent'\n | 'onEventDragStart'\n | 'onEventDragEnd'\n | 'onTimeSlotClick'\n | 'onEventClick'\n | 'onDayClick'\n | 'withDragSlotSelect'\n | 'onSlotDragEnd'\n | 'view'\n | 'onViewChange'\n | 'mode'\n | 'onExternalEventDrop'\n | 'withEventResize'\n | 'onEventResize'\n | 'canResizeEvent'\n | 'recurrenceExpansionLimit';\n\ntype ResourcesScheduleViewProps<T> = Partial<Omit<T, ResourcesScheduleCommonProps>>;\n\nexport interface ResourcesScheduleProps\n extends BoxProps, StylesApiProps<ResourcesScheduleFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** List of resources to display */\n resources: ScheduleResourceData[];\n\n /** Current date to display (controlled) */\n date?: Date | DateStringValue;\n\n /** Default date (uncontrolled) */\n defaultDate?: Date | DateStringValue;\n\n /** Called when date changes via navigation */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Current view level (controlled) */\n view?: ResourcesScheduleViewLevel;\n\n /** Default view level (uncontrolled) @default 'day' */\n defaultView?: ResourcesScheduleViewLevel;\n\n /** Called when view level changes */\n onViewChange?: (view: ResourcesScheduleViewLevel) => void;\n\n /** Events to display across all views */\n events?: ScheduleEventData[];\n\n /** Locale for date formatting */\n locale?: string;\n\n /** Key of theme.radius or any valid CSS value to set border-radius */\n radius?: MantineRadius;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Custom event body renderer */\n renderEventBody?: RenderEventBody;\n\n /** Custom resource label renderer */\n renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;\n\n /** Enable drag and drop for events @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n resourceId?: string | number;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Called when any event drag starts */\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /** Called when any event drag ends */\n onEventDragEnd?: () => void;\n\n /** Called when time slot is clicked */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when day is clicked in month view */\n onDayClick?: (data: {\n date: DateStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, enables drag-to-select slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a slot range is selected by dragging */\n onSlotDragEnd?: (data: {\n rangeStart: DateTimeStringValue;\n rangeEnd: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** Interaction mode @default default */\n mode?: ScheduleMode;\n\n /** Called when an external item is dropped onto the schedule */\n onExternalEventDrop?: (data: {\n dataTransfer: DataTransfer;\n dropDateTime: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** If true, events can be resized @default false */\n withEventResize?: boolean;\n\n /** Called when event is resized */\n onEventResize?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be resized */\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n /** Max number of generated recurring instances @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Props specific to ResourcesDayView */\n dayViewProps?: ResourcesScheduleViewProps<ResourcesDayViewProps>;\n\n /** Props specific to ResourcesWeekView */\n weekViewProps?: ResourcesScheduleViewProps<ResourcesWeekViewProps>;\n\n /** Props specific to ResourcesMonthView */\n monthViewProps?: ResourcesScheduleViewProps<ResourcesMonthViewProps>;\n}\n\nexport type ResourcesScheduleFactory = Factory<{\n props: ResourcesScheduleProps;\n ref: HTMLDivElement;\n stylesNames: ResourcesScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ResourcesScheduleProps> = {\n defaultView: 'day',\n mode: 'default',\n};\n\nexport const ResourcesSchedule = factory<ResourcesScheduleFactory>((_props) => {\n const props = useProps('ResourcesSchedule', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n resources,\n date,\n defaultDate,\n onDateChange,\n view,\n defaultView,\n onViewChange,\n events,\n locale,\n radius,\n labels,\n renderEventBody,\n renderResourceLabel,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onDayClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n mode,\n dayViewProps,\n weekViewProps,\n monthViewProps,\n __staticSelector,\n mod,\n ...others\n } = props;\n\n const getStyles = useStyles<ResourcesScheduleFactory>({\n name: __staticSelector || 'ResourcesSchedule',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n const [_view, _setView] = useUncontrolled<ResourcesScheduleViewLevel>({\n value: view,\n defaultValue: defaultView,\n onChange: onViewChange,\n });\n\n const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n value: date,\n defaultValue: defaultDate ?? new Date(),\n });\n\n const handleDateChange = (newDate: DateStringValue) => {\n _setDate(newDate);\n onDateChange?.(newDate);\n };\n\n const handleViewChange = (newView: ScheduleViewLevel) => {\n if (newView === 'day' || newView === 'week' || newView === 'month') {\n _setView(newView);\n }\n };\n\n const commonProps = {\n resources,\n date: _date,\n onDateChange: handleDateChange,\n onViewChange: handleViewChange,\n events,\n locale,\n radius,\n labels,\n renderEventBody,\n renderResourceLabel,\n withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n onExternalEventDrop,\n recurrenceExpansionLimit,\n mode,\n };\n\n const content = (() => {\n switch (_view) {\n case 'day':\n return (\n <ResourcesDayView\n {...commonProps}\n onTimeSlotClick={onTimeSlotClick}\n withEventResize={mode === 'static' ? false : withEventResize}\n onEventResize={onEventResize}\n canResizeEvent={canResizeEvent}\n {...dayViewProps}\n />\n );\n case 'week':\n return (\n <ResourcesWeekView\n {...commonProps}\n onTimeSlotClick={onTimeSlotClick}\n {...weekViewProps}\n />\n );\n case 'month':\n return <ResourcesMonthView {...commonProps} onDayClick={onDayClick} {...monthViewProps} />;\n default:\n return null;\n }\n })();\n\n return (\n <Box {...getStyles('root')} mod={mod} {...others}>\n {content}\n </Box>\n );\n});\n\nResourcesSchedule.displayName = '@mantine/schedule/ResourcesSchedule';\nResourcesSchedule.classes = classes;\n\nexport namespace ResourcesSchedule {\n export type Props = ResourcesScheduleProps;\n export type StylesNames = ResourcesScheduleStylesNames;\n export type Factory = ResourcesScheduleFactory;\n export type ViewLevel = ResourcesScheduleViewLevel;\n}\n"],"mappings":";;;;;;;;;AAqNA,MAAM,eAAgD;CACpD,aAAa;CACb,MAAM;AACR;AAEA,MAAa,qBAAA,GAAA,cAAA,QAAA,EAAuD,WAAW;CAC7E,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,WACA,MACA,aACA,cACA,MACA,aACA,cACA,QACA,QACA,QACA,QACA,iBACA,qBACA,uBACA,aACA,cACA,kBACA,gBACA,iBACA,YACA,cACA,oBACA,eACA,qBACA,iBACA,eACA,gBACA,0BACA,MACA,cACA,eACA,gBACA,kBACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,UAAA,CAAgD;EACpD,MAAM,oBAAoB;EAC1B,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,eAAA,gBAAA,CAAwD;EACpE,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,eAAA,gBAAA,CAAoD;EAChE,OAAO;EACP,cAAc,+BAAe,IAAI,KAAK;CACxC,CAAC;CAED,MAAM,oBAAoB,YAA6B;EACrD,SAAS,OAAO;EAChB,eAAe,OAAO;CACxB;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,YAAY,SAAS,YAAY,UAAU,YAAY,SACzD,SAAS,OAAO;CAEpB;CAEA,MAAM,cAAc;EAClB;EACA,MAAM;EACN,cAAc;EACd,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA,uBAAuB,SAAS,WAAW,QAAQ;EACnD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,iBAAiB;EACrB,QAAQ,OAAR;GACE,KAAK,OACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,yBAAAA,kBAAD;IACE,GAAI;IACa;IACjB,iBAAiB,SAAS,WAAW,QAAQ;IAC9B;IACC;IAChB,GAAI;GACL,CAAA;GAEL,KAAK,QACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;IACE,GAAI;IACa;IACjB,GAAI;GACL,CAAA;GAEL,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD;IAAoB,GAAI;IAAyB;IAAY,GAAI;GAAiB,CAAA;GAC3F,SACE,OAAO;EACX;CACF,EAAA,CAAG;CAEH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAQ;EAAK,GAAI;YACvC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA"}
|
|
1
|
+
{"version":3,"file":"ResourcesSchedule.cjs","names":["ResourcesDayView","ResourcesWeekView","ResourcesMonthView","Box","classes"],"sources":["../../../src/components/ResourcesSchedule/ResourcesSchedule.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleResourceData,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n ResourcesDayView,\n ResourcesDayViewProps,\n ResourcesDayViewStylesNames,\n} from '../ResourcesDayView/ResourcesDayView';\nimport {\n ResourcesMonthView,\n ResourcesMonthViewProps,\n ResourcesMonthViewStylesNames,\n} from '../ResourcesMonthView/ResourcesMonthView';\nimport {\n ResourcesWeekView,\n ResourcesWeekViewProps,\n ResourcesWeekViewStylesNames,\n} from '../ResourcesWeekView/ResourcesWeekView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport classes from './ResourcesSchedule.module.css';\n\nexport type ResourcesScheduleStylesNames =\n | 'root'\n | ResourcesDayViewStylesNames\n | ResourcesWeekViewStylesNames\n | ResourcesMonthViewStylesNames;\n\nexport type ResourcesScheduleViewLevel = 'day' | 'week' | 'month';\n\ntype ResourcesScheduleCommonProps =\n | 'date'\n | 'onDateChange'\n | 'resources'\n | 'events'\n | 'locale'\n | 'radius'\n | 'labels'\n | 'renderEventBody'\n | 'renderResourceLabel'\n | 'withEventsDragAndDrop'\n | 'onEventDrop'\n | 'canDragEvent'\n | 'onEventDragStart'\n | 'onEventDragEnd'\n | 'onTimeSlotClick'\n | 'onEventClick'\n | 'onDayClick'\n | 'withDragSlotSelect'\n | 'onSlotDragEnd'\n | 'view'\n | 'onViewChange'\n | 'mode'\n | 'onExternalEventDrop'\n | 'withEventResize'\n | 'onEventResize'\n | 'canResizeEvent'\n | 'recurrenceExpansionLimit';\n\ntype ResourcesScheduleViewProps<T> = Partial<Omit<T, ResourcesScheduleCommonProps>>;\n\nexport interface ResourcesScheduleProps\n extends BoxProps, StylesApiProps<ResourcesScheduleFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** List of resources to display */\n resources: ScheduleResourceData[];\n\n /** Current date to display (controlled) */\n date?: Date | DateStringValue;\n\n /** Default date (uncontrolled) */\n defaultDate?: Date | DateStringValue;\n\n /** Called when date changes via navigation */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Current view level (controlled) */\n view?: ResourcesScheduleViewLevel;\n\n /** Default view level (uncontrolled) @default 'day' */\n defaultView?: ResourcesScheduleViewLevel;\n\n /** Called when view level changes */\n onViewChange?: (view: ResourcesScheduleViewLevel) => void;\n\n /** Events to display across all views */\n events?: ScheduleEventData[];\n\n /** Locale for date formatting */\n locale?: string;\n\n /** Key of theme.radius or any valid CSS value to set border-radius */\n radius?: MantineRadius;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Custom event body renderer */\n renderEventBody?: RenderEventBody;\n\n /** Custom resource label renderer */\n renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;\n\n /** Enable drag and drop for events @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n resourceId?: string | number;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Called when any event drag starts */\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /** Called when any event drag ends */\n onEventDragEnd?: () => void;\n\n /** Called when time slot is clicked */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when day is clicked in month view */\n onDayClick?: (data: {\n date: DateStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, enables drag-to-select slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a slot range is selected by dragging */\n onSlotDragEnd?: (data: {\n rangeStart: DateTimeStringValue;\n rangeEnd: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** Interaction mode @default default */\n mode?: ScheduleMode;\n\n /** Called when an external item is dropped onto the schedule */\n onExternalEventDrop?: (data: {\n dataTransfer: DataTransfer;\n dropDateTime: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** If true, events can be resized @default false */\n withEventResize?: boolean;\n\n /** Called when event is resized */\n onEventResize?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be resized */\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n /** Max number of generated recurring instances @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Props specific to ResourcesDayView */\n dayViewProps?: ResourcesScheduleViewProps<ResourcesDayViewProps>;\n\n /** Props specific to ResourcesWeekView */\n weekViewProps?: ResourcesScheduleViewProps<ResourcesWeekViewProps>;\n\n /** Props specific to ResourcesMonthView */\n monthViewProps?: ResourcesScheduleViewProps<ResourcesMonthViewProps>;\n}\n\nexport type ResourcesScheduleFactory = Factory<{\n props: ResourcesScheduleProps;\n ref: HTMLDivElement;\n stylesNames: ResourcesScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ResourcesScheduleProps> = {\n defaultView: 'day',\n mode: 'default',\n};\n\nexport const ResourcesSchedule = factory<ResourcesScheduleFactory>((_props) => {\n const props = useProps('ResourcesSchedule', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n resources,\n date,\n defaultDate,\n onDateChange,\n view,\n defaultView,\n onViewChange,\n events,\n locale,\n radius,\n labels,\n renderEventBody,\n renderResourceLabel,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onDayClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n mode,\n dayViewProps,\n weekViewProps,\n monthViewProps,\n __staticSelector,\n mod,\n ...others\n } = props;\n\n const getStyles = useStyles<ResourcesScheduleFactory>({\n name: __staticSelector || 'ResourcesSchedule',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n const [_view, _setView] = useUncontrolled<ResourcesScheduleViewLevel>({\n value: view,\n defaultValue: defaultView,\n onChange: onViewChange,\n });\n\n const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n value: date,\n defaultValue: defaultDate ?? new Date(),\n });\n\n const handleDateChange = (newDate: DateStringValue) => {\n _setDate(newDate);\n onDateChange?.(newDate);\n };\n\n const handleViewChange = (newView: ScheduleViewLevel) => {\n if (newView === 'day' || newView === 'week' || newView === 'month') {\n _setView(newView);\n }\n };\n\n const commonProps = {\n resources,\n date: _date,\n onDateChange: handleDateChange,\n onViewChange: handleViewChange,\n events,\n locale,\n radius,\n labels,\n renderEventBody,\n renderResourceLabel,\n withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n onExternalEventDrop,\n recurrenceExpansionLimit,\n mode,\n };\n\n const content = (() => {\n switch (_view) {\n case 'day':\n return (\n <ResourcesDayView\n {...commonProps}\n onTimeSlotClick={onTimeSlotClick}\n withEventResize={mode === 'static' ? false : withEventResize}\n onEventResize={onEventResize}\n canResizeEvent={canResizeEvent}\n {...dayViewProps}\n />\n );\n case 'week':\n return (\n <ResourcesWeekView\n {...commonProps}\n onTimeSlotClick={onTimeSlotClick}\n withEventResize={mode === 'static' ? false : withEventResize}\n onEventResize={onEventResize}\n canResizeEvent={canResizeEvent}\n {...weekViewProps}\n />\n );\n case 'month':\n return <ResourcesMonthView {...commonProps} onDayClick={onDayClick} {...monthViewProps} />;\n default:\n return null;\n }\n })();\n\n return (\n <Box {...getStyles('root')} mod={mod} {...others}>\n {content}\n </Box>\n );\n});\n\nResourcesSchedule.displayName = '@mantine/schedule/ResourcesSchedule';\nResourcesSchedule.classes = classes;\n\nexport namespace ResourcesSchedule {\n export type Props = ResourcesScheduleProps;\n export type StylesNames = ResourcesScheduleStylesNames;\n export type Factory = ResourcesScheduleFactory;\n export type ViewLevel = ResourcesScheduleViewLevel;\n}\n"],"mappings":";;;;;;;;;AAqNA,MAAM,eAAgD;CACpD,aAAa;CACb,MAAM;AACR;AAEA,MAAa,qBAAA,GAAA,cAAA,QAAA,EAAuD,WAAW;CAC7E,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,WACA,MACA,aACA,cACA,MACA,aACA,cACA,QACA,QACA,QACA,QACA,iBACA,qBACA,uBACA,aACA,cACA,kBACA,gBACA,iBACA,YACA,cACA,oBACA,eACA,qBACA,iBACA,eACA,gBACA,0BACA,MACA,cACA,eACA,gBACA,kBACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,UAAA,CAAgD;EACpD,MAAM,oBAAoB;EAC1B,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,eAAA,gBAAA,CAAwD;EACpE,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,eAAA,gBAAA,CAAoD;EAChE,OAAO;EACP,cAAc,+BAAe,IAAI,KAAK;CACxC,CAAC;CAED,MAAM,oBAAoB,YAA6B;EACrD,SAAS,OAAO;EAChB,eAAe,OAAO;CACxB;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,YAAY,SAAS,YAAY,UAAU,YAAY,SACzD,SAAS,OAAO;CAEpB;CAEA,MAAM,cAAc;EAClB;EACA,MAAM;EACN,cAAc;EACd,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA,uBAAuB,SAAS,WAAW,QAAQ;EACnD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,iBAAiB;EACrB,QAAQ,OAAR;GACE,KAAK,OACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,yBAAAA,kBAAD;IACE,GAAI;IACa;IACjB,iBAAiB,SAAS,WAAW,QAAQ;IAC9B;IACC;IAChB,GAAI;GACL,CAAA;GAEL,KAAK,QACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;IACE,GAAI;IACa;IACjB,iBAAiB,SAAS,WAAW,QAAQ;IAC9B;IACC;IAChB,GAAI;GACL,CAAA;GAEL,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD;IAAoB,GAAI;IAAyB;IAAY,GAAI;GAAiB,CAAA;GAC3F,SACE,OAAO;EACX;CACF,EAAA,CAAG;CAEH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAQ;EAAK,GAAI;YACvC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA"}
|
|
@@ -10,6 +10,7 @@ const require_previous_week = require("../../utils/previous-week/previous-week.c
|
|
|
10
10
|
const require_get_current_time_position = require("../../utils/get-current-time-position/get-current-time-position.cjs");
|
|
11
11
|
const require_is_in_time_range = require("../../utils/is-in-time-range/is-in-time-range.cjs");
|
|
12
12
|
const require_is_all_day_event = require("../../utils/is-all-day-event/is-all-day-event.cjs");
|
|
13
|
+
const require_get_time_axis_event_style = require("../../utils/get-time-axis-event-style/get-time-axis-event-style.cjs");
|
|
13
14
|
const require_calculate_drop_time = require("../../utils/calculate-drop-time/calculate-drop-time.cjs");
|
|
14
15
|
const require_get_business_hours_mod = require("../../utils/get-business-hours-mod/get-business-hours-mod.cjs");
|
|
15
16
|
const require_get_ordered_resources = require("../../utils/get-ordered-resources/get-ordered-resources.cjs");
|
|
@@ -23,6 +24,7 @@ const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
|
|
|
23
24
|
const require_MoreEvents = require("../MoreEvents/MoreEvents.cjs");
|
|
24
25
|
const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
|
|
25
26
|
const require_get_week_label = require("../WeekView/get-week-label/get-week-label.cjs");
|
|
27
|
+
const require_use_horizontal_event_resize = require("../../hooks/use-horizontal-event-resize.cjs");
|
|
26
28
|
const require_get_overlap_clusters = require("../ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs");
|
|
27
29
|
const require_get_resources_week_view_events = require("./get-resources-week-view-events/get-resources-week-view-events.cjs");
|
|
28
30
|
const require_ResourcesWeekViewRow = require("./ResourcesWeekViewRow.cjs");
|
|
@@ -41,12 +43,14 @@ const defaultProps = {
|
|
|
41
43
|
endTime: "23:59:59",
|
|
42
44
|
slotLabelFormat: "HH:mm",
|
|
43
45
|
intervalMinutes: 60,
|
|
46
|
+
minEventSize: 1,
|
|
44
47
|
withHeader: true,
|
|
45
48
|
weekLabelFormat: "MMM DD",
|
|
46
49
|
weekdayFormat: "ddd D",
|
|
47
50
|
highlightBusinessHours: false,
|
|
48
51
|
businessHours: ["09:00:00", "17:00:00"],
|
|
49
52
|
withEventsDragAndDrop: false,
|
|
53
|
+
withEventResize: false,
|
|
50
54
|
withDragSlotSelect: false,
|
|
51
55
|
withWeekendDays: true,
|
|
52
56
|
withCurrentTimeBubble: true,
|
|
@@ -62,7 +66,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, sl
|
|
|
62
66
|
} }));
|
|
63
67
|
const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
64
68
|
const props = (0, _mantine_core.useProps)("ResourcesWeekView", defaultProps, _props);
|
|
65
|
-
const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, resources, intervalMinutes, slotLabelFormat, radius, startScrollDateTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, renderWeekLabel, events, slotWidth, rowHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, onExternalEventDrop, recurrenceExpansionLimit, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, firstDayOfWeek, weekendDays, withWeekendDays, weekdayFormat, highlightToday, ...others } = props;
|
|
69
|
+
const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, resources, intervalMinutes, minEventSize, slotLabelFormat, radius, startScrollDateTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble, getCurrentTime, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, renderWeekLabel, events, slotWidth, rowHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, withEventResize, onEventResize, canResizeEvent, onTimeSlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, onExternalEventDrop, recurrenceExpansionLimit, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, firstDayOfWeek, weekendDays, withWeekendDays, weekdayFormat, highlightToday, ...others } = props;
|
|
66
70
|
const maxEventsPerTimeSlot = _maxEventsPerTimeSlot !== void 0 ? Math.max(1, _maxEventsPerTimeSlot) : void 0;
|
|
67
71
|
const getStyles = (0, _mantine_core.useStyles)({
|
|
68
72
|
name: __staticSelector,
|
|
@@ -114,27 +118,27 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
114
118
|
ctx
|
|
115
119
|
]);
|
|
116
120
|
const totalSlotsPerDay = slots.length;
|
|
117
|
-
const
|
|
121
|
+
const resolveNow = () => getCurrentTime ? (0, dayjs.default)(getCurrentTime()) : (0, dayjs.default)();
|
|
122
|
+
const now = resolveNow();
|
|
123
|
+
const isToday = weekdays.some((day) => (0, dayjs.default)(day).isSame(now, "day"));
|
|
118
124
|
const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;
|
|
119
|
-
const [
|
|
125
|
+
const [, setTimeIndicatorTick] = (0, react.useState)(0);
|
|
126
|
+
(0, _mantine_hooks.useInterval)(() => setTimeIndicatorTick((tick) => tick + 1), 6e4, { autoInvoke: true });
|
|
127
|
+
const timeIndicatorOffset = require_get_current_time_position.getCurrentTimePosition({
|
|
120
128
|
startTime,
|
|
121
129
|
endTime,
|
|
122
|
-
intervalMinutes
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
endTime,
|
|
127
|
-
intervalMinutes
|
|
128
|
-
})), 6e4, { autoInvoke: true });
|
|
129
|
-
const todayDayIndex = weekdays.findIndex((day) => (0, dayjs.default)(day).isSame((0, dayjs.default)(), "day"));
|
|
130
|
+
intervalMinutes,
|
|
131
|
+
now
|
|
132
|
+
});
|
|
133
|
+
const todayDayIndex = weekdays.findIndex((day) => (0, dayjs.default)(day).isSame(now, "day"));
|
|
130
134
|
const showTimeIndicator = withCurrentTimeIndicator && todayDayIndex >= 0 && require_is_in_time_range.isInTimeRange({
|
|
131
|
-
date:
|
|
135
|
+
date: now.toDate(),
|
|
132
136
|
startTime,
|
|
133
137
|
endTime
|
|
134
138
|
});
|
|
135
139
|
const formattedCurrentTime = withCurrentTimeBubble ? require_format_date.formatDate({
|
|
136
140
|
locale: ctx.getLocale(locale),
|
|
137
|
-
date:
|
|
141
|
+
date: now,
|
|
138
142
|
format: slotLabelFormat
|
|
139
143
|
}) : "";
|
|
140
144
|
const handleExternalDrop = (0, react.useCallback)((e, target) => {
|
|
@@ -197,6 +201,15 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
197
201
|
});
|
|
198
202
|
}
|
|
199
203
|
});
|
|
204
|
+
const eventResize = require_use_horizontal_event_resize.useHorizontalEventResize({
|
|
205
|
+
enabled: withEventResize,
|
|
206
|
+
mode,
|
|
207
|
+
startTime,
|
|
208
|
+
endTime,
|
|
209
|
+
intervalMinutes,
|
|
210
|
+
onEventResize,
|
|
211
|
+
canResizeEvent
|
|
212
|
+
});
|
|
200
213
|
const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
|
|
201
214
|
const handleTimeSlotClick = (resourceId, day, slotTime, e) => {
|
|
202
215
|
if (!onTimeSlotClick) return;
|
|
@@ -217,6 +230,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
217
230
|
weekdays,
|
|
218
231
|
startTime,
|
|
219
232
|
endTime,
|
|
233
|
+
intervalMinutes,
|
|
220
234
|
expansionLimit: recurrenceExpansionLimit
|
|
221
235
|
}), [
|
|
222
236
|
events,
|
|
@@ -224,11 +238,12 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
224
238
|
weekdays,
|
|
225
239
|
startTime,
|
|
226
240
|
endTime,
|
|
241
|
+
intervalMinutes,
|
|
227
242
|
recurrenceExpansionLimit
|
|
228
243
|
]);
|
|
229
244
|
const dayLabels = weekdays.map((day) => {
|
|
230
245
|
const d = (0, dayjs.default)(day);
|
|
231
|
-
const today = d.isSame(
|
|
246
|
+
const today = d.isSame(now, "day") && highlightToday;
|
|
232
247
|
const weekend = ctx.getWeekendDays(weekendDays).includes(d.day());
|
|
233
248
|
return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Box, {
|
|
234
249
|
...getStyles("resourcesWeekViewDayLabel"),
|
|
@@ -347,32 +362,90 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
347
362
|
const visibleEvents = maxEventsPerTimeSlot !== void 0 ? allRegularEvents.filter((event) => event.position.column < maxEventsPerTimeSlot) : allRegularEvents;
|
|
348
363
|
for (const event of visibleEvents) {
|
|
349
364
|
const isDraggable = dragDrop.isDraggableEvent(event);
|
|
350
|
-
const
|
|
351
|
-
const
|
|
365
|
+
const isResizable = eventResize.isResizableEvent(event);
|
|
366
|
+
const resizePosition = eventResize.getResizePosition(event.id);
|
|
367
|
+
const isThisEventResizing = resizePosition !== null;
|
|
368
|
+
const activeEdge = isThisEventResizing && eventResize.resizingEdge ? eventResize.resizingEdge : null;
|
|
369
|
+
const effectiveTop = resizePosition ? resizePosition.left : event.position.top;
|
|
370
|
+
const effectiveHeight = resizePosition ? resizePosition.width : event.position.height;
|
|
371
|
+
const eventLeft = dayOffsetPercent + effectiveTop / 100 * dayWidthPercent;
|
|
372
|
+
const eventWidth = effectiveHeight / 100 * dayWidthPercent;
|
|
373
|
+
const eventColors = isResizable ? theme.variantColorResolver({
|
|
374
|
+
color: event.color || theme.primaryColor,
|
|
375
|
+
theme,
|
|
376
|
+
variant: event.variant || "light",
|
|
377
|
+
autoContrast: true
|
|
378
|
+
}) : null;
|
|
352
379
|
const adjustPosition = maxEventsPerTimeSlot !== void 0 && event.position.overlaps > maxEventsPerTimeSlot;
|
|
353
|
-
|
|
380
|
+
const eventDate = (0, dayjs.default)(day).format("YYYY-MM-DD");
|
|
381
|
+
eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
|
|
354
382
|
...getStyles("resourcesWeekViewEventWrapper"),
|
|
383
|
+
__vars: eventColors ? { "--event-color": eventColors.color } : void 0,
|
|
384
|
+
"data-resizing": isThisEventResizing || void 0,
|
|
355
385
|
style: {
|
|
356
|
-
|
|
386
|
+
...require_get_time_axis_event_style.getTimeAxisEventStyle({
|
|
387
|
+
start: eventLeft,
|
|
388
|
+
span: eventWidth,
|
|
389
|
+
minSize: minEventSize
|
|
390
|
+
}),
|
|
357
391
|
top: adjustPosition ? `calc((100% - 22px) * ${event.position.column} / ${maxEventsPerTimeSlot})` : `${event.position.offset}%`,
|
|
358
|
-
width: `calc(${eventWidth}% - 2px)`,
|
|
359
392
|
height: adjustPosition ? `calc((100% - 22px) / ${maxEventsPerTimeSlot})` : `${event.position.width}%`
|
|
360
393
|
},
|
|
361
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
|
|
394
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
|
|
362
395
|
event,
|
|
363
396
|
autoSize: true,
|
|
364
397
|
nowrap: true,
|
|
365
398
|
draggable: isDraggable,
|
|
399
|
+
isResizing: isThisEventResizing,
|
|
366
400
|
renderEventBody,
|
|
367
401
|
renderEvent,
|
|
368
402
|
radius,
|
|
369
403
|
mode,
|
|
370
|
-
onClick: onEventClick ? (e) =>
|
|
404
|
+
onClick: onEventClick ? (e) => {
|
|
405
|
+
if (!eventResize.wasResizing()) onEventClick(event, e);
|
|
406
|
+
} : void 0,
|
|
371
407
|
style: {
|
|
372
408
|
width: "100%",
|
|
373
|
-
height: "100%"
|
|
409
|
+
height: "100%",
|
|
410
|
+
padding: 0
|
|
411
|
+
}
|
|
412
|
+
}), isResizable && mode !== "static" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
413
|
+
...getStyles("resourcesWeekViewResizeHandle"),
|
|
414
|
+
"data-edge": "start",
|
|
415
|
+
"data-active": activeEdge === "start" || void 0,
|
|
416
|
+
onPointerDown: (e) => {
|
|
417
|
+
const container = rowSlotsContainersRef.current[resourceIndex];
|
|
418
|
+
if (container) eventResize.handleResizeStart({
|
|
419
|
+
event,
|
|
420
|
+
edge: "start",
|
|
421
|
+
container,
|
|
422
|
+
originalLeft: event.position.top,
|
|
423
|
+
originalWidth: event.position.height,
|
|
424
|
+
eventDate,
|
|
425
|
+
dayIndex,
|
|
426
|
+
dayCount: weekdays.length,
|
|
427
|
+
pointerEvent: e
|
|
428
|
+
});
|
|
429
|
+
}
|
|
430
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
431
|
+
...getStyles("resourcesWeekViewResizeHandle"),
|
|
432
|
+
"data-edge": "end",
|
|
433
|
+
"data-active": activeEdge === "end" || void 0,
|
|
434
|
+
onPointerDown: (e) => {
|
|
435
|
+
const container = rowSlotsContainersRef.current[resourceIndex];
|
|
436
|
+
if (container) eventResize.handleResizeStart({
|
|
437
|
+
event,
|
|
438
|
+
edge: "end",
|
|
439
|
+
container,
|
|
440
|
+
originalLeft: event.position.top,
|
|
441
|
+
originalWidth: event.position.height,
|
|
442
|
+
eventDate,
|
|
443
|
+
dayIndex,
|
|
444
|
+
dayCount: weekdays.length,
|
|
445
|
+
pointerEvent: e
|
|
446
|
+
});
|
|
374
447
|
}
|
|
375
|
-
})
|
|
448
|
+
})] })]
|
|
376
449
|
}, `${event.id}-${day}`));
|
|
377
450
|
}
|
|
378
451
|
if (maxEventsPerTimeSlot !== void 0) {
|
|
@@ -505,7 +578,8 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
505
578
|
mod: {
|
|
506
579
|
static: mode === "static",
|
|
507
580
|
"slot-dragging": slotDragSelect.isDragging,
|
|
508
|
-
|
|
581
|
+
resizing: eventResize.isResizing,
|
|
582
|
+
"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging
|
|
509
583
|
},
|
|
510
584
|
...others,
|
|
511
585
|
children: [withHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderBase.ScheduleHeaderBase, {
|
|
@@ -513,7 +587,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
|
|
|
513
587
|
navigationHandlers: {
|
|
514
588
|
previous: () => require_previous_week.previousWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
|
|
515
589
|
next: () => require_next_week.nextWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
|
|
516
|
-
today: () => require_to_date_string.toDateString((
|
|
590
|
+
today: () => require_to_date_string.toDateString(resolveNow())
|
|
517
591
|
},
|
|
518
592
|
control: {
|
|
519
593
|
miw: 180,
|