1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import Link from "next/link";
7
import { Table } from "antd";
8
import { FileInfo } from "lib/share/get-contents";
9
import { join } from "path";
10
import {
11
  human_readable_size as humanReadableSize,
12
  plural,
13
} from "@cocalc/util/misc";
14
import { field_cmp } from "@cocalc/util/misc";
15

16
import type { JSX } from "react";
17

18
interface Props {
19
  id?: string;
20
  relativePath?: string;
21
  listing: FileInfo[];
22
  showHidden?: boolean;
23
}
24

25
export default function DirectoryListing({
26
  id,
27
  listing,
28
  relativePath,
29
  showHidden,
30
}: Props): JSX.Element {
31
  return (
32
    <Table
33
      rowKey={"name"}
34
      dataSource={filter(listing, showHidden)}
35
      columns={columns(id, relativePath)}
36
      pagination={{
37
        hideOnSinglePage: true,
38
        defaultPageSize: 50,
39
        showSizeChanger: true,
40
        pageSizeOptions: ["50", "100", "200", "500"],
41
      }}
42
    />
43
  );
44
}
45

46
function filter(listing, showHidden): FileInfo[] {
47
  if (showHidden) {
48
    return listing;
49
  }
50
  const v: FileInfo[] = [];
51
  for (const x of listing) {
52
    if (!x.name?.startsWith(".")) {
53
      v.push(x);
54
    }
55
  }
56
  return v;
57
}
58

59
function columns(id, relativePath) {
60
  return [
61
    {
62
      title: "Name",
63
      dataIndex: "name",
64
      key: "name",
65
      // for style below, see comment in public-paths.tsx.
66
      render: (name, record) => {
67
        return (
68
          <Link
69
            style={{ width: "100%", display: "inline-block" }}
70
            href={
71
              record.url ??
72
              `/share/public_paths/${id}/${encodeURIComponent(
73
                join(relativePath, name)
74
              )}`
75
            }
76
          >
77
            {record.isdir ? <b>{name}/</b> : name}
78
          </Link>
79
        );
80
      },
81
      sorter: field_cmp("name"),
82
    },
83
    {
84
      title: "Size",
85
      dataIndex: "size",
86
      key: "size",
87
      render: (size, record) => renderSize(size, record.isdir),
88
      align: "right" as any,
89
      sorter: field_cmp("size"),
90
    },
91
    {
92
      title: "Last Modified",
93
      dataIndex: "mtime",
94
      key: "mtime",
95
      align: "right" as any,
96
      render: (mtime) => (mtime ? `${new Date(mtime).toLocaleString()}` : ""),
97
      sorter: field_cmp("mtime"),
98
    },
99
  ];
100
}
101

102
function renderSize(size?: number, isdir?: boolean) {
103
  if (size == null) return "-";
104
  if (isdir) return `${size} ${plural(size, "item")}`;
105
  return humanReadableSize(size);
106
}
107

108