Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 1x 20x 1x 1x 20x 20x 20x 1x 15x 15x 20x 20x 15x | import { Box, Stack } from "@mui/material";
import { LockIcon } from "@phosphor-icons/react";
import GiveAvatar from "@shared/Avatar/GiveAvatar";
import GiveText from "@shared/Text/GiveText";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { useAppTheme } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { TableColumnType } from "componentsV2/Table/Table.types";
import { LegalDocument } from "./types";
import { formatPublishedDate } from "./publishedDate";
const renderText = (value?: string | null, isDraft?: boolean) => (
<GiveText variant="bodyS" color={isDraft ? "error" : "primary"}>
{value ?? "-"}
</GiveText>
);
const renderLastEdited = (row?: LegalDocument) => (
<Stack direction="row" alignItems="center" gap="16px">
<GiveAvatar
size="32px"
imageUrl={row?.lastEditedBy?.imageURL}
name={row?.lastEditedBy?.name}
/>
<Stack direction="column" gap="4px">
<GiveTruncateText variant="bodyS" color="primary" lineClamp={1}>
{row?.lastEditedBy?.name}
</GiveTruncateText>
<GiveTruncateText variant="bodyXS" color="secondary" lineClamp={1}>
{row?.lastEditedBy?.email}
</GiveTruncateText>
</Stack>
</Stack>
);
const RenderName = ({ row }: { row?: LegalDocument }) => {
const { palette } = useAppTheme();
Iif (!row) return null;
return (
<Stack direction="row" alignItems="center" gap="8px">
<GiveText variant="bodyS" color="primary">
{row.name ?? "-"}
</GiveText>
{!row.canEdit && (
<GiveTooltip title="You don't have permission to edit this document">
<Box
component="span"
aria-label="no permission"
sx={{
display: "inline-flex",
alignItems: "center",
color: palette.text.secondary,
}}
>
<LockIcon size={16} />
</Box>
</GiveTooltip>
)}
</Stack>
);
};
export const useLegalDocumentsColumns = () => {
const { isWideView } = useCustomThemeV2();
// columnType drives the loading skeleton shape per cell (TableRowSkeleton);
// without it every column falls back to a generic full-width text bar.
const columns: TableColumnType[] = [
{
key: "name",
sortable: true,
title: "Name",
columnType: "text",
columnWidth: isWideView ? 3 / 12 : 6 / 12,
renderColumn: (row?: LegalDocument) => <RenderName row={row} />,
},
{
key: "version",
sortable: true,
title: "Version",
columnType: "half-text",
columnWidth: isWideView ? 2 / 12 : 6 / 12,
headerPosition: (isWideView
? "left"
: "right") as TableColumnType["headerPosition"],
renderColumn: (row?: LegalDocument) =>
renderText(row?.isDraft ? "Draft" : row?.version, row?.isDraft),
},
{
key: "lastEditedBy",
sortable: false,
title: "Last Edited By",
// Mockup (node 4092-18981): circular avatar + a single text bar.
columnType: "assignment",
columnWidth: 3 / 12,
hideColumn: !isWideView,
renderColumn: renderLastEdited,
},
{
key: "publishedDate",
sortable: true,
title: "Published Date",
columnType: "half-text",
columnWidth: 2 / 12,
hideColumn: !isWideView,
// No GiveDateTooltip ("Eastern Time (ET)") here: published_at is a
// calendar date (midnight UTC), not an event timestamp, so it is
// formatted in UTC and carries no timezone. See publishedDate.ts.
renderColumn: (row?: LegalDocument) =>
row?.publishedDate ? (
<GiveText variant="bodyS" color="primary">
{formatPublishedDate(row.publishedDate)}
</GiveText>
) : (
renderText(null)
),
},
];
return { columns };
};
|