-
Notifications
You must be signed in to change notification settings - Fork 0
/
Sidebar.tsx
91 lines (81 loc) · 2.87 KB
/
Sidebar.tsx
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
91
import * as React from 'react';
import './Sidebar.scss';
import Icon, { IconStyle } from '../../core/Icon';
import { NavLink, match } from 'react-router-dom';
import Button from '../../core/Button';
import Popover from '../../core/Popover';
import PopoverContainer from '../../core/PopoverContainer';
import paths from 'src/paths';
import { Location } from 'history';
interface Props {
// Called when a new folder is to be created
onCreateFolder: () => void;
}
function homeLinkIsActive(_: match, l: Location): boolean {
return (l && (l.pathname === paths.APPS.FILES || l.pathname.includes(paths.APPS.FILES + '/d')));
}
function sharedLinkIsActive(_: match, l: Location): boolean {
return (l && l.pathname.includes(paths.APPS.FILES + '/shared'));
}
function starredLinkIsActive(_: match, l: Location): boolean {
return (l && l.pathname.includes(paths.APPS.FILES + '/starred'));
}
function trashLinkIsActive(_: match, l: Location): boolean {
return (l && l.pathname.includes(paths.APPS.FILES + '/trash'));
}
const Sidebar: React.FunctionComponent<Props> = ({ onCreateFolder }) => {
const [addDropdownVisible, setAddDropdownVisible] = React.useState(false);
// @todo: Convert all span's to buttons
// @body: We currently have some spans, which act as buttons (namely here and in MainSidebar).
// This is pretty ugly. We should therefore convert those to <Button>s
return (
<aside className="files-sidebar">
<h1>Files</h1>
<nav>
<ul>
<li>
<PopoverContainer
popover={
<Popover visible={addDropdownVisible} onClick={() => setAddDropdownVisible(false)} anchor="below">
<ul>
<li>
<span>Upload files</span>
</li>
<li>
<span onClick={onCreateFolder}>Create folder</span>
</li>
</ul>
</Popover>
}
>
<Button className="add-button" onClick={() => setAddDropdownVisible(true)} style="primary-inverted">
<Icon name="plus" size={1.5} />New
</Button>
</PopoverContainer>
</li>
<li>
<NavLink to={{ pathname: paths.APPS.FILES }} isActive={homeLinkIsActive}>
<Icon name="homeOutline" size={1.5} color={IconStyle.Dark} />Your files
</NavLink>
</li>
<li>
<NavLink to={{ pathname: paths.APPS.FILES + '/shared' }} isActive={sharedLinkIsActive}>
<Icon name="shareVariant" size={1.5} color={IconStyle.Dark} />Shared
</NavLink>
</li>
<li>
<NavLink to={{ pathname: paths.APPS.FILES + '/starred' }} isActive={starredLinkIsActive}>
<Icon name="starOutline" size={1.5} color={IconStyle.Dark} />Starred
</NavLink>
</li>
<li>
<NavLink to={{ pathname: paths.APPS.FILES + '/trash' }} isActive={trashLinkIsActive}>
<Icon name="deleteOutline" size={1.5} color={IconStyle.Dark} />Trash
</NavLink>
</li>
</ul>
</nav>
</aside>
);
};
export default Sidebar;