diff --git a/src/CenturyView/Decades.tsx b/src/CenturyView/Decades.tsx index dca93948..4b284660 100644 --- a/src/CenturyView/Decades.tsx +++ b/src/CenturyView/Decades.tsx @@ -6,28 +6,39 @@ import Decade from './Decade'; import { getBeginOfCenturyYear } from '../shared/dates'; -import type { RangeType } from '../shared/types'; - type DecadesProps = { activeStartDate: Date; - valueType: RangeType; -} & Omit, 'classes' | 'date'>; +} & Omit< + React.ComponentProps, + 'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' +> & + Omit, 'classes' | 'date'>; export default function Decades(props: DecadesProps) { - const { activeStartDate } = props; + const { activeStartDate, hover, value, valueType, ...otherProps } = props; const start = getBeginOfCenturyYear(activeStartDate); const end = start + 99; return ( ( + + )} start={start} step={10} - tile={Decade} + value={value} + valueType={valueType} /> ); } diff --git a/src/DecadeView/Years.tsx b/src/DecadeView/Years.tsx index 30d02e76..44371e73 100644 --- a/src/DecadeView/Years.tsx +++ b/src/DecadeView/Years.tsx @@ -6,27 +6,38 @@ import Year from './Year'; import { getBeginOfDecadeYear } from '../shared/dates'; -import type { RangeType } from '../shared/types'; - type YearsProps = { activeStartDate: Date; - valueType: RangeType; -} & Omit, 'classes' | 'date'>; +} & Omit< + React.ComponentProps, + 'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' +> & + Omit, 'classes' | 'date'>; export default function Years(props: YearsProps) { - const { activeStartDate } = props; + const { activeStartDate, hover, value, valueType, ...otherProps } = props; const start = getBeginOfDecadeYear(activeStartDate); const end = start + 9; return ( ( + + )} start={start} - tile={Year} + value={value} + valueType={valueType} /> ); } diff --git a/src/MonthView/Days.tsx b/src/MonthView/Days.tsx index f9ab2b80..d7bd9581 100644 --- a/src/MonthView/Days.tsx +++ b/src/MonthView/Days.tsx @@ -7,19 +7,30 @@ import Day from './Day'; import { getDayOfWeek } from '../shared/dates'; import { mapCalendarType } from '../shared/utils'; -import type { CalendarType, DeprecatedCalendarType, RangeType } from '../shared/types'; +import type { CalendarType, DeprecatedCalendarType } from '../shared/types'; type DaysProps = { activeStartDate: Date; calendarType?: CalendarType | DeprecatedCalendarType; showFixedNumberOfWeeks?: boolean; showNeighboringMonth?: boolean; - valueType: RangeType; -} & Omit, 'classes' | 'currentMonthIndex' | 'date' | 'point'>; +} & Omit< + React.ComponentProps, + 'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' +> & + Omit, 'classes' | 'currentMonthIndex' | 'date' | 'point'>; export default function Days(props: DaysProps) { - const { activeStartDate, calendarType: calendarTypeOrDeprecatedCalendarType } = props; - const { showFixedNumberOfWeeks, showNeighboringMonth, ...otherProps } = props; + const { + activeStartDate, + calendarType: calendarTypeOrDeprecatedCalendarType, + hover, + showFixedNumberOfWeeks, + showNeighboringMonth, + value, + valueType, + ...otherProps + } = props; const calendarType = mapCalendarType(calendarTypeOrDeprecatedCalendarType); const year = getYear(activeStartDate); @@ -63,20 +74,30 @@ export default function Days(props: DaysProps) { return ( { const date = new Date(); date.setFullYear(year, monthIndex, day); return getDayStart(date); }} dateType="day" + hover={hover} end={end} + renderTile={({ date, ...otherTileProps }) => ( + + )} offset={offset} start={start} - tile={Day} + value={value} + valueType={valueType} /> ); } diff --git a/src/TileGroup.tsx b/src/TileGroup.tsx index cf8b9a6c..6be1e2f4 100644 --- a/src/TileGroup.tsx +++ b/src/TileGroup.tsx @@ -4,24 +4,24 @@ import Flex from './Flex'; import { getTileClasses } from './shared/utils'; -import type { Range, RangeType } from './shared/types'; +import type { RangeType, Value } from './shared/types'; -type TileGroupProps = { +type TileGroupProps = { className?: string; count?: number; dateTransform: (point: number) => Date; dateType: RangeType; end: number; - hover?: Date; + hover?: Date | null; offset?: number; + renderTile: (props: { classes: string[]; date: Date }) => React.ReactElement; start: number; step?: number; - tile: T; - value?: Date | Range; + value?: Value; valueType: RangeType; -} & Omit, 'classes' | 'date'>; +}; -export default function TileGroup({ +export default function TileGroup({ className, count = 3, dateTransform, @@ -29,32 +29,27 @@ export default function TileGroup({ end, hover, offset, + renderTile, start, step = 1, - tile: Tile, value, valueType, - ...tileProps -}: TileGroupProps) { +}: TileGroupProps) { const tiles = []; for (let point = start; point <= end; point += step) { const date = dateTransform(point); - const FixedTile = Tile as React.ElementType; - tiles.push( - , + value, + valueType, + }), + date, + }), ); } diff --git a/src/YearView/Months.tsx b/src/YearView/Months.tsx index a6b055b9..3c7c3589 100644 --- a/src/YearView/Months.tsx +++ b/src/YearView/Months.tsx @@ -4,22 +4,22 @@ import { getMonthStart, getYear } from '@wojtekmaj/date-utils'; import TileGroup from '../TileGroup'; import Month from './Month'; -import type { RangeType } from '../shared/types'; - type MonthsProps = { activeStartDate: Date; - valueType: RangeType; -} & Omit, 'classes' | 'date'>; +} & Omit< + React.ComponentProps, + 'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' +> & + Omit, 'classes' | 'date'>; export default function Months(props: MonthsProps) { - const { activeStartDate } = props; + const { activeStartDate, hover, value, valueType, ...otherProps } = props; const start = 0; const end = 11; const year = getYear(activeStartDate); return ( { const date = new Date(); @@ -28,8 +28,19 @@ export default function Months(props: MonthsProps) { }} dateType="month" end={end} + hover={hover} + renderTile={({ date, ...otherTileProps }) => ( + + )} start={start} - tile={Month} + value={value} + valueType={valueType} /> ); }