2024-05-21 01:08:45 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
import { ContextMenuModel } from "@/app/store/contextmenu";
|
2024-10-10 00:12:20 +02:00
|
|
|
import { PLATFORM, atoms, createBlock, getApi } from "@/app/store/global";
|
2024-10-03 02:21:34 +02:00
|
|
|
import { FileService } from "@/app/store/services";
|
2024-08-01 21:53:49 +02:00
|
|
|
import type { PreviewModel } from "@/app/view/preview/preview";
|
2024-10-03 02:21:34 +02:00
|
|
|
import { checkKeyPressed, isCharacterKeyEvent } from "@/util/keyutil";
|
|
|
|
import { base64ToString, isBlank } from "@/util/util";
|
2024-06-25 21:37:58 +02:00
|
|
|
import {
|
2024-07-16 22:24:04 +02:00
|
|
|
Column,
|
2024-07-03 23:34:55 +02:00
|
|
|
Row,
|
2024-06-25 21:37:58 +02:00
|
|
|
Table,
|
|
|
|
createColumnHelper,
|
|
|
|
flexRender,
|
|
|
|
getCoreRowModel,
|
|
|
|
getSortedRowModel,
|
|
|
|
useReactTable,
|
|
|
|
} from "@tanstack/react-table";
|
2024-06-04 03:22:26 +02:00
|
|
|
import clsx from "clsx";
|
2024-06-28 03:13:42 +02:00
|
|
|
import dayjs from "dayjs";
|
2024-10-03 02:21:34 +02:00
|
|
|
import { useAtom, useAtomValue } from "jotai";
|
|
|
|
import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
|
2024-07-26 06:14:21 +02:00
|
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
2024-07-27 01:06:46 +02:00
|
|
|
import { quote as shellQuote } from "shell-quote";
|
2024-10-03 02:21:34 +02:00
|
|
|
import { debounce } from "throttle-debounce";
|
2024-05-29 09:00:36 +02:00
|
|
|
import "./directorypreview.less";
|
2024-05-21 01:08:45 +02:00
|
|
|
|
|
|
|
interface DirectoryTableProps {
|
2024-08-19 20:02:40 +02:00
|
|
|
model: PreviewModel;
|
2024-05-21 01:08:45 +02:00
|
|
|
data: FileInfo[];
|
2024-07-03 23:34:55 +02:00
|
|
|
search: string;
|
2024-06-27 01:59:45 +02:00
|
|
|
focusIndex: number;
|
|
|
|
setFocusIndex: (_: number) => void;
|
2024-06-27 21:30:08 +02:00
|
|
|
setSearch: (_: string) => void;
|
2024-06-28 03:13:42 +02:00
|
|
|
setSelectedPath: (_: string) => void;
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion: React.Dispatch<React.SetStateAction<number>>;
|
2024-05-21 01:08:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const columnHelper = createColumnHelper<FileInfo>();
|
|
|
|
|
2024-06-22 09:41:49 +02:00
|
|
|
const displaySuffixes = {
|
|
|
|
B: "b",
|
|
|
|
kB: "k",
|
|
|
|
MB: "m",
|
|
|
|
GB: "g",
|
|
|
|
TB: "t",
|
|
|
|
KiB: "k",
|
|
|
|
MiB: "m",
|
|
|
|
GiB: "g",
|
|
|
|
TiB: "t",
|
|
|
|
};
|
|
|
|
|
|
|
|
function getBestUnit(bytes: number, si: boolean = false, sigfig: number = 3): string {
|
|
|
|
if (bytes < 0) {
|
2024-06-25 21:37:58 +02:00
|
|
|
return "-";
|
2024-06-22 09:41:49 +02:00
|
|
|
}
|
|
|
|
const units = si ? ["kB", "MB", "GB", "TB"] : ["KiB", "MiB", "GiB", "TiB"];
|
|
|
|
const divisor = si ? 1000 : 1024;
|
|
|
|
|
|
|
|
let currentUnit = "B";
|
|
|
|
let currentValue = bytes;
|
|
|
|
let idx = 0;
|
|
|
|
while (currentValue > divisor && idx < units.length - 1) {
|
|
|
|
currentUnit = units[idx];
|
|
|
|
currentValue /= divisor;
|
2024-06-26 21:14:59 +02:00
|
|
|
idx += 1;
|
2024-06-22 09:41:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return `${parseFloat(currentValue.toPrecision(sigfig))}${displaySuffixes[currentUnit]}`;
|
|
|
|
}
|
|
|
|
|
2024-07-16 22:24:04 +02:00
|
|
|
function getLastModifiedTime(unixMillis: number, column: Column<FileInfo, number>): string {
|
2024-07-26 06:14:21 +02:00
|
|
|
const fileDatetime = dayjs(new Date(unixMillis));
|
|
|
|
const nowDatetime = dayjs(new Date());
|
2024-06-28 03:13:42 +02:00
|
|
|
|
2024-07-16 22:24:04 +02:00
|
|
|
let datePortion: string;
|
|
|
|
if (nowDatetime.isSame(fileDatetime, "date")) {
|
|
|
|
datePortion = "Today";
|
|
|
|
} else if (nowDatetime.subtract(1, "day").isSame(fileDatetime, "date")) {
|
|
|
|
datePortion = "Yesterday";
|
2024-06-28 03:13:42 +02:00
|
|
|
} else {
|
2024-07-16 22:24:04 +02:00
|
|
|
datePortion = dayjs(fileDatetime).format("M/D/YY");
|
2024-06-22 09:41:49 +02:00
|
|
|
}
|
2024-07-16 22:24:04 +02:00
|
|
|
|
|
|
|
if (column.getSize() > 120) {
|
|
|
|
return `${datePortion}, ${dayjs(fileDatetime).format("h:mm A")}`;
|
|
|
|
}
|
|
|
|
return datePortion;
|
2024-06-22 09:41:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const iconRegex = /^[a-z0-9- ]+$/;
|
|
|
|
|
|
|
|
function isIconValid(icon: string): boolean {
|
2024-10-03 02:21:34 +02:00
|
|
|
if (isBlank(icon)) {
|
2024-06-22 09:41:49 +02:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return icon.match(iconRegex) != null;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getIconClass(icon: string): string {
|
|
|
|
if (!isIconValid(icon)) {
|
|
|
|
return "fa fa-solid fa-question fa-fw";
|
|
|
|
}
|
|
|
|
return `fa fa-solid fa-${icon} fa-fw`;
|
|
|
|
}
|
2024-05-21 01:08:45 +02:00
|
|
|
|
2024-06-25 21:37:58 +02:00
|
|
|
function getSortIcon(sortType: string | boolean): React.ReactNode {
|
|
|
|
switch (sortType) {
|
|
|
|
case "asc":
|
|
|
|
return <i className="fa-solid fa-chevron-up dir-table-head-direction"></i>;
|
|
|
|
case "desc":
|
|
|
|
return <i className="fa-solid fa-chevron-down dir-table-head-direction"></i>;
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-06-26 21:14:59 +02:00
|
|
|
function cleanMimetype(input: string): string {
|
|
|
|
const truncated = input.split(";")[0];
|
|
|
|
return truncated.trim();
|
|
|
|
}
|
|
|
|
|
2024-06-28 03:13:42 +02:00
|
|
|
function DirectoryTable({
|
2024-08-19 20:02:40 +02:00
|
|
|
model,
|
2024-06-28 03:13:42 +02:00
|
|
|
data,
|
2024-07-03 23:34:55 +02:00
|
|
|
search,
|
2024-06-28 03:13:42 +02:00
|
|
|
focusIndex,
|
|
|
|
setFocusIndex,
|
|
|
|
setSearch,
|
|
|
|
setSelectedPath,
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion,
|
2024-06-28 03:13:42 +02:00
|
|
|
}: DirectoryTableProps) {
|
2024-10-03 02:21:34 +02:00
|
|
|
const fullConfig = useAtomValue(atoms.fullConfigAtom);
|
2024-07-26 06:14:21 +02:00
|
|
|
const getIconFromMimeType = useCallback(
|
2024-06-22 09:41:49 +02:00
|
|
|
(mimeType: string): string => {
|
|
|
|
while (mimeType.length > 0) {
|
2024-10-03 02:21:34 +02:00
|
|
|
const icon = fullConfig.mimetypes?.[mimeType]?.icon ?? null;
|
2024-06-22 09:41:49 +02:00
|
|
|
if (isIconValid(icon)) {
|
|
|
|
return `fa fa-solid fa-${icon} fa-fw`;
|
|
|
|
}
|
|
|
|
mimeType = mimeType.slice(0, -1);
|
|
|
|
}
|
2024-06-25 21:37:58 +02:00
|
|
|
return "fa fa-solid fa-file fa-fw";
|
2024-06-22 09:41:49 +02:00
|
|
|
},
|
2024-08-28 03:49:49 +02:00
|
|
|
[fullConfig.mimetypes]
|
2024-06-22 09:41:49 +02:00
|
|
|
);
|
2024-07-26 06:14:21 +02:00
|
|
|
const getIconColor = useCallback(
|
2024-10-03 02:21:34 +02:00
|
|
|
(mimeType: string): string => fullConfig.mimetypes?.[mimeType]?.color ?? "inherit",
|
2024-08-28 03:49:49 +02:00
|
|
|
[fullConfig.mimetypes]
|
2024-06-26 21:14:59 +02:00
|
|
|
);
|
2024-07-26 06:14:21 +02:00
|
|
|
const columns = useMemo(
|
2024-06-22 09:41:49 +02:00
|
|
|
() => [
|
|
|
|
columnHelper.accessor("mimetype", {
|
2024-06-26 21:14:59 +02:00
|
|
|
cell: (info) => (
|
|
|
|
<i
|
|
|
|
className={getIconFromMimeType(info.getValue() ?? "")}
|
|
|
|
style={{ color: getIconColor(info.getValue() ?? "") }}
|
|
|
|
></i>
|
|
|
|
),
|
|
|
|
header: () => <span></span>,
|
2024-06-22 09:41:49 +02:00
|
|
|
id: "logo",
|
|
|
|
size: 25,
|
2024-06-25 21:37:58 +02:00
|
|
|
enableSorting: false,
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
2024-06-27 21:30:08 +02:00
|
|
|
columnHelper.accessor("name", {
|
|
|
|
cell: (info) => <span className="dir-table-name">{info.getValue()}</span>,
|
2024-07-10 11:21:29 +02:00
|
|
|
header: () => <span className="dir-table-head-name">Name</span>,
|
2024-06-25 21:37:58 +02:00
|
|
|
sortingFn: "alphanumeric",
|
2024-07-16 22:24:04 +02:00
|
|
|
size: 200,
|
|
|
|
minSize: 90,
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
|
|
|
columnHelper.accessor("modestr", {
|
2024-06-26 18:31:43 +02:00
|
|
|
cell: (info) => <span className="dir-table-modestr">{info.getValue()}</span>,
|
2024-07-18 01:11:16 +02:00
|
|
|
header: () => <span>Perm</span>,
|
2024-06-22 09:41:49 +02:00
|
|
|
size: 91,
|
2024-07-16 22:24:04 +02:00
|
|
|
minSize: 90,
|
2024-06-25 21:37:58 +02:00
|
|
|
sortingFn: "alphanumeric",
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
|
|
|
columnHelper.accessor("modtime", {
|
2024-07-16 22:24:04 +02:00
|
|
|
cell: (info) => (
|
|
|
|
<span className="dir-table-lastmod">{getLastModifiedTime(info.getValue(), info.column)}</span>
|
|
|
|
),
|
2024-06-22 09:41:49 +02:00
|
|
|
header: () => <span>Last Modified</span>,
|
2024-07-16 22:24:04 +02:00
|
|
|
size: 91,
|
|
|
|
minSize: 65,
|
2024-06-25 21:37:58 +02:00
|
|
|
sortingFn: "datetime",
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
|
|
|
columnHelper.accessor("size", {
|
2024-06-26 18:31:43 +02:00
|
|
|
cell: (info) => <span className="dir-table-size">{getBestUnit(info.getValue())}</span>,
|
2024-07-09 01:42:01 +02:00
|
|
|
header: () => <span className="dir-table-head-size">Size</span>,
|
2024-06-22 09:41:49 +02:00
|
|
|
size: 55,
|
2024-07-16 22:24:04 +02:00
|
|
|
minSize: 50,
|
2024-06-25 21:37:58 +02:00
|
|
|
sortingFn: "auto",
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
|
|
|
columnHelper.accessor("mimetype", {
|
2024-06-26 21:14:59 +02:00
|
|
|
cell: (info) => <span className="dir-table-type">{cleanMimetype(info.getValue() ?? "")}</span>,
|
2024-07-10 11:21:29 +02:00
|
|
|
header: () => <span className="dir-table-head-type">Type</span>,
|
2024-07-26 06:14:21 +02:00
|
|
|
size: 97,
|
|
|
|
minSize: 97,
|
2024-06-25 21:37:58 +02:00
|
|
|
sortingFn: "alphanumeric",
|
2024-06-22 09:41:49 +02:00
|
|
|
}),
|
2024-06-27 21:30:08 +02:00
|
|
|
columnHelper.accessor("path", {}),
|
2024-06-22 09:41:49 +02:00
|
|
|
],
|
2024-08-28 03:49:49 +02:00
|
|
|
[fullConfig]
|
2024-06-22 09:41:49 +02:00
|
|
|
);
|
|
|
|
|
2024-05-21 01:08:45 +02:00
|
|
|
const table = useReactTable({
|
|
|
|
data,
|
|
|
|
columns,
|
|
|
|
columnResizeMode: "onChange",
|
2024-06-25 21:37:58 +02:00
|
|
|
getSortedRowModel: getSortedRowModel(),
|
2024-05-21 01:08:45 +02:00
|
|
|
getCoreRowModel: getCoreRowModel(),
|
2024-06-27 21:30:08 +02:00
|
|
|
|
2024-06-25 21:37:58 +02:00
|
|
|
initialState: {
|
|
|
|
sorting: [
|
|
|
|
{
|
2024-06-27 21:30:08 +02:00
|
|
|
id: "name",
|
2024-06-25 21:37:58 +02:00
|
|
|
desc: false,
|
|
|
|
},
|
|
|
|
],
|
2024-06-27 21:30:08 +02:00
|
|
|
columnVisibility: {
|
|
|
|
path: false,
|
|
|
|
},
|
2024-07-03 23:34:55 +02:00
|
|
|
rowPinning: {
|
|
|
|
top: [],
|
|
|
|
bottom: [],
|
|
|
|
},
|
2024-06-25 21:37:58 +02:00
|
|
|
},
|
|
|
|
enableMultiSort: false,
|
|
|
|
enableSortingRemoval: false,
|
2024-05-21 01:08:45 +02:00
|
|
|
});
|
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
2024-07-03 23:34:55 +02:00
|
|
|
setSelectedPath((table.getSortedRowModel()?.flatRows[focusIndex]?.getValue("path") as string) ?? null);
|
|
|
|
}, [table, focusIndex, data]);
|
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const rows = table.getRowModel()?.flatRows;
|
2024-07-03 23:34:55 +02:00
|
|
|
for (const row of rows) {
|
|
|
|
if (row.getValue("name") == "..") {
|
|
|
|
row.pin("top");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [data]);
|
2024-07-26 06:14:21 +02:00
|
|
|
const columnSizeVars = useMemo(() => {
|
2024-05-21 21:14:04 +02:00
|
|
|
const headers = table.getFlatHeaders();
|
|
|
|
const colSizes: { [key: string]: number } = {};
|
|
|
|
for (let i = 0; i < headers.length; i++) {
|
|
|
|
const header = headers[i]!;
|
|
|
|
colSizes[`--header-${header.id}-size`] = header.getSize();
|
|
|
|
colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
|
|
|
|
}
|
|
|
|
return colSizes;
|
|
|
|
}, [table.getState().columnSizingInfo]);
|
|
|
|
|
2024-10-03 02:21:34 +02:00
|
|
|
const osRef = useRef<OverlayScrollbarsComponentRef>();
|
|
|
|
const bodyRef = useRef<HTMLDivElement>();
|
|
|
|
const [scrollHeight, setScrollHeight] = useState(0);
|
|
|
|
|
|
|
|
const onScroll = useCallback(
|
|
|
|
debounce(2, () => {
|
|
|
|
setScrollHeight(osRef.current.osInstance().elements().viewport.scrollTop);
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
);
|
2024-05-21 01:08:45 +02:00
|
|
|
return (
|
2024-10-03 02:21:34 +02:00
|
|
|
<OverlayScrollbarsComponent
|
|
|
|
options={{ scrollbars: { autoHide: "leave" } }}
|
|
|
|
events={{ scroll: onScroll }}
|
|
|
|
className="dir-table"
|
|
|
|
style={{ ...columnSizeVars }}
|
|
|
|
ref={osRef}
|
|
|
|
data-scroll-height={scrollHeight}
|
|
|
|
>
|
2024-05-21 21:14:04 +02:00
|
|
|
<div className="dir-table-head">
|
2024-05-21 01:08:45 +02:00
|
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
2024-05-21 21:14:04 +02:00
|
|
|
<div className="dir-table-head-row" key={headerGroup.id}>
|
2024-05-21 01:08:45 +02:00
|
|
|
{headerGroup.headers.map((header) => (
|
2024-07-10 11:21:29 +02:00
|
|
|
<div
|
|
|
|
className="dir-table-head-cell"
|
|
|
|
key={header.id}
|
|
|
|
style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
|
|
|
|
>
|
2024-05-21 21:14:04 +02:00
|
|
|
<div
|
2024-07-09 01:42:01 +02:00
|
|
|
className="dir-table-head-cell-content"
|
|
|
|
onClick={() => header.column.toggleSorting()}
|
|
|
|
>
|
|
|
|
{header.isPlaceholder
|
|
|
|
? null
|
|
|
|
: flexRender(header.column.columnDef.header, header.getContext())}
|
|
|
|
{getSortIcon(header.column.getIsSorted())}
|
|
|
|
</div>
|
|
|
|
<div className="dir-table-head-resize-box">
|
|
|
|
<div
|
|
|
|
className="dir-table-head-resize"
|
|
|
|
onMouseDown={header.getResizeHandler()}
|
|
|
|
onTouchStart={header.getResizeHandler()}
|
|
|
|
/>
|
|
|
|
</div>
|
2024-05-21 21:14:04 +02:00
|
|
|
</div>
|
2024-05-21 01:08:45 +02:00
|
|
|
))}
|
2024-05-21 21:14:04 +02:00
|
|
|
</div>
|
2024-05-21 01:08:45 +02:00
|
|
|
))}
|
2024-05-21 21:14:04 +02:00
|
|
|
</div>
|
|
|
|
{table.getState().columnSizingInfo.isResizingColumn ? (
|
2024-06-27 01:59:45 +02:00
|
|
|
<MemoizedTableBody
|
2024-10-03 02:21:34 +02:00
|
|
|
bodyRef={bodyRef}
|
2024-08-19 20:02:40 +02:00
|
|
|
model={model}
|
2024-07-03 23:34:55 +02:00
|
|
|
data={data}
|
2024-06-27 01:59:45 +02:00
|
|
|
table={table}
|
2024-07-03 23:34:55 +02:00
|
|
|
search={search}
|
2024-06-27 01:59:45 +02:00
|
|
|
focusIndex={focusIndex}
|
|
|
|
setFocusIndex={setFocusIndex}
|
2024-06-27 21:30:08 +02:00
|
|
|
setSearch={setSearch}
|
2024-06-28 03:13:42 +02:00
|
|
|
setSelectedPath={setSelectedPath}
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion={setRefreshVersion}
|
2024-10-03 02:21:34 +02:00
|
|
|
osRef={osRef.current}
|
2024-06-27 01:59:45 +02:00
|
|
|
/>
|
2024-05-21 21:14:04 +02:00
|
|
|
) : (
|
2024-06-27 01:59:45 +02:00
|
|
|
<TableBody
|
2024-10-03 02:21:34 +02:00
|
|
|
bodyRef={bodyRef}
|
2024-08-19 20:02:40 +02:00
|
|
|
model={model}
|
2024-07-03 23:34:55 +02:00
|
|
|
data={data}
|
2024-06-27 01:59:45 +02:00
|
|
|
table={table}
|
2024-07-03 23:34:55 +02:00
|
|
|
search={search}
|
2024-06-27 01:59:45 +02:00
|
|
|
focusIndex={focusIndex}
|
|
|
|
setFocusIndex={setFocusIndex}
|
2024-06-27 21:30:08 +02:00
|
|
|
setSearch={setSearch}
|
2024-06-28 03:13:42 +02:00
|
|
|
setSelectedPath={setSelectedPath}
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion={setRefreshVersion}
|
2024-10-03 02:21:34 +02:00
|
|
|
osRef={osRef.current}
|
2024-06-27 01:59:45 +02:00
|
|
|
/>
|
2024-05-21 21:14:04 +02:00
|
|
|
)}
|
2024-10-03 02:21:34 +02:00
|
|
|
</OverlayScrollbarsComponent>
|
2024-05-21 21:14:04 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-05-29 09:00:36 +02:00
|
|
|
interface TableBodyProps {
|
2024-10-03 02:21:34 +02:00
|
|
|
bodyRef: React.RefObject<HTMLDivElement>;
|
2024-08-19 20:02:40 +02:00
|
|
|
model: PreviewModel;
|
2024-07-03 23:34:55 +02:00
|
|
|
data: Array<FileInfo>;
|
2024-05-29 09:00:36 +02:00
|
|
|
table: Table<FileInfo>;
|
2024-07-03 23:34:55 +02:00
|
|
|
search: string;
|
2024-06-27 01:59:45 +02:00
|
|
|
focusIndex: number;
|
|
|
|
setFocusIndex: (_: number) => void;
|
2024-06-27 21:30:08 +02:00
|
|
|
setSearch: (_: string) => void;
|
2024-06-28 03:13:42 +02:00
|
|
|
setSelectedPath: (_: string) => void;
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion: React.Dispatch<React.SetStateAction<number>>;
|
2024-10-03 02:21:34 +02:00
|
|
|
osRef: OverlayScrollbarsComponentRef;
|
2024-05-29 09:00:36 +02:00
|
|
|
}
|
|
|
|
|
2024-06-28 03:13:42 +02:00
|
|
|
function TableBody({
|
2024-10-03 02:21:34 +02:00
|
|
|
bodyRef,
|
2024-08-19 20:02:40 +02:00
|
|
|
model,
|
2024-06-28 03:13:42 +02:00
|
|
|
table,
|
2024-07-03 23:34:55 +02:00
|
|
|
search,
|
2024-06-28 03:13:42 +02:00
|
|
|
focusIndex,
|
|
|
|
setFocusIndex,
|
|
|
|
setSearch,
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion,
|
2024-10-03 02:21:34 +02:00
|
|
|
osRef,
|
2024-06-28 03:13:42 +02:00
|
|
|
}: TableBodyProps) {
|
2024-10-03 02:21:34 +02:00
|
|
|
const dummyLineRef = useRef<HTMLDivElement>();
|
|
|
|
const warningBoxRef = useRef<HTMLDivElement>();
|
2024-07-26 06:14:21 +02:00
|
|
|
const rowRefs = useRef<HTMLDivElement[]>([]);
|
2024-10-03 02:21:34 +02:00
|
|
|
const conn = useAtomValue(model.connection);
|
2024-07-26 06:14:21 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2024-10-03 02:21:34 +02:00
|
|
|
if (focusIndex !== null && rowRefs.current[focusIndex] && bodyRef.current && osRef) {
|
|
|
|
const viewport = osRef.osInstance().elements().viewport;
|
2024-07-26 06:14:21 +02:00
|
|
|
const viewportHeight = viewport.offsetHeight;
|
|
|
|
const rowElement = rowRefs.current[focusIndex];
|
|
|
|
const rowRect = rowElement.getBoundingClientRect();
|
2024-10-03 02:21:34 +02:00
|
|
|
const parentRect = bodyRef.current.getBoundingClientRect();
|
2024-07-26 06:14:21 +02:00
|
|
|
const viewportScrollTop = viewport.scrollTop;
|
|
|
|
|
2024-10-09 21:42:23 +02:00
|
|
|
const rowTopRelativeToViewport = rowRect.top - parentRect.top;
|
|
|
|
const rowBottomRelativeToViewport = rowRect.bottom - parentRect.top;
|
2024-07-26 06:14:21 +02:00
|
|
|
|
|
|
|
if (rowTopRelativeToViewport < viewportScrollTop) {
|
|
|
|
// Row is above the visible area
|
|
|
|
viewport.scrollTo({ top: rowTopRelativeToViewport });
|
|
|
|
} else if (rowBottomRelativeToViewport > viewportScrollTop + viewportHeight) {
|
|
|
|
// Row is below the visible area
|
|
|
|
viewport.scrollTo({ top: rowBottomRelativeToViewport - viewportHeight });
|
|
|
|
}
|
|
|
|
}
|
2024-10-09 21:42:23 +02:00
|
|
|
// setIndexChangedFromClick(false);
|
2024-10-03 02:21:34 +02:00
|
|
|
}, [focusIndex]);
|
2024-06-28 03:13:42 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
const handleFileContextMenu = useCallback(
|
2024-07-26 09:48:12 +02:00
|
|
|
(e: any, path: string, mimetype: string) => {
|
2024-06-28 03:13:42 +02:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
2024-07-27 01:06:46 +02:00
|
|
|
const fileName = path.split("/").pop();
|
|
|
|
const menu: ContextMenuItem[] = [
|
2024-07-26 06:14:21 +02:00
|
|
|
{
|
2024-07-27 01:06:46 +02:00
|
|
|
label: "Copy File Name",
|
|
|
|
click: () => navigator.clipboard.writeText(fileName),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Copy Full File Name",
|
|
|
|
click: () => navigator.clipboard.writeText(path),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Copy File Name (Shell Quoted)",
|
|
|
|
click: () => navigator.clipboard.writeText(shellQuote([fileName])),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Copy Full File Name (Shell Quoted)",
|
|
|
|
click: () => navigator.clipboard.writeText(shellQuote([path])),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: "separator",
|
2024-06-28 03:13:42 +02:00
|
|
|
},
|
2024-07-26 06:14:21 +02:00
|
|
|
{
|
|
|
|
label: "Download File",
|
|
|
|
click: async () => {
|
|
|
|
getApi().downloadFile(path);
|
|
|
|
},
|
2024-06-28 03:13:42 +02:00
|
|
|
},
|
2024-07-27 01:06:46 +02:00
|
|
|
{
|
|
|
|
type: "separator",
|
|
|
|
},
|
2024-07-26 09:48:12 +02:00
|
|
|
{
|
|
|
|
label: "Open Preview in New Block",
|
|
|
|
click: async () => {
|
2024-08-07 23:27:16 +02:00
|
|
|
const blockDef: BlockDef = {
|
2024-07-31 23:13:36 +02:00
|
|
|
meta: {
|
|
|
|
view: "preview",
|
|
|
|
file: path,
|
|
|
|
},
|
2024-07-26 09:48:12 +02:00
|
|
|
};
|
|
|
|
await createBlock(blockDef);
|
|
|
|
},
|
|
|
|
},
|
2024-07-26 06:14:21 +02:00
|
|
|
];
|
2024-07-26 09:48:12 +02:00
|
|
|
if (mimetype == "directory") {
|
|
|
|
menu.push({
|
|
|
|
label: "Open Terminal in New Block",
|
|
|
|
click: async () => {
|
|
|
|
const termBlockDef: BlockDef = {
|
|
|
|
meta: {
|
2024-07-31 23:13:36 +02:00
|
|
|
controller: "shell",
|
|
|
|
view: "term",
|
|
|
|
"cmd:cwd": path,
|
2024-07-26 09:48:12 +02:00
|
|
|
},
|
|
|
|
};
|
|
|
|
await createBlock(termBlockDef);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2024-07-27 01:06:46 +02:00
|
|
|
menu.push({ type: "separator" });
|
|
|
|
menu.push({
|
|
|
|
label: "Delete File",
|
|
|
|
click: async () => {
|
2024-10-03 02:21:34 +02:00
|
|
|
await FileService.DeleteFile(conn, path).catch((e) => console.log(e));
|
2024-07-27 01:06:46 +02:00
|
|
|
setRefreshVersion((current) => current + 1);
|
|
|
|
},
|
|
|
|
});
|
2024-06-28 03:13:42 +02:00
|
|
|
ContextMenuModel.showContextMenu(menu, e);
|
|
|
|
},
|
2024-08-19 20:02:40 +02:00
|
|
|
[setRefreshVersion, conn]
|
2024-06-28 03:13:42 +02:00
|
|
|
);
|
2024-06-27 01:59:45 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
const displayRow = useCallback(
|
2024-07-03 23:34:55 +02:00
|
|
|
(row: Row<FileInfo>, idx: number) => (
|
|
|
|
<div
|
2024-07-26 06:14:21 +02:00
|
|
|
ref={(el) => (rowRefs.current[idx] = el)}
|
2024-07-03 23:34:55 +02:00
|
|
|
className={clsx("dir-table-body-row", { focused: focusIndex === idx })}
|
|
|
|
key={row.id}
|
|
|
|
onDoubleClick={() => {
|
|
|
|
const newFileName = row.getValue("path") as string;
|
2024-08-20 07:07:35 +02:00
|
|
|
model.goHistory(newFileName);
|
2024-07-03 23:34:55 +02:00
|
|
|
setSearch("");
|
|
|
|
}}
|
|
|
|
onClick={() => setFocusIndex(idx)}
|
2024-07-26 09:48:12 +02:00
|
|
|
onContextMenu={(e) => handleFileContextMenu(e, row.getValue("path"), row.getValue("mimetype"))}
|
2024-07-03 23:34:55 +02:00
|
|
|
>
|
2024-07-26 06:14:21 +02:00
|
|
|
{row.getVisibleCells().map((cell) => (
|
|
|
|
<div
|
|
|
|
className={clsx("dir-table-body-cell", "col-" + cell.column.id)}
|
|
|
|
key={cell.id}
|
|
|
|
style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
|
|
|
|
>
|
|
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
|
|
</div>
|
|
|
|
))}
|
2024-07-03 23:34:55 +02:00
|
|
|
</div>
|
|
|
|
),
|
2024-08-20 07:07:35 +02:00
|
|
|
[setSearch, handleFileContextMenu, setFocusIndex, focusIndex]
|
2024-07-03 23:34:55 +02:00
|
|
|
);
|
|
|
|
|
2024-05-21 21:14:04 +02:00
|
|
|
return (
|
2024-10-03 02:21:34 +02:00
|
|
|
<div className="dir-table-body" ref={bodyRef}>
|
2024-07-26 06:14:21 +02:00
|
|
|
{search !== "" && (
|
2024-07-03 23:34:55 +02:00
|
|
|
<div className="dir-table-body-search-display" ref={warningBoxRef}>
|
|
|
|
<span>Searching for "{search}"</span>
|
|
|
|
<div className="search-display-close-button dir-table-button" onClick={() => setSearch("")}>
|
|
|
|
<i className="fa-solid fa-xmark" />
|
2024-07-26 06:14:21 +02:00
|
|
|
<input type="text" value={search} onChange={() => {}} />
|
2024-07-03 23:34:55 +02:00
|
|
|
</div>
|
2024-05-21 21:14:04 +02:00
|
|
|
</div>
|
2024-07-03 23:34:55 +02:00
|
|
|
)}
|
2024-10-03 02:21:34 +02:00
|
|
|
<div className="dir-table-body-scroll-box">
|
|
|
|
<div className="dummy dir-table-body-row" ref={dummyLineRef}>
|
|
|
|
<div className="dir-table-body-cell">dummy-data</div>
|
2024-07-03 23:34:55 +02:00
|
|
|
</div>
|
2024-10-03 02:21:34 +02:00
|
|
|
{table.getTopRows().map(displayRow)}
|
|
|
|
{table.getCenterRows().map((row, idx) => displayRow(row, idx + table.getTopRows().length))}
|
|
|
|
</div>
|
2024-05-21 21:14:04 +02:00
|
|
|
</div>
|
2024-05-21 01:08:45 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-05-21 21:14:04 +02:00
|
|
|
const MemoizedTableBody = React.memo(
|
|
|
|
TableBody,
|
|
|
|
(prev, next) => prev.table.options.data == next.table.options.data
|
|
|
|
) as typeof TableBody;
|
|
|
|
|
2024-05-29 09:00:36 +02:00
|
|
|
interface DirectoryPreviewProps {
|
2024-07-09 01:36:30 +02:00
|
|
|
model: PreviewModel;
|
2024-05-29 09:00:36 +02:00
|
|
|
}
|
|
|
|
|
2024-09-03 01:48:10 +02:00
|
|
|
function DirectoryPreview({ model }: DirectoryPreviewProps) {
|
2024-07-26 06:14:21 +02:00
|
|
|
const [searchText, setSearchText] = useState("");
|
|
|
|
const [focusIndex, setFocusIndex] = useState(0);
|
|
|
|
const [unfilteredData, setUnfilteredData] = useState<FileInfo[]>([]);
|
|
|
|
const [filteredData, setFilteredData] = useState<FileInfo[]>([]);
|
2024-10-03 02:21:34 +02:00
|
|
|
const fileName = useAtomValue(model.metaFilePath);
|
|
|
|
const showHiddenFiles = useAtomValue(model.showHiddenFiles);
|
2024-07-26 06:14:21 +02:00
|
|
|
const [selectedPath, setSelectedPath] = useState("");
|
2024-10-03 02:21:34 +02:00
|
|
|
const [refreshVersion, setRefreshVersion] = useAtom(model.refreshVersion);
|
|
|
|
const conn = useAtomValue(model.connection);
|
2024-10-16 18:24:22 +02:00
|
|
|
const blockData = useAtomValue(model.blockAtom);
|
2024-07-09 01:36:30 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
2024-07-09 01:36:30 +02:00
|
|
|
model.refreshCallback = () => {
|
|
|
|
setRefreshVersion((refreshVersion) => refreshVersion + 1);
|
|
|
|
};
|
|
|
|
return () => {
|
|
|
|
model.refreshCallback = null;
|
|
|
|
};
|
|
|
|
}, [setRefreshVersion]);
|
2024-06-27 01:59:45 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
2024-06-27 01:59:45 +02:00
|
|
|
const getContent = async () => {
|
2024-10-03 02:21:34 +02:00
|
|
|
const file = await FileService.ReadFile(conn, fileName);
|
|
|
|
const serializedContent = base64ToString(file?.data64);
|
2024-07-26 06:14:21 +02:00
|
|
|
const content: FileInfo[] = JSON.parse(serializedContent);
|
2024-07-10 11:21:29 +02:00
|
|
|
setUnfilteredData(content);
|
2024-06-27 01:59:45 +02:00
|
|
|
};
|
|
|
|
getContent();
|
2024-08-19 20:02:40 +02:00
|
|
|
}, [conn, fileName, refreshVersion]);
|
2024-07-10 11:21:29 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const filtered = unfilteredData.filter((fileInfo) => {
|
|
|
|
if (!showHiddenFiles && fileInfo.name.startsWith(".") && fileInfo.name != "..") {
|
2024-07-10 11:21:29 +02:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return fileInfo.name.toLowerCase().includes(searchText);
|
|
|
|
});
|
|
|
|
setFilteredData(filtered);
|
2024-07-26 06:14:21 +02:00
|
|
|
}, [unfilteredData, showHiddenFiles, searchText]);
|
2024-06-27 01:59:45 +02:00
|
|
|
|
2024-08-30 02:00:24 +02:00
|
|
|
useEffect(() => {
|
|
|
|
model.directoryKeyDownHandler = (waveEvent: WaveKeyboardEvent): boolean => {
|
2024-10-03 02:21:34 +02:00
|
|
|
if (checkKeyPressed(waveEvent, "Escape")) {
|
2024-07-03 23:34:55 +02:00
|
|
|
setSearchText("");
|
|
|
|
return;
|
|
|
|
}
|
2024-10-03 02:21:34 +02:00
|
|
|
if (checkKeyPressed(waveEvent, "ArrowUp")) {
|
2024-07-03 23:34:55 +02:00
|
|
|
setFocusIndex((idx) => Math.max(idx - 1, 0));
|
|
|
|
return true;
|
|
|
|
}
|
2024-10-03 02:21:34 +02:00
|
|
|
if (checkKeyPressed(waveEvent, "ArrowDown")) {
|
2024-07-10 11:21:29 +02:00
|
|
|
setFocusIndex((idx) => Math.min(idx + 1, filteredData.length - 1));
|
2024-07-03 23:34:55 +02:00
|
|
|
return true;
|
|
|
|
}
|
2024-10-03 02:21:34 +02:00
|
|
|
if (checkKeyPressed(waveEvent, "Enter")) {
|
2024-07-10 11:21:29 +02:00
|
|
|
if (filteredData.length == 0) {
|
|
|
|
return;
|
|
|
|
}
|
2024-08-20 07:07:35 +02:00
|
|
|
model.goHistory(selectedPath);
|
2024-07-03 23:34:55 +02:00
|
|
|
setSearchText("");
|
|
|
|
return true;
|
2024-06-27 01:59:45 +02:00
|
|
|
}
|
2024-10-03 02:21:34 +02:00
|
|
|
if (checkKeyPressed(waveEvent, "Backspace")) {
|
2024-08-30 02:00:24 +02:00
|
|
|
if (searchText.length == 0) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
setSearchText((current) => current.slice(0, -1));
|
|
|
|
return true;
|
|
|
|
}
|
2024-10-16 18:24:22 +02:00
|
|
|
if (
|
|
|
|
checkKeyPressed(waveEvent, "Space") &&
|
|
|
|
searchText == "" &&
|
|
|
|
PLATFORM == "darwin" &&
|
|
|
|
!blockData?.meta?.connection
|
|
|
|
) {
|
2024-10-10 00:12:20 +02:00
|
|
|
getApi().onQuicklook(selectedPath);
|
|
|
|
console.log(selectedPath);
|
|
|
|
return true;
|
|
|
|
}
|
2024-10-03 02:21:34 +02:00
|
|
|
if (isCharacterKeyEvent(waveEvent)) {
|
2024-08-30 02:00:24 +02:00
|
|
|
setSearchText((current) => current + waveEvent.key);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
return () => {
|
|
|
|
model.directoryKeyDownHandler = null;
|
|
|
|
};
|
2024-10-10 00:12:20 +02:00
|
|
|
}, [filteredData, selectedPath, searchText]);
|
2024-06-27 01:59:45 +02:00
|
|
|
|
2024-07-26 06:14:21 +02:00
|
|
|
useEffect(() => {
|
2024-07-10 11:21:29 +02:00
|
|
|
if (filteredData.length != 0 && focusIndex > filteredData.length - 1) {
|
|
|
|
setFocusIndex(filteredData.length - 1);
|
|
|
|
}
|
|
|
|
}, [filteredData]);
|
|
|
|
|
2024-06-27 01:59:45 +02:00
|
|
|
return (
|
2024-08-27 22:28:10 +02:00
|
|
|
<div
|
2024-07-03 23:34:55 +02:00
|
|
|
className="dir-table-container"
|
|
|
|
onChangeCapture={(e) => {
|
|
|
|
const event = e as React.ChangeEvent<HTMLInputElement>;
|
|
|
|
setSearchText(event.target.value.toLowerCase());
|
|
|
|
}}
|
2024-08-30 02:00:24 +02:00
|
|
|
// onFocusCapture={() => document.getSelection().collapseToEnd()}
|
2024-07-03 23:34:55 +02:00
|
|
|
>
|
2024-06-27 01:59:45 +02:00
|
|
|
<DirectoryTable
|
2024-08-19 20:02:40 +02:00
|
|
|
model={model}
|
2024-07-10 11:21:29 +02:00
|
|
|
data={filteredData}
|
2024-07-03 23:34:55 +02:00
|
|
|
search={searchText}
|
2024-06-27 01:59:45 +02:00
|
|
|
focusIndex={focusIndex}
|
|
|
|
setFocusIndex={setFocusIndex}
|
2024-06-27 21:30:08 +02:00
|
|
|
setSearch={setSearchText}
|
2024-06-28 03:13:42 +02:00
|
|
|
setSelectedPath={setSelectedPath}
|
2024-07-09 01:36:30 +02:00
|
|
|
setRefreshVersion={setRefreshVersion}
|
2024-06-27 01:59:45 +02:00
|
|
|
/>
|
2024-08-27 22:28:10 +02:00
|
|
|
</div>
|
2024-06-27 01:59:45 +02:00
|
|
|
);
|
2024-05-29 09:00:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export { DirectoryPreview };
|