@mantine/schedule 9.4.3-alpha.0 → 9.5.1-alpha.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/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs +105 -35
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs.map +1 -1
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.module.cjs +3 -1
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.module.cjs.map +1 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs +3 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +2 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs +4 -2
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs +23 -4
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearView.module.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs +18 -6
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/cjs/components/YearView/get-visible-week-days.cjs +24 -0
- package/cjs/components/YearView/get-visible-week-days.cjs.map +1 -0
- package/cjs/hooks/use-day-grid-event-resize.cjs +119 -0
- package/cjs/hooks/use-day-grid-event-resize.cjs.map +1 -0
- package/cjs/hooks/use-event-resize.cjs +7 -3
- package/cjs/hooks/use-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-horizontal-event-resize.cjs +8 -4
- package/cjs/hooks/use-horizontal-event-resize.cjs.map +1 -1
- package/cjs/utils/calculate-month-resize-dates/calculate-month-resize-dates.cjs +39 -0
- package/cjs/utils/calculate-month-resize-dates/calculate-month-resize-dates.cjs.map +1 -0
- package/cjs/utils/expand-recurring-events/expand-recurring-events.cjs +1 -0
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs +106 -36
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs.map +1 -1
- package/esm/components/ResourcesMonthView/ResourcesMonthView.module.mjs +3 -1
- package/esm/components/ResourcesMonthView/ResourcesMonthView.module.mjs.map +1 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs +3 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +2 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs +4 -2
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +23 -4
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearView.module.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs +18 -6
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/esm/components/YearView/get-visible-week-days.mjs +21 -0
- package/esm/components/YearView/get-visible-week-days.mjs.map +1 -0
- package/esm/hooks/use-day-grid-event-resize.mjs +117 -0
- package/esm/hooks/use-day-grid-event-resize.mjs.map +1 -0
- package/esm/hooks/use-event-resize.mjs +7 -3
- package/esm/hooks/use-event-resize.mjs.map +1 -1
- package/esm/hooks/use-horizontal-event-resize.mjs +8 -4
- package/esm/hooks/use-horizontal-event-resize.mjs.map +1 -1
- package/esm/utils/calculate-month-resize-dates/calculate-month-resize-dates.mjs +37 -0
- package/esm/utils/calculate-month-resize-dates/calculate-month-resize-dates.mjs.map +1 -0
- package/esm/utils/expand-recurring-events/expand-recurring-events.mjs +1 -1
- package/lib/components/ResourcesMonthView/ResourcesMonthView.d.ts +12 -1
- package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts +1 -1
- package/lib/components/YearView/YearViewMonth.d.ts +3 -1
- package/lib/components/YearView/get-visible-week-days.d.ts +19 -0
- package/lib/hooks/use-day-grid-event-resize.d.ts +35 -0
- package/lib/utils/calculate-month-resize-dates/calculate-month-resize-dates.d.ts +17 -0
- package/package.json +4 -4
- package/styles.css +63 -2
- package/styles.layer.css +63 -2
|
@@ -5,6 +5,7 @@ const require_get_weekdays_names = require("../../utils/get-weekdays-names/get-w
|
|
|
5
5
|
const require_get_week_number = require("../../utils/get-week-number/get-week-number.cjs");
|
|
6
6
|
const require_get_month_days = require("../../utils/get-month-days/get-month-days.cjs");
|
|
7
7
|
const require_is_same_month = require("../../utils/is-same-month/is-same-month.cjs");
|
|
8
|
+
const require_get_visible_week_days = require("./get-visible-week-days.cjs");
|
|
8
9
|
let dayjs = require("dayjs");
|
|
9
10
|
dayjs = require_runtime.__toESM(dayjs);
|
|
10
11
|
let _mantine_core = require("@mantine/core");
|
|
@@ -12,31 +13,42 @@ let react = require("react");
|
|
|
12
13
|
let _mantine_dates = require("@mantine/dates");
|
|
13
14
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
14
15
|
//#region packages/@mantine/schedule/src/components/YearView/YearViewMonth.tsx
|
|
15
|
-
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
16
|
+
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
16
17
|
const ctx = (0, _mantine_dates.useDatesContext)();
|
|
17
18
|
const theme = (0, _mantine_core.useMantineTheme)();
|
|
18
19
|
const today = (0, dayjs.default)();
|
|
20
|
+
const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);
|
|
21
|
+
const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);
|
|
22
|
+
const hiddenColumns = new Set(require_get_visible_week_days.getHiddenWeekendColumns({
|
|
23
|
+
weekendDays: resolvedWeekendDays,
|
|
24
|
+
firstDayOfWeek: resolvedFirstDayOfWeek,
|
|
25
|
+
withWeekendDays
|
|
26
|
+
}));
|
|
19
27
|
const weekdays = withWeekDays ? require_get_weekdays_names.getWeekdaysNames({
|
|
20
28
|
locale: ctx.getLocale(locale),
|
|
21
29
|
format: weekdayFormat,
|
|
22
|
-
firstDayOfWeek:
|
|
23
|
-
}).map((day, index) => /* @__PURE__ */ (0, react.createElement)("div", {
|
|
30
|
+
firstDayOfWeek: resolvedFirstDayOfWeek
|
|
31
|
+
}).filter((_, index) => !hiddenColumns.has(index)).map((day, index) => /* @__PURE__ */ (0, react.createElement)("div", {
|
|
24
32
|
...getStyles("yearViewWeekday"),
|
|
25
33
|
key: index
|
|
26
34
|
}, day)) : null;
|
|
27
35
|
const weeks = require_get_month_days.getMonthDays({
|
|
28
36
|
month: (0, dayjs.default)(month).format("YYYY-MM-DD"),
|
|
29
|
-
firstDayOfWeek:
|
|
37
|
+
firstDayOfWeek: resolvedFirstDayOfWeek,
|
|
30
38
|
consistentWeeks: true
|
|
31
39
|
}).map((week, weekIndex) => {
|
|
32
|
-
const days =
|
|
40
|
+
const days = require_get_visible_week_days.getVisibleWeekDays({
|
|
41
|
+
week,
|
|
42
|
+
weekendDays: resolvedWeekendDays,
|
|
43
|
+
withWeekendDays
|
|
44
|
+
}).map((date, dayIndex) => {
|
|
33
45
|
const outside = !require_is_same_month.isSameMonth(date, month);
|
|
34
46
|
if (outside && !withOutsideDays) return /* @__PURE__ */ (0, react.createElement)("div", {
|
|
35
47
|
...getStyles("yearViewDay"),
|
|
36
48
|
"data-day-placeholder": true,
|
|
37
49
|
key: date
|
|
38
50
|
});
|
|
39
|
-
const weekend =
|
|
51
|
+
const weekend = resolvedWeekendDays.includes((0, dayjs.default)(date).day());
|
|
40
52
|
const ariaLabel = (0, dayjs.default)(date).locale(locale || ctx.locale).format("MMMM D, YYYY");
|
|
41
53
|
const dayProps = getDayProps?.((0, dayjs.default)(date).format("YYYY-MM-DD")) || {};
|
|
42
54
|
const isToday = (0, dayjs.default)(date).isSame(today, "day") && highlightToday;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearViewMonth.cjs","names":["getWeekdaysNames","getMonthDays","isSameMonth","UnstyledButton","getWeekNumber","Box","formatDate"],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\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 /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n }).map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const days = week.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(date).day());\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const indicators = dayEvents.slice(0, 3).map((event) => (\n <div\n {...getStyles('yearViewDayIndicator', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n key={event.id}\n />\n ));\n\n return (\n <UnstyledButton\n aria-label={ariaLabel}\n {...dayProps}\n {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n key={date}\n mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n tabIndex={isInTabOrder ? 0 : -1}\n ref={(node) => {\n if (node) {\n __getDayRef?.(weekIndex, dayIndex, node);\n }\n }}\n onKeyDown={(event) => {\n dayProps.onKeyDown?.(event);\n __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n }}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n dayProps.onClick?.(event);\n }\n }\n >\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>{indicators}</div>\n </UnstyledButton>\n );\n });\n\n const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n const weekNumber = getWeekNumber(week);\n\n return (\n <div {...getStyles('yearViewWeek')} key={weekIndex}>\n {withWeekNumbers && (\n <UnstyledButton\n key={weekNumber}\n aria-label={`Week ${weekNumber}`}\n title={`Week ${weekNumber}`}\n {...weekNumberProps}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n weekNumberProps.onClick?.(event);\n }\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewWeekNumber', {\n className: weekNumberProps.className,\n style: weekNumberProps.style,\n })}\n >\n {weekNumber}\n </UnstyledButton>\n )}\n\n {days}\n </div>\n );\n });\n\n return (\n <Box\n mod={[\n {\n 'with-week-numbers': withWeekNumbers,\n 'with-weekdays': withWeekDays,\n static: mode === 'static',\n },\n ]}\n {...getStyles('yearViewMonth')}\n >\n <UnstyledButton\n onClick={\n mode === 'static'\n ? undefined\n : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewMonthCaption')}\n >\n {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n </UnstyledButton>\n\n {weekdays && (\n <div {...getStyles('yearViewWeekdays')}>\n {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n {weekdays}\n </div>\n )}\n\n {weeks}\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;AA8FA,SAAgB,cAAc,EAC5B,OACA,WACA,mBAAmB,QACnB,iBACA,cACA,QACA,gBACA,eACA,aACA,aACA,YACA,mBACA,cACA,oBACA,gBACA,eACA,MACA,iBACA,aACA,gBACA,iBACqB;CACrB,MAAM,OAAA,GAAA,eAAA,gBAAA,CAAsB;CAC5B,MAAM,SAAA,GAAA,cAAA,gBAAA,CAAwB;CAC9B,MAAM,SAAA,GAAA,MAAA,QAAA,CAAc;CAEpB,MAAM,WAAW,eACbA,2BAAAA,iBAAiB;EACf,QAAQ,IAAI,UAAU,MAAM;EAC5B,QAAQ;EACR,gBAAgB,IAAI,kBAAkB,cAAc;CACtD,CAAC,CAAC,CAAC,KAAK,KAAK,UACX,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;EAAK,GAAI,UAAU,iBAAiB;EAAG,KAAK;CAEvC,GADF,GACE,CACN,IACD;CAEJ,MAAM,QAAQC,uBAAAA,aAAa;EACzB,QAAA,GAAA,MAAA,QAAA,CAAa,KAAK,CAAC,CAAC,OAAO,YAAY;EACvC,gBAAgB,IAAI,kBAAkB,cAAc;EACpD,iBAAiB;CACnB,CAAC,CAAC,CAAC,KAAK,MAAM,cAAc;EAC1B,MAAM,OAAO,KAAK,KAAK,MAAM,aAAa;GACxC,MAAM,UAAU,CAACC,sBAAAA,YAAY,MAAM,KAAK;GAExC,IAAI,WAAW,CAAC,iBACd,OAAO,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;IAAK,GAAI,UAAU,aAAa;IAAG,wBAAA;IAAqB,KAAK;GAAO,CAAA;GAG7E,MAAM,UAAU,IAAI,eAAe,WAAW,CAAC,CAAC,UAAA,GAAA,MAAA,QAAA,CAAe,IAAI,CAAC,CAAC,IAAI,CAAC;GAC1E,MAAM,aAAA,GAAA,MAAA,QAAA,CAAkB,IAAI,CAAC,CAC1B,OAAO,UAAU,IAAI,MAAM,CAAC,CAC5B,OAAO,cAAc;GAExB,MAAM,WAAW,eAAA,GAAA,MAAA,QAAA,CAAoB,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC;GACrE,MAAM,WAAA,GAAA,MAAA,QAAA,CAAgB,IAAI,CAAC,CAAC,OAAO,OAAO,KAAK,KAAK;GACpD,MAAM,YAAY,iBAAA,GAAA,MAAA,QAAA,CAAsB,IAAI,CAAC,CAAC,OAAO,YAAY,MAAM,CAAC;GAIxE,MAAM,oBACJ,iBACA,cAAc,cAAc,aAC5B,aAAa,cAAc;GAC7B,MAAM,eAAe,SAAS,YAAY,CAAC,WAAW;GAEtD,MAAM,aAAa,UAAU,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,UAC5C,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;IACE,GAAI,UAAU,wBAAwB,EACpC,OAAO,EAAE,kBAAA,GAAA,cAAA,cAAA,CAA+B,MAAM,OAAO,KAAK,EAAE,EAC9D,CAAC;IACD,KAAK,MAAM;GACZ,CAAA,CACF;GAED,OACE,iBAAA,GAAA,MAAA,cAAA,CAACC,cAAAA,gBAAD;IACE,cAAY;IACZ,GAAI;IACJ,GAAI,UAAU,eAAe;KAAE,WAAW,SAAS;KAAW,OAAO,SAAS;IAAM,CAAC;IACrF,KAAK;IACL,KAAK,CAAC;KAAE;KAAS;KAAS,OAAO;KAAS,QAAQ,SAAS;IAAS,GAAG,SAAS,GAAG;IACnF,UAAU,eAAe,IAAI;IAC7B,MAAM,SAAS;KACb,IAAI,MACF,cAAc,WAAW,UAAU,IAAI;IAE3C;IACA,YAAY,UAAU;KACpB,SAAS,YAAY,KAAK;KAC1B,iBAAiB,OAAO;MAAE;MAAW;MAAU;KAAK,CAAC;IACvD;IACA,SACE,SAAS,WACL,KAAA,KACC,UAAU;KACT,cAAA,GAAA,MAAA,QAAA,CAAmB,IAAI,CAAC,CAAC,OAAO,YAAY,GAAG,KAAK;KACpD,SAAS,UAAU,KAAK;IAC1B;GAMQ,IAAA,GAAA,MAAA,QAAA,CAHP,IAAI,CAAC,CAAC,OAAO,GAAG,GAEvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,uBAAuB;cAAI;GAAgB,CAAA,CAChD;EAEpB,CAAC;EAED,MAAM,kBAAkB,sBAAA,GAAA,MAAA,QAAA,CAA2B,KAAK,EAAE,CAAC,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC;EACtF,MAAM,aAAaC,wBAAAA,cAAc,IAAI;EAErC,OACE,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;GAAK,GAAI,UAAU,cAAc;GAAG,KAAK;EA2BpC,GA1BF,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAACD,cAAAA,gBAAD;GAEE,cAAY,QAAQ;GACpB,OAAO,QAAQ;GACf,GAAI;GACJ,SACE,SAAS,WACL,KAAA,KACC,UAAU;IACT,qBAAA,GAAA,MAAA,QAAA,CAA0B,KAAK,EAAE,CAAC,CAAC,OAAO,YAAY,GAAG,KAAK;IAC9D,gBAAgB,UAAU,KAAK;GACjC;GAEN,KAAK,EAAE,QAAQ,SAAS,SAAS;GACjC,UAAU,SAAS,WAAW,KAAK;GACnC,GAAI,UAAU,sBAAsB;IAClC,WAAW,gBAAgB;IAC3B,OAAO,gBAAgB;GACzB,CAAC;aAEA;EACa,GApBT,UAoBS,GAGjB,IACE;CAET,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACE,cAAAA,KAAD;EACE,KAAK,CACH;GACE,qBAAqB;GACrB,iBAAiB;GACjB,QAAQ,SAAS;EACnB,CACF;EACA,GAAI,UAAU,eAAe;YAR/B;GAUE,iBAAA,GAAA,kBAAA,IAAA,CAACF,cAAAA,gBAAD;IACE,SACE,SAAS,WACL,KAAA,KACC,UAAU,gBAAA,GAAA,MAAA,QAAA,CAAqB,KAAK,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,YAAY,GAAG,KAAK;IAEzF,KAAK,EAAE,QAAQ,SAAS,SAAS;IACjC,UAAU,SAAS,WAAW,KAAK;IACnC,GAAI,UAAU,sBAAsB;cAEnCG,oBAAAA,WAAW;KAAE,QAAQ,IAAI,UAAU,MAAM;KAAG,MAAM;KAAO,QAAQ;IAAiB,CAAC;GACtE,CAAA;GAEf,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,GAAI,UAAU,kBAAkB;cAArC,CACG,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,GAAI,UAAU,wBAAwB,EAAI,CAAA,GAClE,QACE;;GAGN;EACE;;AAET"}
|
|
1
|
+
{"version":3,"file":"YearViewMonth.cjs","names":["getHiddenWeekendColumns","getWeekdaysNames","getMonthDays","getVisibleWeekDays","isSameMonth","UnstyledButton","getWeekNumber","Box","formatDate"],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\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 /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n withWeekendDays?: boolean;\n\n /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n withWeekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = new Set(\n getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n })\n );\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n })\n .filter((_, index) => !hiddenColumns.has(index))\n .map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const visibleDays = getVisibleWeekDays({\n week,\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\n const days = visibleDays.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const indicators = dayEvents.slice(0, 3).map((event) => (\n <div\n {...getStyles('yearViewDayIndicator', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n key={event.id}\n />\n ));\n\n return (\n <UnstyledButton\n aria-label={ariaLabel}\n {...dayProps}\n {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n key={date}\n mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n tabIndex={isInTabOrder ? 0 : -1}\n ref={(node) => {\n if (node) {\n __getDayRef?.(weekIndex, dayIndex, node);\n }\n }}\n onKeyDown={(event) => {\n dayProps.onKeyDown?.(event);\n __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n }}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n dayProps.onClick?.(event);\n }\n }\n >\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>{indicators}</div>\n </UnstyledButton>\n );\n });\n\n const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n const weekNumber = getWeekNumber(week);\n\n return (\n <div {...getStyles('yearViewWeek')} key={weekIndex}>\n {withWeekNumbers && (\n <UnstyledButton\n key={weekNumber}\n aria-label={`Week ${weekNumber}`}\n title={`Week ${weekNumber}`}\n {...weekNumberProps}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n weekNumberProps.onClick?.(event);\n }\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewWeekNumber', {\n className: weekNumberProps.className,\n style: weekNumberProps.style,\n })}\n >\n {weekNumber}\n </UnstyledButton>\n )}\n\n {days}\n </div>\n );\n });\n\n return (\n <Box\n mod={[\n {\n 'with-week-numbers': withWeekNumbers,\n 'with-weekdays': withWeekDays,\n static: mode === 'static',\n },\n ]}\n {...getStyles('yearViewMonth')}\n >\n <UnstyledButton\n onClick={\n mode === 'static'\n ? undefined\n : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewMonthCaption')}\n >\n {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n </UnstyledButton>\n\n {weekdays && (\n <div {...getStyles('yearViewWeekdays')}>\n {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n {weekdays}\n </div>\n )}\n\n {weeks}\n </Box>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let dayjs = require("dayjs");
|
|
4
|
+
dayjs = require_runtime.__toESM(dayjs);
|
|
5
|
+
//#region packages/@mantine/schedule/src/components/YearView/get-visible-week-days.ts
|
|
6
|
+
const DAYS_IN_WEEK = 7;
|
|
7
|
+
/**
|
|
8
|
+
* Returns indices of week columns (0-6, relative to `firstDayOfWeek`) that are
|
|
9
|
+
* hidden because they fall on a weekend day and `withWeekendDays` is `false`.
|
|
10
|
+
*/
|
|
11
|
+
function getHiddenWeekendColumns({ weekendDays, firstDayOfWeek, withWeekendDays }) {
|
|
12
|
+
if (withWeekendDays !== false) return [];
|
|
13
|
+
return Array.from({ length: DAYS_IN_WEEK }, (_, index) => index).filter((index) => weekendDays.includes((firstDayOfWeek + index) % DAYS_IN_WEEK));
|
|
14
|
+
}
|
|
15
|
+
/** Filters out weekend days from a week when `withWeekendDays` is `false` */
|
|
16
|
+
function getVisibleWeekDays({ week, weekendDays, withWeekendDays }) {
|
|
17
|
+
if (withWeekendDays !== false) return week;
|
|
18
|
+
return week.filter((date) => !weekendDays.includes((0, dayjs.default)(date).day()));
|
|
19
|
+
}
|
|
20
|
+
//#endregion
|
|
21
|
+
exports.getHiddenWeekendColumns = getHiddenWeekendColumns;
|
|
22
|
+
exports.getVisibleWeekDays = getVisibleWeekDays;
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=get-visible-week-days.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-visible-week-days.cjs","names":[],"sources":["../../../src/components/YearView/get-visible-week-days.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { DateStringValue, DayOfWeek } from '../../types';\n\nconst DAYS_IN_WEEK = 7;\n\ninterface HiddenWeekendColumnsInput {\n weekendDays: DayOfWeek[];\n firstDayOfWeek: DayOfWeek;\n withWeekendDays: boolean | undefined;\n}\n\n/**\n * Returns indices of week columns (0-6, relative to `firstDayOfWeek`) that are\n * hidden because they fall on a weekend day and `withWeekendDays` is `false`.\n */\nexport function getHiddenWeekendColumns({\n weekendDays,\n firstDayOfWeek,\n withWeekendDays,\n}: HiddenWeekendColumnsInput): number[] {\n if (withWeekendDays !== false) {\n return [];\n }\n\n return Array.from({ length: DAYS_IN_WEEK }, (_, index) => index).filter((index) =>\n weekendDays.includes(((firstDayOfWeek + index) % DAYS_IN_WEEK) as DayOfWeek)\n );\n}\n\ninterface VisibleWeekDaysInput {\n week: DateStringValue[];\n weekendDays: DayOfWeek[];\n withWeekendDays: boolean | undefined;\n}\n\n/** Filters out weekend days from a week when `withWeekendDays` is `false` */\nexport function getVisibleWeekDays({\n week,\n weekendDays,\n withWeekendDays,\n}: VisibleWeekDaysInput): DateStringValue[] {\n if (withWeekendDays !== false) {\n return week;\n }\n\n return week.filter((date) => !weekendDays.includes(dayjs(date).day() as DayOfWeek));\n}\n"],"mappings":";;;;;AAGA,MAAM,eAAe;;;;;AAYrB,SAAgB,wBAAwB,EACtC,aACA,gBACA,mBACsC;CACtC,IAAI,oBAAoB,OACtB,OAAO,CAAC;CAGV,OAAO,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,QAAQ,UACvE,YAAY,UAAW,iBAAiB,SAAS,YAA0B,CAC7E;AACF;;AASA,SAAgB,mBAAmB,EACjC,MACA,aACA,mBAC0C;CAC1C,IAAI,oBAAoB,OACtB,OAAO;CAGT,OAAO,KAAK,QAAQ,SAAS,CAAC,YAAY,UAAA,GAAA,MAAA,QAAA,CAAe,IAAI,CAAC,CAAC,IAAI,CAAc,CAAC;AACpF"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_get_index_from_drag_point = require("../utils/get-index-from-drag-point/get-index-from-drag-point.cjs");
|
|
4
|
+
const require_calculate_month_resize_dates = require("../utils/calculate-month-resize-dates/calculate-month-resize-dates.cjs");
|
|
5
|
+
let dayjs = require("dayjs");
|
|
6
|
+
dayjs = require_runtime.__toESM(dayjs);
|
|
7
|
+
let react = require("react");
|
|
8
|
+
//#region packages/@mantine/schedule/src/hooks/use-day-grid-event-resize.ts
|
|
9
|
+
/**
|
|
10
|
+
* Resizes an event by dragging its start or end edge across a strip of day cells.
|
|
11
|
+
* The target day is resolved by hit-testing `cells` with the pointer position, so
|
|
12
|
+
* the hook works for any layout that renders one element per day in a single row.
|
|
13
|
+
*/
|
|
14
|
+
function useDayGridEventResize({ enabled = false, mode = "default", onEventResize, canResizeEvent }) {
|
|
15
|
+
const [resizeState, setResizeState] = (0, react.useState)(null);
|
|
16
|
+
const resizeRef = (0, react.useRef)(null);
|
|
17
|
+
const justResizedRef = (0, react.useRef)(false);
|
|
18
|
+
const stableOnEventResize = (0, react.useEffectEvent)(onEventResize || (() => {}));
|
|
19
|
+
const handleResizeStart = (0, react.useCallback)(({ event, edge, cells, days, pointerEvent }) => {
|
|
20
|
+
if (!enabled || mode === "static") return;
|
|
21
|
+
pointerEvent.preventDefault();
|
|
22
|
+
pointerEvent.stopPropagation();
|
|
23
|
+
const originalStart = (0, dayjs.default)(event.start).format("YYYY-MM-DD HH:mm:ss");
|
|
24
|
+
const originalEnd = (0, dayjs.default)(event.end).format("YYYY-MM-DD HH:mm:ss");
|
|
25
|
+
const state = {
|
|
26
|
+
eventId: event.id,
|
|
27
|
+
event,
|
|
28
|
+
edge,
|
|
29
|
+
cells,
|
|
30
|
+
days,
|
|
31
|
+
dayIndex: -1,
|
|
32
|
+
originalStart,
|
|
33
|
+
originalEnd,
|
|
34
|
+
start: originalStart,
|
|
35
|
+
end: originalEnd
|
|
36
|
+
};
|
|
37
|
+
resizeRef.current = state;
|
|
38
|
+
setResizeState(state);
|
|
39
|
+
}, [enabled, mode]);
|
|
40
|
+
const isResizing = resizeState !== null;
|
|
41
|
+
(0, react.useEffect)(() => {
|
|
42
|
+
if (!isResizing) return;
|
|
43
|
+
const savedUserSelect = document.body.style.userSelect;
|
|
44
|
+
const savedCursor = document.body.style.cursor;
|
|
45
|
+
document.body.style.userSelect = "none";
|
|
46
|
+
document.body.style.cursor = "ew-resize";
|
|
47
|
+
const handlePointerMove = (e) => {
|
|
48
|
+
const state = resizeRef.current;
|
|
49
|
+
if (!state) return;
|
|
50
|
+
const dayIndex = require_get_index_from_drag_point.getIndexFromDragPoint(state.cells, e.clientX);
|
|
51
|
+
if (dayIndex === null || dayIndex === state.dayIndex) return;
|
|
52
|
+
const targetDay = state.days[dayIndex];
|
|
53
|
+
if (!targetDay) return;
|
|
54
|
+
const { start, end } = require_calculate_month_resize_dates.calculateMonthResizeDates({
|
|
55
|
+
event: state.event,
|
|
56
|
+
edge: state.edge,
|
|
57
|
+
targetDay
|
|
58
|
+
});
|
|
59
|
+
resizeRef.current = {
|
|
60
|
+
...state,
|
|
61
|
+
dayIndex,
|
|
62
|
+
start,
|
|
63
|
+
end
|
|
64
|
+
};
|
|
65
|
+
setResizeState(resizeRef.current);
|
|
66
|
+
};
|
|
67
|
+
const endGesture = () => {
|
|
68
|
+
resizeRef.current = null;
|
|
69
|
+
setResizeState(null);
|
|
70
|
+
justResizedRef.current = true;
|
|
71
|
+
requestAnimationFrame(() => {
|
|
72
|
+
justResizedRef.current = false;
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
const handlePointerUp = () => {
|
|
76
|
+
const state = resizeRef.current;
|
|
77
|
+
if (state && (state.start !== state.originalStart || state.end !== state.originalEnd)) stableOnEventResize({
|
|
78
|
+
eventId: state.eventId,
|
|
79
|
+
newStart: state.start,
|
|
80
|
+
newEnd: state.end,
|
|
81
|
+
event: state.event
|
|
82
|
+
});
|
|
83
|
+
endGesture();
|
|
84
|
+
};
|
|
85
|
+
document.addEventListener("pointermove", handlePointerMove);
|
|
86
|
+
document.addEventListener("pointerup", handlePointerUp);
|
|
87
|
+
document.addEventListener("pointercancel", endGesture);
|
|
88
|
+
return () => {
|
|
89
|
+
document.body.style.userSelect = savedUserSelect;
|
|
90
|
+
document.body.style.cursor = savedCursor;
|
|
91
|
+
document.removeEventListener("pointermove", handlePointerMove);
|
|
92
|
+
document.removeEventListener("pointerup", handlePointerUp);
|
|
93
|
+
document.removeEventListener("pointercancel", endGesture);
|
|
94
|
+
};
|
|
95
|
+
}, [isResizing]);
|
|
96
|
+
const isResizableEvent = (0, react.useCallback)((event) => {
|
|
97
|
+
if (!enabled || mode === "static" || event.display === "background") return false;
|
|
98
|
+
return canResizeEvent ? canResizeEvent(event) : true;
|
|
99
|
+
}, [
|
|
100
|
+
enabled,
|
|
101
|
+
mode,
|
|
102
|
+
canResizeEvent
|
|
103
|
+
]);
|
|
104
|
+
const wasResizing = (0, react.useCallback)(() => justResizedRef.current, []);
|
|
105
|
+
return {
|
|
106
|
+
handleResizeStart,
|
|
107
|
+
isResizing,
|
|
108
|
+
resizingEventId: resizeState?.eventId ?? null,
|
|
109
|
+
resizingEdge: resizeState?.edge ?? null,
|
|
110
|
+
previewStart: resizeState?.start ?? null,
|
|
111
|
+
previewEnd: resizeState?.end ?? null,
|
|
112
|
+
isResizableEvent,
|
|
113
|
+
wasResizing
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
//#endregion
|
|
117
|
+
exports.useDayGridEventResize = useDayGridEventResize;
|
|
118
|
+
|
|
119
|
+
//# sourceMappingURL=use-day-grid-event-resize.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-day-grid-event-resize.cjs","names":["getIndexFromDragPoint","calculateMonthResizeDates"],"sources":["../../src/hooks/use-day-grid-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport {\n calculateMonthResizeDates,\n MonthResizeEdge,\n} from '../utils/calculate-month-resize-dates/calculate-month-resize-dates';\nimport { getIndexFromDragPoint } from '../utils/get-index-from-drag-point/get-index-from-drag-point';\n\ninterface ResizeState {\n eventId: string | number;\n event: ScheduleEventData;\n edge: MonthResizeEdge;\n cells: (HTMLElement | null)[];\n days: DateStringValue[];\n dayIndex: number;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n}\n\nexport interface UseDayGridEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\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 interface DayGridResizeStartInput {\n event: ScheduleEventData;\n edge: MonthResizeEdge;\n cells: (HTMLElement | null)[];\n days: DateStringValue[];\n pointerEvent: React.PointerEvent;\n}\n\n/**\n * Resizes an event by dragging its start or end edge across a strip of day cells.\n * The target day is resolved by hit-testing `cells` with the pointer position, so\n * the hook works for any layout that renders one element per day in a single row.\n */\nexport function useDayGridEventResize({\n enabled = false,\n mode = 'default',\n onEventResize,\n canResizeEvent,\n}: UseDayGridEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n const resizeRef = useRef<ResizeState | null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(onEventResize || (() => {}));\n\n const handleResizeStart = useCallback(\n ({ event, edge, cells, days, pointerEvent }: DayGridResizeStartInput) => {\n if (!enabled || mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const originalStart = dayjs(event.start).format('YYYY-MM-DD HH:mm:ss');\n const originalEnd = dayjs(event.end).format('YYYY-MM-DD HH:mm:ss');\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n cells,\n days,\n dayIndex: -1,\n originalStart,\n originalEnd,\n start: originalStart,\n end: originalEnd,\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 const savedCursor = document.body.style.cursor;\n document.body.style.userSelect = 'none';\n document.body.style.cursor = 'ew-resize';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const dayIndex = getIndexFromDragPoint(state.cells, e.clientX);\n if (dayIndex === null || dayIndex === state.dayIndex) {\n return;\n }\n\n const targetDay = state.days[dayIndex];\n if (!targetDay) {\n return;\n }\n\n const { start, end } = calculateMonthResizeDates({\n event: state.event,\n edge: state.edge,\n targetDay,\n });\n\n resizeRef.current = { ...state, dayIndex, start, end };\n setResizeState(resizeRef.current);\n };\n\n const endGesture = () => {\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state && (state.start !== state.originalStart || state.end !== state.originalEnd)) {\n stableOnEventResize({\n eventId: state.eventId,\n newStart: state.start,\n newEnd: state.end,\n event: state.event,\n });\n }\n\n endGesture();\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n document.addEventListener('pointercancel', endGesture);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.body.style.cursor = savedCursor;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n document.removeEventListener('pointercancel', endGesture);\n };\n }, [isResizing]);\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 const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n resizingEdge: resizeState?.edge ?? null,\n previewStart: resizeState?.start ?? null,\n previewEnd: resizeState?.end ?? null,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
|
|
@@ -24,7 +24,9 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
|
|
|
24
24
|
return Math.max(0, Math.min(literalRange, snapped));
|
|
25
25
|
}, [literalRange, clampedInterval]);
|
|
26
26
|
const percentToDateTime = (0, react.useCallback)((percent, eventDate) => {
|
|
27
|
-
const
|
|
27
|
+
const minutes = percent / 100 * totalMinutes;
|
|
28
|
+
const snappedMinutes = clampAndSnap(minutes);
|
|
29
|
+
const totalMins = startMinutes + snappedMinutes;
|
|
28
30
|
const hours = Math.floor(totalMins / 60);
|
|
29
31
|
const mins = totalMins % 60;
|
|
30
32
|
return `${eventDate} ${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}:00`;
|
|
@@ -34,7 +36,8 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
|
|
|
34
36
|
clampAndSnap
|
|
35
37
|
]);
|
|
36
38
|
const snapPercent = (0, react.useCallback)((percent) => {
|
|
37
|
-
|
|
39
|
+
const minutes = percent / 100 * totalMinutes;
|
|
40
|
+
return clampAndSnap(minutes) / totalMinutes * 100;
|
|
38
41
|
}, [totalMinutes, clampAndSnap]);
|
|
39
42
|
const handleResizeStart = (0, react.useCallback)(({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent }) => {
|
|
40
43
|
if (!enabled || mode === "static") return;
|
|
@@ -66,7 +69,8 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
|
|
|
66
69
|
if (!state) return;
|
|
67
70
|
const containerRect = state.container.getBoundingClientRect();
|
|
68
71
|
const relativeY = e.clientY - containerRect.top;
|
|
69
|
-
const
|
|
72
|
+
const rawPercent = Math.max(0, Math.min(100, relativeY / containerRect.height * 100));
|
|
73
|
+
const snappedPercent = snapPercent(rawPercent);
|
|
70
74
|
let newTop = state.originalTop;
|
|
71
75
|
let newHeight = state.originalHeight;
|
|
72
76
|
if (state.edge === "bottom") newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-event-resize.cjs","names":["parseTimeString","clampIntervalMinutes"],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\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 justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(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 clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minHeightPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\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) {\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 stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\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 const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-event-resize.cjs","names":["parseTimeString","clampIntervalMinutes"],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\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 justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(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 clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minHeightPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\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) {\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 stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\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 const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
|
|
@@ -25,7 +25,9 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
|
|
|
25
25
|
return Math.max(0, Math.min(literalRange, snapped));
|
|
26
26
|
}, [literalRange, clampedInterval]);
|
|
27
27
|
const percentToDateTime = (0, react.useCallback)((percent, eventDate) => {
|
|
28
|
-
const
|
|
28
|
+
const minutes = percent / 100 * totalMinutes;
|
|
29
|
+
const snappedMinutes = clampAndSnap(minutes);
|
|
30
|
+
const totalMins = startMinutes + snappedMinutes;
|
|
29
31
|
const hours = Math.floor(totalMins / 60);
|
|
30
32
|
const mins = totalMins % 60;
|
|
31
33
|
return `${eventDate} ${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}:00`;
|
|
@@ -35,7 +37,8 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
|
|
|
35
37
|
clampAndSnap
|
|
36
38
|
]);
|
|
37
39
|
const snapPercent = (0, react.useCallback)((percent) => {
|
|
38
|
-
|
|
40
|
+
const minutes = percent / 100 * totalMinutes;
|
|
41
|
+
return clampAndSnap(minutes) / totalMinutes * 100;
|
|
39
42
|
}, [totalMinutes, clampAndSnap]);
|
|
40
43
|
const handleResizeStart = (0, react.useCallback)(({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex = 0, dayCount = 1, pointerEvent }) => {
|
|
41
44
|
if (!enabled || mode === "static") return;
|
|
@@ -70,13 +73,14 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
|
|
|
70
73
|
const state = resizeRef.current;
|
|
71
74
|
if (!state) return;
|
|
72
75
|
const containerRect = state.container.getBoundingClientRect();
|
|
73
|
-
const
|
|
76
|
+
const rawPercent = require_get_day_relative_percent.getDayRelativePercent({
|
|
74
77
|
clientX: e.clientX,
|
|
75
78
|
containerLeft: containerRect.left,
|
|
76
79
|
containerWidth: containerRect.width,
|
|
77
80
|
dayIndex: state.dayIndex,
|
|
78
81
|
dayCount: state.dayCount
|
|
79
|
-
})
|
|
82
|
+
});
|
|
83
|
+
const snappedPercent = snapPercent(rawPercent);
|
|
80
84
|
let newLeft = state.originalLeft;
|
|
81
85
|
let newWidth = state.originalWidth;
|
|
82
86
|
if (state.edge === "end") newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-horizontal-event-resize.cjs","names":["parseTimeString","clampIntervalMinutes","getDayRelativePercent"],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' | 'end';\n\ninterface ResizeState {\n eventId: string | number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n currentLeft: number;\n currentWidth: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n dayIndex: number;\n dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\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 useHorizontalEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n const resizeRef = useRef<ResizeState | null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(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 clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minWidthPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\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 originalLeft,\n originalWidth,\n eventDate,\n dayIndex = 0,\n dayCount = 1,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n eventDate: string;\n dayIndex?: number;\n dayCount?: number;\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 originalLeft,\n originalWidth,\n currentLeft: originalLeft,\n currentWidth: originalWidth,\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 dayIndex,\n dayCount,\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 const savedCursor = document.body.style.cursor;\n document.body.style.userSelect = 'none';\n document.body.style.cursor = 'ew-resize';\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 rawPercent = getDayRelativePercent({\n clientX: e.clientX,\n containerLeft: containerRect.left,\n containerWidth: containerRect.width,\n dayIndex: state.dayIndex,\n dayCount: state.dayCount,\n });\n const snappedPercent = snapPercent(rawPercent);\n\n let newLeft = state.originalLeft;\n let newWidth = state.originalWidth;\n\n if (state.edge === 'end') {\n newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);\n } else {\n const originalRight = state.originalLeft + state.originalWidth;\n newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);\n newWidth = originalRight - newLeft;\n }\n\n resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentLeft !== state.originalLeft ||\n state.currentWidth !== state.originalWidth\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'start') {\n newStart = percentToDateTime(state.currentLeft, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.body.style.cursor = savedCursor;\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 { left: resizeState.currentLeft, width: resizeState.currentWidth };\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 const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n resizingEdge: resizeState?.edge ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":";;;;;;;;;AAwCA,SAAgB,yBAAyB,EACvC,UAAU,OACV,OAAO,WACP,WACA,SACA,iBACA,eACA,kBACgC;CAChC,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAA+C,IAAI;CACvE,MAAM,aAAA,GAAA,MAAA,OAAA,CAAuC,IAAI;CACjD,MAAM,kBAAA,GAAA,MAAA,OAAA,CAAwB,KAAK;CACnC,MAAM,uBAAA,GAAA,MAAA,eAAA,CAAqC,wBAAwB,CAAC,EAAE;CAEtE,MAAM,kBAAkBA,0BAAAA,gBAAgB,SAAS;CACjD,MAAM,gBAAgBA,0BAAAA,gBAAgB,OAAO;CAC7C,MAAM,eAAe,gBAAgB,QAAQ,KAAK,gBAAgB;CAClE,MAAM,aAAa,cAAc,QAAQ,KAAK,cAAc;CAC5D,MAAM,kBAAkBC,+BAAAA,qBAAqB,eAAe;CAC5D,MAAM,eAAe,aAAa;CAClC,MAAM,eAAe,KAAK,KAAK,eAAe,eAAe,IAAI;CACjE,MAAM,kBAAmB,kBAAkB,eAAgB;CAE3D,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,YAA4B;EAC3B,MAAM,UAAU,KAAK,MAAM,UAAU,eAAe,IAAI;EACxD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,OAAO,CAAC;CACpD,GACA,CAAC,cAAc,eAAe,CAChC;CAEA,MAAM,qBAAA,GAAA,MAAA,YAAA,EACH,SAAiB,cAA2C;EAG3D,MAAM,YAAY,eADK,aADN,UAAU,MAAO,YAEY;EAC9C,MAAM,QAAQ,KAAK,MAAM,YAAY,EAAE;EACvC,MAAM,OAAO,YAAY;EACzB,OAAO,GAAG,UAAU,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE;CACzF,GACA;EAAC;EAAc;EAAc;CAAY,CAC3C;CAEA,MAAM,eAAA,GAAA,MAAA,YAAA,EACH,YAA4B;EAG3B,OADuB,aADN,UAAU,MAAO,YAEb,IAAI,eAAgB;CAC3C,GACA,CAAC,cAAc,YAAY,CAC7B;CAEA,MAAM,qBAAA,GAAA,MAAA,YAAA,EACH,EACC,OACA,MACA,WACA,cACA,eACA,WACA,WAAW,GACX,WAAW,GACX,mBAWI;EACJ,IAAI,CAAC,WAAW,SAAS,UACvB;EAGF,aAAa,eAAe;EAC5B,aAAa,gBAAgB;EAE7B,MAAM,QAAqB;GACzB,SAAS,MAAM;GACf;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,cAAc;GACd;GACA,gBAAA,GAAA,MAAA,QAAA,CAAqB,MAAM,KAAK,CAAC,CAAC,OAAO,qBAAqB;GAC9D,cAAA,GAAA,MAAA,QAAA,CAAmB,MAAM,GAAG,CAAC,CAAC,OAAO,qBAAqB;GAC1D;GACA;EACF;EAEA,UAAU,UAAU;EACpB,eAAe,KAAK;CACtB,GACA,CAAC,SAAS,IAAI,CAChB;CAEA,MAAM,aAAa,gBAAgB;CAEnC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,YACH;EAGF,MAAM,kBAAkB,SAAS,KAAK,MAAM;EAC5C,MAAM,cAAc,SAAS,KAAK,MAAM;EACxC,SAAS,KAAK,MAAM,aAAa;EACjC,SAAS,KAAK,MAAM,SAAS;EAE7B,MAAM,qBAAqB,MAAoB;GAC7C,MAAM,QAAQ,UAAU;GACxB,IAAI,CAAC,OACH;GAGF,MAAM,gBAAgB,MAAM,UAAU,sBAAsB;GAQ5D,MAAM,iBAAiB,YAPJC,iCAAAA,sBAAsB;IACvC,SAAS,EAAE;IACX,eAAe,cAAc;IAC7B,gBAAgB,cAAc;IAC9B,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,CAC4C,CAAC;GAE7C,IAAI,UAAU,MAAM;GACpB,IAAI,WAAW,MAAM;GAErB,IAAI,MAAM,SAAS,OACjB,WAAW,KAAK,IAAI,iBAAiB,iBAAiB,MAAM,YAAY;QACnE;IACL,MAAM,gBAAgB,MAAM,eAAe,MAAM;IACjD,UAAU,KAAK,IAAI,gBAAgB,gBAAgB,eAAe;IAClE,WAAW,gBAAgB;GAC7B;GAEA,UAAU,UAAU;IAAE,GAAG;IAAO,aAAa;IAAS,cAAc;GAAS;GAC7E,eAAe,UAAU,OAAO;EAClC;EAEA,MAAM,wBAAwB;GAC5B,MAAM,QAAQ,UAAU;GACxB,IAAI;QAEA,MAAM,gBAAgB,MAAM,gBAC5B,MAAM,iBAAiB,MAAM,eAC7B;KACA,IAAI;KACJ,IAAI;KAEJ,IAAI,MAAM,SAAS,SAAS;MAC1B,WAAW,kBAAkB,MAAM,aAAa,MAAM,SAAS;MAC/D,SAAS,MAAM;KACjB,OAAO;MACL,WAAW,MAAM;MACjB,SAAS,kBAAkB,MAAM,cAAc,MAAM,cAAc,MAAM,SAAS;KACpF;KAEA,oBAAoB;MAClB,SAAS,MAAM;MACf;MACA;MACA,OAAO,MAAM;KACf,CAAC;IACH;;GAEF,UAAU,UAAU;GACpB,eAAe,IAAI;GACnB,eAAe,UAAU;GACzB,4BAA4B;IAC1B,eAAe,UAAU;GAC3B,CAAC;EACH;EAEA,SAAS,iBAAiB,eAAe,iBAAiB;EAC1D,SAAS,iBAAiB,aAAa,eAAe;EAEtD,aAAa;GACX,SAAS,KAAK,MAAM,aAAa;GACjC,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,oBAAoB,eAAe,iBAAiB;GAC7D,SAAS,oBAAoB,aAAa,eAAe;EAC3D;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,qBAAA,GAAA,MAAA,YAAA,EACH,YAA6B;EAC5B,IAAI,CAAC,eAAe,YAAY,YAAY,SAC1C,OAAO;EAET,OAAO;GAAE,MAAM,YAAY;GAAa,OAAO,YAAY;EAAa;CAC1E,GACA,CAAC,WAAW,CACd;CAEA,MAAM,oBAAA,GAAA,MAAA,YAAA,EACH,UAA6B;EAC5B,IAAI,CAAC,WAAW,SAAS,YAAY,MAAM,YAAY,cACrD,OAAO;EAET,OAAO,iBAAiB,eAAe,KAAK,IAAI;CAClD,GACA;EAAC;EAAS;EAAM;CAAc,CAChC;CAEA,MAAM,eAAA,GAAA,MAAA,YAAA,OAAgC,eAAe,SAAS,CAAC,CAAC;CAEhE,OAAO;EACL;EACA;EACA,iBAAiB,aAAa,WAAW;EACzC,cAAc,aAAa,QAAQ;EACnC;EACA;EACA;CACF;AACF"}
|
|
1
|
+
{"version":3,"file":"use-horizontal-event-resize.cjs","names":["parseTimeString","clampIntervalMinutes","getDayRelativePercent"],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' | 'end';\n\ninterface ResizeState {\n eventId: string | number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n currentLeft: number;\n currentWidth: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n dayIndex: number;\n dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\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 useHorizontalEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n const resizeRef = useRef<ResizeState | null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(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 clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minWidthPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\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 originalLeft,\n originalWidth,\n eventDate,\n dayIndex = 0,\n dayCount = 1,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n eventDate: string;\n dayIndex?: number;\n dayCount?: number;\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 originalLeft,\n originalWidth,\n currentLeft: originalLeft,\n currentWidth: originalWidth,\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 dayIndex,\n dayCount,\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 const savedCursor = document.body.style.cursor;\n document.body.style.userSelect = 'none';\n document.body.style.cursor = 'ew-resize';\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 rawPercent = getDayRelativePercent({\n clientX: e.clientX,\n containerLeft: containerRect.left,\n containerWidth: containerRect.width,\n dayIndex: state.dayIndex,\n dayCount: state.dayCount,\n });\n const snappedPercent = snapPercent(rawPercent);\n\n let newLeft = state.originalLeft;\n let newWidth = state.originalWidth;\n\n if (state.edge === 'end') {\n newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);\n } else {\n const originalRight = state.originalLeft + state.originalWidth;\n newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);\n newWidth = originalRight - newLeft;\n }\n\n resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentLeft !== state.originalLeft ||\n state.currentWidth !== state.originalWidth\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'start') {\n newStart = percentToDateTime(state.currentLeft, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.body.style.cursor = savedCursor;\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 { left: resizeState.currentLeft, width: resizeState.currentWidth };\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 const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n resizingEdge: resizeState?.edge ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let dayjs = require("dayjs");
|
|
4
|
+
dayjs = require_runtime.__toESM(dayjs);
|
|
5
|
+
//#region packages/@mantine/schedule/src/utils/calculate-month-resize-dates/calculate-month-resize-dates.ts
|
|
6
|
+
const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
|
|
7
|
+
function isExclusiveMidnight(value) {
|
|
8
|
+
return value.hour() === 0 && value.minute() === 0 && value.second() === 0;
|
|
9
|
+
}
|
|
10
|
+
function withTimeOf(day, source) {
|
|
11
|
+
return day.startOf("day").hour(source.hour()).minute(source.minute()).second(source.second()).millisecond(source.millisecond());
|
|
12
|
+
}
|
|
13
|
+
function calculateMonthResizeDates({ event, edge, targetDay }) {
|
|
14
|
+
const originalStart = (0, dayjs.default)(event.start);
|
|
15
|
+
const originalEnd = (0, dayjs.default)(event.end);
|
|
16
|
+
const target = (0, dayjs.default)(targetDay).startOf("day");
|
|
17
|
+
const startDay = originalStart.startOf("day");
|
|
18
|
+
const endAtMidnight = isExclusiveMidnight(originalEnd);
|
|
19
|
+
const endDay = endAtMidnight ? originalEnd.startOf("day").subtract(1, "day") : originalEnd.startOf("day");
|
|
20
|
+
if (edge === "start") {
|
|
21
|
+
let newStart = withTimeOf(target.isAfter(endDay) ? endDay : target, originalStart);
|
|
22
|
+
if (!newStart.isBefore(originalEnd)) newStart = newStart.subtract(1, "day");
|
|
23
|
+
return {
|
|
24
|
+
start: newStart.format(DATE_TIME_FORMAT),
|
|
25
|
+
end: originalEnd.format(DATE_TIME_FORMAT)
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
const clampedDay = target.isBefore(startDay) ? startDay : target;
|
|
29
|
+
let newEnd = endAtMidnight ? clampedDay.add(1, "day").startOf("day") : withTimeOf(clampedDay, originalEnd);
|
|
30
|
+
if (!newEnd.isAfter(originalStart)) newEnd = newEnd.add(1, "day");
|
|
31
|
+
return {
|
|
32
|
+
start: originalStart.format(DATE_TIME_FORMAT),
|
|
33
|
+
end: newEnd.format(DATE_TIME_FORMAT)
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//#endregion
|
|
37
|
+
exports.calculateMonthResizeDates = calculateMonthResizeDates;
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=calculate-month-resize-dates.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate-month-resize-dates.cjs","names":[],"sources":["../../../src/utils/calculate-month-resize-dates/calculate-month-resize-dates.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { DateStringValue, DateTimeStringValue, ScheduleEventData } from '../../types';\n\nexport type MonthResizeEdge = 'start' | 'end';\n\nexport interface CalculateMonthResizeDatesInput {\n /** The event being resized */\n event: ScheduleEventData;\n\n /** Edge of the event that is being dragged */\n edge: MonthResizeEdge;\n\n /** The day on which the dragged edge was released */\n targetDay: DateStringValue;\n}\n\nexport interface CalculateMonthResizeDatesResult {\n /** New start date for the event */\n start: DateTimeStringValue;\n\n /** New end date for the event */\n end: DateTimeStringValue;\n}\n\nconst DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';\n\nfunction isExclusiveMidnight(value: dayjs.Dayjs): boolean {\n return value.hour() === 0 && value.minute() === 0 && value.second() === 0;\n}\n\nfunction withTimeOf(day: dayjs.Dayjs, source: dayjs.Dayjs): dayjs.Dayjs {\n return day\n .startOf('day')\n .hour(source.hour())\n .minute(source.minute())\n .second(source.second())\n .millisecond(source.millisecond());\n}\n\nexport function calculateMonthResizeDates({\n event,\n edge,\n targetDay,\n}: CalculateMonthResizeDatesInput): CalculateMonthResizeDatesResult {\n const originalStart = dayjs(event.start);\n const originalEnd = dayjs(event.end);\n const target = dayjs(targetDay).startOf('day');\n\n const startDay = originalStart.startOf('day');\n const endAtMidnight = isExclusiveMidnight(originalEnd);\n const endDay = endAtMidnight\n ? originalEnd.startOf('day').subtract(1, 'day')\n : originalEnd.startOf('day');\n\n if (edge === 'start') {\n const clampedDay = target.isAfter(endDay) ? endDay : target;\n let newStart = withTimeOf(clampedDay, originalStart);\n\n if (!newStart.isBefore(originalEnd)) {\n newStart = newStart.subtract(1, 'day');\n }\n\n return {\n start: newStart.format(DATE_TIME_FORMAT),\n end: originalEnd.format(DATE_TIME_FORMAT),\n };\n }\n\n const clampedDay = target.isBefore(startDay) ? startDay : target;\n let newEnd = endAtMidnight\n ? clampedDay.add(1, 'day').startOf('day')\n : withTimeOf(clampedDay, originalEnd);\n\n if (!newEnd.isAfter(originalStart)) {\n newEnd = newEnd.add(1, 'day');\n }\n\n return {\n start: originalStart.format(DATE_TIME_FORMAT),\n end: newEnd.format(DATE_TIME_FORMAT),\n };\n}\n"],"mappings":";;;;;AAwBA,MAAM,mBAAmB;AAEzB,SAAS,oBAAoB,OAA6B;CACxD,OAAO,MAAM,KAAK,MAAM,KAAK,MAAM,OAAO,MAAM,KAAK,MAAM,OAAO,MAAM;AAC1E;AAEA,SAAS,WAAW,KAAkB,QAAkC;CACtE,OAAO,IACJ,QAAQ,KAAK,CAAC,CACd,KAAK,OAAO,KAAK,CAAC,CAAC,CACnB,OAAO,OAAO,OAAO,CAAC,CAAC,CACvB,OAAO,OAAO,OAAO,CAAC,CAAC,CACvB,YAAY,OAAO,YAAY,CAAC;AACrC;AAEA,SAAgB,0BAA0B,EACxC,OACA,MACA,aACkE;CAClE,MAAM,iBAAA,GAAA,MAAA,QAAA,CAAsB,MAAM,KAAK;CACvC,MAAM,eAAA,GAAA,MAAA,QAAA,CAAoB,MAAM,GAAG;CACnC,MAAM,UAAA,GAAA,MAAA,QAAA,CAAe,SAAS,CAAC,CAAC,QAAQ,KAAK;CAE7C,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,gBAAgB,oBAAoB,WAAW;CACrD,MAAM,SAAS,gBACX,YAAY,QAAQ,KAAK,CAAC,CAAC,SAAS,GAAG,KAAK,IAC5C,YAAY,QAAQ,KAAK;CAE7B,IAAI,SAAS,SAAS;EAEpB,IAAI,WAAW,WADI,OAAO,QAAQ,MAAM,IAAI,SAAS,QACf,aAAa;EAEnD,IAAI,CAAC,SAAS,SAAS,WAAW,GAChC,WAAW,SAAS,SAAS,GAAG,KAAK;EAGvC,OAAO;GACL,OAAO,SAAS,OAAO,gBAAgB;GACvC,KAAK,YAAY,OAAO,gBAAgB;EAC1C;CACF;CAEA,MAAM,aAAa,OAAO,SAAS,QAAQ,IAAI,WAAW;CAC1D,IAAI,SAAS,gBACT,WAAW,IAAI,GAAG,KAAK,CAAC,CAAC,QAAQ,KAAK,IACtC,WAAW,YAAY,WAAW;CAEtC,IAAI,CAAC,OAAO,QAAQ,aAAa,GAC/B,SAAS,OAAO,IAAI,GAAG,KAAK;CAG9B,OAAO;EACL,OAAO,cAAc,OAAO,gBAAgB;EAC5C,KAAK,OAAO,OAAO,gBAAgB;CACrC;AACF"}
|
|
@@ -117,6 +117,7 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
|
|
|
117
117
|
return output;
|
|
118
118
|
}
|
|
119
119
|
//#endregion
|
|
120
|
+
exports.DEFAULT_EXPANSION_LIMIT = DEFAULT_EXPANSION_LIMIT;
|
|
120
121
|
exports.expandRecurringEvents = expandRecurringEvents;
|
|
121
122
|
|
|
122
123
|
//# sourceMappingURL=expand-recurring-events.cjs.map
|