CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/share/directory-listing.tsx
Views: 687
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
interface Props {

17
  id?: string;

18
  relativePath?: string;

19
  listing: FileInfo[];

20
  showHidden?: boolean;

21
}

22


23
export default function DirectoryListing({

24
  id,

25
  listing,

26
  relativePath,

27
  showHidden,

28
}: Props): JSX.Element {

29
  return (

30
    <Table

31
      rowKey={"name"}

32
      dataSource={filter(listing, showHidden)}

33
      columns={columns(id, relativePath)}

34
      pagination={{

35
        hideOnSinglePage: true,

36
        defaultPageSize: 50,

37
        showSizeChanger: true,

38
        pageSizeOptions: ["50", "100", "200", "500"],

39
      }}

40
    />

41
  );

42
}

43


44
function filter(listing, showHidden): FileInfo[] {

45
  if (showHidden) {

46
    return listing;

47
  }

48
  const v: FileInfo[] = [];

49
  for (const x of listing) {

50
    if (!x.name?.startsWith(".")) {

51
      v.push(x);

52
    }

53
  }

54
  return v;

55
}

56


57
function columns(id, relativePath) {

58
  return [

59
    {

60
      title: "Name",

61
      dataIndex: "name",

62
      key: "name",

63
      // for style below, see comment in public-paths.tsx.

64
      render: (name, record) => {

65
        return (

66
          <Link

67
            style={{ width: "100%", display: "inline-block" }}

68
            href={

69
              record.url ??

70
              `/share/public_paths/${id}/${encodeURIComponent(

71
                join(relativePath, name)

72
              )}`

73
            }

74
          >

75
            {record.isdir ? <b>{name}/</b> : name}

76
          </Link>

77
        );

78
      },

79
      sorter: field_cmp("name"),

80
    },

81
    {

82
      title: "Size",

83
      dataIndex: "size",

84
      key: "size",

85
      render: (size, record) => renderSize(size, record.isdir),

86
      align: "right" as any,

87
      sorter: field_cmp("size"),

88
    },

89
    {

90
      title: "Last Modified",

91
      dataIndex: "mtime",

92
      key: "mtime",

93
      align: "right" as any,

94
      render: (mtime) => (mtime ? `${new Date(mtime).toLocaleString()}` : ""),

95
      sorter: field_cmp("mtime"),

96
    },

97
  ];

98
}

99


100
function renderSize(size?: number, isdir?: boolean) {

101
  if (size == null) return "-";

102
  if (isdir) return `${size} ${plural(size, "item")}`;

103
  return humanReadableSize(size);

104
}

105


106