forked from abner/for-legacy-web
117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import dayjs from "dayjs";
|
|
import styled, { css } from "styled-components";
|
|
|
|
import { Text } from "preact-i18n";
|
|
import { useMemo, useState } from "preact/hooks";
|
|
|
|
import { CategoryButton, Column, Modal } from "@revoltchat/ui";
|
|
import type { Action } from "@revoltchat/ui/esm/components/design/atoms/display/Modal";
|
|
|
|
import { noopTrue } from "../../../lib/js";
|
|
|
|
import {
|
|
changelogEntries,
|
|
changelogEntryArray,
|
|
ChangelogPost,
|
|
} from "../../../assets/changelogs";
|
|
import Markdown from "../../../components/markdown/Markdown";
|
|
import { ModalProps } from "../types";
|
|
|
|
const Image = styled.img<{ shadow?: boolean }>`
|
|
border-radius: var(--border-radius);
|
|
|
|
${(props) =>
|
|
props.shadow &&
|
|
css`
|
|
filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
|
|
`}
|
|
`;
|
|
|
|
function RenderLog({ post }: { post: ChangelogPost }) {
|
|
return (
|
|
<Column>
|
|
{post.content.map((entry) =>
|
|
typeof entry === "string" ? (
|
|
<Markdown content={entry} />
|
|
) : entry.type === "element" ? (
|
|
entry.element
|
|
) : (
|
|
<Image src={entry.src} shadow={entry.shadow} />
|
|
),
|
|
)}
|
|
</Column>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Changelog modal
|
|
*/
|
|
export default function Changelog({
|
|
initial,
|
|
onClose,
|
|
signal,
|
|
}: ModalProps<"changelog">) {
|
|
const [log, setLog] = useState(initial);
|
|
|
|
const entry = useMemo(
|
|
() => (log ? changelogEntries[log] : undefined),
|
|
[log],
|
|
);
|
|
|
|
const actions = useMemo(() => {
|
|
const arr: Action[] = [
|
|
{
|
|
palette: "primary",
|
|
children: <Text id="app.special.modals.actions.close" />,
|
|
onClick: noopTrue,
|
|
},
|
|
];
|
|
|
|
if (log) {
|
|
arr.push({
|
|
palette: "plain-secondary",
|
|
children: <Text id="app.special.modals.changelogs.older" />,
|
|
onClick: () => {
|
|
setLog(undefined);
|
|
return false;
|
|
},
|
|
});
|
|
}
|
|
|
|
return arr;
|
|
}, [log]);
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
entry?.title ?? (
|
|
<Text id="app.special.modals.changelogs.title" />
|
|
)
|
|
}
|
|
description={
|
|
entry ? (
|
|
dayjs(entry.date).calendar()
|
|
) : (
|
|
<Text id="app.special.modals.changelogs.description" />
|
|
)
|
|
}
|
|
actions={actions}
|
|
onClose={onClose}
|
|
signal={signal}>
|
|
{entry ? (
|
|
<RenderLog post={entry} />
|
|
) : (
|
|
<Column>
|
|
{changelogEntryArray.map((entry, index) => (
|
|
<CategoryButton
|
|
key={index}
|
|
onClick={() => setLog(index + 1)}>
|
|
{entry.title}
|
|
</CategoryButton>
|
|
))}
|
|
</Column>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|