@mantine/schedule 9.0.0-alpha.6 → 9.0.0
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/README.md +2 -2
- package/cjs/components/DayView/DayView.cjs +27 -7
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.cjs +1 -10
- package/cjs/components/MobileMonthView/MobileMonthView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.module.cjs +2 -1
- package/cjs/components/MobileMonthView/MobileMonthView.module.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.cjs +1 -1
- package/cjs/components/MonthView/MonthView.cjs.map +1 -1
- package/cjs/components/Schedule/Schedule.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs +2 -2
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +17 -4
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs +14 -3
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs +1 -1
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/hooks/use-drag-drop-handlers.cjs +6 -1
- package/cjs/hooks/use-drag-drop-handlers.cjs.map +1 -1
- package/cjs/hooks/use-event-resize.cjs +7 -2
- package/cjs/hooks/use-event-resize.cjs.map +1 -1
- package/esm/components/DayView/DayView.mjs +27 -7
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.mjs +1 -10
- package/esm/components/MobileMonthView/MobileMonthView.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.module.mjs +2 -1
- package/esm/components/MobileMonthView/MobileMonthView.module.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.mjs +1 -1
- package/esm/components/MonthView/MonthView.mjs.map +1 -1
- package/esm/components/Schedule/Schedule.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs +2 -2
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +17 -4
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs +14 -3
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +1 -1
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/hooks/use-drag-drop-handlers.mjs +6 -1
- package/esm/hooks/use-drag-drop-handlers.mjs.map +1 -1
- package/esm/hooks/use-event-resize.mjs +7 -2
- package/esm/hooks/use-event-resize.mjs.map +1 -1
- package/lib/components/DayView/DayView.d.ts +22 -3
- package/lib/components/MonthView/MonthView.d.ts +6 -1
- package/lib/components/Schedule/Schedule.d.ts +17 -3
- package/lib/components/WeekView/WeekView.d.ts +22 -3
- package/lib/components/WeekView/WeekViewDay.d.ts +7 -2
- package/lib/hooks/use-drag-drop-handlers.d.ts +6 -1
- package/lib/hooks/use-event-resize.d.ts +15 -2
- package/package.json +4 -4
- package/styles.css +12 -0
- package/styles.layer.css +12 -0
|
@@ -8,7 +8,7 @@ let _mantine_core = require("@mantine/core");
|
|
|
8
8
|
let _mantine_dates = require("@mantine/dates");
|
|
9
9
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
10
|
//#region packages/@mantine/schedule/src/components/WeekView/WeekViewDay.tsx
|
|
11
|
-
function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef }) {
|
|
11
|
+
function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef, getTimeSlotProps }) {
|
|
12
12
|
const weekend = (0, _mantine_dates.useDatesContext)().getWeekendDays(weekendDays).includes((0, dayjs.default)(day).day());
|
|
13
13
|
const today = (0, dayjs.default)(day).isSame((0, dayjs.default)(), "day");
|
|
14
14
|
const dayGroup = (0, dayjs.default)(day).format("YYYY-MM-DD");
|
|
@@ -16,6 +16,16 @@ function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, l
|
|
|
16
16
|
const isDropTarget = dropTargetSlotIndex === slotIndex;
|
|
17
17
|
const isFirstSlot = firstSlotIndex?.dayIndex === dayIndex && firstSlotIndex?.slotIndex === slotIndex;
|
|
18
18
|
const isDragSelected = isSlotDragSelected?.(slotIndex, dayGroup) || false;
|
|
19
|
+
const slotStart = `${dayGroup} ${slot.startTime}`;
|
|
20
|
+
const slotEnd = `${dayGroup} ${slot.endTime}`;
|
|
21
|
+
const { onClick: externalOnClick, ...externalSlotProps } = getTimeSlotProps?.({
|
|
22
|
+
start: slotStart,
|
|
23
|
+
end: slotEnd
|
|
24
|
+
}) || {};
|
|
25
|
+
const handleClick = mode === "static" ? void 0 : (e) => {
|
|
26
|
+
onSlotClick?.(String(day), slot.startTime, e);
|
|
27
|
+
externalOnClick?.(e);
|
|
28
|
+
};
|
|
19
29
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
|
|
20
30
|
ref: (node) => {
|
|
21
31
|
if (node && slotsRef?.current) {
|
|
@@ -46,8 +56,9 @@ function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, l
|
|
|
46
56
|
} else if (onSlotKeyDown) onSlotKeyDown(e, dayIndex, slotIndex);
|
|
47
57
|
},
|
|
48
58
|
onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => onSlotPointerDown?.(e, slotIndex, dayGroup) : void 0,
|
|
49
|
-
onClick:
|
|
50
|
-
onDragOver: withEventsDragAndDrop && mode !== "static" ? (e) => e.preventDefault() : void 0
|
|
59
|
+
onClick: handleClick,
|
|
60
|
+
onDragOver: withEventsDragAndDrop && mode !== "static" ? (e) => e.preventDefault() : void 0,
|
|
61
|
+
...externalSlotProps
|
|
51
62
|
}, slot.startTime);
|
|
52
63
|
});
|
|
53
64
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekViewDay.cjs","names":["UnstyledButton","getBusinessHoursMod","getLabel","Box"],"sources":["../../../src/components/WeekView/WeekViewDay.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, UnstyledButton } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport { DayTimeInterval, getBusinessHoursMod } from '../../utils';\nimport type { WeekViewControlsRef } from './handle-week-view-key-down';\nimport type { WeekViewFactory } from './WeekView';\n\nexport interface WeekViewDayProps {\n /** Date to display */\n day: Date | DateStringValue;\n\n /** Index of this day in the week */\n dayIndex: number;\n\n /** Slots intervals */\n slots: DayTimeInterval[];\n\n /** `useStyles` return value of `WeekView` */\n getStyles: GetStylesApi<WeekViewFactory>;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** Events list */\n children?: React.ReactNode;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format */\n businessHours?: [string, string];\n\n /** If true, slots are drop targets for drag and drop */\n withEventsDragAndDrop?: boolean;\n\n /** Called when dragging over day slots container */\n onDaySlotsDragOver?: (e: React.DragEvent<HTMLDivElement>, day: string, dayIndex: number) => void;\n\n /** Called when dragging leaves day slots container */\n onDaySlotsDragLeave?: () => void;\n\n /** Called when dropping on day slots container */\n onDaySlotsDrop?: (e: React.DragEvent<HTMLDivElement>, day: string, dayIndex: number) => void;\n\n /** Called when slot is clicked */\n onSlotClick?: (day: string, slotTime: string, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Index of the slot that is currently a drop target */\n dropTargetSlotIndex?: number;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** Ref for keyboard navigation */\n slotsRef?: WeekViewControlsRef;\n\n /** Index of the first focusable slot */\n firstSlotIndex?: { dayIndex: number; slotIndex: number };\n\n /** Keyboard event handler for slots */\n onSlotKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n dayIndex: number,\n slotIndex: number\n ) => void;\n\n /** Called when Arrow Up is pressed on the first slot, used to navigate to all-day slot */\n onFirstSlotArrowUp?: (dayIndex: number) => void;\n\n /** If set, enables drag-to-select time slot ranges */\n withDragSlotSelect?: boolean;\n\n /** Called when pointer down on a slot for drag selection */\n onSlotPointerDown?: (\n event: React.PointerEvent<HTMLButtonElement>,\n index: number,\n group: string\n ) => void;\n\n /** Function to check if a slot is drag-selected */\n isSlotDragSelected?: (index: number, group: string) => boolean;\n\n /** Ref callback for the day slots container */\n daySlotsContainerRef?: (node: HTMLDivElement | null) => void;\n}\n\nexport function WeekViewDay({\n day,\n dayIndex,\n slots,\n getStyles,\n weekendDays,\n children,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onDaySlotsDragOver,\n onDaySlotsDragLeave,\n onDaySlotsDrop,\n onSlotClick,\n dropTargetSlotIndex,\n mode,\n slotsRef,\n firstSlotIndex,\n onSlotKeyDown,\n onFirstSlotArrowUp,\n withDragSlotSelect,\n onSlotPointerDown,\n isSlotDragSelected,\n daySlotsContainerRef,\n}: WeekViewDayProps) {\n const ctx = useDatesContext();\n const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(day).day() as DayOfWeek);\n const today = dayjs(day).isSame(dayjs(), 'day');\n\n const dayGroup = dayjs(day).format('YYYY-MM-DD');\n\n const items = slots.map((slot, slotIndex) => {\n const isDropTarget = dropTargetSlotIndex === slotIndex;\n const isFirstSlot =\n firstSlotIndex?.dayIndex === dayIndex && firstSlotIndex?.slotIndex === slotIndex;\n const isDragSelected = isSlotDragSelected?.(slotIndex, dayGroup) || false;\n\n return (\n <UnstyledButton\n key={slot.startTime}\n ref={(node) => {\n if (node && slotsRef?.current) {\n if (!slotsRef.current[dayIndex]) {\n slotsRef.current[dayIndex] = [];\n }\n slotsRef.current[dayIndex][slotIndex] = node;\n }\n }}\n {...getStyles('weekViewDaySlot')}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n aria-label={`${getLabel('timeSlot', labels)} ${dayGroup} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : isFirstSlot ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? slotIndex : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={(e) => {\n if (slotIndex === 0 && e.key === 'ArrowUp' && onFirstSlotArrowUp) {\n e.preventDefault();\n onFirstSlotArrowUp(dayIndex);\n } else if (onSlotKeyDown) {\n onSlotKeyDown(e, dayIndex, slotIndex);\n }\n }}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => onSlotPointerDown?.(e, slotIndex, dayGroup)\n : undefined\n }\n onClick={
|
|
1
|
+
{"version":3,"file":"WeekViewDay.cjs","names":["UnstyledButton","getBusinessHoursMod","getLabel","Box"],"sources":["../../../src/components/WeekView/WeekViewDay.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, UnstyledButton } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport { DayTimeInterval, getBusinessHoursMod } from '../../utils';\nimport type { WeekViewControlsRef } from './handle-week-view-key-down';\nimport type { WeekViewFactory } from './WeekView';\n\nexport interface WeekViewDayProps {\n /** Date to display */\n day: Date | DateStringValue;\n\n /** Index of this day in the week */\n dayIndex: number;\n\n /** Slots intervals */\n slots: DayTimeInterval[];\n\n /** `useStyles` return value of `WeekView` */\n getStyles: GetStylesApi<WeekViewFactory>;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** Events list */\n children?: React.ReactNode;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format */\n businessHours?: [string, string];\n\n /** If true, slots are drop targets for drag and drop */\n withEventsDragAndDrop?: boolean;\n\n /** Called when dragging over day slots container */\n onDaySlotsDragOver?: (e: React.DragEvent<HTMLDivElement>, day: string, dayIndex: number) => void;\n\n /** Called when dragging leaves day slots container */\n onDaySlotsDragLeave?: () => void;\n\n /** Called when dropping on day slots container */\n onDaySlotsDrop?: (e: React.DragEvent<HTMLDivElement>, day: string, dayIndex: number) => void;\n\n /** Called when slot is clicked */\n onSlotClick?: (day: string, slotTime: string, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Index of the slot that is currently a drop target */\n dropTargetSlotIndex?: number;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** Ref for keyboard navigation */\n slotsRef?: WeekViewControlsRef;\n\n /** Index of the first focusable slot */\n firstSlotIndex?: { dayIndex: number; slotIndex: number };\n\n /** Keyboard event handler for slots */\n onSlotKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n dayIndex: number,\n slotIndex: number\n ) => void;\n\n /** Called when Arrow Up is pressed on the first slot, used to navigate to all-day slot */\n onFirstSlotArrowUp?: (dayIndex: number) => void;\n\n /** If set, enables drag-to-select time slot ranges */\n withDragSlotSelect?: boolean;\n\n /** Called when pointer down on a slot for drag selection */\n onSlotPointerDown?: (\n event: React.PointerEvent<HTMLButtonElement>,\n index: number,\n group: string\n ) => void;\n\n /** Function to check if a slot is drag-selected */\n isSlotDragSelected?: (index: number, group: string) => boolean;\n\n /** Ref callback for the day slots container */\n daySlotsContainerRef?: (node: HTMLDivElement | null) => void;\n\n /** Function to get additional props for each time slot */\n getTimeSlotProps?: (data: {\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n }) => Record<string, any> | undefined;\n}\n\nexport function WeekViewDay({\n day,\n dayIndex,\n slots,\n getStyles,\n weekendDays,\n children,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onDaySlotsDragOver,\n onDaySlotsDragLeave,\n onDaySlotsDrop,\n onSlotClick,\n dropTargetSlotIndex,\n mode,\n slotsRef,\n firstSlotIndex,\n onSlotKeyDown,\n onFirstSlotArrowUp,\n withDragSlotSelect,\n onSlotPointerDown,\n isSlotDragSelected,\n daySlotsContainerRef,\n getTimeSlotProps,\n}: WeekViewDayProps) {\n const ctx = useDatesContext();\n const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(day).day() as DayOfWeek);\n const today = dayjs(day).isSame(dayjs(), 'day');\n\n const dayGroup = dayjs(day).format('YYYY-MM-DD');\n\n const items = slots.map((slot, slotIndex) => {\n const isDropTarget = dropTargetSlotIndex === slotIndex;\n const isFirstSlot =\n firstSlotIndex?.dayIndex === dayIndex && firstSlotIndex?.slotIndex === slotIndex;\n const isDragSelected = isSlotDragSelected?.(slotIndex, dayGroup) || false;\n const slotStart = `${dayGroup} ${slot.startTime}` as DateTimeStringValue;\n const slotEnd = `${dayGroup} ${slot.endTime}` as DateTimeStringValue;\n const { onClick: externalOnClick, ...externalSlotProps } =\n getTimeSlotProps?.({ start: slotStart, end: slotEnd }) || {};\n\n const handleClick =\n mode === 'static'\n ? undefined\n : (e: React.MouseEvent<HTMLButtonElement>) => {\n onSlotClick?.(String(day), slot.startTime, e);\n externalOnClick?.(e);\n };\n\n return (\n <UnstyledButton\n key={slot.startTime}\n ref={(node) => {\n if (node && slotsRef?.current) {\n if (!slotsRef.current[dayIndex]) {\n slotsRef.current[dayIndex] = [];\n }\n slotsRef.current[dayIndex][slotIndex] = node;\n }\n }}\n {...getStyles('weekViewDaySlot')}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n aria-label={`${getLabel('timeSlot', labels)} ${dayGroup} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : isFirstSlot ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? slotIndex : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={(e) => {\n if (slotIndex === 0 && e.key === 'ArrowUp' && onFirstSlotArrowUp) {\n e.preventDefault();\n onFirstSlotArrowUp(dayIndex);\n } else if (onSlotKeyDown) {\n onSlotKeyDown(e, dayIndex, slotIndex);\n }\n }}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => onSlotPointerDown?.(e, slotIndex, dayGroup)\n : undefined\n }\n onClick={handleClick}\n onDragOver={\n withEventsDragAndDrop && mode !== 'static' ? (e) => e.preventDefault() : undefined\n }\n {...externalSlotProps}\n />\n );\n });\n\n return (\n <Box {...getStyles('weekViewDay')} mod={{ today, weekend }}>\n <Box\n ref={daySlotsContainerRef}\n mod={{ today }}\n {...getStyles('weekViewDaySlots')}\n onDragOver={\n withEventsDragAndDrop && mode !== 'static'\n ? (e) => onDaySlotsDragOver?.(e, String(day), dayIndex)\n : undefined\n }\n onDragLeave={withEventsDragAndDrop && mode !== 'static' ? onDaySlotsDragLeave : undefined}\n onDrop={\n withEventsDragAndDrop && mode !== 'static'\n ? (e) => onDaySlotsDrop?.(e, String(day), dayIndex)\n : undefined\n }\n >\n {children}\n {items}\n </Box>\n </Box>\n );\n}\n"],"mappings":"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"}
|
|
@@ -26,7 +26,7 @@ const defaultProps = {
|
|
|
26
26
|
withOutsideDays: true,
|
|
27
27
|
mode: "default"
|
|
28
28
|
};
|
|
29
|
-
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius }) => ({ yearView: { "--year-view-radius": radius ? (0, _mantine_core.getRadius)(radius) : void 0 } }));
|
|
29
|
+
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius }) => ({ yearView: { "--year-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0 } }));
|
|
30
30
|
const YearView = (0, _mantine_core.factory)((_props) => {
|
|
31
31
|
const props = (0, _mantine_core.useProps)("YearView", defaultProps, _props);
|
|
32
32
|
const { date, onDateChange, events, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, onMonthClick, onDayClick, onWeekNumberClick, getDayProps, getWeekNumberProps, highlightToday, labels, withOutsideDays, withHeader, monthYearSelectProps, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, __staticSelector, classNames, className, style, styles, unstyled, vars, attributes, radius, mode, recurrenceExpansionLimit, ...others } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearView.cjs","names":["getYearViewEvents","expandRecurringEvents","getMonthDays","isSameMonth","getMonthsByQuarter","YearViewMonth","Box","ScheduleHeaderBase","toDateString","classes"],"sources":["../../../src/components/YearView/YearView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { DateStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';\nimport {\n expandRecurringEvents,\n getMonthDays,\n getMonthsByQuarter,\n isSameMonth,\n toDateString,\n} from '../../utils';\nimport { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getYearViewEvents } from './get-year-view-events/get-year-view-events';\nimport { handleYearViewKeyDown, YearViewControlsRef } from './handle-year-view-key-down';\nimport { YearViewMonth, YearViewMonthSettings } from './YearViewMonth';\nimport classes from './YearView.module.css';\n\nexport type YearViewStylesNames =\n | 'yearView'\n | 'yearViewMonths'\n | 'yearViewMonth'\n | 'yearViewWeekday'\n | 'yearViewDay'\n | 'yearViewWeek'\n | 'yearViewWeekNumber'\n | 'yearViewWeekdays'\n | 'yearViewWeekdaysCorner'\n | 'yearViewMonthCaption'\n | 'yearViewDayIndicators'\n | 'yearViewDayIndicator'\n | CombinedScheduleHeaderStylesNames;\n\nexport type YearViewCssVariables = {\n yearView: '--year-view-radius';\n};\n\nexport interface YearViewProps\n extends YearViewMonthSettings, BoxProps, StylesApiProps<YearViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */\n date: Date | string;\n\n /** Called with the new date value when a date is selected */\n onDateChange?: (value: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Props passed down to `MonthYearSelect` component in the header */\n monthYearSelectProps?: Partial<MonthYearSelectProps>;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n}\n\nexport type YearViewFactory = Factory<{\n props: YearViewProps;\n ref: HTMLDivElement;\n stylesNames: YearViewStylesNames;\n vars: YearViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'YearView',\n monthLabelFormat: 'MMMM',\n withWeekDays: true,\n highlightToday: true,\n withHeader: true,\n withOutsideDays: true,\n mode: 'default',\n} satisfies Partial<YearViewProps>;\n\nconst varsResolver = createVarsResolver<YearViewFactory>((_theme, { radius }) => ({\n yearView: { '--year-view-radius': radius ? getRadius(radius) : undefined },\n}));\n\nexport const YearView = factory<YearViewFactory>((_props) => {\n const props = useProps('YearView', defaultProps, _props);\n const {\n // YearView props\n date,\n onDateChange,\n events,\n\n // YearViewMonth settings\n monthLabelFormat,\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n onMonthClick,\n onDayClick,\n onWeekNumberClick,\n getDayProps,\n getWeekNumberProps,\n highlightToday,\n labels,\n withOutsideDays,\n\n // ScheduleHeader props\n withHeader,\n monthYearSelectProps,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n\n // System props\n __staticSelector,\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n radius,\n mode,\n recurrenceExpansionLimit,\n ...others\n } = props;\n\n const ctx = useDatesContext();\n\n const getStyles = useStyles<YearViewFactory>({\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: 'yearView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('year').toDate(),\n rangeEnd: dayjs(date).endOf('year').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const groupedEvents = getYearViewEvents({ date, events: expandedEvents });\n\n // [monthIndex][weekIndex][dayIndex]\n const daysRef = useRef<HTMLButtonElement[][][]>([]) as YearViewControlsRef;\n\n const getFirstDayIndex = (month: string): { weekIndex: number; dayIndex: number } | undefined => {\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = weeks[weekIndex];\n for (let dayIndex = 0; dayIndex < week.length; dayIndex++) {\n const dayDate = week[dayIndex];\n if (isSameMonth(dayDate, month)) {\n return { weekIndex, dayIndex };\n }\n }\n }\n\n return undefined;\n };\n\n let globalMonthIndex = 0;\n const months = getMonthsByQuarter(dayjs(date).format('YYYY-MM-DD'))\n .flat()\n .map((month) => {\n const currentMonthIndex = globalMonthIndex;\n globalMonthIndex++;\n\n return (\n <YearViewMonth\n key={month}\n month={month}\n getStyles={getStyles}\n monthLabelFormat={monthLabelFormat}\n withWeekNumbers={withWeekNumbers}\n withWeekDays={withWeekDays}\n locale={locale}\n firstDayOfWeek={firstDayOfWeek}\n weekdayFormat={\n weekdayFormat ||\n ((date) => dayjs(date).locale(ctx.getLocale(locale)).format('dd').slice(0, 1))\n }\n weekendDays={weekendDays}\n getDayProps={getDayProps}\n getWeekNumberProps={getWeekNumberProps}\n onMonthClick={onMonthClick}\n onDayClick={onDayClick}\n onWeekNumberClick={onWeekNumberClick}\n highlightToday={highlightToday}\n groupedEvents={groupedEvents}\n mode={mode}\n withOutsideDays={withOutsideDays}\n firstDayIndex={getFirstDayIndex(month)}\n __getDayRef={(weekIndex, dayIndex, node) => {\n if (!Array.isArray(daysRef.current[currentMonthIndex])) {\n daysRef.current[currentMonthIndex] = [];\n }\n if (!Array.isArray(daysRef.current[currentMonthIndex][weekIndex])) {\n daysRef.current[currentMonthIndex][weekIndex] = [];\n }\n daysRef.current[currentMonthIndex][weekIndex][dayIndex] = node;\n }}\n __onDayKeyDown={(event, payload) => {\n handleYearViewKeyDown({\n controlsRef: daysRef,\n monthIndex: currentMonthIndex,\n weekIndex: payload.weekIndex,\n dayIndex: payload.dayIndex,\n event,\n });\n }}\n />\n );\n });\n\n return (\n <Box {...getStyles('yearView')} mod={{ static: mode === 'static' }} {...others}>\n {withHeader && (\n <ScheduleHeaderBase\n view=\"year\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'year').startOf('year')),\n next: () => toDateString(dayjs(date).add(1, 'year').startOf('year')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n monthYearSelect: {\n locale,\n withMonths: false,\n yearValue: dayjs(date).get('year'),\n monthValue: dayjs(date).get('month'),\n onYearChange: (year) =>\n onDateChange?.(toDateString(dayjs(date).set('year', year).startOf('year'))),\n ...monthYearSelectProps,\n },\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <div {...getStyles('yearViewMonths')}>{months}</div>\n </Box>\n );\n});\n\nYearView.displayName = '@mantine/schedule/YearView';\nYearView.classes = classes;\nYearView.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YearView.cjs","names":["getYearViewEvents","expandRecurringEvents","getMonthDays","isSameMonth","getMonthsByQuarter","YearViewMonth","Box","ScheduleHeaderBase","toDateString","classes"],"sources":["../../../src/components/YearView/YearView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { DateStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';\nimport {\n expandRecurringEvents,\n getMonthDays,\n getMonthsByQuarter,\n isSameMonth,\n toDateString,\n} from '../../utils';\nimport { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getYearViewEvents } from './get-year-view-events/get-year-view-events';\nimport { handleYearViewKeyDown, YearViewControlsRef } from './handle-year-view-key-down';\nimport { YearViewMonth, YearViewMonthSettings } from './YearViewMonth';\nimport classes from './YearView.module.css';\n\nexport type YearViewStylesNames =\n | 'yearView'\n | 'yearViewMonths'\n | 'yearViewMonth'\n | 'yearViewWeekday'\n | 'yearViewDay'\n | 'yearViewWeek'\n | 'yearViewWeekNumber'\n | 'yearViewWeekdays'\n | 'yearViewWeekdaysCorner'\n | 'yearViewMonthCaption'\n | 'yearViewDayIndicators'\n | 'yearViewDayIndicator'\n | CombinedScheduleHeaderStylesNames;\n\nexport type YearViewCssVariables = {\n yearView: '--year-view-radius';\n};\n\nexport interface YearViewProps\n extends YearViewMonthSettings, BoxProps, StylesApiProps<YearViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */\n date: Date | string;\n\n /** Called with the new date value when a date is selected */\n onDateChange?: (value: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Props passed down to `MonthYearSelect` component in the header */\n monthYearSelectProps?: Partial<MonthYearSelectProps>;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n}\n\nexport type YearViewFactory = Factory<{\n props: YearViewProps;\n ref: HTMLDivElement;\n stylesNames: YearViewStylesNames;\n vars: YearViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'YearView',\n monthLabelFormat: 'MMMM',\n withWeekDays: true,\n highlightToday: true,\n withHeader: true,\n withOutsideDays: true,\n mode: 'default',\n} satisfies Partial<YearViewProps>;\n\nconst varsResolver = createVarsResolver<YearViewFactory>((_theme, { radius }) => ({\n yearView: { '--year-view-radius': radius !== undefined ? getRadius(radius) : undefined },\n}));\n\nexport const YearView = factory<YearViewFactory>((_props) => {\n const props = useProps('YearView', defaultProps, _props);\n const {\n // YearView props\n date,\n onDateChange,\n events,\n\n // YearViewMonth settings\n monthLabelFormat,\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n onMonthClick,\n onDayClick,\n onWeekNumberClick,\n getDayProps,\n getWeekNumberProps,\n highlightToday,\n labels,\n withOutsideDays,\n\n // ScheduleHeader props\n withHeader,\n monthYearSelectProps,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n\n // System props\n __staticSelector,\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n radius,\n mode,\n recurrenceExpansionLimit,\n ...others\n } = props;\n\n const ctx = useDatesContext();\n\n const getStyles = useStyles<YearViewFactory>({\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: 'yearView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('year').toDate(),\n rangeEnd: dayjs(date).endOf('year').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const groupedEvents = getYearViewEvents({ date, events: expandedEvents });\n\n // [monthIndex][weekIndex][dayIndex]\n const daysRef = useRef<HTMLButtonElement[][][]>([]) as YearViewControlsRef;\n\n const getFirstDayIndex = (month: string): { weekIndex: number; dayIndex: number } | undefined => {\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = weeks[weekIndex];\n for (let dayIndex = 0; dayIndex < week.length; dayIndex++) {\n const dayDate = week[dayIndex];\n if (isSameMonth(dayDate, month)) {\n return { weekIndex, dayIndex };\n }\n }\n }\n\n return undefined;\n };\n\n let globalMonthIndex = 0;\n const months = getMonthsByQuarter(dayjs(date).format('YYYY-MM-DD'))\n .flat()\n .map((month) => {\n const currentMonthIndex = globalMonthIndex;\n globalMonthIndex++;\n\n return (\n <YearViewMonth\n key={month}\n month={month}\n getStyles={getStyles}\n monthLabelFormat={monthLabelFormat}\n withWeekNumbers={withWeekNumbers}\n withWeekDays={withWeekDays}\n locale={locale}\n firstDayOfWeek={firstDayOfWeek}\n weekdayFormat={\n weekdayFormat ||\n ((date) => dayjs(date).locale(ctx.getLocale(locale)).format('dd').slice(0, 1))\n }\n weekendDays={weekendDays}\n getDayProps={getDayProps}\n getWeekNumberProps={getWeekNumberProps}\n onMonthClick={onMonthClick}\n onDayClick={onDayClick}\n onWeekNumberClick={onWeekNumberClick}\n highlightToday={highlightToday}\n groupedEvents={groupedEvents}\n mode={mode}\n withOutsideDays={withOutsideDays}\n firstDayIndex={getFirstDayIndex(month)}\n __getDayRef={(weekIndex, dayIndex, node) => {\n if (!Array.isArray(daysRef.current[currentMonthIndex])) {\n daysRef.current[currentMonthIndex] = [];\n }\n if (!Array.isArray(daysRef.current[currentMonthIndex][weekIndex])) {\n daysRef.current[currentMonthIndex][weekIndex] = [];\n }\n daysRef.current[currentMonthIndex][weekIndex][dayIndex] = node;\n }}\n __onDayKeyDown={(event, payload) => {\n handleYearViewKeyDown({\n controlsRef: daysRef,\n monthIndex: currentMonthIndex,\n weekIndex: payload.weekIndex,\n dayIndex: payload.dayIndex,\n event,\n });\n }}\n />\n );\n });\n\n return (\n <Box {...getStyles('yearView')} mod={{ static: mode === 'static' }} {...others}>\n {withHeader && (\n <ScheduleHeaderBase\n view=\"year\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'year').startOf('year')),\n next: () => toDateString(dayjs(date).add(1, 'year').startOf('year')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n monthYearSelect: {\n locale,\n withMonths: false,\n yearValue: dayjs(date).get('year'),\n monthValue: dayjs(date).get('month'),\n onYearChange: (year) =>\n onDateChange?.(toDateString(dayjs(date).set('year', year).startOf('year'))),\n ...monthYearSelectProps,\n },\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <div {...getStyles('yearViewMonths')}>{months}</div>\n </Box>\n );\n});\n\nYearView.displayName = '@mantine/schedule/YearView';\nYearView.classes = classes;\nYearView.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
@@ -57,7 +57,12 @@ function useDragDropHandlers(options) {
|
|
|
57
57
|
const isInternalDrag = dragState.state.isDragging && event.dataTransfer.types.includes("application/json");
|
|
58
58
|
if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {
|
|
59
59
|
const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);
|
|
60
|
-
onEventDrop(
|
|
60
|
+
onEventDrop({
|
|
61
|
+
eventId: dragState.state.draggedEventId,
|
|
62
|
+
newStart: (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss"),
|
|
63
|
+
newEnd: (0, dayjs.default)(end).format("YYYY-MM-DD HH:mm:ss"),
|
|
64
|
+
event: dragState.state.draggedEvent
|
|
65
|
+
});
|
|
61
66
|
handleDragEnd();
|
|
62
67
|
return;
|
|
63
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-drag-drop-handlers.cjs","names":["useDragState"],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface UseDragDropHandlersOptions<T = any> {\n /** Whether drag and drop is enabled */\n enabled: boolean;\n\n /** Schedule interaction mode */\n mode: ScheduleMode;\n\n /** Called when event is dropped at new location */\n onEventDrop?: (\n eventId: string | number
|
|
1
|
+
{"version":3,"file":"use-drag-drop-handlers.cjs","names":["useDragState"],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface UseDragDropHandlersOptions<T = any> {\n /** Whether drag and drop is enabled */\n enabled: boolean;\n\n /** Schedule interaction mode */\n mode: ScheduleMode;\n\n /** Called when event is dropped at new location */\n onEventDrop?: (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 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 /**\n * Function to calculate drop target dates from drop location.\n * Receives the target location and the dragged event.\n */\n calculateDropTarget: (target: T, draggedEvent: ScheduleEventData) => { start: Date; end: Date };\n\n /** Called when an external item is dropped onto the schedule */\n onExternalDrop?: (e: React.DragEvent, target: T) => void;\n}\n\nexport interface DragDropHandlers<T = any> {\n /** Context value for DragContext.Provider */\n dragContextValue: DragContextValue;\n\n /** Current drop target */\n dropTarget: T | null;\n\n /** Handle drag start event */\n handleDragStart: (event: ScheduleEventData) => void;\n\n /** Handle drag end event */\n handleDragEnd: () => void;\n\n /** Handle drag over event */\n handleDragOver: (e: React.DragEvent, target: T) => void;\n\n /** Handle drag leave event */\n handleDragLeave: () => void;\n\n /** Handle drop event */\n handleDrop: (e: React.DragEvent, target: T) => void;\n\n /** Check if event is draggable */\n isDraggableEvent: (event: ScheduleEventData) => boolean;\n\n /** Check if target is the current drop target */\n isDropTarget: (target: T) => boolean;\n}\n\n/**\n * Hook that provides unified drag-drop handlers for Schedule views.\n * Handles drag state management and event drops across Day, Week, and Month views.\n *\n * @template T - Type of the drop target (e.g., slot index, day string, etc.)\n */\nexport function useDragDropHandlers<T = any>(\n options: UseDragDropHandlersOptions<T>\n): DragDropHandlers<T> {\n const {\n enabled,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget,\n onExternalDrop,\n } = options;\n\n const dragState = useDragState();\n const [dropTarget, setDropTarget] = useState<T | null>(null);\n\n const handleDragEnd = useCallback(() => {\n dragState.endDrag();\n setDropTarget(null);\n onEventDragEnd?.();\n }, [dragState, onEventDragEnd]);\n\n const handleDragStart = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled || mode === 'static') {\n return;\n }\n dragState.startDrag(event);\n onEventDragStart?.(event);\n },\n [enabled, mode, dragState, onEventDragStart]\n );\n\n const handleDragOver = useCallback(\n (event: React.DragEvent, target: T) => {\n if (mode === 'static') {\n return;\n }\n\n let isInternalDrag = dragState.state.isDragging;\n\n if (isInternalDrag && !event.dataTransfer.types.includes('application/json')) {\n handleDragEnd();\n isInternalDrag = false;\n }\n\n if (isInternalDrag && !enabled) {\n return;\n }\n\n if (!isInternalDrag && !onExternalDrop) {\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = isInternalDrag ? 'move' : 'copy';\n setDropTarget(target);\n },\n [enabled, mode, dragState.state.isDragging, onExternalDrop, handleDragEnd]\n );\n\n const handleDragLeave = useCallback(() => {\n setDropTarget(null);\n }, []);\n\n const handleDrop = useCallback(\n (event: React.DragEvent, target: T) => {\n event.preventDefault();\n\n const isInternalDrag =\n dragState.state.isDragging && event.dataTransfer.types.includes('application/json');\n\n if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {\n const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);\n onEventDrop({\n eventId: dragState.state.draggedEventId!,\n newStart: dayjs(start).format('YYYY-MM-DD HH:mm:ss'),\n newEnd: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n event: dragState.state.draggedEvent,\n });\n handleDragEnd();\n return;\n }\n\n if (!isInternalDrag && onExternalDrop) {\n if (dragState.state.isDragging) {\n handleDragEnd();\n }\n onExternalDrop(event, target);\n setDropTarget(null);\n return;\n }\n\n setDropTarget(null);\n },\n [enabled, dragState.state, onEventDrop, onExternalDrop, calculateDropTarget, handleDragEnd]\n );\n\n const isDraggableEvent = useCallback(\n (event: ScheduleEventData) => {\n return (\n enabled &&\n mode !== 'static' &&\n event.display !== 'background' &&\n (canDragEvent ? canDragEvent(event) : true)\n );\n },\n [enabled, mode, canDragEvent]\n );\n\n const isDropTarget = useCallback(\n (target: T) => {\n // Handle complex target comparison (for WeekView with day + slotIndex)\n if (dropTarget && typeof dropTarget === 'object' && typeof target === 'object') {\n return JSON.stringify(dropTarget) === JSON.stringify(target);\n }\n return dropTarget === target;\n },\n [dropTarget]\n );\n\n const dragContextValue: DragContextValue = {\n isDragging: dragState.state.isDragging,\n draggedEventId: dragState.state.draggedEventId,\n draggedEvent: dragState.state.draggedEvent,\n dropTarget: dragState.state.dropTarget,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd,\n setDropTarget: dragState.setDropTarget,\n };\n\n return {\n dragContextValue,\n dropTarget,\n handleDragStart,\n handleDragEnd,\n handleDragOver,\n handleDragLeave,\n handleDrop,\n isDraggableEvent,\n isDropTarget,\n };\n}\n"],"mappings":";;;;;;;;;;;;;AA2EA,SAAgB,oBACd,SACqB;CACrB,MAAM,EACJ,SACA,MACA,aACA,cACA,kBACA,gBACA,qBACA,mBACE;CAEJ,MAAM,YAAYA,uBAAAA,cAAc;CAChC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAAoC,KAAK;CAE5D,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,YAAU,SAAS;AACnB,gBAAc,KAAK;AACnB,oBAAkB;IACjB,CAAC,WAAW,eAAe,CAAC;CAE/B,MAAM,mBAAA,GAAA,MAAA,cACH,UAA6B;AAC5B,MAAI,CAAC,WAAW,SAAS,SACvB;AAEF,YAAU,UAAU,MAAM;AAC1B,qBAAmB,MAAM;IAE3B;EAAC;EAAS;EAAM;EAAW;EAAiB,CAC7C;CAED,MAAM,kBAAA,GAAA,MAAA,cACH,OAAwB,WAAc;AACrC,MAAI,SAAS,SACX;EAGF,IAAI,iBAAiB,UAAU,MAAM;AAErC,MAAI,kBAAkB,CAAC,MAAM,aAAa,MAAM,SAAS,mBAAmB,EAAE;AAC5E,kBAAe;AACf,oBAAiB;;AAGnB,MAAI,kBAAkB,CAAC,QACrB;AAGF,MAAI,CAAC,kBAAkB,CAAC,eACtB;AAGF,QAAM,gBAAgB;AACtB,QAAM,aAAa,aAAa,iBAAiB,SAAS;AAC1D,gBAAc,OAAO;IAEvB;EAAC;EAAS;EAAM,UAAU,MAAM;EAAY;EAAgB;EAAc,CAC3E;CAED,MAAM,mBAAA,GAAA,MAAA,mBAAoC;AACxC,gBAAc,KAAK;IAClB,EAAE,CAAC;CAEN,MAAM,cAAA,GAAA,MAAA,cACH,OAAwB,WAAc;AACrC,QAAM,gBAAgB;EAEtB,MAAM,iBACJ,UAAU,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS,mBAAmB;AAErF,MAAI,kBAAkB,WAAW,UAAU,MAAM,gBAAgB,aAAa;GAC5E,MAAM,EAAE,OAAO,QAAQ,oBAAoB,QAAQ,UAAU,MAAM,aAAa;AAChF,eAAY;IACV,SAAS,UAAU,MAAM;IACzB,WAAA,GAAA,MAAA,SAAgB,MAAM,CAAC,OAAO,sBAAsB;IACpD,SAAA,GAAA,MAAA,SAAc,IAAI,CAAC,OAAO,sBAAsB;IAChD,OAAO,UAAU,MAAM;IACxB,CAAC;AACF,kBAAe;AACf;;AAGF,MAAI,CAAC,kBAAkB,gBAAgB;AACrC,OAAI,UAAU,MAAM,WAClB,gBAAe;AAEjB,kBAAe,OAAO,OAAO;AAC7B,iBAAc,KAAK;AACnB;;AAGF,gBAAc,KAAK;IAErB;EAAC;EAAS,UAAU;EAAO;EAAa;EAAgB;EAAqB;EAAc,CAC5F;CAED,MAAM,oBAAA,GAAA,MAAA,cACH,UAA6B;AAC5B,SACE,WACA,SAAS,YACT,MAAM,YAAY,iBACjB,eAAe,aAAa,MAAM,GAAG;IAG1C;EAAC;EAAS;EAAM;EAAa,CAC9B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,WAAc;AAEb,MAAI,cAAc,OAAO,eAAe,YAAY,OAAO,WAAW,SACpE,QAAO,KAAK,UAAU,WAAW,KAAK,KAAK,UAAU,OAAO;AAE9D,SAAO,eAAe;IAExB,CAAC,WAAW,CACb;AAYD,QAAO;EACL,kBAXyC;GACzC,YAAY,UAAU,MAAM;GAC5B,gBAAgB,UAAU,MAAM;GAChC,cAAc,UAAU,MAAM;GAC9B,YAAY,UAAU,MAAM;GAC5B,aAAa;GACb,WAAW;GACX,eAAe,UAAU;GAC1B;EAIC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
|
|
@@ -32,7 +32,7 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
|
|
|
32
32
|
const snapPercent = (0, react.useCallback)((percent) => {
|
|
33
33
|
return clampAndSnap(percent / 100 * totalMinutes) / totalMinutes * 100;
|
|
34
34
|
}, [totalMinutes, clampAndSnap]);
|
|
35
|
-
const handleResizeStart = (0, react.useCallback)((event, edge, container, originalTop, originalHeight, eventDate, pointerEvent) => {
|
|
35
|
+
const handleResizeStart = (0, react.useCallback)(({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent }) => {
|
|
36
36
|
if (!enabled || mode === "static") return;
|
|
37
37
|
pointerEvent.preventDefault();
|
|
38
38
|
pointerEvent.stopPropagation();
|
|
@@ -91,7 +91,12 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
|
|
|
91
91
|
newStart = state.originalStart;
|
|
92
92
|
newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);
|
|
93
93
|
}
|
|
94
|
-
onEventResizeRef.current(
|
|
94
|
+
onEventResizeRef.current({
|
|
95
|
+
eventId: state.eventId,
|
|
96
|
+
newStart,
|
|
97
|
+
newEnd,
|
|
98
|
+
event: state.event
|
|
99
|
+
});
|
|
95
100
|
}
|
|
96
101
|
}
|
|
97
102
|
resizeRef.current = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-event-resize.cjs","names":["parseTimeString"],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' | 'bottom';\n\ninterface ResizeState {\n eventId: string | number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n currentTop: number;\n currentHeight: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n onEventResize?: (\n eventId: string | number,\n newStart: DateTimeStringValue,\n newEnd: DateTimeStringValue,\n event: ScheduleEventData\n ) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n const resizeRef = useRef<ResizeState | null>(null);\n const onEventResizeRef = useRef(onEventResize);\n onEventResizeRef.current = onEventResize;\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const totalMinutes = endMinutes - startMinutes;\n const minHeightPercent = (intervalMinutes / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / intervalMinutes) * intervalMinutes;\n return Math.max(0, Math.min(totalMinutes, snapped));\n },\n [totalMinutes, intervalMinutes]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapPercent = useCallback(\n (percent: number): number => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n return (snappedMinutes / totalMinutes) * 100;\n },\n [totalMinutes, clampAndSnap]\n );\n\n const handleResizeStart = useCallback(\n (\n event: ScheduleEventData,\n edge: ResizeEdge,\n container: HTMLElement,\n originalTop: number,\n originalHeight: number,\n eventDate: string,\n pointerEvent: React.PointerEvent\n ) => {\n if (!enabled || mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n currentTop: originalTop,\n currentHeight: originalHeight,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n document.body.style.userSelect = 'none';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const relativeY = e.clientY - containerRect.top;\n const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n const snappedPercent = snapPercent(rawPercent);\n\n let newTop = state.originalTop;\n let newHeight = state.originalHeight;\n\n if (state.edge === 'bottom') {\n newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);\n } else {\n const originalBottom = state.originalTop + state.originalHeight;\n newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);\n newHeight = originalBottom - newTop;\n }\n\n resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state && onEventResizeRef.current) {\n if (\n state.currentTop !== state.originalTop ||\n state.currentHeight !== state.originalHeight\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'top') {\n newStart = percentToDateTime(state.currentTop, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n }\n\n onEventResizeRef.current(state.eventId, newStart, newEnd, state.event);\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string | number) => {\n if (!resizeState || resizeState.eventId !== eventId) {\n return null;\n }\n return { top: resizeState.currentTop, height: resizeState.currentHeight };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled || mode === 'static' || event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-event-resize.cjs","names":["parseTimeString"],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' | 'bottom';\n\ninterface ResizeState {\n eventId: string | number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n currentTop: number;\n currentHeight: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n onEventResize?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n const resizeRef = useRef<ResizeState | null>(null);\n const onEventResizeRef = useRef(onEventResize);\n onEventResizeRef.current = onEventResize;\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const totalMinutes = endMinutes - startMinutes;\n const minHeightPercent = (intervalMinutes / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / intervalMinutes) * intervalMinutes;\n return Math.max(0, Math.min(totalMinutes, snapped));\n },\n [totalMinutes, intervalMinutes]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapPercent = useCallback(\n (percent: number): number => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n return (snappedMinutes / totalMinutes) * 100;\n },\n [totalMinutes, clampAndSnap]\n );\n\n const handleResizeStart = useCallback(\n ({\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n eventDate,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n eventDate: string;\n pointerEvent: React.PointerEvent;\n }) => {\n if (!enabled || mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n currentTop: originalTop,\n currentHeight: originalHeight,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n document.body.style.userSelect = 'none';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const relativeY = e.clientY - containerRect.top;\n const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n const snappedPercent = snapPercent(rawPercent);\n\n let newTop = state.originalTop;\n let newHeight = state.originalHeight;\n\n if (state.edge === 'bottom') {\n newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);\n } else {\n const originalBottom = state.originalTop + state.originalHeight;\n newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);\n newHeight = originalBottom - newTop;\n }\n\n resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state && onEventResizeRef.current) {\n if (\n state.currentTop !== state.originalTop ||\n state.currentHeight !== state.originalHeight\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'top') {\n newStart = percentToDateTime(state.currentTop, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n }\n\n onEventResizeRef.current({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string | number) => {\n if (!resizeState || resizeState.eventId !== eventId) {\n return null;\n }\n return { top: resizeState.currentTop, height: resizeState.currentHeight };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled || mode === 'static' || event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n };\n}\n"],"mappings":"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"}
|
|
@@ -51,7 +51,7 @@ const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlo
|
|
|
51
51
|
} }));
|
|
52
52
|
const DayView = factory((_props) => {
|
|
53
53
|
const props = useProps("DayView", defaultProps, _props);
|
|
54
|
-
const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), "day"), 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, ...others } = props;
|
|
54
|
+
const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), "day"), 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, ...others } = props;
|
|
55
55
|
const getStyles = useStyles({
|
|
56
56
|
name: __staticSelector,
|
|
57
57
|
classes: DayView_module_default,
|
|
@@ -207,7 +207,15 @@ const DayView = factory((_props) => {
|
|
|
207
207
|
withResize: isResizable,
|
|
208
208
|
isResizing: resizePosition !== null,
|
|
209
209
|
onResizeStart: isResizable ? (edge, e) => {
|
|
210
|
-
if (timeSlotsContainerRef.current) eventResize.handleResizeStart(
|
|
210
|
+
if (timeSlotsContainerRef.current) eventResize.handleResizeStart({
|
|
211
|
+
event,
|
|
212
|
+
edge,
|
|
213
|
+
container: timeSlotsContainerRef.current,
|
|
214
|
+
originalTop: event.position.top,
|
|
215
|
+
originalHeight: event.position.height,
|
|
216
|
+
eventDate: dayjs(date).format("YYYY-MM-DD"),
|
|
217
|
+
pointerEvent: e
|
|
218
|
+
});
|
|
211
219
|
} : void 0,
|
|
212
220
|
mode,
|
|
213
221
|
onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
|
|
@@ -241,6 +249,20 @@ const DayView = factory((_props) => {
|
|
|
241
249
|
const items = slots.map((slot, index) => {
|
|
242
250
|
const isDropTarget = dragDrop.isDropTarget(index);
|
|
243
251
|
const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
|
|
252
|
+
const slotStart = `${dayGroup} ${slot.startTime}`;
|
|
253
|
+
const slotEnd = `${dayGroup} ${slot.endTime}`;
|
|
254
|
+
const { onClick: externalOnClick, ...externalSlotProps } = getTimeSlotProps?.({
|
|
255
|
+
start: slotStart,
|
|
256
|
+
end: slotEnd
|
|
257
|
+
}) || {};
|
|
258
|
+
const handleClick = mode === "static" ? void 0 : (event) => {
|
|
259
|
+
onTimeSlotClick?.({
|
|
260
|
+
slotStart,
|
|
261
|
+
slotEnd,
|
|
262
|
+
nativeEvent: event
|
|
263
|
+
});
|
|
264
|
+
externalOnClick?.(event);
|
|
265
|
+
};
|
|
244
266
|
return /* @__PURE__ */ createElement(UnstyledButton, {
|
|
245
267
|
...getStyles("dayViewSlot"),
|
|
246
268
|
key: slot.startTime,
|
|
@@ -265,11 +287,9 @@ const DayView = factory((_props) => {
|
|
|
265
287
|
"data-drag-slot-group": withDragSlotSelect && mode !== "static" ? dayGroup : void 0,
|
|
266
288
|
onKeyDown: mode === "static" ? void 0 : (e) => handleSlotKeyDown(e, index),
|
|
267
289
|
onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup) : void 0,
|
|
268
|
-
onClick:
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
},
|
|
272
|
-
onDragOver: withDragHandlers ? (event) => event.preventDefault() : void 0
|
|
290
|
+
onClick: handleClick,
|
|
291
|
+
onDragOver: withDragHandlers ? (event) => event.preventDefault() : void 0,
|
|
292
|
+
...externalSlotProps
|
|
273
293
|
});
|
|
274
294
|
});
|
|
275
295
|
const slotsLabels = slots.reduce((acc, slot) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayView.mjs","names":["classes"],"sources":["../../../src/components/DayView/DayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaAutosizeProps,\n StylesApiProps,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useEventResize } from '../../hooks/use-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n clampIntervalMinutes,\n expandRecurringEvents,\n formatDate,\n getBusinessHoursMod,\n getDayTimeIntervals,\n getVisibleEvents,\n isAllDayEvent,\n toDateString,\n} from '../../utils';\nimport {\n CurrentTimeIndicator,\n CurrentTimeIndicatorStylesNames,\n} from '../CurrentTimeIndicator/CurrentTimeIndicator';\nimport { DragContext } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport {\n RenderEvent,\n RenderEventBody,\n ScheduleEvent,\n ScheduleEventStylesNames,\n} from '../ScheduleEvent/ScheduleEvent';\nimport { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getDayViewEvents } from './get-day-view-events/get-day-view-events';\nimport classes from './DayView.module.css';\n\nexport type DayViewStylesNames =\n | 'dayView'\n | 'dayViewInner'\n | 'dayViewScrollArea'\n | 'dayViewAllDay'\n | 'dayViewAllDayEvents'\n | 'dayViewSlot'\n | 'dayViewSlots'\n | 'dayViewTimeSlots'\n | 'dayViewSlotLabel'\n | 'dayViewSlotLabels'\n | 'dayViewBackgroundEvent'\n | MoreEventsStylesNames\n | ScheduleEventStylesNames\n | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames>\n | CurrentTimeIndicatorStylesNames;\n\nexport type DayViewCssVariables = {\n dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';\n};\n\nexport interface DayViewProps\n extends BoxProps, StylesApiProps<DayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | DateStringValue;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Time slots start time, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** Time slots end time in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each time slot @default 15 */\n intervalMinutes?: number;\n\n /** If set, the all-day slot is displayed below the header @default true */\n withAllDaySlot?: boolean;\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 /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Date format in the header @default MMMM D, YYYY */\n headerFormat?: DateLabelFormat;\n\n /** If set, displays a line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Height of 1hr slot @default 64px */\n slotHeight?: React.CSSProperties['height'];\n\n /** Height of all-day slot @default 44px */\n allDaySlotHeight?: React.CSSProperties['height'];\n\n /** Props passed down to the `ScrollArea.Autosize` component */\n scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n\n /** Function to customize event body, `event` object is passed as first argument */\n renderEventBody?: RenderEventBody;\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 /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time */\n onEventDrop?: (\n eventId: string | number,\n newStart: DateTimeStringValue,\n newEnd: DateTimeStringValue,\n event: ScheduleEventData\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?: (\n slotStart: DateTimeStringValue,\n slotEnd: DateTimeStringValue,\n event: React.MouseEvent<HTMLButtonElement>\n ) => void;\n\n /** Called when all-day slot is clicked */\n onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => 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 time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging */\n onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n /** If true, events can be resized by dragging their edges @default false */\n withEventResize?: boolean;\n\n /** Called when event is resized */\n onEventResize?: (\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 per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n}\n\nexport type DayViewFactory = Factory<{\n props: DayViewProps;\n ref: HTMLDivElement;\n stylesNames: DayViewStylesNames;\n vars: DayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'DayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n intervalMinutes: 15,\n withAllDaySlot: true,\n slotLabelFormat: 'HH:mm',\n headerFormat: 'MMMM D, YYYY',\n withCurrentTimeBubble: true,\n withHeader: true,\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n} satisfies Partial<DayViewProps>;\n\nconst varsResolver = createVarsResolver<DayViewFactory>(\n (_theme, { radius, slotHeight, allDaySlotHeight }) => ({\n dayView: {\n '--day-view-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--day-view-slot-height': rem(slotHeight),\n '--day-view-all-day-slot-height': rem(allDaySlotHeight),\n },\n })\n);\n\nexport const DayView = factory<DayViewFactory>((_props) => {\n const props = useProps('DayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n __staticSelector,\n startTime,\n endTime,\n intervalMinutes,\n withAllDaySlot,\n date,\n locale,\n slotLabelFormat,\n headerFormat,\n withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), 'day'),\n withCurrentTimeBubble,\n withHeader,\n radius,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n slotHeight,\n allDaySlotHeight,\n scrollAreaProps,\n events,\n moreEventsProps,\n renderEventBody,\n renderEvent,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onAllDaySlotClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n startScrollTime,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n ...others\n } = props;\n\n const getStyles = useStyles<DayViewFactory>({\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: 'dayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const slotsRef = useRef<HTMLButtonElement[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const timeSlotsContainerRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n useAutoScrollOnDrag({\n viewportRef,\n enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static',\n });\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = slotsRef.current[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback((event: React.DragEvent) => {\n const slotIndex = slotsRef.current.findIndex((slotNode) => {\n if (!slotNode) {\n return false;\n }\n\n const rect = slotNode.getBoundingClientRect();\n return event.clientY >= rect.top && event.clientY <= rect.bottom;\n });\n\n if (slotIndex >= 0) {\n return slotIndex;\n }\n\n const firstSlot = slotsRef.current[0];\n const lastSlot = slotsRef.current[slotsRef.current.length - 1];\n\n if (!firstSlot || !lastSlot) {\n return null;\n }\n\n const firstRect = firstSlot.getBoundingClientRect();\n const lastRect = lastSlot.getBoundingClientRect();\n\n if (event.clientY < firstRect.top) {\n return 0;\n }\n\n if (event.clientY > lastRect.bottom) {\n return slotsRef.current.length - 1;\n }\n\n return null;\n }, []);\n\n const handleSlotKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, slotIndex: number) => {\n const direction = event.key;\n if (direction === 'ArrowDown' && slotIndex < slots.length - 1) {\n event.preventDefault();\n slotsRef.current[slotIndex + 1]?.focus();\n } else if (direction === 'ArrowUp' && slotIndex > 0) {\n event.preventDefault();\n slotsRef.current[slotIndex - 1]?.focus();\n }\n };\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd(\n `${slotDate} ${slots[startIndex].startTime}`,\n `${slotDate} ${slots[endIndex].endTime}`\n );\n },\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const eventsData = getDayViewEvents({ events: expandedEvents, date, startTime, endTime });\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, slotIndex: number) => {\n if (!onExternalEventDrop) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);\n },\n [onExternalEventDrop, date, slots]\n );\n\n const dragDrop = useDragDropHandlers({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (slotIndex: number, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: date,\n targetSlotTime: slotTime,\n intervalMinutes,\n });\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n });\n\n const eventResize = useEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const eventsNodes = eventsData.regularEvents.map((event) => {\n const eventIsAllDay = isAllDayEvent({ event, date });\n const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);\n const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventTop = resizePosition ? resizePosition.top : event.position.top;\n const eventHeight = resizePosition ? resizePosition.height : event.position.height;\n\n return (\n <ScheduleEvent\n event={event}\n key={event.id}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n autoSize\n draggable={isDraggable}\n withResize={isResizable}\n isResizing={resizePosition !== null}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n if (timeSlotsContainerRef.current) {\n eventResize.handleResizeStart(\n event,\n edge,\n timeSlotsContainerRef.current,\n event.position.top,\n event.position.height,\n dayjs(date).format('YYYY-MM-DD'),\n e\n );\n }\n }\n : undefined\n }\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n style={{\n ...stylesApiProps.styles?.event,\n top: `${eventTop}%`,\n height: `${eventHeight}%`,\n insetInlineStart: `${event.position.offset}%`,\n width: `${event.position.width}%`,\n position: 'absolute',\n }}\n />\n );\n });\n\n const allDayEventsCount = getVisibleEvents({\n maxEvents: 2,\n totalEvents: eventsData.allDayEvents.length,\n });\n\n const allDayEventsNodes = eventsData.allDayEvents\n .slice(0, allDayEventsCount.visibleEventsCount)\n .map((event) => (\n <ScheduleEvent\n key={event.id}\n event={event}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n style={{ maxHeight: '50%' }}\n nowrap\n autoSize\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n />\n ));\n\n const dayGroup = dayjs(date).format('YYYY-MM-DD');\n\n const items = slots.map((slot, index) => {\n const isDropTarget = dragDrop.isDropTarget(index);\n const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);\n\n return (\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n key={slot.startTime}\n ref={(node) => {\n slotsRef.current[index] = node!;\n }}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n __vars={{ '--slot-size': `${clampIntervalMinutes(intervalMinutes) / 60}` }}\n aria-label={`${getLabel('timeSlot', labels)} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : index === 0 ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? index : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={mode === 'static' ? undefined : (e) => handleSlotKeyDown(e, index)}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup)\n : undefined\n }\n onClick={\n mode === 'static' || !onTimeSlotClick\n ? undefined\n : (event) => {\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onTimeSlotClick(\n `${slotDate} ${slot.startTime}`,\n `${slotDate} ${slot.endTime}`,\n event\n );\n }\n }\n onDragOver={withDragHandlers ? (event) => event.preventDefault() : undefined}\n />\n );\n });\n\n const slotsLabels = slots.reduce<React.ReactNode[]>((acc, slot) => {\n if (slot.isHourStart) {\n const slotTime = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${slot.startTime}`);\n const label = formatDate({\n locale: ctx.getLocale(locale),\n date: slotTime,\n format: slotLabelFormat,\n });\n\n acc.push(\n <Box\n {...getStyles('dayViewSlotLabel')}\n key={slot.startTime}\n mod={getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n })}\n >\n {label}\n </Box>\n );\n }\n return acc;\n }, []);\n\n const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: `bg-allday-${event.id}`,\n ...getStyles('dayViewBackgroundEvent', {\n style: { top: 0, height: '100%', width: '100%' },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n return <Box {...bgEventProps} />;\n });\n\n const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: event.id,\n ...getStyles('dayViewBackgroundEvent', {\n style: {\n top: `calc(${event.position.top}% + 1px)`,\n height: `calc(${event.position.height}% - 2px)`,\n width: '100%',\n },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n return <Box {...bgEventProps} />;\n });\n\n const content = (\n <Box\n {...getStyles('dayView')}\n mod={{ static: mode === 'static', 'slot-dragging': slotDragSelect.isDragging }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n title: formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),\n miw: 140,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <ScrollArea.Autosize\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('dayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n viewportRef={mergedViewportRef}\n >\n <Box {...getStyles('dayViewInner')}>\n <div {...getStyles('dayViewSlotLabels')}>\n {withAllDaySlot && (\n <Box {...getStyles('dayViewSlotLabel')} mod={{ 'all-day': true }}>\n {getLabel('allDay', labels)}\n </Box>\n )}\n {slotsLabels}\n </div>\n\n <div {...getStyles('dayViewSlots')}>\n {withAllDaySlot && (\n <div {...getStyles('dayViewAllDay')}>\n {backgroundAllDayEventNodes}\n <div {...getStyles('dayViewAllDayEvents')}>\n {allDayEventsNodes}\n {allDayEventsCount.hiddenEventsCount > 0 && (\n <MoreEvents\n events={eventsData.allDayEvents}\n moreEventsCount={allDayEventsCount.hiddenEventsCount}\n renderEventBody={renderEventBody}\n mode={mode}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n )}\n </div>\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n mod={{ 'all-day': true, static: mode === 'static' }}\n aria-label={`${getLabel('timeSlot', labels)} ${getLabel('allDay', labels)}`}\n onClick={\n mode === 'static' || !onAllDaySlotClick\n ? undefined\n : (e) => {\n onAllDaySlotClick(dayjs(date).format('YYYY-MM-DD'), e);\n }\n }\n />\n </div>\n )}\n\n <div\n ref={timeSlotsContainerRef}\n {...getStyles('dayViewTimeSlots')}\n onDragOver={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, slotIndex);\n }\n }\n : undefined\n }\n onDragLeave={withDragHandlers ? dragDrop.handleDragLeave : undefined}\n onDrop={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, slotIndex);\n }\n }\n : undefined\n }\n >\n {backgroundTimedEventNodes}\n\n {eventsNodes}\n\n {withCurrentTimeIndicator && (\n <CurrentTimeIndicator\n startOffset=\"calc(var(--day-view-slot-labels-width) * -1)\"\n endOffset=\"0rem\"\n topOffset=\"0rem\"\n timeBubbleStartOffset=\"calc(var(--day-view-slot-labels-width) * -1 + 30px)\"\n currentTimeFormat={slotLabelFormat}\n withTimeBubble={withCurrentTimeBubble}\n withThumb={!withCurrentTimeBubble}\n locale={locale}\n startTime={startTime}\n endTime={endTime}\n {...stylesApiProps}\n />\n )}\n {items}\n </div>\n </div>\n </Box>\n </ScrollArea.Autosize>\n </Box>\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragDrop.dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nDayView.displayName = '@mantine/schedule/DayView';\nDayView.classes = classes;\nDayView.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DayView.mjs","names":["classes"],"sources":["../../../src/components/DayView/DayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaAutosizeProps,\n StylesApiProps,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useEventResize } from '../../hooks/use-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n clampIntervalMinutes,\n expandRecurringEvents,\n formatDate,\n getBusinessHoursMod,\n getDayTimeIntervals,\n getVisibleEvents,\n isAllDayEvent,\n toDateString,\n} from '../../utils';\nimport {\n CurrentTimeIndicator,\n CurrentTimeIndicatorStylesNames,\n} from '../CurrentTimeIndicator/CurrentTimeIndicator';\nimport { DragContext } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport {\n RenderEvent,\n RenderEventBody,\n ScheduleEvent,\n ScheduleEventStylesNames,\n} from '../ScheduleEvent/ScheduleEvent';\nimport { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getDayViewEvents } from './get-day-view-events/get-day-view-events';\nimport classes from './DayView.module.css';\n\nexport type DayViewStylesNames =\n | 'dayView'\n | 'dayViewInner'\n | 'dayViewScrollArea'\n | 'dayViewAllDay'\n | 'dayViewAllDayEvents'\n | 'dayViewSlot'\n | 'dayViewSlots'\n | 'dayViewTimeSlots'\n | 'dayViewSlotLabel'\n | 'dayViewSlotLabels'\n | 'dayViewBackgroundEvent'\n | MoreEventsStylesNames\n | ScheduleEventStylesNames\n | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames>\n | CurrentTimeIndicatorStylesNames;\n\nexport type DayViewCssVariables = {\n dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';\n};\n\nexport interface DayViewProps\n extends BoxProps, StylesApiProps<DayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | DateStringValue;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Time slots start time, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** Time slots end time in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each time slot @default 15 */\n intervalMinutes?: number;\n\n /** If set, the all-day slot is displayed below the header @default true */\n withAllDaySlot?: boolean;\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 /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Date format in the header @default MMMM D, YYYY */\n headerFormat?: DateLabelFormat;\n\n /** If set, displays a line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Height of 1hr slot @default 64px */\n slotHeight?: React.CSSProperties['height'];\n\n /** Height of all-day slot @default 44px */\n allDaySlotHeight?: React.CSSProperties['height'];\n\n /** Props passed down to the `ScrollArea.Autosize` component */\n scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n\n /** Function to customize event body, `event` object is passed as first argument */\n renderEventBody?: RenderEventBody;\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 /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time */\n onEventDrop?: (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 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 }) => void;\n\n /** Called when all-day slot is clicked */\n onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => 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 time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging */\n onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n /** If true, events can be resized by dragging their edges @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 per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */\n getTimeSlotProps?: (data: {\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n }) => Record<string, any> | undefined;\n}\n\nexport type DayViewFactory = Factory<{\n props: DayViewProps;\n ref: HTMLDivElement;\n stylesNames: DayViewStylesNames;\n vars: DayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'DayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n intervalMinutes: 15,\n withAllDaySlot: true,\n slotLabelFormat: 'HH:mm',\n headerFormat: 'MMMM D, YYYY',\n withCurrentTimeBubble: true,\n withHeader: true,\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n} satisfies Partial<DayViewProps>;\n\nconst varsResolver = createVarsResolver<DayViewFactory>(\n (_theme, { radius, slotHeight, allDaySlotHeight }) => ({\n dayView: {\n '--day-view-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--day-view-slot-height': rem(slotHeight),\n '--day-view-all-day-slot-height': rem(allDaySlotHeight),\n },\n })\n);\n\nexport const DayView = factory<DayViewFactory>((_props) => {\n const props = useProps('DayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n __staticSelector,\n startTime,\n endTime,\n intervalMinutes,\n withAllDaySlot,\n date,\n locale,\n slotLabelFormat,\n headerFormat,\n withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), 'day'),\n withCurrentTimeBubble,\n withHeader,\n radius,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n slotHeight,\n allDaySlotHeight,\n scrollAreaProps,\n events,\n moreEventsProps,\n renderEventBody,\n renderEvent,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onAllDaySlotClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n startScrollTime,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n getTimeSlotProps,\n ...others\n } = props;\n\n const getStyles = useStyles<DayViewFactory>({\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: 'dayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const slotsRef = useRef<HTMLButtonElement[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const timeSlotsContainerRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n useAutoScrollOnDrag({\n viewportRef,\n enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static',\n });\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = slotsRef.current[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback((event: React.DragEvent) => {\n const slotIndex = slotsRef.current.findIndex((slotNode) => {\n if (!slotNode) {\n return false;\n }\n\n const rect = slotNode.getBoundingClientRect();\n return event.clientY >= rect.top && event.clientY <= rect.bottom;\n });\n\n if (slotIndex >= 0) {\n return slotIndex;\n }\n\n const firstSlot = slotsRef.current[0];\n const lastSlot = slotsRef.current[slotsRef.current.length - 1];\n\n if (!firstSlot || !lastSlot) {\n return null;\n }\n\n const firstRect = firstSlot.getBoundingClientRect();\n const lastRect = lastSlot.getBoundingClientRect();\n\n if (event.clientY < firstRect.top) {\n return 0;\n }\n\n if (event.clientY > lastRect.bottom) {\n return slotsRef.current.length - 1;\n }\n\n return null;\n }, []);\n\n const handleSlotKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, slotIndex: number) => {\n const direction = event.key;\n if (direction === 'ArrowDown' && slotIndex < slots.length - 1) {\n event.preventDefault();\n slotsRef.current[slotIndex + 1]?.focus();\n } else if (direction === 'ArrowUp' && slotIndex > 0) {\n event.preventDefault();\n slotsRef.current[slotIndex - 1]?.focus();\n }\n };\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd(\n `${slotDate} ${slots[startIndex].startTime}`,\n `${slotDate} ${slots[endIndex].endTime}`\n );\n },\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const eventsData = getDayViewEvents({ events: expandedEvents, date, startTime, endTime });\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, slotIndex: number) => {\n if (!onExternalEventDrop) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);\n },\n [onExternalEventDrop, date, slots]\n );\n\n const dragDrop = useDragDropHandlers({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (slotIndex: number, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: date,\n targetSlotTime: slotTime,\n intervalMinutes,\n });\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n });\n\n const eventResize = useEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const eventsNodes = eventsData.regularEvents.map((event) => {\n const eventIsAllDay = isAllDayEvent({ event, date });\n const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);\n const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventTop = resizePosition ? resizePosition.top : event.position.top;\n const eventHeight = resizePosition ? resizePosition.height : event.position.height;\n\n return (\n <ScheduleEvent\n event={event}\n key={event.id}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n autoSize\n draggable={isDraggable}\n withResize={isResizable}\n isResizing={resizePosition !== null}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n if (timeSlotsContainerRef.current) {\n eventResize.handleResizeStart({\n event,\n edge,\n container: timeSlotsContainerRef.current,\n originalTop: event.position.top,\n originalHeight: event.position.height,\n eventDate: dayjs(date).format('YYYY-MM-DD'),\n pointerEvent: e,\n });\n }\n }\n : undefined\n }\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n style={{\n ...stylesApiProps.styles?.event,\n top: `${eventTop}%`,\n height: `${eventHeight}%`,\n insetInlineStart: `${event.position.offset}%`,\n width: `${event.position.width}%`,\n position: 'absolute',\n }}\n />\n );\n });\n\n const allDayEventsCount = getVisibleEvents({\n maxEvents: 2,\n totalEvents: eventsData.allDayEvents.length,\n });\n\n const allDayEventsNodes = eventsData.allDayEvents\n .slice(0, allDayEventsCount.visibleEventsCount)\n .map((event) => (\n <ScheduleEvent\n key={event.id}\n event={event}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n style={{ maxHeight: '50%' }}\n nowrap\n autoSize\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n />\n ));\n\n const dayGroup = dayjs(date).format('YYYY-MM-DD');\n\n const items = slots.map((slot, index) => {\n const isDropTarget = dragDrop.isDropTarget(index);\n const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);\n const slotStart = `${dayGroup} ${slot.startTime}` as DateTimeStringValue;\n const slotEnd = `${dayGroup} ${slot.endTime}` as DateTimeStringValue;\n const { onClick: externalOnClick, ...externalSlotProps } =\n getTimeSlotProps?.({ start: slotStart, end: slotEnd }) || {};\n\n const handleClick =\n mode === 'static'\n ? undefined\n : (event: React.MouseEvent<HTMLButtonElement>) => {\n onTimeSlotClick?.({\n slotStart,\n slotEnd,\n nativeEvent: event,\n });\n externalOnClick?.(event);\n };\n\n return (\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n key={slot.startTime}\n ref={(node) => {\n slotsRef.current[index] = node!;\n }}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n __vars={{ '--slot-size': `${clampIntervalMinutes(intervalMinutes) / 60}` }}\n aria-label={`${getLabel('timeSlot', labels)} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : index === 0 ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? index : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={mode === 'static' ? undefined : (e) => handleSlotKeyDown(e, index)}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup)\n : undefined\n }\n onClick={handleClick}\n onDragOver={withDragHandlers ? (event) => event.preventDefault() : undefined}\n {...externalSlotProps}\n />\n );\n });\n\n const slotsLabels = slots.reduce<React.ReactNode[]>((acc, slot) => {\n if (slot.isHourStart) {\n const slotTime = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${slot.startTime}`);\n const label = formatDate({\n locale: ctx.getLocale(locale),\n date: slotTime,\n format: slotLabelFormat,\n });\n\n acc.push(\n <Box\n {...getStyles('dayViewSlotLabel')}\n key={slot.startTime}\n mod={getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n })}\n >\n {label}\n </Box>\n );\n }\n return acc;\n }, []);\n\n const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: `bg-allday-${event.id}`,\n ...getStyles('dayViewBackgroundEvent', {\n style: { top: 0, height: '100%', width: '100%' },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n return <Box {...bgEventProps} />;\n });\n\n const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: event.id,\n ...getStyles('dayViewBackgroundEvent', {\n style: {\n top: `calc(${event.position.top}% + 1px)`,\n height: `calc(${event.position.height}% - 2px)`,\n width: '100%',\n },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n return <Box {...bgEventProps} />;\n });\n\n const content = (\n <Box\n {...getStyles('dayView')}\n mod={{ static: mode === 'static', 'slot-dragging': slotDragSelect.isDragging }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n title: formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),\n miw: 140,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <ScrollArea.Autosize\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('dayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n viewportRef={mergedViewportRef}\n >\n <Box {...getStyles('dayViewInner')}>\n <div {...getStyles('dayViewSlotLabels')}>\n {withAllDaySlot && (\n <Box {...getStyles('dayViewSlotLabel')} mod={{ 'all-day': true }}>\n {getLabel('allDay', labels)}\n </Box>\n )}\n {slotsLabels}\n </div>\n\n <div {...getStyles('dayViewSlots')}>\n {withAllDaySlot && (\n <div {...getStyles('dayViewAllDay')}>\n {backgroundAllDayEventNodes}\n <div {...getStyles('dayViewAllDayEvents')}>\n {allDayEventsNodes}\n {allDayEventsCount.hiddenEventsCount > 0 && (\n <MoreEvents\n events={eventsData.allDayEvents}\n moreEventsCount={allDayEventsCount.hiddenEventsCount}\n renderEventBody={renderEventBody}\n mode={mode}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n )}\n </div>\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n mod={{ 'all-day': true, static: mode === 'static' }}\n aria-label={`${getLabel('timeSlot', labels)} ${getLabel('allDay', labels)}`}\n onClick={\n mode === 'static' || !onAllDaySlotClick\n ? undefined\n : (e) => {\n onAllDaySlotClick(dayjs(date).format('YYYY-MM-DD'), e);\n }\n }\n />\n </div>\n )}\n\n <div\n ref={timeSlotsContainerRef}\n {...getStyles('dayViewTimeSlots')}\n onDragOver={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, slotIndex);\n }\n }\n : undefined\n }\n onDragLeave={withDragHandlers ? dragDrop.handleDragLeave : undefined}\n onDrop={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, slotIndex);\n }\n }\n : undefined\n }\n >\n {backgroundTimedEventNodes}\n\n {eventsNodes}\n\n {withCurrentTimeIndicator && (\n <CurrentTimeIndicator\n startOffset=\"calc(var(--day-view-slot-labels-width) * -1)\"\n endOffset=\"0rem\"\n topOffset=\"0rem\"\n timeBubbleStartOffset=\"calc(var(--day-view-slot-labels-width) * -1 + 30px)\"\n currentTimeFormat={slotLabelFormat}\n withTimeBubble={withCurrentTimeBubble}\n withThumb={!withCurrentTimeBubble}\n locale={locale}\n startTime={startTime}\n endTime={endTime}\n {...stylesApiProps}\n />\n )}\n {items}\n </div>\n </div>\n </Box>\n </ScrollArea.Autosize>\n </Box>\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragDrop.dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nDayView.displayName = '@mantine/schedule/DayView';\nDayView.classes = classes;\nDayView.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
@@ -171,8 +171,6 @@ const MobileMonthView = factory((_props) => {
|
|
|
171
171
|
children: event.title
|
|
172
172
|
}), /* @__PURE__ */ jsx(Text, {
|
|
173
173
|
...getStyles("mobileMonthViewEventTime"),
|
|
174
|
-
size: "xs",
|
|
175
|
-
c: "dimmed",
|
|
176
174
|
children: isAllDay ? "All day" : `${startTime} – ${endTime}`
|
|
177
175
|
})] })]
|
|
178
176
|
});
|
|
@@ -207,13 +205,11 @@ const MobileMonthView = factory((_props) => {
|
|
|
207
205
|
mod: { static: mode === "static" },
|
|
208
206
|
tabIndex: mode === "static" ? -1 : 0,
|
|
209
207
|
children: [/* @__PURE__ */ jsx(AccordionChevron, {
|
|
210
|
-
transform: `rotate(${dir === "rtl" ? -90 : 90}
|
|
208
|
+
style: { transform: `rotate(${dir === "rtl" ? -90 : 90}deg)` },
|
|
211
209
|
size: 20
|
|
212
210
|
}), dayjs(date).format("YYYY")]
|
|
213
211
|
}), /* @__PURE__ */ jsx(Text, {
|
|
214
212
|
...getStyles("mobileMonthViewHeaderLabel"),
|
|
215
|
-
fw: 600,
|
|
216
|
-
tt: "capitalize",
|
|
217
213
|
children: headerLabel
|
|
218
214
|
})] });
|
|
219
215
|
return /* @__PURE__ */ jsxs(Box, {
|
|
@@ -241,14 +237,9 @@ const MobileMonthView = factory((_props) => {
|
|
|
241
237
|
...getStyles("mobileMonthViewEventsList"),
|
|
242
238
|
children: [/* @__PURE__ */ jsx(Text, {
|
|
243
239
|
...getStyles("mobileMonthViewEventsHeader"),
|
|
244
|
-
fw: 600,
|
|
245
|
-
tt: "capitalize",
|
|
246
240
|
children: eventsHeader
|
|
247
241
|
}), eventsList.length > 0 ? eventsList : /* @__PURE__ */ jsx(Text, {
|
|
248
242
|
...getStyles("mobileMonthViewNoEvents"),
|
|
249
|
-
c: "dimmed",
|
|
250
|
-
ta: "center",
|
|
251
|
-
py: "xl",
|
|
252
243
|
children: getLabel("noEvents", labels)
|
|
253
244
|
})]
|
|
254
245
|
})
|