@mantine/schedule 9.5.1-alpha.0 → 9.5.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/YearView/YearView.cjs +2 -1
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs +9 -9
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +2 -1
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs +10 -10
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/lib/components/YearView/YearViewMonth.d.ts +9 -2
- package/lib/components/YearView/index.d.ts +1 -0
- package/package.json +4 -4
|
@@ -31,7 +31,7 @@ const defaultProps = {
|
|
|
31
31
|
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius }) => ({ yearView: { "--year-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0 } }));
|
|
32
32
|
const YearView = (0, _mantine_core.factory)((_props) => {
|
|
33
33
|
const props = (0, _mantine_core.useProps)("YearView", defaultProps, _props);
|
|
34
|
-
const { date, onDateChange, events, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, onMonthClick, onDayClick, onWeekNumberClick, getDayProps, getWeekNumberProps, highlightToday, labels, withOutsideDays, withHeader, monthYearSelectProps, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, __staticSelector, classNames, className, style, styles, unstyled, vars, attributes, radius, mode, recurrenceExpansionLimit, ...others } = props;
|
|
34
|
+
const { date, onDateChange, events, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, onMonthClick, onDayClick, onWeekNumberClick, getDayProps, getWeekNumberProps, highlightToday, labels, withOutsideDays, renderDay, withHeader, monthYearSelectProps, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, __staticSelector, classNames, className, style, styles, unstyled, vars, attributes, radius, mode, recurrenceExpansionLimit, ...others } = props;
|
|
35
35
|
const ctx = (0, _mantine_dates.useDatesContext)();
|
|
36
36
|
const getStyles = (0, _mantine_core.useStyles)({
|
|
37
37
|
name: __staticSelector,
|
|
@@ -122,6 +122,7 @@ const YearView = (0, _mantine_core.factory)((_props) => {
|
|
|
122
122
|
groupedEvents,
|
|
123
123
|
mode,
|
|
124
124
|
withOutsideDays,
|
|
125
|
+
renderDay,
|
|
125
126
|
firstDayIndex: getFirstDayIndex(month),
|
|
126
127
|
__getDayRef: (weekIndex, dayIndex, node) => {
|
|
127
128
|
if (!Array.isArray(daysRef.current[currentMonthIndex])) daysRef.current[currentMonthIndex] = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearView.cjs","names":["getYearViewEvents","expandRecurringEvents","getHiddenWeekendColumns","getMonthDays","getVisibleWeekDays","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 { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\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 withWeekendDays: 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 withWeekendDays,\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 resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n });\n const columnsCount = 7 - hiddenColumns.length;\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: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = getVisibleWeekDays({\n week: weeks[weekIndex],\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\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 withWeekendDays={withWeekendDays}\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\n {...getStyles('yearView')}\n mod={{ static: mode === 'static', 'without-weekend-days': hiddenColumns.length > 0 }}\n __vars={hiddenColumns.length > 0 ? { '--year-view-columns': `${columnsCount}` } : undefined}\n {...others}\n >\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","getHiddenWeekendColumns","getMonthDays","getVisibleWeekDays","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 { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\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 withWeekendDays: 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 withWeekendDays,\n onMonthClick,\n onDayClick,\n onWeekNumberClick,\n getDayProps,\n getWeekNumberProps,\n highlightToday,\n labels,\n withOutsideDays,\n renderDay,\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 resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n });\n const columnsCount = 7 - hiddenColumns.length;\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: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = getVisibleWeekDays({\n week: weeks[weekIndex],\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\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 withWeekendDays={withWeekendDays}\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 renderDay={renderDay}\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\n {...getStyles('yearView')}\n mod={{ static: mode === 'static', 'without-weekend-days': hiddenColumns.length > 0 }}\n __vars={hiddenColumns.length > 0 ? { '--year-view-columns': `${columnsCount}` } : undefined}\n {...others}\n >\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":";;;;;;;;;;;;;;;;;;;;AA6GA,MAAM,eAAe;CACnB,kBAAkB;CAClB,kBAAkB;CAClB,cAAc;CACd,iBAAiB;CACjB,gBAAgB;CAChB,YAAY;CACZ,iBAAiB;CACjB,MAAM;AACR;AAEA,MAAM,gBAAA,GAAA,cAAA,mBAAA,EAAoD,QAAQ,EAAE,cAAc,EAChF,UAAU,EAAE,sBAAsB,WAAW,KAAA,KAAA,GAAA,cAAA,UAAA,CAAsB,MAAM,IAAI,KAAA,EAAU,EACzF,EAAE;AAEF,MAAa,YAAA,GAAA,cAAA,QAAA,EAAqC,WAAW;CAC3D,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,YAAY,cAAc,MAAM;CACvD,MAAM,EAEJ,MACA,cACA,QAGA,kBACA,iBACA,cACA,QACA,gBACA,eACA,aACA,iBACA,cACA,YACA,mBACA,aACA,oBACA,gBACA,QACA,iBACA,WAGA,YACA,sBACA,cACA,sBACA,kBACA,mBACA,iBAGA,kBACA,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,MACA,0BACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,gBAAA,CAAsB;CAE5B,MAAM,aAAA,GAAA,cAAA,UAAA,CAAuC;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,qBAAA,CAAyD;EACnF;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY;EACZ,QAAQ;EACR;EACA;EACA;CACF;CASA,MAAM,gBAAgBA,6BAAAA,kBAAkB;EAAE;EAAM,QAPzBC,gCAAAA,sBAAsB;GAC3C;GACA,aAAA,GAAA,MAAA,QAAA,CAAkB,IAAI,CAAC,CAAC,QAAQ,MAAM,CAAC,CAAC,OAAO;GAC/C,WAAA,GAAA,MAAA,QAAA,CAAgB,IAAI,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,OAAO;GAC3C,gBAAgB;EAClB,CAEqE;CAAE,CAAC;CAGxE,MAAM,WAAA,GAAA,MAAA,OAAA,CAA0C,CAAC,CAAC;CAElD,MAAM,yBAAyB,IAAI,kBAAkB,cAAc;CACnE,MAAM,sBAAsB,IAAI,eAAe,WAAW;CAC1D,MAAM,gBAAgBC,8BAAAA,wBAAwB;EAC5C,aAAa;EACb,gBAAgB;EAChB;CACF,CAAC;CACD,MAAM,eAAe,IAAI,cAAc;CAEvC,MAAM,oBAAoB,UAAuE;EAC/F,MAAM,QAAQC,uBAAAA,aAAa;GACzB,QAAA,GAAA,MAAA,QAAA,CAAa,KAAK,CAAC,CAAC,OAAO,YAAY;GACvC,gBAAgB;GAChB,iBAAiB;EACnB,CAAC;EAED,KAAK,IAAI,YAAY,GAAG,YAAY,MAAM,QAAQ,aAAa;GAC7D,MAAM,OAAOC,8BAAAA,mBAAmB;IAC9B,MAAM,MAAM;IACZ,aAAa;IACb;GACF,CAAC;GAED,KAAK,IAAI,WAAW,GAAG,WAAW,KAAK,QAAQ,YAAY;IACzD,MAAM,UAAU,KAAK;IACrB,IAAIC,sBAAAA,YAAY,SAAS,KAAK,GAC5B,OAAO;KAAE;KAAW;IAAS;GAEjC;EACF;CAGF;CAEA,IAAI,mBAAmB;CACvB,MAAM,SAASC,8BAAAA,oBAAAA,GAAAA,MAAAA,QAAAA,CAAyB,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC,CAAC,CAChE,KAAK,CAAC,CACN,KAAK,UAAU;EACd,MAAM,oBAAoB;EAC1B;EAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;GAES;GACI;GACO;GACD;GACH;GACN;GACQ;GAChB,eACE,mBACE,UAAA,GAAA,MAAA,QAAA,CAAe,IAAI,CAAC,CAAC,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;GAEjE;GACI;GACJ;GACO;GACN;GACF;GACO;GACH;GACD;GACT;GACW;GACN;GACX,eAAe,iBAAiB,KAAK;GACrC,cAAc,WAAW,UAAU,SAAS;IAC1C,IAAI,CAAC,MAAM,QAAQ,QAAQ,QAAQ,kBAAkB,GACnD,QAAQ,QAAQ,qBAAqB,CAAC;IAExC,IAAI,CAAC,MAAM,QAAQ,QAAQ,QAAQ,kBAAkB,CAAC,UAAU,GAC9D,QAAQ,QAAQ,kBAAkB,CAAC,aAAa,CAAC;IAEnD,QAAQ,QAAQ,kBAAkB,CAAC,UAAU,CAAC,YAAY;GAC5D;GACA,iBAAiB,OAAO,YAAY;IAClC,kCAAA,sBAAsB;KACpB,aAAa;KACb,YAAY;KACZ,WAAW,QAAQ;KACnB,UAAU,QAAQ;KAClB;IACF,CAAC;GACH;EACD,GA3CM,KA2CN;CAEL,CAAC;CAEH,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,KAAD;EACE,GAAI,UAAU,UAAU;EACxB,KAAK;GAAE,QAAQ,SAAS;GAAU,wBAAwB,cAAc,SAAS;EAAE;EACnF,QAAQ,cAAc,SAAS,IAAI,EAAE,uBAAuB,GAAG,eAAe,IAAI,KAAA;EAClF,GAAI;YAJN,CAMG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD;GACE,MAAK;GACL,oBAAoB;IAClB,gBAAgBC,uBAAAA,cAAAA,GAAAA,MAAAA,QAAAA,CAAmB,IAAI,CAAC,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,QAAQ,MAAM,CAAC;IAC5E,YAAYA,uBAAAA,cAAAA,GAAAA,MAAAA,QAAAA,CAAmB,IAAI,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,QAAQ,MAAM,CAAC;IACnE,aAAaA,uBAAAA,cAAAA,GAAAA,MAAAA,QAAAA,CAAmB,CAAC;GACnC;GACA,SAAS,EACP,iBAAiB;IACf;IACA,YAAY;IACZ,YAAA,GAAA,MAAA,QAAA,CAAiB,IAAI,CAAC,CAAC,IAAI,MAAM;IACjC,aAAA,GAAA,MAAA,QAAA,CAAkB,IAAI,CAAC,CAAC,IAAI,OAAO;IACnC,eAAe,SACb,eAAeA,uBAAAA,cAAAA,GAAAA,MAAAA,QAAAA,CAAmB,IAAI,CAAC,CAAC,IAAI,QAAQ,IAAI,CAAC,CAAC,QAAQ,MAAM,CAAC,CAAC;IAC5E,GAAG;GACL,EACF;GACQ;GACM;GACA;GACQ;GACJ;GACC;GACF;GACD;EACjB,CAAA,GAGH,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,gBAAgB;aAAI;EAAY,CAAA,CAChD;;AAET,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe"}
|
|
@@ -13,7 +13,7 @@ let react = require("react");
|
|
|
13
13
|
let _mantine_dates = require("@mantine/dates");
|
|
14
14
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
15
15
|
//#region packages/@mantine/schedule/src/components/YearView/YearViewMonth.tsx
|
|
16
|
-
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
16
|
+
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, renderDay, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
17
17
|
const ctx = (0, _mantine_dates.useDatesContext)();
|
|
18
18
|
const theme = (0, _mantine_core.useMantineTheme)();
|
|
19
19
|
const today = (0, dayjs.default)();
|
|
@@ -55,10 +55,13 @@ function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNu
|
|
|
55
55
|
const dayEvents = groupedEvents?.[(0, dayjs.default)(date).format("YYYY-MM-DD")] || [];
|
|
56
56
|
const isFirstDayOfMonth = firstDayIndex && weekIndex === firstDayIndex.weekIndex && dayIndex === firstDayIndex.dayIndex;
|
|
57
57
|
const isInTabOrder = mode !== "static" && !outside && isFirstDayOfMonth;
|
|
58
|
-
const
|
|
59
|
-
...getStyles("
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
const dayContent = typeof renderDay === "function" ? renderDay((0, dayjs.default)(date).format("YYYY-MM-DD"), dayEvents) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, dayjs.default)(date).format("D"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
59
|
+
...getStyles("yearViewDayIndicators"),
|
|
60
|
+
children: dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ (0, react.createElement)("div", {
|
|
61
|
+
...getStyles("yearViewDayIndicator", { style: { backgroundColor: (0, _mantine_core.getThemeColor)(event.color, theme) } }),
|
|
62
|
+
key: event.id
|
|
63
|
+
}))
|
|
64
|
+
})] });
|
|
62
65
|
return /* @__PURE__ */ (0, react.createElement)(_mantine_core.UnstyledButton, {
|
|
63
66
|
"aria-label": ariaLabel,
|
|
64
67
|
...dayProps,
|
|
@@ -89,10 +92,7 @@ function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNu
|
|
|
89
92
|
onDayClick?.((0, dayjs.default)(date).format("YYYY-MM-DD"), event);
|
|
90
93
|
dayProps.onClick?.(event);
|
|
91
94
|
}
|
|
92
|
-
},
|
|
93
|
-
...getStyles("yearViewDayIndicators"),
|
|
94
|
-
children: indicators
|
|
95
|
-
}));
|
|
95
|
+
}, dayContent);
|
|
96
96
|
});
|
|
97
97
|
const weekNumberProps = getWeekNumberProps?.((0, dayjs.default)(week[0]).format("YYYY-MM-DD")) || {};
|
|
98
98
|
const weekNumber = require_get_week_number.getWeekNumber(week);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearViewMonth.cjs","names":["getHiddenWeekendColumns","getWeekdaysNames","getMonthDays","getVisibleWeekDays","isSameMonth","UnstyledButton","getWeekNumber","Box","formatDate"],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n withWeekendDays?: boolean;\n\n /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n withWeekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = new Set(\n getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n })\n );\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n })\n .filter((_, index) => !hiddenColumns.has(index))\n .map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const visibleDays = getVisibleWeekDays({\n week,\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\n const days = visibleDays.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const indicators = dayEvents.slice(0, 3).map((event) => (\n <div\n {...getStyles('yearViewDayIndicator', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n key={event.id}\n />\n ));\n\n return (\n <UnstyledButton\n aria-label={ariaLabel}\n {...dayProps}\n {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n key={date}\n mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n tabIndex={isInTabOrder ? 0 : -1}\n ref={(node) => {\n if (node) {\n __getDayRef?.(weekIndex, dayIndex, node);\n }\n }}\n onKeyDown={(event) => {\n dayProps.onKeyDown?.(event);\n __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n }}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n dayProps.onClick?.(event);\n }\n }\n >\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>{indicators}</div>\n </UnstyledButton>\n );\n });\n\n const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n const weekNumber = getWeekNumber(week);\n\n return (\n <div {...getStyles('yearViewWeek')} key={weekIndex}>\n {withWeekNumbers && (\n <UnstyledButton\n key={weekNumber}\n aria-label={`Week ${weekNumber}`}\n title={`Week ${weekNumber}`}\n {...weekNumberProps}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n weekNumberProps.onClick?.(event);\n }\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewWeekNumber', {\n className: weekNumberProps.className,\n style: weekNumberProps.style,\n })}\n >\n {weekNumber}\n </UnstyledButton>\n )}\n\n {days}\n </div>\n );\n });\n\n return (\n <Box\n mod={[\n {\n 'with-week-numbers': withWeekNumbers,\n 'with-weekdays': withWeekDays,\n static: mode === 'static',\n },\n ]}\n {...getStyles('yearViewMonth')}\n >\n <UnstyledButton\n onClick={\n mode === 'static'\n ? undefined\n : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewMonthCaption')}\n >\n {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n </UnstyledButton>\n\n {weekdays && (\n <div {...getStyles('yearViewWeekdays')}>\n {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n {weekdays}\n </div>\n )}\n\n {weeks}\n </Box>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YearViewMonth.cjs","names":["getHiddenWeekendColumns","getWeekdaysNames","getMonthDays","getVisibleWeekDays","isSameMonth","UnstyledButton","getWeekNumber","Box","formatDate"],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n DateLabelFormat,\n DateStringValue,\n DayOfWeek,\n ScheduleEventData,\n ScheduleMode,\n} from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport type YearViewRenderDay = (\n date: DateStringValue,\n events: ScheduleEventData[]\n) => React.ReactNode;\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n withWeekendDays?: boolean;\n\n /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n\n /**\n * A function to replace the entire content of a day cell, called with the day date\n * and the events grouped on that day – the same list that is used to render the default\n * indicators. When set, default event indicators are not rendered.\n */\n renderDay?: YearViewRenderDay;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n withWeekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n renderDay,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = new Set(\n getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n })\n );\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n })\n .filter((_, index) => !hiddenColumns.has(index))\n .map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const visibleDays = getVisibleWeekDays({\n week,\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\n const days = visibleDays.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const dayContent =\n typeof renderDay === 'function' ? (\n renderDay(dayjs(date).format('YYYY-MM-DD'), dayEvents)\n ) : (\n <>\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>\n {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 </div>\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 {dayContent}\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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"}
|
|
@@ -29,7 +29,7 @@ const defaultProps = {
|
|
|
29
29
|
const varsResolver = createVarsResolver((_theme, { radius }) => ({ yearView: { "--year-view-radius": radius !== void 0 ? getRadius(radius) : void 0 } }));
|
|
30
30
|
const YearView = factory((_props) => {
|
|
31
31
|
const props = useProps("YearView", defaultProps, _props);
|
|
32
|
-
const { date, onDateChange, events, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, onMonthClick, onDayClick, onWeekNumberClick, getDayProps, getWeekNumberProps, highlightToday, labels, withOutsideDays, withHeader, monthYearSelectProps, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, __staticSelector, classNames, className, style, styles, unstyled, vars, attributes, radius, mode, recurrenceExpansionLimit, ...others } = props;
|
|
32
|
+
const { date, onDateChange, events, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, onMonthClick, onDayClick, onWeekNumberClick, getDayProps, getWeekNumberProps, highlightToday, labels, withOutsideDays, renderDay, withHeader, monthYearSelectProps, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, __staticSelector, classNames, className, style, styles, unstyled, vars, attributes, radius, mode, recurrenceExpansionLimit, ...others } = props;
|
|
33
33
|
const ctx = useDatesContext();
|
|
34
34
|
const getStyles = useStyles({
|
|
35
35
|
name: __staticSelector,
|
|
@@ -120,6 +120,7 @@ const YearView = factory((_props) => {
|
|
|
120
120
|
groupedEvents,
|
|
121
121
|
mode,
|
|
122
122
|
withOutsideDays,
|
|
123
|
+
renderDay,
|
|
123
124
|
firstDayIndex: getFirstDayIndex(month),
|
|
124
125
|
__getDayRef: (weekIndex, dayIndex, node) => {
|
|
125
126
|
if (!Array.isArray(daysRef.current[currentMonthIndex])) daysRef.current[currentMonthIndex] = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearView.mjs","names":["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 { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\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 withWeekendDays: 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 withWeekendDays,\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 resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n });\n const columnsCount = 7 - hiddenColumns.length;\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: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = getVisibleWeekDays({\n week: weeks[weekIndex],\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\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 withWeekendDays={withWeekendDays}\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\n {...getStyles('yearView')}\n mod={{ static: mode === 'static', 'without-weekend-days': hiddenColumns.length > 0 }}\n __vars={hiddenColumns.length > 0 ? { '--year-view-columns': `${columnsCount}` } : undefined}\n {...others}\n >\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.mjs","names":["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 { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\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 withWeekendDays: 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 withWeekendDays,\n onMonthClick,\n onDayClick,\n onWeekNumberClick,\n getDayProps,\n getWeekNumberProps,\n highlightToday,\n labels,\n withOutsideDays,\n renderDay,\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 resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n });\n const columnsCount = 7 - hiddenColumns.length;\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: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n });\n\n for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {\n const week = getVisibleWeekDays({\n week: weeks[weekIndex],\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\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 withWeekendDays={withWeekendDays}\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 renderDay={renderDay}\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\n {...getStyles('yearView')}\n mod={{ static: mode === 'static', 'without-weekend-days': hiddenColumns.length > 0 }}\n __vars={hiddenColumns.length > 0 ? { '--year-view-columns': `${columnsCount}` } : undefined}\n {...others}\n >\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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"}
|
|
@@ -9,9 +9,9 @@ import dayjs from "dayjs";
|
|
|
9
9
|
import { Box, UnstyledButton, getThemeColor, useMantineTheme } from "@mantine/core";
|
|
10
10
|
import { createElement } from "react";
|
|
11
11
|
import { useDatesContext } from "@mantine/dates";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
//#region packages/@mantine/schedule/src/components/YearView/YearViewMonth.tsx
|
|
14
|
-
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
14
|
+
function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, renderDay, __getDayRef, __onDayKeyDown, firstDayIndex }) {
|
|
15
15
|
const ctx = useDatesContext();
|
|
16
16
|
const theme = useMantineTheme();
|
|
17
17
|
const today = dayjs();
|
|
@@ -53,10 +53,13 @@ function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNu
|
|
|
53
53
|
const dayEvents = groupedEvents?.[dayjs(date).format("YYYY-MM-DD")] || [];
|
|
54
54
|
const isFirstDayOfMonth = firstDayIndex && weekIndex === firstDayIndex.weekIndex && dayIndex === firstDayIndex.dayIndex;
|
|
55
55
|
const isInTabOrder = mode !== "static" && !outside && isFirstDayOfMonth;
|
|
56
|
-
const
|
|
57
|
-
...getStyles("
|
|
58
|
-
|
|
59
|
-
|
|
56
|
+
const dayContent = typeof renderDay === "function" ? renderDay(dayjs(date).format("YYYY-MM-DD"), dayEvents) : /* @__PURE__ */ jsxs(Fragment, { children: [dayjs(date).format("D"), /* @__PURE__ */ jsx("div", {
|
|
57
|
+
...getStyles("yearViewDayIndicators"),
|
|
58
|
+
children: dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ createElement("div", {
|
|
59
|
+
...getStyles("yearViewDayIndicator", { style: { backgroundColor: getThemeColor(event.color, theme) } }),
|
|
60
|
+
key: event.id
|
|
61
|
+
}))
|
|
62
|
+
})] });
|
|
60
63
|
return /* @__PURE__ */ createElement(UnstyledButton, {
|
|
61
64
|
"aria-label": ariaLabel,
|
|
62
65
|
...dayProps,
|
|
@@ -87,10 +90,7 @@ function YearViewMonth({ month, getStyles, monthLabelFormat = "MMMM", withWeekNu
|
|
|
87
90
|
onDayClick?.(dayjs(date).format("YYYY-MM-DD"), event);
|
|
88
91
|
dayProps.onClick?.(event);
|
|
89
92
|
}
|
|
90
|
-
},
|
|
91
|
-
...getStyles("yearViewDayIndicators"),
|
|
92
|
-
children: indicators
|
|
93
|
-
}));
|
|
93
|
+
}, dayContent);
|
|
94
94
|
});
|
|
95
95
|
const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format("YYYY-MM-DD")) || {};
|
|
96
96
|
const weekNumber = getWeekNumber(week);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearViewMonth.mjs","names":[],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n withWeekendDays?: boolean;\n\n /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n withWeekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = new Set(\n getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n })\n );\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n })\n .filter((_, index) => !hiddenColumns.has(index))\n .map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const visibleDays = getVisibleWeekDays({\n week,\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\n const days = visibleDays.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const indicators = dayEvents.slice(0, 3).map((event) => (\n <div\n {...getStyles('yearViewDayIndicator', {\n style: { backgroundColor: getThemeColor(event.color, theme) },\n })}\n key={event.id}\n />\n ));\n\n return (\n <UnstyledButton\n aria-label={ariaLabel}\n {...dayProps}\n {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n key={date}\n mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n tabIndex={isInTabOrder ? 0 : -1}\n ref={(node) => {\n if (node) {\n __getDayRef?.(weekIndex, dayIndex, node);\n }\n }}\n onKeyDown={(event) => {\n dayProps.onKeyDown?.(event);\n __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n }}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n dayProps.onClick?.(event);\n }\n }\n >\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>{indicators}</div>\n </UnstyledButton>\n );\n });\n\n const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n const weekNumber = getWeekNumber(week);\n\n return (\n <div {...getStyles('yearViewWeek')} key={weekIndex}>\n {withWeekNumbers && (\n <UnstyledButton\n key={weekNumber}\n aria-label={`Week ${weekNumber}`}\n title={`Week ${weekNumber}`}\n {...weekNumberProps}\n onClick={\n mode === 'static'\n ? undefined\n : (event) => {\n onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n weekNumberProps.onClick?.(event);\n }\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewWeekNumber', {\n className: weekNumberProps.className,\n style: weekNumberProps.style,\n })}\n >\n {weekNumber}\n </UnstyledButton>\n )}\n\n {days}\n </div>\n );\n });\n\n return (\n <Box\n mod={[\n {\n 'with-week-numbers': withWeekNumbers,\n 'with-weekdays': withWeekDays,\n static: mode === 'static',\n },\n ]}\n {...getStyles('yearViewMonth')}\n >\n <UnstyledButton\n onClick={\n mode === 'static'\n ? undefined\n : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n }\n mod={{ static: mode === 'static' }}\n tabIndex={mode === 'static' ? -1 : 0}\n {...getStyles('yearViewMonthCaption')}\n >\n {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n </UnstyledButton>\n\n {weekdays && (\n <div {...getStyles('yearViewWeekdays')}>\n {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n {weekdays}\n </div>\n )}\n\n {weeks}\n </Box>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YearViewMonth.mjs","names":[],"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 {\n DateLabelFormat,\n DateStringValue,\n DayOfWeek,\n ScheduleEventData,\n ScheduleMode,\n} from '../../types';\nimport {\n formatDate,\n getMonthDays,\n getWeekdaysNames,\n getWeekNumber,\n isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport type YearViewRenderDay = (\n date: DateStringValue,\n events: ScheduleEventData[]\n) => React.ReactNode;\n\nexport interface YearViewDayKeydownPayload {\n weekIndex: number;\n dayIndex: number;\n date: string;\n}\n\nexport interface YearViewMonthSettings {\n /** `dayjs` format for month label @default 'MMMM' */\n monthLabelFormat?: DateLabelFormat;\n\n /** If set, show week numbers */\n withWeekNumbers?: boolean;\n\n /** If set, weekdays names are displayed in the first row @default true */\n withWeekDays?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n firstDayOfWeek?: DayOfWeek;\n\n /** `dayjs` format for weekdays names @default 'd' */\n weekdayFormat?: DateLabelFormat;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n weekendDays?: DayOfWeek[];\n\n /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n withWeekendDays?: boolean;\n\n /** Props passed down to the week number button */\n getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n /** Props passed down to the day button */\n getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n /** Called when day is clicked */\n onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with first day of the week when week number is clicked */\n onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called with the first day of the month when month label is clicked */\n onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, highlights the current day @default true */\n highlightToday?: boolean;\n\n /** Labels override for i18n */\n labels?: ScheduleLabelsOverride;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n mode?: ScheduleMode;\n\n /** If true, days from adjacent months are displayed @default true */\n withOutsideDays?: boolean;\n\n /**\n * A function to replace the entire content of a day cell, called with the day date\n * and the events grouped on that day – the same list that is used to render the default\n * indicators. When set, default event indicators are not rendered.\n */\n renderDay?: YearViewRenderDay;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n month: Date | string;\n\n /** `useStyles` return value of `YearView` */\n getStyles: GetStylesApi<YearViewFactory>;\n\n /** Events grouped by date */\n groupedEvents?: GroupedEvents;\n\n /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n /** Called when any keydown event is registered on day, used for keyboard navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n payload: YearViewDayKeydownPayload\n ) => void;\n\n /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n month,\n getStyles,\n monthLabelFormat = 'MMMM',\n withWeekNumbers,\n withWeekDays,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n weekendDays,\n withWeekendDays,\n getDayProps,\n onDayClick,\n onWeekNumberClick,\n onMonthClick,\n getWeekNumberProps,\n highlightToday,\n groupedEvents,\n mode,\n withOutsideDays,\n renderDay,\n __getDayRef,\n __onDayKeyDown,\n firstDayIndex,\n}: YearViewMonthProps) {\n const ctx = useDatesContext();\n const theme = useMantineTheme();\n const today = dayjs();\n\n const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n const hiddenColumns = new Set(\n getHiddenWeekendColumns({\n weekendDays: resolvedWeekendDays,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n withWeekendDays,\n })\n );\n\n const weekdays = withWeekDays\n ? getWeekdaysNames({\n locale: ctx.getLocale(locale),\n format: weekdayFormat,\n firstDayOfWeek: resolvedFirstDayOfWeek,\n })\n .filter((_, index) => !hiddenColumns.has(index))\n .map((day, index) => (\n <div {...getStyles('yearViewWeekday')} key={index}>\n {day}\n </div>\n ))\n : null;\n\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek: resolvedFirstDayOfWeek,\n consistentWeeks: true,\n }).map((week, weekIndex) => {\n const visibleDays = getVisibleWeekDays({\n week,\n weekendDays: resolvedWeekendDays,\n withWeekendDays,\n });\n\n const days = visibleDays.map((date, dayIndex) => {\n const outside = !isSameMonth(date, month);\n\n if (outside && !withOutsideDays) {\n return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n }\n\n const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n const ariaLabel = dayjs(date)\n .locale(locale || ctx.locale)\n .format('MMMM D, YYYY');\n\n const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n // Determine if this day should be in the tab order\n // Only the first day of the month (not outside) should be focusable via tab\n const isFirstDayOfMonth =\n firstDayIndex &&\n weekIndex === firstDayIndex.weekIndex &&\n dayIndex === firstDayIndex.dayIndex;\n const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n const dayContent =\n typeof renderDay === 'function' ? (\n renderDay(dayjs(date).format('YYYY-MM-DD'), dayEvents)\n ) : (\n <>\n {dayjs(date).format('D')}\n\n <div {...getStyles('yearViewDayIndicators')}>\n {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 </div>\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 {dayContent}\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,8 +1,9 @@
|
|
|
1
1
|
import { GetStylesApi } from '@mantine/core';
|
|
2
2
|
import { ScheduleLabelsOverride } from '../../labels';
|
|
3
|
-
import { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';
|
|
3
|
+
import { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleEventData, ScheduleMode } from '../../types';
|
|
4
4
|
import { GroupedEvents } from './get-year-view-events/get-year-view-events';
|
|
5
5
|
import type { YearViewFactory } from './YearView';
|
|
6
|
+
export type YearViewRenderDay = (date: DateStringValue, events: ScheduleEventData[]) => React.ReactNode;
|
|
6
7
|
export interface YearViewDayKeydownPayload {
|
|
7
8
|
weekIndex: number;
|
|
8
9
|
dayIndex: number;
|
|
@@ -43,6 +44,12 @@ export interface YearViewMonthSettings {
|
|
|
43
44
|
mode?: ScheduleMode;
|
|
44
45
|
/** If true, days from adjacent months are displayed @default true */
|
|
45
46
|
withOutsideDays?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* A function to replace the entire content of a day cell, called with the day date
|
|
49
|
+
* and the events grouped on that day – the same list that is used to render the default
|
|
50
|
+
* indicators. When set, default event indicators are not rendered.
|
|
51
|
+
*/
|
|
52
|
+
renderDay?: YearViewRenderDay;
|
|
46
53
|
}
|
|
47
54
|
export interface YearViewMonthProps extends YearViewMonthSettings {
|
|
48
55
|
/** Month to display, Date object or date string in `YYYY-MM-DD` format */
|
|
@@ -61,4 +68,4 @@ export interface YearViewMonthProps extends YearViewMonthSettings {
|
|
|
61
68
|
dayIndex: number;
|
|
62
69
|
};
|
|
63
70
|
}
|
|
64
|
-
export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, renderDay, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import type { YearViewCssVariables, YearViewFactory, YearViewProps, YearViewStylesNames } from './YearView';
|
|
2
2
|
export { YearView } from './YearView';
|
|
3
3
|
export type { YearViewProps, YearViewFactory, YearViewStylesNames, YearViewCssVariables };
|
|
4
|
+
export type { YearViewRenderDay } from './YearViewMonth';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/schedule",
|
|
3
|
-
"version": "9.5.1
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Schedule Mantine component",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"directory": "packages/@mantine/schedule"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "9.5.1
|
|
39
|
-
"@mantine/dates": "9.5.1
|
|
40
|
-
"@mantine/hooks": "9.5.1
|
|
38
|
+
"@mantine/core": "9.5.1",
|
|
39
|
+
"@mantine/dates": "9.5.1",
|
|
40
|
+
"@mantine/hooks": "9.5.1",
|
|
41
41
|
"react": "^19.2.0",
|
|
42
42
|
"react-dom": "^19.2.0"
|
|
43
43
|
},
|