60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
// @flow
|
|
import { DoneIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import styled, { useTheme } from "styled-components";
|
|
import CircularProgressBar from "components/CircularProgressBar";
|
|
import usePrevious from "../hooks/usePrevious";
|
|
import Document from "../models/Document";
|
|
import { bounceIn } from "styles/animations";
|
|
|
|
type Props = {|
|
|
document: Document,
|
|
|};
|
|
|
|
function getMessage(t, total, completed) {
|
|
if (completed === 0) {
|
|
return t(`{{ total }} task`, { total, count: total });
|
|
} else if (completed === total) {
|
|
return t(`{{ completed }} task done`, { completed, count: completed });
|
|
} else {
|
|
return t(`{{ completed }} of {{ total }} tasks`, {
|
|
total,
|
|
completed,
|
|
});
|
|
}
|
|
}
|
|
|
|
function DocumentTasks({ document }: Props) {
|
|
const { tasks, tasksPercentage } = document;
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const { completed, total } = tasks;
|
|
const done = completed === total;
|
|
const previousDone = usePrevious(done);
|
|
const message = getMessage(t, total, completed);
|
|
|
|
return (
|
|
<>
|
|
{completed === total ? (
|
|
<Done
|
|
color={theme.primary}
|
|
size={20}
|
|
$animated={done && previousDone === false}
|
|
/>
|
|
) : (
|
|
<CircularProgressBar percentage={tasksPercentage} />
|
|
)}
|
|
{message}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const Done = styled(DoneIcon)`
|
|
margin: -1px;
|
|
animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
|
|
transform-origin: center center;
|
|
`;
|
|
|
|
export default DocumentTasks;
|