@datalayer/core
Version:
**Datalayer Core**
156 lines (155 loc) • 6.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { Box, LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime } from '@primer/react';
import { Table, DataTable } from '@primer/react/experimental';
import { KebabHorizontalIcon, DownloadIcon } from '@primer/octicons-react';
import { VisuallyHidden } from './../../components/display';
const now = Date.now();
const Second = 1000;
const Minute = 60 * Second;
const Hour = 60 * Minute;
const Day = 24 * Hour;
const Week = 7 * Day;
const Month = 4 * Week;
const data = [
{
id: 1,
name: 'codeql-dca-worker',
type: 'internal',
updatedAt: now,
securityFeatures: {
dependabot: ['alerts', 'security updates'],
codeScanning: ['report secrets'],
},
},
{
id: 2,
name: 'aegir',
type: 'public',
updatedAt: now - 5 * Minute,
securityFeatures: {
dependabot: ['alerts'],
codeScanning: ['report secrets'],
},
},
{
id: 3,
name: 'strapi',
type: 'public',
updatedAt: now - 1 * Hour,
securityFeatures: {
dependabot: [],
codeScanning: [],
},
},
{
id: 4,
name: 'codeql-ci-nightlies',
type: 'public',
updatedAt: now - 6 * Hour,
securityFeatures: {
dependabot: ['alerts'],
codeScanning: [],
},
},
{
id: 5,
name: 'dependabot-updates',
type: 'public',
updatedAt: now - 1 * Day,
securityFeatures: {
dependabot: [],
codeScanning: [],
},
},
{
id: 6,
name: 'tsx-create-react-app',
type: 'public',
updatedAt: now - 1 * Week,
securityFeatures: {
dependabot: [],
codeScanning: [],
},
},
{
id: 7,
name: 'bootstrap',
type: 'public',
updatedAt: now - 1 * Month,
securityFeatures: {
dependabot: ['alerts'],
codeScanning: [],
},
},
{
id: 8,
name: 'docker-templates',
type: 'public',
updatedAt: now - 3 * Month,
securityFeatures: {
dependabot: ['alerts'],
codeScanning: [],
},
},
];
function uppercase(input) {
return input[0].toUpperCase() + input.slice(1);
}
export const TableMock = (props) => {
const { title } = props;
return (_jsx(Box, { display: "grid", sx: { gap: 3 }, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
{
header: 'Repository',
field: 'name',
rowHeader: true,
},
{
header: 'Type',
field: 'type',
renderCell: row => {
return _jsx(Label, { children: uppercase(row.type) });
},
},
{
header: 'Updated',
field: 'updatedAt',
renderCell: row => {
return _jsx(RelativeTime, { date: new Date(row.updatedAt) });
},
},
{
header: 'Dependabot',
field: 'securityFeatures.dependabot',
renderCell: row => {
return row.securityFeatures.dependabot.length > 0 ? (_jsx(LabelGroup, { children: row.securityFeatures.dependabot.map(feature => {
return _jsx(Label, { children: uppercase(feature) }, feature);
}) })) : null;
},
},
{
header: 'Code scanning',
field: 'securityFeatures.codeScanning',
renderCell: row => {
return row.securityFeatures.codeScanning.length > 0 ? (_jsx(LabelGroup, { children: row.securityFeatures.codeScanning.map(feature => {
return _jsx(Label, { children: uppercase(feature) }, feature);
}) })) : null;
},
},
{
id: 'actions',
header: () => _jsx(VisuallyHidden, { children: "Actions" }),
renderCell: row => {
return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": `Download: ${row.name}`, title: `Download: ${row.name}`, icon: DownloadIcon, variant: "invisible", onClick: () => {
alert(row);
} }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { "aria-label": `Actions: ${row.name}`, title: `Actions: ${row.name}`, icon: KebabHorizontalIcon, variant: "invisible" }) }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => {
alert(row);
}, children: "Copy row" }), _jsx(ActionList.Item, { children: "Edit row" }), _jsx(ActionList.Item, { children: "Export row as CSV" }), _jsx(ActionList.Divider, {}), _jsx(ActionList.Item, { variant: "danger", children: "Delete row" })] }) })] })] }));
},
},
] })] }) }));
};
export default TableMock;