65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import styles from "./task-list-table.module.css";
|
||
|
|
import { Task } from "../../types/public-types";
|
||
|
|
|
||
|
|
export const TaskListTableDefault: React.SFC<{
|
||
|
|
rowHeight: number;
|
||
|
|
rowWidth: string;
|
||
|
|
fontFamily: string;
|
||
|
|
fontSize: string;
|
||
|
|
locale: string;
|
||
|
|
tasks: Task[];
|
||
|
|
}> = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, locale }) => {
|
||
|
|
const dateTimeOptions = {
|
||
|
|
weekday: "short",
|
||
|
|
year: "numeric",
|
||
|
|
month: "long",
|
||
|
|
day: "numeric",
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={styles.taskListWrapper}
|
||
|
|
style={{
|
||
|
|
fontFamily: fontFamily,
|
||
|
|
fontSize: fontSize,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tasks.map(t => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={styles.taskListTableRow}
|
||
|
|
style={{ height: rowHeight }}
|
||
|
|
key={`${t.id}row`}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={styles.taskListCell}
|
||
|
|
style={{
|
||
|
|
minWidth: rowWidth,
|
||
|
|
maxWidth: rowWidth,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t.name}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={styles.taskListCell}
|
||
|
|
style={{
|
||
|
|
minWidth: rowWidth,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t.start.toLocaleDateString(locale, dateTimeOptions)}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={styles.taskListCell}
|
||
|
|
style={{
|
||
|
|
minWidth: rowWidth,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t.end.toLocaleDateString(locale, dateTimeOptions)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|