diff --git a/changelog.md b/changelog.md index 99bf5c3cc7..1ea46f0176 100644 --- a/changelog.md +++ b/changelog.md @@ -7,6 +7,7 @@ * [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design * [Tag]: changed layout - added gaps between internal items, changed padding * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination) +* [TimelineScale]: added bottom/top month text customisation. * [TimelineScale]: customisation of today line height was added. **What's Fixed** diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx index 001e89f15b..8a949836ff 100644 --- a/uui-timeline/src/TimelineScale.tsx +++ b/uui-timeline/src/TimelineScale.tsx @@ -11,6 +11,8 @@ import { TimelineCanvas, TimelineCanvasProps } from './TimelineCanvas'; import { useTimelineTransform } from './useTimelineTransform'; import { CanvasDrawPeriodPartProps, CanvasDrawPeriodProps, CanvasDrawScaleBottomBorderProps, TimelineScaleFonts, timelineScale, CanvasDrawTopDaysProps, CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps, CanvasDrawHeaderTodayProps, + CanvasDrawTopMonthProps, + CanvasDrawBottomMonthProps, } from './draw'; /** @@ -70,6 +72,14 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo * Overrides weekend/holiday cell background color. */ weekendCellBackgroundColor?: string; + /** + * Overrides month text on the scale's top line. + */ + getTopMonth?(month: number): string; + /** + * Overrides month text on the scale's bottom line. + */ + getBottomMonth?(month: number): string; /** * Overrides movement arrows icons. * @param direction - arrow direction. @@ -109,7 +119,7 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo /** * Overrides drawing months on the top of the scale. */ - drawTopMonths?: (props: CanvasDrawPeriodPartProps) => void; + drawTopMonths?: (props: CanvasDrawTopMonthProps) => void; /** * Overrides drawing weeks on the scale. */ @@ -117,7 +127,7 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo /** * Overrides drawing months on the bottom of the scale. */ - drawBottomMonths?: (props: CanvasDrawPeriodWithTodayProps) => void; + drawBottomMonths?: (props: CanvasDrawBottomMonthProps) => void; /** * Overrides drawing years on the scale. */ @@ -153,7 +163,8 @@ export function TimelineScale({ cellBackgroundColor = timelineScale.defaultColors.cellBackgroundColor, evenPeriodCellBackgroundColor = timelineScale.defaultColors.evenPeriodCellBackgroundColor, weekendCellBackgroundColor = timelineScale.defaultColors.weekendCellBackgroundColor, - + getTopMonth = timelineScale.getTopMonth, + getBottomMonth = timelineScale.getBottomMonth, drawPeriod = timelineScale.drawPeriod, drawMinutes = timelineScale.drawMinutes, drawRemainingHours = timelineScale.drawRemainingHours, @@ -227,7 +238,7 @@ export function TimelineScale({ drawPeriod({ ...timelineScale.getRemainingHoursScaleRange(), draw: drawRemainingHours, ...commonProps }); drawPeriod({ ...timelineScale.getHoursScaleRange(), draw: (...props) => drawHours(...props), ...commonProps }); drawPeriod({ - draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, ...todayProps }), + draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, getTopMonth, ...todayProps }), ...timelineScale.getTopDaysScaleRange(), ...withGridLinesProps, }); @@ -237,7 +248,7 @@ export function TimelineScale({ ...withGridLinesProps, }); drawPeriod({ - draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor }), + draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor, getTopMonth }), ...timelineScale.getTopMonthsScaleRange(), ...withGridLinesProps, }); @@ -247,7 +258,7 @@ export function TimelineScale({ ...withGridLinesProps, }); drawPeriod({ - draw: (props) => drawBottomMonths({ ...props, drawToday, ...todayProps }), + draw: (props) => drawBottomMonths({ ...props, getBottomMonth, drawToday, ...todayProps }), ...timelineScale.getBottomMonthsScaleRange(), ...withGridLinesProps }); drawPeriod({ diff --git a/uui-timeline/src/draw/scale.ts b/uui-timeline/src/draw/scale.ts index 4706602fea..a4f27e5828 100644 --- a/uui-timeline/src/draw/scale.ts +++ b/uui-timeline/src/draw/scale.ts @@ -14,6 +14,8 @@ import { CanvasScaleRange, CanvasDrawBottomGridLine, CanvasDrawWeekendHoursCell, + CanvasDrawBottomMonthProps, + CanvasDrawTopMonthProps, } from './types'; const defaultFonts = { @@ -46,6 +48,8 @@ const isCurrentPeriod = (leftDate: Date, rightDate: Date) => new Date() >= leftD const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2 - 1; const getBottomCellY = (canvasHeight: number) => getCanvasVerticalCenter(canvasHeight); +const getTopMonth = (month: number) => months[month]?.toUpperCase() ?? ''; +const getBottomMonth = (month: number) => months[month] ?? ''; const drawScaleBottomBorder = ({ context, @@ -398,6 +402,7 @@ const drawTopDays = ({ todayLineColor = defaultColors.todayLineColor, todayLineHeight = defaultWidth.todayLineHeight, drawToday: customDrawToday, + getTopMonth: customGetMonth = getTopMonth, canvasHeight, cellBorderColor = defaultColors.cellBorderColor, cellBorderWidth = defaultWidth.cellBorderWidth, @@ -406,7 +411,7 @@ const drawTopDays = ({ ...restProps }: CanvasDrawTopDaysProps) => { timelineTransform.getVisibleDays().forEach((w) => { - const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear(); + const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear(); const isHoliday = timelineTransform.isWeekend(w.leftDate) || timelineTransform.isHoliday(w.leftDate); const color = isHoliday ? weekendCellBackgroundColor : cellBackgroundColor; drawCellBackground({ context, scaleBar: w, canvasHeight, color }); @@ -416,7 +421,7 @@ const drawTopDays = ({ drawPeriodText({ context, timelineTransform, - text: header.toUpperCase(), + text: header, x: w.left, width: w.right - w.left, line: getTopLine(visibility), @@ -481,8 +486,9 @@ const drawTopMonths = ({ cellBorderWidth = defaultWidth.cellBorderWidth, cellBackgroundColor = defaultColors.cellBackgroundColor, evenPeriodCellBackgroundColor = defaultColors.evenPeriodCellBackgroundColor, + getTopMonth: customGetMonth = getTopMonth, ...restProps -}: CanvasDrawPeriodPartProps) => { +}: CanvasDrawTopMonthProps) => { timelineTransform.getVisibleMonths().forEach((w) => { const color = w.leftDate.getMonth() % 2 === 0 ? cellBackgroundColor @@ -491,12 +497,12 @@ const drawTopMonths = ({ drawCellBackground({ context, scaleBar: w, canvasHeight, color }); drawBorderForTopCell({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor }); - const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getFullYear(); + const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getFullYear(); const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate); drawPeriodText({ context, timelineTransform, - text: header.toUpperCase(), + text: header, x: w.left, width: w.right - w.left, line: getTopLine(visibility), @@ -555,11 +561,11 @@ const drawBottomMonths = ({ cellBorderColor = defaultColors.cellBorderColor, cellBorderWidth = defaultWidth.cellBorderWidth, cellBackgroundColor = defaultColors.cellBackgroundColor, - + getBottomMonth: customGetMonth = getBottomMonth, ...restProps -}: CanvasDrawPeriodWithTodayProps) => { +}: CanvasDrawBottomMonthProps) => { timelineTransform.getVisibleMonths().forEach((w) => { - const text = months[w.leftDate.getMonth()].toString(); + const text = customGetMonth(w.leftDate.getMonth()).toString(); const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate); drawCellBackground({ context, scaleBar: w, canvasHeight, y: getCanvasVerticalCenter(canvasHeight), color: cellBackgroundColor }); @@ -669,7 +675,8 @@ export const timelineScale = { getBottomMonthsScaleRange, getYearsScaleRange, drawHoursCells, - + getTopMonth, + getBottomMonth, defaultFonts, defaultColors, defaultWidth, diff --git a/uui-timeline/src/draw/types.ts b/uui-timeline/src/draw/types.ts index 7af71148f6..04edfd7295 100644 --- a/uui-timeline/src/draw/types.ts +++ b/uui-timeline/src/draw/types.ts @@ -126,6 +126,14 @@ export interface CanvasDrawPeriodWithTodayProps extends CanvasDrawPeriodPartProp drawToday?: (props: CanvasDrawHeaderTodayProps) => void; } +export interface CanvasDrawBottomMonthProps extends CanvasDrawPeriodWithTodayProps { + getBottomMonth?: (month: number) => string; +} + +export interface CanvasDrawTopMonthProps extends CanvasDrawPeriodPartProps { + getTopMonth?: (month: number) => string; +} + export interface CanvasDrawDaysProps extends CanvasDrawPeriodPartProps, CanvasDrawPeriodWithTodayProps { weekendTextColor?: string; weekendCellBackgroundColor?: string; @@ -133,6 +141,7 @@ export interface CanvasDrawDaysProps extends CanvasDrawPeriodPartProps, CanvasDr export interface CanvasDrawTopDaysProps extends CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps { topDayTextColor?: string; + getTopMonth?: (month: number) => string; } export interface CanvasScaleRange {