| 1 | // This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt |
| 2 | |
| 3 | import { createElement as h, Fragment, useMemo } from 'react' |
| 4 | import { formatBytes, hIcon, useFixSticky } from './misc' |
| 5 | import { CustomCode, Spinner } from './components' |
| 6 | import { useSnapState } from './state' |
| 7 | import { MenuPanel } from './menu' |
| 8 | import { Breadcrumbs } from './Breadcrumbs' |
| 9 | import { FilterBar } from './FilterBar' |
| 10 | import i18n from './i18n' |
| 11 | const { useI18N } = i18n |
| 12 | |
| 13 | export function Head() { |
| 14 | return h('header', { ref: useFixSticky() }, |
| 15 | h(MenuPanel), |
| 16 | h(CustomCode, { name: 'afterMenuBar' }), |
| 17 | h(Breadcrumbs), |
| 18 | h(CustomCode, { name: 'afterBreadcrumbs' }), |
| 19 | h(FolderStats), |
| 20 | h(FilterBar), |
| 21 | ) |
| 22 | } |
| 23 | |
| 24 | function FolderStats() { |
| 25 | const { list, loading, searchManuallyInterrupted } = useSnapState() |
| 26 | const { files, folders, size } = useMemo(() => { |
| 27 | let files = 0, folders = 0, size = 0 |
| 28 | for (const { isFolder, s } of list) { |
| 29 | if (isFolder) |
| 30 | ++folders |
| 31 | else |
| 32 | ++files |
| 33 | size += s || 0 |
| 34 | } |
| 35 | return { files, folders, size } |
| 36 | }, [list]) |
| 37 | const { t } = useI18N() |
| 38 | return h(Fragment, {}, |
| 39 | h('div', { id:'folder-stats' }, |
| 40 | searchManuallyInterrupted ? hIcon('interrupted', { title: t`Search was interrupted` }) |
| 41 | : list.length>0 && loading && h(Spinner), |
| 42 | [ |
| 43 | files && t('n_files', { n: files }, '{n,plural,one{# file} other{# files}}'), |
| 44 | folders && t('n_folders', { n: folders }, '{n,plural,one{# folder} other{# folders}}'), |
| 45 | size ? formatBytes(size) : '', |
| 46 | ].filter(Boolean).join(', '), |
| 47 | ), |
| 48 | h(CustomCode, { name: 'afterFolderStats' }), |
| 49 | h('div', { style:{ clear:'both' }}), |
| 50 | ) |
| 51 | } |