{"version":3,"file":"useTimeline-BkXlVx_5.cjs","names":[],"sources":["../src/Components/Elements/Timeline.tsx","../src/Utils/getSliderMarks.ts","../src/hooks/useTimeline.ts"],"sourcesContent":["import { SliderUI } from '@undp/design-system-react/SliderUI';\r\nimport type { Color } from '@/Types';\r\nimport { Pause, Play } from '../Icons';\r\n\r\ninterface Props {\r\n play: boolean;\r\n setPlay: (_value: boolean) => void;\r\n uniqDatesSorted: number[];\r\n markObj: Record;\r\n index: number;\r\n setIndex: (_value: number) => void;\r\n color?: Exclude<\r\n Color,\r\n | 'background'\r\n | 'surface'\r\n | 'surface-2xs'\r\n | 'surface-xs'\r\n | 'surface-sm'\r\n | 'surface-md'\r\n | 'surface-lg'\r\n | 'surface-xl'\r\n | 'surface-2xl'\r\n | 'surface-3xl'\r\n | 'surface-4xl'\r\n | 'foreground'\r\n >;\r\n}\r\n\r\nconst fillClassNames = {\r\n primary: 'fill-primary',\r\n secondary: 'fill-secondary',\r\n tertiary: 'fill-tertiary',\r\n quaternary: 'fill-quaternary',\r\n foreground: 'fill-foreground',\r\n warning: 'fill-warning',\r\n success: 'fill-success',\r\n error: 'fill-error',\r\n info: 'fill-info',\r\n red: 'fill-accent-red',\r\n orange: 'fill-accent-orange',\r\n yellow: 'fill-accent-yellow',\r\n lime: 'fill-accent-lime',\r\n green: 'fill-accent-green',\r\n teal: 'fill-accent-teal',\r\n azure: 'fill-accent-azure',\r\n blue: 'fill-accent-blue',\r\n violet: 'fill-accent-violet',\r\n pink: 'fill-accent-pink',\r\n 'sdg-1': 'fill-sdg-1',\r\n 'sdg-2': 'fill-sdg-2',\r\n 'sdg-3': 'fill-sdg-3',\r\n 'sdg-4': 'fill-sdg-4',\r\n 'sdg-5': 'fill-sdg-5',\r\n 'sdg-6': 'fill-sdg-6',\r\n 'sdg-7': 'fill-sdg-7',\r\n 'sdg-8': 'fill-sdg-8',\r\n 'sdg-9': 'fill-sdg-9',\r\n 'sdg-10': 'fill-sdg-10',\r\n 'sdg-11': 'fill-sdg-11',\r\n 'sdg-12': 'fill-sdg-12',\r\n 'sdg-13': 'fill-sdg-13',\r\n 'sdg-14': 'fill-sdg-14',\r\n 'sdg-15': 'fill-sdg-15',\r\n 'sdg-16': 'fill-sdg-16',\r\n 'sdg-17': 'fill-sdg-17',\r\n male: 'fill-categorical-male',\r\n female: 'fill-categorical-female',\r\n urban: 'fill-categorical-urban',\r\n rural: 'fill-categorical-rural',\r\n child: 'fill-categorical-child',\r\n adolescent: 'fill-categorical-adolescent',\r\n 'young-adult': 'fill-categorical-young-adult',\r\n adult: 'fill-categorical-adult',\r\n 'older-adult': 'fill-categorical-older-adult',\r\n};\r\n\r\nexport function Timeline(props: Props) {\r\n const { play, setPlay, uniqDatesSorted, markObj, index, setIndex, color } = props;\r\n return (\r\n
\r\n {\r\n setPlay(!play);\r\n }}\r\n className='p-0 border-0 cursor-pointer bg-transparent'\r\n aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\r\n >\r\n {play ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n {\r\n setIndex(uniqDatesSorted.indexOf(nextValue as number));\r\n }}\r\n onChange={(nextValue) => {\r\n setIndex(uniqDatesSorted.indexOf(nextValue as number));\r\n }}\r\n color={color}\r\n aria-label='Time slider. Use arrow keys to adjust selected time period.'\r\n />\r\n
\r\n );\r\n}\r\n","import { format } from 'date-fns/format';\r\n\r\nexport function getSliderMarks(\r\n dates: number[],\r\n activeIndex: number,\r\n showOnlyActiveDate: boolean,\r\n dateFormat: string,\r\n) {\r\n // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n const markObj: any = {};\r\n\r\n dates.forEach((d, i) => {\r\n markObj[`${d}`] = {\r\n style: {\r\n color: i === activeIndex ? '#232E3D' : '#A9B1B7', // Active text color vs. inactive\r\n fontWeight: i === activeIndex ? 'bold' : 'normal', // Active font weight vs. inactive\r\n display: i === activeIndex || !showOnlyActiveDate ? 'inline' : 'none', // Active font weight vs. inactive\r\n },\r\n label: format(new Date(d), dateFormat || 'yyyy'),\r\n };\r\n });\r\n return markObj;\r\n}\r\n","import { format } from 'date-fns/format';\r\nimport { parse } from 'date-fns/parse';\r\nimport { useEffect, useMemo, useState } from 'react';\r\nimport type { TimelineDataType } from '@/Types';\r\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\r\n\r\nexport function useTimeline(data: { date?: string | number | null }[], timeline: TimelineDataType) {\r\n const dateFormat = timeline.dateFormat || 'yyyy';\r\n\r\n const uniqDatesSorted = useMemo(() => {\r\n const dates = [\r\n ...new Set(\r\n data.filter((d) => d.date).map((d) => parse(`${d.date}`, dateFormat, new Date()).getTime()),\r\n ),\r\n ];\r\n return dates.sort((a, b) => a - b);\r\n }, [data, dateFormat]);\r\n\r\n const [play, setPlay] = useState(timeline.autoplay);\r\n const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\r\n\r\n useEffect(() => {\r\n if (!play) return;\r\n const interval = setInterval(\r\n () => setIndex((i) => (i < uniqDatesSorted.length - 1 ? i + 1 : 0)),\r\n (timeline.speed || 2) * 1000,\r\n );\r\n return () => clearInterval(interval);\r\n }, [uniqDatesSorted, play, timeline.speed]);\r\n\r\n const markObj = getSliderMarks(uniqDatesSorted, index, timeline.showOnlyActiveDate, dateFormat);\r\n const activeDate =\r\n uniqDatesSorted.length > 0 ? format(new Date(uniqDatesSorted[index]), dateFormat) : undefined;\r\n\r\n return { uniqDatesSorted, index, setIndex, play, setPlay, markObj, activeDate, dateFormat };\r\n}\r\n"],"mappings":"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"}