mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-29 16:15:04 +00:00
feat: one-sided timeline on sm
This commit is contained in:
@@ -10,8 +10,10 @@ import {Timeline} from "antd";
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {Domain} from "../../utils/api";
|
import {Domain} from "../../utils/api";
|
||||||
import {t} from "ttag";
|
import {t} from "ttag";
|
||||||
|
import useBreakpoint from "../../hooks/useBreakpoint";
|
||||||
|
|
||||||
export function EventTimeline({domain}: { domain: Domain }) {
|
export function EventTimeline({domain}: { domain: Domain }) {
|
||||||
|
const sm = useBreakpoint('sm')
|
||||||
|
|
||||||
const domainEvent = {
|
const domainEvent = {
|
||||||
registration: t`Registration`,
|
registration: t`Registration`,
|
||||||
@@ -30,7 +32,7 @@ export function EventTimeline({domain}: { domain: Domain }) {
|
|||||||
const locale = navigator.language.split('-')[0]
|
const locale = navigator.language.split('-')[0]
|
||||||
|
|
||||||
return <Timeline
|
return <Timeline
|
||||||
mode="right"
|
mode={sm ? "left" : "right"}
|
||||||
items={domain.events
|
items={domain.events
|
||||||
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
|
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
|
||||||
.map(({action, date}) => {
|
.map(({action, date}) => {
|
||||||
@@ -56,12 +58,21 @@ export function EventTimeline({domain}: { domain: Domain }) {
|
|||||||
dot = <ReloadOutlined style={{fontSize: '16px'}}/>
|
dot = <ReloadOutlined style={{fontSize: '16px'}}/>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const eventName = Object.keys(domainEvent).includes(action) ? domainEvent[action as keyof typeof domainEvent] : action
|
||||||
|
const dateStr = new Date(date).toLocaleString(locale)
|
||||||
|
|
||||||
|
const text = sm ? {
|
||||||
|
children: <>{eventName} {dateStr}</>
|
||||||
|
} : {
|
||||||
|
label: dateStr,
|
||||||
|
children: eventName,
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
label: new Date(date).toLocaleString(locale),
|
|
||||||
children: Object.keys(domainEvent).includes(action) ? domainEvent[action as keyof typeof domainEvent] : action,
|
|
||||||
color,
|
color,
|
||||||
dot,
|
dot,
|
||||||
pending: new Date(date).getTime() > new Date().getTime()
|
pending: new Date(date).getTime() > new Date().getTime(),
|
||||||
|
...text
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user