Components
ActivityTimeline
A feed of events by day, with runs of similar ones collapsed.
A chronology of events: grouped by day, with consecutive similar events collapsed into a single entry. The feed stays readable instead of drowning in seven identical «changed the status» lines.
Example
сегодня
- 💬Мурат Добавил обработку таймаута в импорт
- ✓
Айгерим обновил статусы задач4
- Айгерим перевела UI-14 в «На проверке»
- Айгерим перевела UI-12 в «В работе»
- Айгерим перевела UI-9 в «Готово»
- Айгерим перевела UI-7 в «Готово»
- 💬Данияр Вынес разбор Markdown в отдельный модуль
вчера
- 💬Мурат Открыл задачу про WIP-лимиты
- @Мурат назначил Данияра на UI-15
<ActivityTimeline
events={feed}
renderEvent={(e) => <span><b>{e.actor}</b> {e.text}</span>}
renderBurst={(events) => <span><b>{events[0].actor}</b> updated statuses</span>}
renderIcon={(e) => <span>{ICONS[e.kind]}</span>}
/>Expand a collapsed run to see the individual events inside it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
events* | E[] | — | The events. They need id, at (the time) and kind (the type). |
renderEvent* | (event: E) => ReactNode | — | How to render a single event. |
renderBurst | (events: E[]) => ReactNode | — | The heading of a collapsed run. |
renderIcon | (event: E) => ReactNode | — | The marker on the left of the timeline. |
now | Date | — | The reference point for relative time. Defaults to now. |
order | "desc" | "asc" | "desc" | Newest on top or at the bottom. |
burstThreshold | number | 3 | From how many consecutive similar events to start collapsing. |
expandable | boolean | true | Expand a run on click. |
events*E[]The events. They need id, at (the time) and kind (the type).
renderEvent*(event: E) => ReactNodeHow to render a single event.
renderBurst(events: E[]) => ReactNodeThe heading of a collapsed run.
renderIcon(event: E) => ReactNodeThe marker on the left of the timeline.
nowDateThe reference point for relative time. Defaults to now.
order"desc" | "asc"defaults to: "desc"
Newest on top or at the bottom.
burstThresholdnumberdefaults to: 3
From how many consecutive similar events to start collapsing.
expandablebooleandefaults to: true
Expand a run on click.
Collapsing runs
The gap inside a run is measured between neighbouring events, not from its start: ten edits at one every twenty minutes are one piece of work, not five separate runs.
The grouping, separately
import {
groupActivity, // events → days with runs collapsed
collapseBursts, // collapsing consecutive similar events
relativeTime, // «5 minutes ago» in a given locale
dayLabel, // «Today» / «Yesterday» / a date
} from "@toimetdev/pathlogs-core";