/
FilePickerHeader.jsx
90 lines (78 loc) · 2.3 KB
/
FilePickerHeader.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React, { useCallback, memo } from 'react'
import PropTypes from 'prop-types'
import uniqBy from 'lodash/uniqBy'
import get from 'lodash/get'
import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
import useBreakpoints from '../providers/Breakpoints'
import IconButton from '../IconButton'
import Icon from '../Icon'
import Previous from '../Icons/Previous'
import FilePickerBreadcrumb from './FilePickerBreadcrumb'
import { buildCurrentFolderQuery } from './queries'
import { ROOT_DIR_ID } from '.'
/**
* @param {IOCozyFolder} displayedFolder - An io.cozy.files folder
* @returns {{id: string, name: string}[]}
*/
const getBreadcrumbPath = displayedFolder => {
return uniqBy(
[
{
id: ROOT_DIR_ID
},
{
id: get(displayedFolder, 'dir_id')
},
{
id: displayedFolder.id,
name: displayedFolder.name
}
],
'id'
)
.filter(({ id }) => Boolean(id))
.map(breadcrumb => ({
id: breadcrumb.id,
name: breadcrumb.name || (breadcrumb.id === ROOT_DIR_ID ? 'Drive' : '…')
}))
}
const FilePickerHeader = ({ navigateTo, folderId, onClose }) => {
const { isMobile } = useBreakpoints()
const currentFolderQuery = buildCurrentFolderQuery(folderId)
const { data: currentFolder, ...restCurrentFolder } = useQuery(
currentFolderQuery.definition,
currentFolderQuery.options
)
// eslint-disable-next-line react-hooks/exhaustive-deps
const path = hasQueryBeenLoaded(restCurrentFolder)
? getBreadcrumbPath(currentFolder[0])
: []
const onBack = useCallback(path => navigateTo(path), [navigateTo])
const handleClick = useCallback(() => {
path.length > 1 && isMobile ? onBack(path[path.length - 2]) : onClose()
}, [isMobile, path, onBack, onClose])
return (
<div className="u-flex u-flex-items-center">
{isMobile && (
<IconButton
onClick={handleClick}
className="u-p-0 u-pr-1"
size="medium"
>
<Icon icon={Previous} />
</IconButton>
)}
<FilePickerBreadcrumb
path={path}
onBreadcrumbClick={navigateTo}
opening={false}
inlined
/>
</div>
)
}
FilePickerHeader.propTypes = {
folderId: PropTypes.string.isRequired,
navigateTo: PropTypes.func.isRequired
}
export default memo(FilePickerHeader)