@mantine/schedule 9.3.2 → 9.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/AgendaView/AgendaView.cjs +133 -0
- package/cjs/components/AgendaView/AgendaView.cjs.map +1 -0
- package/cjs/components/AgendaView/AgendaView.module.cjs +19 -0
- package/cjs/components/AgendaView/AgendaView.module.cjs.map +1 -0
- package/cjs/components/AgendaView/get-agenda-view-events.cjs +48 -0
- package/cjs/components/AgendaView/get-agenda-view-events.cjs.map +1 -0
- package/cjs/components/CurrentTimeIndicator/CurrentTimeIndicator.cjs.map +1 -1
- package/cjs/components/DayView/DayView.cjs +127 -106
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/DayView/DayView.module.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-positioned-events.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-view-events.cjs.map +1 -1
- package/cjs/components/DragContext/DragContext.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/get-mobile-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.cjs +114 -64
- package/cjs/components/MonthView/MonthView.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.module.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/add-event-to-day-groups.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/find-available-row.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-positioned-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-weeks-in-range.cjs.map +1 -1
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs +17 -15
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs.map +1 -1
- package/cjs/components/MonthView/get-visible-columns.cjs +54 -0
- package/cjs/components/MonthView/get-visible-columns.cjs.map +1 -0
- package/cjs/components/MonthView/handle-month-view-key-down.cjs.map +1 -1
- package/cjs/components/MoreEvents/MoreEvents.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs +578 -0
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs.map +1 -0
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs +29 -0
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs.map +1 -0
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs +89 -0
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs.map +1 -0
- package/cjs/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs +26 -0
- package/cjs/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs.map +1 -0
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs +129 -0
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs.map +1 -0
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs +602 -0
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs.map +1 -0
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.module.cjs +23 -0
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.module.cjs.map +1 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs +105 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs.map +1 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.module.cjs +7 -0
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.module.cjs.map +1 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +676 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs +33 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs.map +1 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs +90 -0
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs.map +1 -0
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs +97 -0
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs.map +1 -0
- package/cjs/components/Schedule/Schedule.cjs +3 -2
- package/cjs/components/Schedule/Schedule.cjs.map +1 -1
- package/cjs/components/ScheduleEvent/ScheduleEvent.cjs +1 -1
- package/cjs/components/ScheduleEvent/ScheduleEvent.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeader.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeader.module.cjs +2 -0
- package/cjs/components/ScheduleHeader/ScheduleHeader.module.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs +29 -11
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +128 -102
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.module.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs +3 -1
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-label/get-week-label.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-offset.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-width.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-event-days.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/find-available-column.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-event-end-date.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-hanging-status.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-week-positioned-events.cjs.map +1 -1
- package/cjs/components/WeekView/handle-week-view-key-down.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/cjs/components/YearView/get-year-view-events/get-year-view-events.cjs.map +1 -1
- package/cjs/components/YearView/handle-year-view-key-down.cjs.map +1 -1
- package/cjs/hooks/use-auto-scroll-on-drag.cjs.map +1 -1
- package/cjs/hooks/use-drag-drop-handlers.cjs.map +1 -1
- package/cjs/hooks/use-drag-state.cjs.map +1 -1
- package/cjs/hooks/use-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-horizontal-event-resize.cjs +161 -0
- package/cjs/hooks/use-horizontal-event-resize.cjs.map +1 -0
- package/cjs/hooks/use-slot-drag-select.cjs.map +1 -1
- package/cjs/index.cjs +20 -0
- package/cjs/labels.cjs +5 -1
- package/cjs/labels.cjs.map +1 -1
- package/cjs/utils/calculate-drop-time/calculate-drop-time.cjs.map +1 -1
- package/cjs/utils/calculate-month-drop-date/calculate-month-drop-date.cjs.map +1 -1
- package/cjs/utils/expand-recurring-events/expand-recurring-events.cjs.map +1 -1
- package/cjs/utils/format-date/format-date.cjs.map +1 -1
- package/cjs/utils/get-current-time-position/get-current-time-position.cjs.map +1 -1
- package/cjs/utils/get-day-position/get-day-position.cjs.map +1 -1
- package/cjs/utils/get-day-relative-percent/get-day-relative-percent.cjs +18 -0
- package/cjs/utils/get-day-relative-percent/get-day-relative-percent.cjs.map +1 -0
- package/cjs/utils/get-end-of-week/get-end-of-week.cjs.map +1 -1
- package/cjs/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.cjs +12 -0
- package/cjs/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.cjs.map +1 -0
- package/cjs/utils/get-index-from-drag-point/get-index-from-drag-point.cjs +27 -0
- package/cjs/utils/get-index-from-drag-point/get-index-from-drag-point.cjs.map +1 -0
- package/cjs/utils/get-month-days/get-month-days.cjs.map +1 -1
- package/cjs/utils/get-month-range/get-month-range.cjs.map +1 -1
- package/cjs/utils/get-months-by-quarter/get-months-by-quarter.cjs.map +1 -1
- package/cjs/utils/get-months-list/get-months-list.cjs.map +1 -1
- package/cjs/utils/get-ordered-resources/get-ordered-resources.cjs +54 -0
- package/cjs/utils/get-ordered-resources/get-ordered-resources.cjs.map +1 -0
- package/cjs/utils/get-start-of-week/get-start-of-week.cjs.map +1 -1
- package/cjs/utils/get-week-days/get-week-days.cjs.map +1 -1
- package/cjs/utils/get-week-number/get-week-number.cjs.map +1 -1
- package/cjs/utils/get-weekdays-names/get-weekdays-names.cjs.map +1 -1
- package/cjs/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.cjs +88 -0
- package/cjs/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.cjs.map +1 -0
- package/cjs/utils/is-after-min-date/is-after-min-date.cjs.map +1 -1
- package/cjs/utils/is-all-day-event/is-all-day-event.cjs.map +1 -1
- package/cjs/utils/is-before-max-date/is-before-max-date.cjs.map +1 -1
- package/cjs/utils/is-event-in-time-range/is-event-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-events-overlap/is-events-overlap.cjs.map +1 -1
- package/cjs/utils/is-in-time-range/is-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-multiday-event/is-multiday-event.cjs.map +1 -1
- package/cjs/utils/is-same-month/is-same-month.cjs.map +1 -1
- package/cjs/utils/is-within-week/is-within-week.cjs.map +1 -1
- package/cjs/utils/next-week/next-week.cjs.map +1 -1
- package/cjs/utils/parse-time-string/parse-time-string.cjs.map +1 -1
- package/cjs/utils/previous-week/previous-week.cjs.map +1 -1
- package/cjs/utils/sort-events/sort-events.cjs.map +1 -1
- package/cjs/utils/to-date-string/to-date-string.cjs.map +1 -1
- package/cjs/utils/to-time-string/to-time-string.cjs.map +1 -1
- package/cjs/utils/validate-event/validate-event.cjs.map +1 -1
- package/esm/components/AgendaView/AgendaView.mjs +130 -0
- package/esm/components/AgendaView/AgendaView.mjs.map +1 -0
- package/esm/components/AgendaView/AgendaView.module.mjs +19 -0
- package/esm/components/AgendaView/AgendaView.module.mjs.map +1 -0
- package/esm/components/AgendaView/get-agenda-view-events.mjs +46 -0
- package/esm/components/AgendaView/get-agenda-view-events.mjs.map +1 -0
- package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs.map +1 -1
- package/esm/components/DayView/DayView.mjs +128 -107
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/DayView/DayView.module.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.mjs.map +1 -1
- package/esm/components/MobileMonthView/get-mobile-month-view-events.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.mjs +115 -65
- package/esm/components/MonthView/MonthView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.module.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/add-event-to-day-groups.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/find-available-row.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-month-positioned-events.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-month-view-events.mjs.map +1 -1
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs +17 -15
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs.map +1 -1
- package/esm/components/MonthView/get-visible-columns.mjs +53 -0
- package/esm/components/MonthView/get-visible-columns.mjs.map +1 -0
- package/esm/components/MonthView/handle-month-view-key-down.mjs.map +1 -1
- package/esm/components/MoreEvents/MoreEvents.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs +576 -0
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs.map +1 -0
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs +29 -0
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs.map +1 -0
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs +89 -0
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs.map +1 -0
- package/esm/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs +26 -0
- package/esm/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs.map +1 -0
- package/esm/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.mjs +127 -0
- package/esm/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.mjs.map +1 -0
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs +600 -0
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs.map +1 -0
- package/esm/components/ResourcesMonthView/ResourcesMonthView.module.mjs +23 -0
- package/esm/components/ResourcesMonthView/ResourcesMonthView.module.mjs.map +1 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs +105 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs.map +1 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.module.mjs +7 -0
- package/esm/components/ResourcesSchedule/ResourcesSchedule.module.mjs.map +1 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +674 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs +33 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs.map +1 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs +90 -0
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs.map +1 -0
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs +95 -0
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs.map +1 -0
- package/esm/components/Schedule/Schedule.mjs +3 -2
- package/esm/components/Schedule/Schedule.mjs.map +1 -1
- package/esm/components/ScheduleEvent/ScheduleEvent.mjs +1 -1
- package/esm/components/ScheduleEvent/ScheduleEvent.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeader.module.mjs +2 -0
- package/esm/components/ScheduleHeader/ScheduleHeader.module.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs +29 -11
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +128 -102
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.module.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs +3 -1
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/components/WeekView/get-week-label/get-week-label.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/calculate-all-day-event-offset.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/calculate-all-day-event-width.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/calculate-event-days.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/find-available-column.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/get-event-end-date.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/get-week-positioned-events.mjs.map +1 -1
- package/esm/components/WeekView/handle-week-view-key-down.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/esm/components/YearView/get-year-view-events/get-year-view-events.mjs.map +1 -1
- package/esm/components/YearView/handle-year-view-key-down.mjs.map +1 -1
- package/esm/hooks/use-drag-drop-handlers.mjs.map +1 -1
- package/esm/hooks/use-event-resize.mjs.map +1 -1
- package/esm/hooks/use-horizontal-event-resize.mjs +159 -0
- package/esm/hooks/use-horizontal-event-resize.mjs.map +1 -0
- package/esm/index.mjs +11 -1
- package/esm/labels.mjs +5 -1
- package/esm/labels.mjs.map +1 -1
- package/esm/utils/calculate-drop-time/calculate-drop-time.mjs.map +1 -1
- package/esm/utils/calculate-month-drop-date/calculate-month-drop-date.mjs.map +1 -1
- package/esm/utils/expand-recurring-events/expand-recurring-events.mjs.map +1 -1
- package/esm/utils/format-date/format-date.mjs.map +1 -1
- package/esm/utils/get-current-time-position/get-current-time-position.mjs.map +1 -1
- package/esm/utils/get-day-position/get-day-position.mjs.map +1 -1
- package/esm/utils/get-day-relative-percent/get-day-relative-percent.mjs +18 -0
- package/esm/utils/get-day-relative-percent/get-day-relative-percent.mjs.map +1 -0
- package/esm/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.mjs +12 -0
- package/esm/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.mjs.map +1 -0
- package/esm/utils/get-index-from-drag-point/get-index-from-drag-point.mjs +27 -0
- package/esm/utils/get-index-from-drag-point/get-index-from-drag-point.mjs.map +1 -0
- package/esm/utils/get-month-days/get-month-days.mjs.map +1 -1
- package/esm/utils/get-month-range/get-month-range.mjs.map +1 -1
- package/esm/utils/get-months-by-quarter/get-months-by-quarter.mjs.map +1 -1
- package/esm/utils/get-months-list/get-months-list.mjs.map +1 -1
- package/esm/utils/get-ordered-resources/get-ordered-resources.mjs +54 -0
- package/esm/utils/get-ordered-resources/get-ordered-resources.mjs.map +1 -0
- package/esm/utils/get-week-number/get-week-number.mjs.map +1 -1
- package/esm/utils/get-weekdays-names/get-weekdays-names.mjs.map +1 -1
- package/esm/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.mjs +88 -0
- package/esm/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.mjs.map +1 -0
- package/esm/utils/is-after-min-date/is-after-min-date.mjs.map +1 -1
- package/esm/utils/is-all-day-event/is-all-day-event.mjs.map +1 -1
- package/esm/utils/is-before-max-date/is-before-max-date.mjs.map +1 -1
- package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs.map +1 -1
- package/esm/utils/is-events-overlap/is-events-overlap.mjs.map +1 -1
- package/esm/utils/is-in-time-range/is-in-time-range.mjs.map +1 -1
- package/esm/utils/is-multiday-event/is-multiday-event.mjs.map +1 -1
- package/esm/utils/is-same-month/is-same-month.mjs.map +1 -1
- package/esm/utils/is-within-week/is-within-week.mjs.map +1 -1
- package/esm/utils/next-week/next-week.mjs.map +1 -1
- package/esm/utils/parse-time-string/parse-time-string.mjs.map +1 -1
- package/esm/utils/previous-week/previous-week.mjs.map +1 -1
- package/esm/utils/sort-events/sort-events.mjs.map +1 -1
- package/esm/utils/to-date-string/to-date-string.mjs.map +1 -1
- package/esm/utils/to-time-string/to-time-string.mjs.map +1 -1
- package/esm/utils/validate-event/validate-event.mjs.map +1 -1
- package/lib/components/AgendaView/AgendaView.d.ts +54 -0
- package/lib/components/AgendaView/get-agenda-view-events.d.ts +9 -0
- package/lib/components/AgendaView/index.d.ts +2 -0
- package/lib/components/DayView/DayView.d.ts +6 -1
- package/lib/components/MonthView/MonthView.d.ts +6 -1
- package/lib/components/MonthView/get-renderable-month-event-segments.d.ts +5 -1
- package/lib/components/MonthView/get-visible-columns.d.ts +19 -0
- package/lib/components/ResourcesDayView/ResourcesDayView.d.ts +148 -0
- package/lib/components/ResourcesDayView/ResourcesDayViewColumn.d.ts +39 -0
- package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts +2 -0
- package/lib/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.d.ts +16 -0
- package/lib/components/ResourcesDayView/index.d.ts +9 -0
- package/lib/components/ResourcesMonthView/ResourcesMonthView.d.ts +129 -0
- package/lib/components/ResourcesMonthView/index.d.ts +9 -0
- package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts +123 -0
- package/lib/components/ResourcesSchedule/index.d.ts +3 -0
- package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts +117 -0
- package/lib/components/ResourcesWeekView/ResourcesWeekViewRow.d.ts +39 -0
- package/lib/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.d.ts +29 -0
- package/lib/components/ResourcesWeekView/index.d.ts +3 -0
- package/lib/components/Schedule/Schedule.d.ts +3 -1
- package/lib/components/ScheduleHeader/ScheduleHeaderBase.d.ts +5 -1
- package/lib/components/WeekView/WeekView.d.ts +6 -1
- package/lib/components/WeekView/WeekViewDay.d.ts +3 -1
- package/lib/hooks/use-horizontal-event-resize.d.ts +39 -0
- package/lib/index.d.mts +5 -0
- package/lib/index.d.ts +5 -0
- package/lib/labels.d.ts +4 -0
- package/lib/types.d.ts +20 -0
- package/lib/utils/get-day-relative-percent/get-day-relative-percent.d.ts +15 -0
- package/lib/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.d.ts +3 -0
- package/lib/utils/get-index-from-drag-point/get-index-from-drag-point.d.ts +6 -0
- package/lib/utils/get-ordered-resources/get-ordered-resources.d.ts +17 -0
- package/lib/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.d.ts +10 -0
- package/lib/utils/index.d.ts +7 -0
- package/package.json +4 -4
- package/styles.css +1362 -9
- package/styles.layer.css +1363 -10
|
@@ -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 !== 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\nexport namespace YearView {\n export type Props = YearViewProps;\n export type Factory = YearViewFactory;\n export type StylesNames = YearViewStylesNames;\n export type CssVariables = YearViewCssVariables;\n}\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\nexport namespace YearView {\n export type Props = YearViewProps;\n export type Factory = YearViewFactory;\n export type StylesNames = YearViewStylesNames;\n export type CssVariables = YearViewCssVariables;\n}\n"],"mappings":"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"}
|
|
@@ -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":"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"}
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-year-view-events.cjs","names":["isMultidayEvent","validateEvent"],"sources":["../../../../src/components/YearView/get-year-view-events/get-year-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, ScheduleEventData } from '../../../types';\nimport { isMultidayEvent, validateEvent } from '../../../utils';\n\nexport type GroupedEvents = Record<DateStringValue, ScheduleEventData[]>;\n\nfunction groupEventByDate(event: ScheduleEventData, groupedEvents: GroupedEvents) {\n if (isMultidayEvent(event)) {\n const startDate = dayjs(event.start).startOf('day');\n const endDate = dayjs(event.end).startOf('day');\n\n for (\n let date = startDate;\n date.isBefore(endDate) || date.isSame(endDate);\n date = date.add(1, 'day')\n ) {\n const dateKey = date.format('YYYY-MM-DD');\n if (!groupedEvents[dateKey]) {\n groupedEvents[dateKey] = [];\n }\n groupedEvents[dateKey].push(event);\n }\n\n return;\n }\n\n const eventDate = dayjs(event.start).format('YYYY-MM-DD');\n if (!groupedEvents[eventDate]) {\n groupedEvents[eventDate] = [];\n }\n groupedEvents[eventDate].push(event);\n}\n\ninterface GetYearViewEventsInput {\n date: AnyDateValue;\n events: ScheduleEventData[] | undefined;\n}\n\nexport function getYearViewEvents({ date, events }: GetYearViewEventsInput) {\n const groupedEvents: GroupedEvents = {};\n\n if (events === undefined) {\n return groupedEvents;\n }\n\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (dayjs(event.start).isSame(dayjs(date), 'year')) {\n groupEventByDate(validateEvent(event), groupedEvents);\n\n if (!ids.has(event.id)) {\n ids.add(event.id);\n } else {\n throw new Error(`[@mantine/schedule] YearView: Duplicated event ids found: ${event.id}`);\n }\n }\n }\n\n return groupedEvents;\n}\n"],"mappings":";;;;;;;AAMA,SAAS,iBAAiB,OAA0B,eAA8B;CAChF,IAAIA,0BAAAA,gBAAgB,KAAK,GAAG;EAC1B,MAAM,aAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"get-year-view-events.cjs","names":["isMultidayEvent","validateEvent"],"sources":["../../../../src/components/YearView/get-year-view-events/get-year-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, ScheduleEventData } from '../../../types';\nimport { isMultidayEvent, validateEvent } from '../../../utils';\n\nexport type GroupedEvents = Record<DateStringValue, ScheduleEventData[]>;\n\nfunction groupEventByDate(event: ScheduleEventData, groupedEvents: GroupedEvents) {\n if (isMultidayEvent(event)) {\n const startDate = dayjs(event.start).startOf('day');\n const endDate = dayjs(event.end).startOf('day');\n\n for (\n let date = startDate;\n date.isBefore(endDate) || date.isSame(endDate);\n date = date.add(1, 'day')\n ) {\n const dateKey = date.format('YYYY-MM-DD');\n if (!groupedEvents[dateKey]) {\n groupedEvents[dateKey] = [];\n }\n groupedEvents[dateKey].push(event);\n }\n\n return;\n }\n\n const eventDate = dayjs(event.start).format('YYYY-MM-DD');\n if (!groupedEvents[eventDate]) {\n groupedEvents[eventDate] = [];\n }\n groupedEvents[eventDate].push(event);\n}\n\ninterface GetYearViewEventsInput {\n date: AnyDateValue;\n events: ScheduleEventData[] | undefined;\n}\n\nexport function getYearViewEvents({ date, events }: GetYearViewEventsInput) {\n const groupedEvents: GroupedEvents = {};\n\n if (events === undefined) {\n return groupedEvents;\n }\n\n const ids = new Set<string | number>();\n\n for (const event of events) {\n if (dayjs(event.start).isSame(dayjs(date), 'year')) {\n groupEventByDate(validateEvent(event), groupedEvents);\n\n if (!ids.has(event.id)) {\n ids.add(event.id);\n } else {\n throw new Error(`[@mantine/schedule] YearView: Duplicated event ids found: ${event.id}`);\n }\n }\n }\n\n return groupedEvents;\n}\n"],"mappings":";;;;;;;AAMA,SAAS,iBAAiB,OAA0B,eAA8B;CAChF,IAAIA,0BAAAA,gBAAgB,KAAK,GAAG;EAC1B,MAAM,aAAA,GAAA,MAAA,QAAA,CAAkB,MAAM,KAAK,CAAC,CAAC,QAAQ,KAAK;EAClD,MAAM,WAAA,GAAA,MAAA,QAAA,CAAgB,MAAM,GAAG,CAAC,CAAC,QAAQ,KAAK;EAE9C,KACE,IAAI,OAAO,WACX,KAAK,SAAS,OAAO,KAAK,KAAK,OAAO,OAAO,GAC7C,OAAO,KAAK,IAAI,GAAG,KAAK,GACxB;GACA,MAAM,UAAU,KAAK,OAAO,YAAY;GACxC,IAAI,CAAC,cAAc,UACjB,cAAc,WAAW,CAAC;GAE5B,cAAc,QAAQ,CAAC,KAAK,KAAK;EACnC;EAEA;CACF;CAEA,MAAM,aAAA,GAAA,MAAA,QAAA,CAAkB,MAAM,KAAK,CAAC,CAAC,OAAO,YAAY;CACxD,IAAI,CAAC,cAAc,YACjB,cAAc,aAAa,CAAC;CAE9B,cAAc,UAAU,CAAC,KAAK,KAAK;AACrC;AAOA,SAAgB,kBAAkB,EAAE,MAAM,UAAkC;CAC1E,MAAM,gBAA+B,CAAC;CAEtC,IAAI,WAAW,KAAA,GACb,OAAO;CAGT,MAAM,sBAAM,IAAI,IAAqB;CAErC,KAAK,MAAM,SAAS,QAClB,KAAA,GAAA,MAAA,QAAA,CAAU,MAAM,KAAK,CAAC,CAAC,QAAA,GAAA,MAAA,QAAA,CAAa,IAAI,GAAG,MAAM,GAAG;EAClD,iBAAiBC,uBAAAA,cAAc,KAAK,GAAG,aAAa;EAEpD,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,GACnB,IAAI,IAAI,MAAM,EAAE;OAEhB,MAAM,IAAI,MAAM,6DAA6D,MAAM,IAAI;CAE3F;CAGF,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"handle-year-view-key-down.cjs","names":[],"sources":["../../../src/components/YearView/handle-year-view-key-down.ts"],"sourcesContent":["import { RefObject } from 'react';\n\n/** Reference to a 3D array of day buttons: [monthIndex][weekIndex][dayIndex] */\nexport type YearViewControlsRef = RefObject<HTMLButtonElement[][][]>;\n\ntype Direction = 'up' | 'down' | 'left' | 'right';\n\ninterface DayPosition {\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n}\n\nfunction getDirection(key: KeyboardEvent['key']): Direction | null {\n switch (key) {\n case 'ArrowDown':\n return 'down';\n case 'ArrowUp':\n return 'up';\n case 'ArrowRight':\n return 'right';\n case 'ArrowLeft':\n return 'left';\n default:\n return null;\n }\n}\n\nfunction getControlsSize(controlsRef: YearViewControlsRef): number[][] | null {\n if (!controlsRef.current) {\n return null;\n }\n return controlsRef.current.map((month) =>\n month ? month.map((week) => (week ? week.length : 0)) : []\n );\n}\n\ninterface GetNextPositionInput {\n direction: Direction;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n size: number[][];\n}\n\nfunction getNextPosition({\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n}: GetNextPositionInput): DayPosition | null {\n const currentMonthSize = size[monthIndex];\n if (!currentMonthSize) {\n return null;\n }\n\n switch (direction) {\n case 'up': {\n if (weekIndex === 0) {\n if (monthIndex === 0) {\n return null;\n }\n const prevMonthSize = size[monthIndex - 1];\n if (!prevMonthSize || prevMonthSize.length === 0) {\n return null;\n }\n\n const lastWeekIndex = prevMonthSize.length - 1;\n const clampedDayIndex = Math.min(dayIndex, prevMonthSize[lastWeekIndex] - 1);\n return {\n monthIndex: monthIndex - 1,\n weekIndex: lastWeekIndex,\n dayIndex: clampedDayIndex,\n };\n }\n\n const prevWeekSize = currentMonthSize[weekIndex - 1];\n const clampedDayIndex = Math.min(dayIndex, prevWeekSize - 1);\n return {\n monthIndex,\n weekIndex: weekIndex - 1,\n dayIndex: clampedDayIndex,\n };\n }\n\n case 'down': {\n if (weekIndex === currentMonthSize.length - 1) {\n if (monthIndex === size.length - 1) {\n return null;\n }\n const nextMonthSize = size[monthIndex + 1];\n if (!nextMonthSize || nextMonthSize.length === 0) {\n return null;\n }\n\n const clampedDayIndex = Math.min(dayIndex, nextMonthSize[0] - 1);\n return {\n monthIndex: monthIndex + 1,\n weekIndex: 0,\n dayIndex: clampedDayIndex,\n };\n }\n\n const nextWeekSize = currentMonthSize[weekIndex + 1];\n const clampedDayIndex = Math.min(dayIndex, nextWeekSize - 1);\n return {\n monthIndex,\n weekIndex: weekIndex + 1,\n dayIndex: clampedDayIndex,\n };\n }\n\n case 'left': {\n if (dayIndex === 0) {\n if (weekIndex === 0) {\n if (monthIndex === 0) {\n return null;\n }\n const prevMonthSize = size[monthIndex - 1];\n if (!prevMonthSize || prevMonthSize.length === 0) {\n return null;\n }\n const lastWeekIndex = prevMonthSize.length - 1;\n return {\n monthIndex: monthIndex - 1,\n weekIndex: lastWeekIndex,\n dayIndex: prevMonthSize[lastWeekIndex] - 1,\n };\n }\n\n return {\n monthIndex,\n weekIndex: weekIndex - 1,\n dayIndex: currentMonthSize[weekIndex - 1] - 1,\n };\n }\n\n return {\n monthIndex,\n weekIndex,\n dayIndex: dayIndex - 1,\n };\n }\n\n case 'right': {\n const currentWeekSize = currentMonthSize[weekIndex];\n\n if (dayIndex === currentWeekSize - 1) {\n if (weekIndex === currentMonthSize.length - 1) {\n if (monthIndex === size.length - 1) {\n return null;\n }\n const nextMonthSize = size[monthIndex + 1];\n if (!nextMonthSize || nextMonthSize.length === 0) {\n return null;\n }\n return {\n monthIndex: monthIndex + 1,\n weekIndex: 0,\n dayIndex: 0,\n };\n }\n\n return {\n monthIndex,\n weekIndex: weekIndex + 1,\n dayIndex: 0,\n };\n }\n\n return {\n monthIndex,\n weekIndex,\n dayIndex: dayIndex + 1,\n };\n }\n\n default:\n return null;\n }\n}\n\ninterface FocusOnNextControlInput {\n controlsRef: YearViewControlsRef;\n direction: Direction;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n size: number[][];\n}\n\nfunction focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n}: FocusOnNextControlInput): void {\n const nextPosition = getNextPosition({\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n });\n\n if (!nextPosition) {\n return;\n }\n\n const controlToFocus =\n controlsRef.current?.[nextPosition.monthIndex]?.[nextPosition.weekIndex]?.[\n nextPosition.dayIndex\n ];\n\n if (!controlToFocus) {\n return;\n }\n\n if (\n controlToFocus.disabled ||\n controlToFocus.getAttribute('data-hidden') ||\n controlToFocus.getAttribute('data-outside') ||\n controlToFocus.getAttribute('data-day-placeholder')\n ) {\n focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex: nextPosition.monthIndex,\n weekIndex: nextPosition.weekIndex,\n dayIndex: nextPosition.dayIndex,\n size,\n });\n } else {\n controlToFocus.focus();\n }\n}\n\nexport interface HandleYearViewKeyDownInput {\n controlsRef: YearViewControlsRef;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n event: React.KeyboardEvent<HTMLButtonElement>;\n}\n\nexport function handleYearViewKeyDown({\n controlsRef,\n monthIndex,\n weekIndex,\n dayIndex,\n event,\n}: HandleYearViewKeyDownInput): void {\n const direction = getDirection(event.key);\n\n if (direction) {\n event.preventDefault();\n\n const size = getControlsSize(controlsRef);\n\n if (!size) {\n return;\n }\n\n focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n });\n }\n}\n"],"mappings":";;AAaA,SAAS,aAAa,KAA6C;CACjE,QAAQ,KAAR;EACE,KAAK,aACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAS,gBAAgB,aAAqD;CAC5E,IAAI,CAAC,YAAY,SACf,OAAO;CAET,OAAO,YAAY,QAAQ,KAAK,UAC9B,QAAQ,MAAM,KAAK,SAAU,OAAO,KAAK,SAAS,CAAE,IAAI,CAAC,CAC3D;AACF;AAUA,SAAS,gBAAgB,EACvB,WACA,YACA,WACA,UACA,QAC2C;CAC3C,MAAM,mBAAmB,KAAK;CAC9B,IAAI,CAAC,kBACH,OAAO;CAGT,QAAQ,WAAR;EACE,KAAK,MAAM;GACT,IAAI,cAAc,GAAG;IACnB,IAAI,eAAe,GACjB,OAAO;IAET,MAAM,gBAAgB,KAAK,aAAa;IACxC,IAAI,CAAC,iBAAiB,cAAc,WAAW,GAC7C,OAAO;IAGT,MAAM,gBAAgB,cAAc,SAAS;IAC7C,MAAM,kBAAkB,KAAK,IAAI,UAAU,cAAc,iBAAiB,CAAC;IAC3E,OAAO;KACL,YAAY,aAAa;KACzB,WAAW;KACX,UAAU;IACZ;GACF;GAEA,MAAM,eAAe,iBAAiB,YAAY;GAClD,MAAM,kBAAkB,KAAK,IAAI,UAAU,eAAe,CAAC;GAC3D,OAAO;IACL;IACA,WAAW,YAAY;IACvB,UAAU;GACZ;EACF;EAEA,KAAK,QAAQ;GACX,IAAI,cAAc,iBAAiB,SAAS,GAAG;IAC7C,IAAI,eAAe,KAAK,SAAS,GAC/B,OAAO;IAET,MAAM,gBAAgB,KAAK,aAAa;IACxC,IAAI,CAAC,iBAAiB,cAAc,WAAW,GAC7C,OAAO;IAGT,MAAM,kBAAkB,KAAK,IAAI,UAAU,cAAc,KAAK,CAAC;IAC/D,OAAO;KACL,YAAY,aAAa;KACzB,WAAW;KACX,UAAU;IACZ;GACF;GAEA,MAAM,eAAe,iBAAiB,YAAY;GAClD,MAAM,kBAAkB,KAAK,IAAI,UAAU,eAAe,CAAC;GAC3D,OAAO;IACL;IACA,WAAW,YAAY;IACvB,UAAU;GACZ;EACF;EAEA,KAAK;GACH,IAAI,aAAa,GAAG;IAClB,IAAI,cAAc,GAAG;KACnB,IAAI,eAAe,GACjB,OAAO;KAET,MAAM,gBAAgB,KAAK,aAAa;KACxC,IAAI,CAAC,iBAAiB,cAAc,WAAW,GAC7C,OAAO;KAET,MAAM,gBAAgB,cAAc,SAAS;KAC7C,OAAO;MACL,YAAY,aAAa;MACzB,WAAW;MACX,UAAU,cAAc,iBAAiB;KAC3C;IACF;IAEA,OAAO;KACL;KACA,WAAW,YAAY;KACvB,UAAU,iBAAiB,YAAY,KAAK;IAC9C;GACF;GAEA,OAAO;IACL;IACA;IACA,UAAU,WAAW;GACvB;EAGF,KAAK;GAGH,IAAI,aAFoB,iBAAiB,aAEN,GAAG;IACpC,IAAI,cAAc,iBAAiB,SAAS,GAAG;KAC7C,IAAI,eAAe,KAAK,SAAS,GAC/B,OAAO;KAET,MAAM,gBAAgB,KAAK,aAAa;KACxC,IAAI,CAAC,iBAAiB,cAAc,WAAW,GAC7C,OAAO;KAET,OAAO;MACL,YAAY,aAAa;MACzB,WAAW;MACX,UAAU;KACZ;IACF;IAEA,OAAO;KACL;KACA,WAAW,YAAY;KACvB,UAAU;IACZ;GACF;GAEA,OAAO;IACL;IACA;IACA,UAAU,WAAW;GACvB;EAGF,SACE,OAAO;CACX;AACF;AAWA,SAAS,4BAA4B,EACnC,aACA,WACA,YACA,WACA,UACA,QACgC;CAChC,MAAM,eAAe,gBAAgB;EACnC;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,cACH;CAGF,MAAM,iBACJ,YAAY,UAAU,aAAa,
|
|
1
|
+
{"version":3,"file":"handle-year-view-key-down.cjs","names":[],"sources":["../../../src/components/YearView/handle-year-view-key-down.ts"],"sourcesContent":["import { RefObject } from 'react';\n\n/** Reference to a 3D array of day buttons: [monthIndex][weekIndex][dayIndex] */\nexport type YearViewControlsRef = RefObject<HTMLButtonElement[][][]>;\n\ntype Direction = 'up' | 'down' | 'left' | 'right';\n\ninterface DayPosition {\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n}\n\nfunction getDirection(key: KeyboardEvent['key']): Direction | null {\n switch (key) {\n case 'ArrowDown':\n return 'down';\n case 'ArrowUp':\n return 'up';\n case 'ArrowRight':\n return 'right';\n case 'ArrowLeft':\n return 'left';\n default:\n return null;\n }\n}\n\nfunction getControlsSize(controlsRef: YearViewControlsRef): number[][] | null {\n if (!controlsRef.current) {\n return null;\n }\n return controlsRef.current.map((month) =>\n month ? month.map((week) => (week ? week.length : 0)) : []\n );\n}\n\ninterface GetNextPositionInput {\n direction: Direction;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n size: number[][];\n}\n\nfunction getNextPosition({\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n}: GetNextPositionInput): DayPosition | null {\n const currentMonthSize = size[monthIndex];\n if (!currentMonthSize) {\n return null;\n }\n\n switch (direction) {\n case 'up': {\n if (weekIndex === 0) {\n if (monthIndex === 0) {\n return null;\n }\n const prevMonthSize = size[monthIndex - 1];\n if (!prevMonthSize || prevMonthSize.length === 0) {\n return null;\n }\n\n const lastWeekIndex = prevMonthSize.length - 1;\n const clampedDayIndex = Math.min(dayIndex, prevMonthSize[lastWeekIndex] - 1);\n return {\n monthIndex: monthIndex - 1,\n weekIndex: lastWeekIndex,\n dayIndex: clampedDayIndex,\n };\n }\n\n const prevWeekSize = currentMonthSize[weekIndex - 1];\n const clampedDayIndex = Math.min(dayIndex, prevWeekSize - 1);\n return {\n monthIndex,\n weekIndex: weekIndex - 1,\n dayIndex: clampedDayIndex,\n };\n }\n\n case 'down': {\n if (weekIndex === currentMonthSize.length - 1) {\n if (monthIndex === size.length - 1) {\n return null;\n }\n const nextMonthSize = size[monthIndex + 1];\n if (!nextMonthSize || nextMonthSize.length === 0) {\n return null;\n }\n\n const clampedDayIndex = Math.min(dayIndex, nextMonthSize[0] - 1);\n return {\n monthIndex: monthIndex + 1,\n weekIndex: 0,\n dayIndex: clampedDayIndex,\n };\n }\n\n const nextWeekSize = currentMonthSize[weekIndex + 1];\n const clampedDayIndex = Math.min(dayIndex, nextWeekSize - 1);\n return {\n monthIndex,\n weekIndex: weekIndex + 1,\n dayIndex: clampedDayIndex,\n };\n }\n\n case 'left': {\n if (dayIndex === 0) {\n if (weekIndex === 0) {\n if (monthIndex === 0) {\n return null;\n }\n const prevMonthSize = size[monthIndex - 1];\n if (!prevMonthSize || prevMonthSize.length === 0) {\n return null;\n }\n const lastWeekIndex = prevMonthSize.length - 1;\n return {\n monthIndex: monthIndex - 1,\n weekIndex: lastWeekIndex,\n dayIndex: prevMonthSize[lastWeekIndex] - 1,\n };\n }\n\n return {\n monthIndex,\n weekIndex: weekIndex - 1,\n dayIndex: currentMonthSize[weekIndex - 1] - 1,\n };\n }\n\n return {\n monthIndex,\n weekIndex,\n dayIndex: dayIndex - 1,\n };\n }\n\n case 'right': {\n const currentWeekSize = currentMonthSize[weekIndex];\n\n if (dayIndex === currentWeekSize - 1) {\n if (weekIndex === currentMonthSize.length - 1) {\n if (monthIndex === size.length - 1) {\n return null;\n }\n const nextMonthSize = size[monthIndex + 1];\n if (!nextMonthSize || nextMonthSize.length === 0) {\n return null;\n }\n return {\n monthIndex: monthIndex + 1,\n weekIndex: 0,\n dayIndex: 0,\n };\n }\n\n return {\n monthIndex,\n weekIndex: weekIndex + 1,\n dayIndex: 0,\n };\n }\n\n return {\n monthIndex,\n weekIndex,\n dayIndex: dayIndex + 1,\n };\n }\n\n default:\n return null;\n }\n}\n\ninterface FocusOnNextControlInput {\n controlsRef: YearViewControlsRef;\n direction: Direction;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n size: number[][];\n}\n\nfunction focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n}: FocusOnNextControlInput): void {\n const nextPosition = getNextPosition({\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n });\n\n if (!nextPosition) {\n return;\n }\n\n const controlToFocus =\n controlsRef.current?.[nextPosition.monthIndex]?.[nextPosition.weekIndex]?.[\n nextPosition.dayIndex\n ];\n\n if (!controlToFocus) {\n return;\n }\n\n if (\n controlToFocus.disabled ||\n controlToFocus.getAttribute('data-hidden') ||\n controlToFocus.getAttribute('data-outside') ||\n controlToFocus.getAttribute('data-day-placeholder')\n ) {\n focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex: nextPosition.monthIndex,\n weekIndex: nextPosition.weekIndex,\n dayIndex: nextPosition.dayIndex,\n size,\n });\n } else {\n controlToFocus.focus();\n }\n}\n\nexport interface HandleYearViewKeyDownInput {\n controlsRef: YearViewControlsRef;\n monthIndex: number;\n weekIndex: number;\n dayIndex: number;\n event: React.KeyboardEvent<HTMLButtonElement>;\n}\n\nexport function handleYearViewKeyDown({\n controlsRef,\n monthIndex,\n weekIndex,\n dayIndex,\n event,\n}: HandleYearViewKeyDownInput): void {\n const direction = getDirection(event.key);\n\n if (direction) {\n event.preventDefault();\n\n const size = getControlsSize(controlsRef);\n\n if (!size) {\n return;\n }\n\n focusOnNextFocusableControl({\n controlsRef,\n direction,\n monthIndex,\n weekIndex,\n dayIndex,\n size,\n });\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-auto-scroll-on-drag.cjs","names":[],"sources":["../../src/hooks/use-auto-scroll-on-drag.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\nconst EDGE_THRESHOLD = 50;\nconst MAX_SCROLL_SPEED = 8;\n\ninterface UseAutoScrollOnDragOptions {\n viewportRef: React.RefObject<HTMLDivElement | null>;\n enabled: boolean;\n}\n\nexport function useAutoScrollOnDrag({ viewportRef, enabled }: UseAutoScrollOnDragOptions) {\n const rafId = useRef<number | null>(null);\n const scrollDirection = useRef<number>(0);\n\n const stopScroll = useEffectEvent(() => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n rafId.current = null;\n }\n scrollDirection.current = 0;\n });\n\n const startScroll = useEffectEvent(() => {\n if (rafId.current !== null) {\n return;\n }\n\n const tick = () => {\n const viewport = viewportRef.current;\n if (!viewport || scrollDirection.current === 0) {\n rafId.current = null;\n return;\n }\n\n viewport.scrollTop += scrollDirection.current;\n rafId.current = requestAnimationFrame(tick);\n };\n\n rafId.current = requestAnimationFrame(tick);\n });\n\n useEffect(() => {\n if (!enabled) {\n return undefined;\n }\n\n const viewport = viewportRef.current;\n if (!viewport) {\n return undefined;\n }\n\n const handleDragOver = (event: DragEvent) => {\n const rect = viewport.getBoundingClientRect();\n const distanceFromTop = event.clientY - rect.top;\n const distanceFromBottom = rect.bottom - event.clientY;\n\n if (distanceFromTop < EDGE_THRESHOLD) {\n const proximity = 1 - distanceFromTop / EDGE_THRESHOLD;\n scrollDirection.current = -Math.ceil(proximity * MAX_SCROLL_SPEED);\n startScroll();\n } else if (distanceFromBottom < EDGE_THRESHOLD) {\n const proximity = 1 - distanceFromBottom / EDGE_THRESHOLD;\n scrollDirection.current = Math.ceil(proximity * MAX_SCROLL_SPEED);\n startScroll();\n } else {\n stopScroll();\n }\n };\n\n const handleDragEnd = () => {\n stopScroll();\n };\n\n viewport.addEventListener('dragover', handleDragOver);\n viewport.addEventListener('dragleave', handleDragEnd);\n viewport.addEventListener('dragend', handleDragEnd);\n viewport.addEventListener('drop', handleDragEnd);\n\n return () => {\n stopScroll();\n viewport.removeEventListener('dragover', handleDragOver);\n viewport.removeEventListener('dragleave', handleDragEnd);\n viewport.removeEventListener('dragend', handleDragEnd);\n viewport.removeEventListener('drop', handleDragEnd);\n };\n }, [enabled, viewportRef]);\n}\n"],"mappings":";;;AAEA,MAAM,iBAAiB;AACvB,MAAM,mBAAmB;AAOzB,SAAgB,oBAAoB,EAAE,aAAa,WAAuC;CACxF,MAAM,SAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"use-auto-scroll-on-drag.cjs","names":[],"sources":["../../src/hooks/use-auto-scroll-on-drag.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef } from 'react';\n\nconst EDGE_THRESHOLD = 50;\nconst MAX_SCROLL_SPEED = 8;\n\ninterface UseAutoScrollOnDragOptions {\n viewportRef: React.RefObject<HTMLDivElement | null>;\n enabled: boolean;\n}\n\nexport function useAutoScrollOnDrag({ viewportRef, enabled }: UseAutoScrollOnDragOptions) {\n const rafId = useRef<number | null>(null);\n const scrollDirection = useRef<number>(0);\n\n const stopScroll = useEffectEvent(() => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n rafId.current = null;\n }\n scrollDirection.current = 0;\n });\n\n const startScroll = useEffectEvent(() => {\n if (rafId.current !== null) {\n return;\n }\n\n const tick = () => {\n const viewport = viewportRef.current;\n if (!viewport || scrollDirection.current === 0) {\n rafId.current = null;\n return;\n }\n\n viewport.scrollTop += scrollDirection.current;\n rafId.current = requestAnimationFrame(tick);\n };\n\n rafId.current = requestAnimationFrame(tick);\n });\n\n useEffect(() => {\n if (!enabled) {\n return undefined;\n }\n\n const viewport = viewportRef.current;\n if (!viewport) {\n return undefined;\n }\n\n const handleDragOver = (event: DragEvent) => {\n const rect = viewport.getBoundingClientRect();\n const distanceFromTop = event.clientY - rect.top;\n const distanceFromBottom = rect.bottom - event.clientY;\n\n if (distanceFromTop < EDGE_THRESHOLD) {\n const proximity = 1 - distanceFromTop / EDGE_THRESHOLD;\n scrollDirection.current = -Math.ceil(proximity * MAX_SCROLL_SPEED);\n startScroll();\n } else if (distanceFromBottom < EDGE_THRESHOLD) {\n const proximity = 1 - distanceFromBottom / EDGE_THRESHOLD;\n scrollDirection.current = Math.ceil(proximity * MAX_SCROLL_SPEED);\n startScroll();\n } else {\n stopScroll();\n }\n };\n\n const handleDragEnd = () => {\n stopScroll();\n };\n\n viewport.addEventListener('dragover', handleDragOver);\n viewport.addEventListener('dragleave', handleDragEnd);\n viewport.addEventListener('dragend', handleDragEnd);\n viewport.addEventListener('drop', handleDragEnd);\n\n return () => {\n stopScroll();\n viewport.removeEventListener('dragover', handleDragOver);\n viewport.removeEventListener('dragleave', handleDragEnd);\n viewport.removeEventListener('dragend', handleDragEnd);\n viewport.removeEventListener('drop', handleDragEnd);\n };\n }, [enabled, viewportRef]);\n}\n"],"mappings":";;;AAEA,MAAM,iBAAiB;AACvB,MAAM,mBAAmB;AAOzB,SAAgB,oBAAoB,EAAE,aAAa,WAAuC;CACxF,MAAM,SAAA,GAAA,MAAA,OAAA,CAA8B,IAAI;CACxC,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAiC,CAAC;CAExC,MAAM,cAAA,GAAA,MAAA,eAAA,OAAkC;EACtC,IAAI,MAAM,YAAY,MAAM;GAC1B,qBAAqB,MAAM,OAAO;GAClC,MAAM,UAAU;EAClB;EACA,gBAAgB,UAAU;CAC5B,CAAC;CAED,MAAM,eAAA,GAAA,MAAA,eAAA,OAAmC;EACvC,IAAI,MAAM,YAAY,MACpB;EAGF,MAAM,aAAa;GACjB,MAAM,WAAW,YAAY;GAC7B,IAAI,CAAC,YAAY,gBAAgB,YAAY,GAAG;IAC9C,MAAM,UAAU;IAChB;GACF;GAEA,SAAS,aAAa,gBAAgB;GACtC,MAAM,UAAU,sBAAsB,IAAI;EAC5C;EAEA,MAAM,UAAU,sBAAsB,IAAI;CAC5C,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,SACH;EAGF,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UACH;EAGF,MAAM,kBAAkB,UAAqB;GAC3C,MAAM,OAAO,SAAS,sBAAsB;GAC5C,MAAM,kBAAkB,MAAM,UAAU,KAAK;GAC7C,MAAM,qBAAqB,KAAK,SAAS,MAAM;GAE/C,IAAI,kBAAkB,gBAAgB;IACpC,MAAM,YAAY,IAAI,kBAAkB;IACxC,gBAAgB,UAAU,CAAC,KAAK,KAAK,YAAY,gBAAgB;IACjE,YAAY;GACd,OAAO,IAAI,qBAAqB,gBAAgB;IAC9C,MAAM,YAAY,IAAI,qBAAqB;IAC3C,gBAAgB,UAAU,KAAK,KAAK,YAAY,gBAAgB;IAChE,YAAY;GACd,OACE,WAAW;EAEf;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,SAAS,iBAAiB,YAAY,cAAc;EACpD,SAAS,iBAAiB,aAAa,aAAa;EACpD,SAAS,iBAAiB,WAAW,aAAa;EAClD,SAAS,iBAAiB,QAAQ,aAAa;EAE/C,aAAa;GACX,WAAW;GACX,SAAS,oBAAoB,YAAY,cAAc;GACvD,SAAS,oBAAoB,aAAa,aAAa;GACvD,SAAS,oBAAoB,WAAW,aAAa;GACrD,SAAS,oBAAoB,QAAQ,aAAa;EACpD;CACF,GAAG,CAAC,SAAS,WAAW,CAAC;AAC3B"}
|
|
@@ -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, useEffectEvent, 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 stableOnEventDrop = useEffectEvent(onEventDrop || (() => {}));\n const stableOnEventDragStart = useEffectEvent(onEventDragStart || (() => {}));\n const stableOnEventDragEnd = useEffectEvent(onEventDragEnd || (() => {}));\n const stableOnExternalDrop = useEffectEvent(onExternalDrop || (() => {}));\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 stableOnEventDragEnd();\n }, [dragState]);\n\n const handleDragStart = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled || mode === 'static') {\n return;\n }\n dragState.startDrag(event);\n stableOnEventDragStart(event);\n },\n [enabled, mode, dragState]\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 stableOnEventDrop({\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 stableOnExternalDrop(event, target);\n setDropTarget(null);\n return;\n }\n\n setDropTarget(null);\n },\n [\n enabled,\n dragState.state,\n onEventDrop,\n onExternalDrop,\n calculateDropTarget,\n handleDragEnd,\n stableOnEventDrop,\n stableOnExternalDrop,\n ]\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,qBAAA,GAAA,MAAA,
|
|
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, useEffectEvent, 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 stableOnEventDrop = useEffectEvent(onEventDrop || (() => {}));\n const stableOnEventDragStart = useEffectEvent(onEventDragStart || (() => {}));\n const stableOnEventDragEnd = useEffectEvent(onEventDragEnd || (() => {}));\n const stableOnExternalDrop = useEffectEvent(onExternalDrop || (() => {}));\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 stableOnEventDragEnd();\n }, [dragState]);\n\n const handleDragStart = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled || mode === 'static') {\n return;\n }\n dragState.startDrag(event);\n stableOnEventDragStart(event);\n },\n [enabled, mode, dragState]\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 stableOnEventDrop({\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 stableOnExternalDrop(event, target);\n setDropTarget(null);\n return;\n }\n\n setDropTarget(null);\n },\n [\n enabled,\n dragState.state,\n onEventDrop,\n onExternalDrop,\n calculateDropTarget,\n handleDragEnd,\n stableOnEventDrop,\n stableOnExternalDrop,\n ]\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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-drag-state.cjs","names":[],"sources":["../../src/hooks/use-drag-state.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { DateStringValue, ScheduleEventData } from '../types';\n\nexport interface DropTarget {\n /** Target date in YYYY-MM-DD format */\n date: DateStringValue;\n\n /** Target time in HH:mm:ss format (for DayView/WeekView) */\n time?: string;\n\n /** Target slot index (for DayView/WeekView) */\n slotIndex?: number;\n}\n\nexport interface DragState {\n /** Whether an event is currently being dragged */\n isDragging: boolean;\n\n /** ID of the event being dragged */\n draggedEventId: string | number | null;\n\n /** The event being dragged */\n draggedEvent: ScheduleEventData | null;\n\n /** Current drop target information */\n dropTarget: DropTarget | null;\n}\n\nexport interface UseDragStateReturn {\n /** Current drag state */\n state: DragState;\n\n /** Start dragging an event */\n startDrag: (event: ScheduleEventData) => void;\n\n /** End dragging */\n endDrag: () => void;\n\n /** Set the current drop target */\n setDropTarget: (target: DropTarget | null) => void;\n\n /** Clear the drop target */\n clearDropTarget: () => void;\n}\n\nconst initialState: DragState = {\n isDragging: false,\n draggedEventId: null,\n draggedEvent: null,\n dropTarget: null,\n};\n\nexport function useDragState(): UseDragStateReturn {\n const [state, setState] = useState<DragState>(initialState);\n\n const startDrag = useCallback((event: ScheduleEventData) => {\n setState({\n isDragging: true,\n draggedEventId: event.id,\n draggedEvent: event,\n dropTarget: null,\n });\n }, []);\n\n const endDrag = useCallback(() => {\n setState(initialState);\n }, []);\n\n const setDropTarget = useCallback((target: DropTarget | null) => {\n setState((prev) => ({\n ...prev,\n dropTarget: target,\n }));\n }, []);\n\n const clearDropTarget = useCallback(() => {\n setState((prev) => ({\n ...prev,\n dropTarget: null,\n }));\n }, []);\n\n return {\n state,\n startDrag,\n endDrag,\n setDropTarget,\n clearDropTarget,\n };\n}\n"],"mappings":";;;AA6CA,MAAM,eAA0B;CAC9B,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,YAAY;AACd;AAEA,SAAgB,eAAmC;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"use-drag-state.cjs","names":[],"sources":["../../src/hooks/use-drag-state.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { DateStringValue, ScheduleEventData } from '../types';\n\nexport interface DropTarget {\n /** Target date in YYYY-MM-DD format */\n date: DateStringValue;\n\n /** Target time in HH:mm:ss format (for DayView/WeekView) */\n time?: string;\n\n /** Target slot index (for DayView/WeekView) */\n slotIndex?: number;\n}\n\nexport interface DragState {\n /** Whether an event is currently being dragged */\n isDragging: boolean;\n\n /** ID of the event being dragged */\n draggedEventId: string | number | null;\n\n /** The event being dragged */\n draggedEvent: ScheduleEventData | null;\n\n /** Current drop target information */\n dropTarget: DropTarget | null;\n}\n\nexport interface UseDragStateReturn {\n /** Current drag state */\n state: DragState;\n\n /** Start dragging an event */\n startDrag: (event: ScheduleEventData) => void;\n\n /** End dragging */\n endDrag: () => void;\n\n /** Set the current drop target */\n setDropTarget: (target: DropTarget | null) => void;\n\n /** Clear the drop target */\n clearDropTarget: () => void;\n}\n\nconst initialState: DragState = {\n isDragging: false,\n draggedEventId: null,\n draggedEvent: null,\n dropTarget: null,\n};\n\nexport function useDragState(): UseDragStateReturn {\n const [state, setState] = useState<DragState>(initialState);\n\n const startDrag = useCallback((event: ScheduleEventData) => {\n setState({\n isDragging: true,\n draggedEventId: event.id,\n draggedEvent: event,\n dropTarget: null,\n });\n }, []);\n\n const endDrag = useCallback(() => {\n setState(initialState);\n }, []);\n\n const setDropTarget = useCallback((target: DropTarget | null) => {\n setState((prev) => ({\n ...prev,\n dropTarget: target,\n }));\n }, []);\n\n const clearDropTarget = useCallback(() => {\n setState((prev) => ({\n ...prev,\n dropTarget: null,\n }));\n }, []);\n\n return {\n state,\n startDrag,\n endDrag,\n setDropTarget,\n clearDropTarget,\n };\n}\n"],"mappings":";;;AA6CA,MAAM,eAA0B;CAC9B,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,YAAY;AACd;AAEA,SAAgB,eAAmC;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAAgC,YAAY;CA6B1D,OAAO;EACL;EACA,YAAA,GAAA,MAAA,YAAA,EA7B6B,UAA6B;GAC1D,SAAS;IACP,YAAY;IACZ,gBAAgB,MAAM;IACtB,cAAc;IACd,YAAY;GACd,CAAC;EACH,GAAG,CAAC,CAsBM;EACR,UAAA,GAAA,MAAA,YAAA,OArBgC;GAChC,SAAS,YAAY;EACvB,GAAG,CAAC,CAmBI;EACN,gBAAA,GAAA,MAAA,YAAA,EAlBiC,WAA8B;GAC/D,UAAU,UAAU;IAClB,GAAG;IACH,YAAY;GACd,EAAE;EACJ,GAAG,CAAC,CAaU;EACZ,kBAAA,GAAA,MAAA,YAAA,OAZwC;GACxC,UAAU,UAAU;IAClB,GAAG;IACH,YAAY;GACd,EAAE;EACJ,GAAG,CAAC,CAOY;CAChB;AACF"}
|
|
@@ -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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"}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_clamp_interval_minutes = require("../utils/clamp-interval-minutes/clamp-interval-minutes.cjs");
|
|
4
|
+
const require_parse_time_string = require("../utils/parse-time-string/parse-time-string.cjs");
|
|
5
|
+
const require_get_day_relative_percent = require("../utils/get-day-relative-percent/get-day-relative-percent.cjs");
|
|
6
|
+
let dayjs = require("dayjs");
|
|
7
|
+
dayjs = require_runtime.__toESM(dayjs);
|
|
8
|
+
let react = require("react");
|
|
9
|
+
//#region packages/@mantine/schedule/src/hooks/use-horizontal-event-resize.ts
|
|
10
|
+
function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, onEventResize, canResizeEvent }) {
|
|
11
|
+
const [resizeState, setResizeState] = (0, react.useState)(null);
|
|
12
|
+
const resizeRef = (0, react.useRef)(null);
|
|
13
|
+
const justResizedRef = (0, react.useRef)(false);
|
|
14
|
+
const stableOnEventResize = (0, react.useEffectEvent)(onEventResize || (() => {}));
|
|
15
|
+
const parsedStartTime = require_parse_time_string.parseTimeString(startTime);
|
|
16
|
+
const parsedEndTime = require_parse_time_string.parseTimeString(endTime);
|
|
17
|
+
const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
|
|
18
|
+
const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
|
|
19
|
+
const clampedInterval = require_clamp_interval_minutes.clampIntervalMinutes(intervalMinutes);
|
|
20
|
+
const literalRange = endMinutes - startMinutes;
|
|
21
|
+
const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;
|
|
22
|
+
const minWidthPercent = clampedInterval / totalMinutes * 100;
|
|
23
|
+
const clampAndSnap = (0, react.useCallback)((minutes) => {
|
|
24
|
+
const snapped = Math.round(minutes / clampedInterval) * clampedInterval;
|
|
25
|
+
return Math.max(0, Math.min(literalRange, snapped));
|
|
26
|
+
}, [literalRange, clampedInterval]);
|
|
27
|
+
const percentToDateTime = (0, react.useCallback)((percent, eventDate) => {
|
|
28
|
+
const totalMins = startMinutes + clampAndSnap(percent / 100 * totalMinutes);
|
|
29
|
+
const hours = Math.floor(totalMins / 60);
|
|
30
|
+
const mins = totalMins % 60;
|
|
31
|
+
return `${eventDate} ${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}:00`;
|
|
32
|
+
}, [
|
|
33
|
+
totalMinutes,
|
|
34
|
+
startMinutes,
|
|
35
|
+
clampAndSnap
|
|
36
|
+
]);
|
|
37
|
+
const snapPercent = (0, react.useCallback)((percent) => {
|
|
38
|
+
return clampAndSnap(percent / 100 * totalMinutes) / totalMinutes * 100;
|
|
39
|
+
}, [totalMinutes, clampAndSnap]);
|
|
40
|
+
const handleResizeStart = (0, react.useCallback)(({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex = 0, dayCount = 1, pointerEvent }) => {
|
|
41
|
+
if (!enabled || mode === "static") return;
|
|
42
|
+
pointerEvent.preventDefault();
|
|
43
|
+
pointerEvent.stopPropagation();
|
|
44
|
+
const state = {
|
|
45
|
+
eventId: event.id,
|
|
46
|
+
event,
|
|
47
|
+
edge,
|
|
48
|
+
container,
|
|
49
|
+
originalLeft,
|
|
50
|
+
originalWidth,
|
|
51
|
+
currentLeft: originalLeft,
|
|
52
|
+
currentWidth: originalWidth,
|
|
53
|
+
eventDate,
|
|
54
|
+
originalStart: (0, dayjs.default)(event.start).format("YYYY-MM-DD HH:mm:ss"),
|
|
55
|
+
originalEnd: (0, dayjs.default)(event.end).format("YYYY-MM-DD HH:mm:ss"),
|
|
56
|
+
dayIndex,
|
|
57
|
+
dayCount
|
|
58
|
+
};
|
|
59
|
+
resizeRef.current = state;
|
|
60
|
+
setResizeState(state);
|
|
61
|
+
}, [enabled, mode]);
|
|
62
|
+
const isResizing = resizeState !== null;
|
|
63
|
+
(0, react.useEffect)(() => {
|
|
64
|
+
if (!isResizing) return;
|
|
65
|
+
const savedUserSelect = document.body.style.userSelect;
|
|
66
|
+
const savedCursor = document.body.style.cursor;
|
|
67
|
+
document.body.style.userSelect = "none";
|
|
68
|
+
document.body.style.cursor = "ew-resize";
|
|
69
|
+
const handlePointerMove = (e) => {
|
|
70
|
+
const state = resizeRef.current;
|
|
71
|
+
if (!state) return;
|
|
72
|
+
const containerRect = state.container.getBoundingClientRect();
|
|
73
|
+
const snappedPercent = snapPercent(require_get_day_relative_percent.getDayRelativePercent({
|
|
74
|
+
clientX: e.clientX,
|
|
75
|
+
containerLeft: containerRect.left,
|
|
76
|
+
containerWidth: containerRect.width,
|
|
77
|
+
dayIndex: state.dayIndex,
|
|
78
|
+
dayCount: state.dayCount
|
|
79
|
+
}));
|
|
80
|
+
let newLeft = state.originalLeft;
|
|
81
|
+
let newWidth = state.originalWidth;
|
|
82
|
+
if (state.edge === "end") newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);
|
|
83
|
+
else {
|
|
84
|
+
const originalRight = state.originalLeft + state.originalWidth;
|
|
85
|
+
newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);
|
|
86
|
+
newWidth = originalRight - newLeft;
|
|
87
|
+
}
|
|
88
|
+
resizeRef.current = {
|
|
89
|
+
...state,
|
|
90
|
+
currentLeft: newLeft,
|
|
91
|
+
currentWidth: newWidth
|
|
92
|
+
};
|
|
93
|
+
setResizeState(resizeRef.current);
|
|
94
|
+
};
|
|
95
|
+
const handlePointerUp = () => {
|
|
96
|
+
const state = resizeRef.current;
|
|
97
|
+
if (state) {
|
|
98
|
+
if (state.currentLeft !== state.originalLeft || state.currentWidth !== state.originalWidth) {
|
|
99
|
+
let newStart;
|
|
100
|
+
let newEnd;
|
|
101
|
+
if (state.edge === "start") {
|
|
102
|
+
newStart = percentToDateTime(state.currentLeft, state.eventDate);
|
|
103
|
+
newEnd = state.originalEnd;
|
|
104
|
+
} else {
|
|
105
|
+
newStart = state.originalStart;
|
|
106
|
+
newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);
|
|
107
|
+
}
|
|
108
|
+
stableOnEventResize({
|
|
109
|
+
eventId: state.eventId,
|
|
110
|
+
newStart,
|
|
111
|
+
newEnd,
|
|
112
|
+
event: state.event
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
resizeRef.current = null;
|
|
117
|
+
setResizeState(null);
|
|
118
|
+
justResizedRef.current = true;
|
|
119
|
+
requestAnimationFrame(() => {
|
|
120
|
+
justResizedRef.current = false;
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
document.addEventListener("pointermove", handlePointerMove);
|
|
124
|
+
document.addEventListener("pointerup", handlePointerUp);
|
|
125
|
+
return () => {
|
|
126
|
+
document.body.style.userSelect = savedUserSelect;
|
|
127
|
+
document.body.style.cursor = savedCursor;
|
|
128
|
+
document.removeEventListener("pointermove", handlePointerMove);
|
|
129
|
+
document.removeEventListener("pointerup", handlePointerUp);
|
|
130
|
+
};
|
|
131
|
+
}, [isResizing]);
|
|
132
|
+
const getResizePosition = (0, react.useCallback)((eventId) => {
|
|
133
|
+
if (!resizeState || resizeState.eventId !== eventId) return null;
|
|
134
|
+
return {
|
|
135
|
+
left: resizeState.currentLeft,
|
|
136
|
+
width: resizeState.currentWidth
|
|
137
|
+
};
|
|
138
|
+
}, [resizeState]);
|
|
139
|
+
const isResizableEvent = (0, react.useCallback)((event) => {
|
|
140
|
+
if (!enabled || mode === "static" || event.display === "background") return false;
|
|
141
|
+
return canResizeEvent ? canResizeEvent(event) : true;
|
|
142
|
+
}, [
|
|
143
|
+
enabled,
|
|
144
|
+
mode,
|
|
145
|
+
canResizeEvent
|
|
146
|
+
]);
|
|
147
|
+
const wasResizing = (0, react.useCallback)(() => justResizedRef.current, []);
|
|
148
|
+
return {
|
|
149
|
+
handleResizeStart,
|
|
150
|
+
isResizing,
|
|
151
|
+
resizingEventId: resizeState?.eventId ?? null,
|
|
152
|
+
resizingEdge: resizeState?.edge ?? null,
|
|
153
|
+
getResizePosition,
|
|
154
|
+
isResizableEvent,
|
|
155
|
+
wasResizing
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
//#endregion
|
|
159
|
+
exports.useHorizontalEventResize = useHorizontalEventResize;
|
|
160
|
+
|
|
161
|
+
//# sourceMappingURL=use-horizontal-event-resize.cjs.map
|
|
@@ -0,0 +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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-slot-drag-select.cjs","names":[],"sources":["../../src/hooks/use-slot-drag-select.ts"],"sourcesContent":["import { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\n\ninterface DragState {\n group: string;\n startIndex: number;\n currentIndex: number;\n}\n\ninterface SelectedRange {\n group: string;\n start: number;\n end: number;\n}\n\ninterface UseSlotDragSelectInput {\n enabled?: boolean;\n onDragEnd?: (startIndex: number, endIndex: number, group: string) => void;\n}\n\nexport function useSlotDragSelect({ enabled = true, onDragEnd }: UseSlotDragSelectInput) {\n const [selectedRange, setSelectedRange] = useState<SelectedRange | null>(null);\n const dragRef = useRef<DragState | null>(null);\n const stableOnDragEnd = useEffectEvent(onDragEnd || (() => {}));\n\n const handleSlotPointerDown = useCallback(\n (_event: React.PointerEvent<HTMLButtonElement>, index: number, group: string) => {\n if (!enabled) {\n return;\n }\n dragRef.current = { group, startIndex: index, currentIndex: index };\n setSelectedRange({ group, start: index, end: index });\n },\n [enabled]\n );\n\n const isDragging = selectedRange !== null;\n\n useEffect(() => {\n if (!isDragging) {\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 if (!dragRef.current) {\n return;\n }\n\n const elements = document.elementsFromPoint(e.clientX, e.clientY);\n for (const el of elements) {\n const indexAttr = (el as HTMLElement).getAttribute?.('data-drag-slot-index');\n const groupAttr = (el as HTMLElement).getAttribute?.('data-drag-slot-group');\n if (indexAttr != null && groupAttr != null) {\n if (groupAttr === dragRef.current.group) {\n const newIndex = Number(indexAttr);\n if (!isNaN(newIndex) && newIndex !== dragRef.current.currentIndex) {\n dragRef.current.currentIndex = newIndex;\n setSelectedRange({\n group: groupAttr,\n start: Math.min(dragRef.current.startIndex, newIndex),\n end: Math.max(dragRef.current.startIndex, newIndex),\n });\n }\n }\n break;\n }\n }\n };\n\n const handlePointerUp = () => {\n if (dragRef.current) {\n const { startIndex, currentIndex, group } = dragRef.current;\n if (startIndex !== currentIndex) {\n stableOnDragEnd(\n Math.min(startIndex, currentIndex),\n Math.max(startIndex, currentIndex),\n group\n );\n }\n }\n dragRef.current = null;\n setSelectedRange(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 }, [isDragging]);\n\n const isSlotSelected = useCallback(\n (index: number, group: string): boolean => {\n if (!selectedRange || selectedRange.group !== group) {\n return false;\n }\n return index >= selectedRange.start && index <= selectedRange.end;\n },\n [selectedRange]\n );\n\n return {\n handleSlotPointerDown,\n isSlotSelected,\n isDragging,\n };\n}\n"],"mappings":";;;AAmBA,SAAgB,kBAAkB,EAAE,UAAU,MAAM,aAAqC;CACvF,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"use-slot-drag-select.cjs","names":[],"sources":["../../src/hooks/use-slot-drag-select.ts"],"sourcesContent":["import { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\n\ninterface DragState {\n group: string;\n startIndex: number;\n currentIndex: number;\n}\n\ninterface SelectedRange {\n group: string;\n start: number;\n end: number;\n}\n\ninterface UseSlotDragSelectInput {\n enabled?: boolean;\n onDragEnd?: (startIndex: number, endIndex: number, group: string) => void;\n}\n\nexport function useSlotDragSelect({ enabled = true, onDragEnd }: UseSlotDragSelectInput) {\n const [selectedRange, setSelectedRange] = useState<SelectedRange | null>(null);\n const dragRef = useRef<DragState | null>(null);\n const stableOnDragEnd = useEffectEvent(onDragEnd || (() => {}));\n\n const handleSlotPointerDown = useCallback(\n (_event: React.PointerEvent<HTMLButtonElement>, index: number, group: string) => {\n if (!enabled) {\n return;\n }\n dragRef.current = { group, startIndex: index, currentIndex: index };\n setSelectedRange({ group, start: index, end: index });\n },\n [enabled]\n );\n\n const isDragging = selectedRange !== null;\n\n useEffect(() => {\n if (!isDragging) {\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 if (!dragRef.current) {\n return;\n }\n\n const elements = document.elementsFromPoint(e.clientX, e.clientY);\n for (const el of elements) {\n const indexAttr = (el as HTMLElement).getAttribute?.('data-drag-slot-index');\n const groupAttr = (el as HTMLElement).getAttribute?.('data-drag-slot-group');\n if (indexAttr != null && groupAttr != null) {\n if (groupAttr === dragRef.current.group) {\n const newIndex = Number(indexAttr);\n if (!isNaN(newIndex) && newIndex !== dragRef.current.currentIndex) {\n dragRef.current.currentIndex = newIndex;\n setSelectedRange({\n group: groupAttr,\n start: Math.min(dragRef.current.startIndex, newIndex),\n end: Math.max(dragRef.current.startIndex, newIndex),\n });\n }\n }\n break;\n }\n }\n };\n\n const handlePointerUp = () => {\n if (dragRef.current) {\n const { startIndex, currentIndex, group } = dragRef.current;\n if (startIndex !== currentIndex) {\n stableOnDragEnd(\n Math.min(startIndex, currentIndex),\n Math.max(startIndex, currentIndex),\n group\n );\n }\n }\n dragRef.current = null;\n setSelectedRange(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 }, [isDragging]);\n\n const isSlotSelected = useCallback(\n (index: number, group: string): boolean => {\n if (!selectedRange || selectedRange.group !== group) {\n return false;\n }\n return index >= selectedRange.start && index <= selectedRange.end;\n },\n [selectedRange]\n );\n\n return {\n handleSlotPointerDown,\n isSlotSelected,\n isDragging,\n };\n}\n"],"mappings":";;;AAmBA,SAAgB,kBAAkB,EAAE,UAAU,MAAM,aAAqC;CACvF,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,SAAA,CAAmD,IAAI;CAC7E,MAAM,WAAA,GAAA,MAAA,OAAA,CAAmC,IAAI;CAC7C,MAAM,mBAAA,GAAA,MAAA,eAAA,CAAiC,oBAAoB,CAAC,EAAE;CAE9D,MAAM,yBAAA,GAAA,MAAA,YAAA,EACH,QAA+C,OAAe,UAAkB;EAC/E,IAAI,CAAC,SACH;EAEF,QAAQ,UAAU;GAAE;GAAO,YAAY;GAAO,cAAc;EAAM;EAClE,iBAAiB;GAAE;GAAO,OAAO;GAAO,KAAK;EAAM,CAAC;CACtD,GACA,CAAC,OAAO,CACV;CAEA,MAAM,aAAa,kBAAkB;CAErC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,YACH;EAGF,MAAM,kBAAkB,SAAS,KAAK,MAAM;EAC5C,SAAS,KAAK,MAAM,aAAa;EAEjC,MAAM,qBAAqB,MAAoB;GAC7C,IAAI,CAAC,QAAQ,SACX;GAGF,MAAM,WAAW,SAAS,kBAAkB,EAAE,SAAS,EAAE,OAAO;GAChE,KAAK,MAAM,MAAM,UAAU;IACzB,MAAM,YAAa,GAAmB,eAAe,sBAAsB;IAC3E,MAAM,YAAa,GAAmB,eAAe,sBAAsB;IAC3E,IAAI,aAAa,QAAQ,aAAa,MAAM;KAC1C,IAAI,cAAc,QAAQ,QAAQ,OAAO;MACvC,MAAM,WAAW,OAAO,SAAS;MACjC,IAAI,CAAC,MAAM,QAAQ,KAAK,aAAa,QAAQ,QAAQ,cAAc;OACjE,QAAQ,QAAQ,eAAe;OAC/B,iBAAiB;QACf,OAAO;QACP,OAAO,KAAK,IAAI,QAAQ,QAAQ,YAAY,QAAQ;QACpD,KAAK,KAAK,IAAI,QAAQ,QAAQ,YAAY,QAAQ;OACpD,CAAC;MACH;KACF;KACA;IACF;GACF;EACF;EAEA,MAAM,wBAAwB;GAC5B,IAAI,QAAQ,SAAS;IACnB,MAAM,EAAE,YAAY,cAAc,UAAU,QAAQ;IACpD,IAAI,eAAe,cACjB,gBACE,KAAK,IAAI,YAAY,YAAY,GACjC,KAAK,IAAI,YAAY,YAAY,GACjC,KACF;GAEJ;GACA,QAAQ,UAAU;GAClB,iBAAiB,IAAI;EACvB;EAEA,SAAS,iBAAiB,eAAe,iBAAiB;EAC1D,SAAS,iBAAiB,aAAa,eAAe;EAEtD,aAAa;GACX,SAAS,KAAK,MAAM,aAAa;GACjC,SAAS,oBAAoB,eAAe,iBAAiB;GAC7D,SAAS,oBAAoB,aAAa,eAAe;EAC3D;CACF,GAAG,CAAC,UAAU,CAAC;CAYf,OAAO;EACL;EACA,iBAAA,GAAA,MAAA,YAAA,EAXC,OAAe,UAA2B;GACzC,IAAI,CAAC,iBAAiB,cAAc,UAAU,OAC5C,OAAO;GAET,OAAO,SAAS,cAAc,SAAS,SAAS,cAAc;EAChE,GACA,CAAC,aAAa,CAKD;EACb;CACF;AACF"}
|