({
directories,
files,
chosenDirectories = [],
chosenFiles = [],
onClickChooseFile,
onClickChooseDirectory,
onClickOpenRenameDirectory,
onClickOpenRenameFile,
onClickOpenMoveDirectory,
onClickOpenMoveFile,
onClickDeleteDirectory,
onClickDeleteFile,
onClickCreateShare,
onClickOpenManageShare,
onClickDownloadDirectory,
isShowingNotes,
isShowingPhotos,
fileShareId,
sortBy = 'name',
sortOrder = 'asc',
onClickSort
})
| 1 | import { join } from '@std/path'; |
| 2 | import { humanFileSize, TRASH_PATH } from '/public/ts/utils/files.ts'; |
| 3 | export default function ListFiles({ |
| 4 | directories, |
| 5 | files, |
| 6 | chosenDirectories = [], |
| 7 | chosenFiles = [], |
| 8 | onClickChooseFile, |
| 9 | onClickChooseDirectory, |
| 10 | onClickOpenRenameDirectory, |
| 11 | onClickOpenRenameFile, |
| 12 | onClickOpenMoveDirectory, |
| 13 | onClickOpenMoveFile, |
| 14 | onClickDeleteDirectory, |
| 15 | onClickDeleteFile, |
| 16 | onClickCreateShare, |
| 17 | onClickOpenManageShare, |
| 18 | onClickDownloadDirectory, |
| 19 | isShowingNotes, |
| 20 | isShowingPhotos, |
| 21 | fileShareId, |
| 22 | sortBy = 'name', |
| 23 | sortOrder = 'asc', |
| 24 | onClickSort |
| 25 | }) { |
| 26 | const dateFormatOptions = { |
| 27 | year: 'numeric', |
| 28 | month: 'long', |
| 29 | day: 'numeric', |
| 30 | hour12: false, |
| 31 | hour: '2-digit', |
| 32 | minute: '2-digit' |
| 33 | }; |
| 34 | const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions); |
| 35 | function renderSortIcon(column) { |
| 36 | const isActive = sortBy === column; |
| 37 | if (isActive) { |
| 38 | return h("img", { |
| 39 | src: sortOrder === 'asc' ? '/public/images/sort-up.svg' : '/public/images/sort-down.svg', |
| 40 | class: "white drop-shadow-md w-4 h-4", |
| 41 | width: 16, |
| 42 | height: 16, |
| 43 | alt: sortOrder === 'asc' ? 'Arrow pointing up' : 'Arrow pointing down', |
| 44 | title: sortOrder === 'asc' ? 'Sort ascending' : 'Sort descending' |
| 45 | }); |
| 46 | } else { |
| 47 | return h("img", { |
| 48 | src: "/public/images/sort-none.svg", |
| 49 | class: "white drop-shadow-md w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity", |
| 50 | width: 16, |
| 51 | height: 16, |
| 52 | alt: "Two arrows side by side, one pointing up, the other pointing down", |
| 53 | title: `Sort by ${column} ascending` |
| 54 | }); |
| 55 | } |
| 56 | } |
| 57 | function renderSortableHeader(label, column, extraClassName) { |
| 58 | const isActive = sortBy === column; |
| 59 | if (!onClickSort) { |
| 60 | return h("th", { |
nothing calls this directly
no test coverage detected