@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
88 lines • 4.23 kB
JavaScript
import { addDays, endOfDay, isAfter, startOfDay, subDays } from "date-fns";
import { useMemo } from "react";
import { horizontalPositionAndWidth } from "../utils/calc.js";
import { invisiblePeriods, withinADay } from "../utils/filter.js";
import { lastPeriod } from "../utils/sort.js";
const spatialPeriod = (period, timelineStart, timelineEndInclusive, direction = "left", i, periods, rowIndex) => {
const start = period.start;
const endInclusive = period.end;
const rightOverlap = i < periods.length - 1 && !isAfter(periods[i + 1].start, endInclusive);
const { horizontalPosition, width } = horizontalPositionAndWidth(startOfDay(start), endOfDay(rightOverlap
? startOfDay(subDays(periods[i + 1].start, 1))
: endInclusive), timelineStart, timelineEndInclusive);
return {
id: `r-${rowIndex}-p-${i}`,
start,
endInclusive,
horizontalPosition,
direction,
width,
end: endInclusive,
status: period.status,
onSelectPeriod: period.onSelectPeriod,
icon: period.icon,
children: period.children,
isActive: period.isActive,
statusLabel: period.statusLabel,
};
};
const adjustedEdges = (period, i, allPeriods) => {
const left = i > 0 && withinADay(period.start, allPeriods[i - 1].endInclusive);
const right = i < allPeriods.length - 1 &&
withinADay(allPeriods[i + 1].start, period.endInclusive);
return left && right
? Object.assign(Object.assign({}, period), { cropped: "both" }) : left
? Object.assign(Object.assign({}, period), { cropped: "left" }) : right
? Object.assign(Object.assign({}, period), { cropped: "right" }) : period;
};
const trimmedPeriods = (period) => {
let { horizontalPosition, width, cropped } = period;
if (horizontalPosition + width > 100) {
width = 100 - horizontalPosition;
cropped = cropped === "left" || cropped === "both" ? "both" : "right";
}
if (horizontalPosition < 0 && horizontalPosition + width > 0) {
width = horizontalPosition + width;
horizontalPosition = 0;
cropped = cropped === "right" || cropped === "both" ? "both" : "left";
}
return Object.assign(Object.assign({}, period), { width,
horizontalPosition,
cropped });
};
export const useTimelineRows = (rows, startDate, endDate, direction) => useMemo(() => rows.map((periods, rowIndex) => {
const timelinePeriods = periods.periods
.sort((a, b) => a.start.valueOf() - b.start.valueOf())
.map((period, i) => (Object.assign(Object.assign({}, spatialPeriod(period, startDate, endDate, direction, i, periods.periods, rowIndex)), { restProps: period === null || period === void 0 ? void 0 : period.restProps, ref: period === null || period === void 0 ? void 0 : period.ref })))
.sort(lastPeriod)
.map(adjustedEdges)
.map(trimmedPeriods)
.filter(invisiblePeriods);
return {
id: `tl-row-${rowIndex}`,
label: periods.label,
headingTag: periods.headingTag || "h3",
icon: periods.icon,
periods: direction === "left" ? timelinePeriods : timelinePeriods.reverse(),
restProps: periods === null || periods === void 0 ? void 0 : periods.restProps,
ref: periods === null || periods === void 0 ? void 0 : periods.ref,
};
}), [rows, startDate, endDate, direction]);
export const useEarliestDate = ({ startDate, rows, }) => useMemo(() => {
if (startDate) {
return startDate;
}
const startDates = rows
.flat()
.filter((period) => period.start)
.map((period) => period.start);
if (startDates.length === 0) {
return new Date();
}
const earliestDate = startDates.reduce((earliest, current) => current < earliest ? current : earliest);
return earliestDate;
}, [startDate, rows]);
const latestDate = (latest, period) => period.end > latest ? period.end : latest;
const latestTomDate = (rows) => rows.flat().reduce(latestDate, new Date(0));
export const useLatestDate = ({ endDate, rows }) => useMemo(() => (endDate ? endDate : addDays(latestTomDate(rows), 1)), [endDate, rows]);
//# sourceMappingURL=useTimelineRows.js.map