blob: eff035e5420353e2355ca832a4a4e4db4e956678 (
plain) (
blame)
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
|
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import FolderBody from "./FolderBody.tsx";
import FolderIcon from "../assets/folder.svg?react"
import FolderIconOpen from "../assets/folder_open.svg?react"
import React, {useState} from "react";
import DropTargets from "./DropTargets.tsx";
import {ActiveDrag, Settings} from "./Body.tsx";
import {getBrowser} from "../main.tsx";
/**
* A component for the button used to open a bookmark folder.
* This is themed the same as a bookmark
*
* @param props.data The BookmarkTreeNode containing the data of the folder
*/
function FolderButton(props: {data: BookmarkTreeNode}) {
let [settings, _] = React.useContext(Settings);
let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
const [folderOpen, setFolderOpen] = useState(false);
// Dragging
function handleDragStart(e: React.DragEvent<HTMLAnchorElement>) {
e.dataTransfer.setData("sowgro", "placeholder")
}
function handleDrag() {
setActiveDrag(props.data);
}
function handleDragEnd() {
console.log("drop end")
setActiveDrag(null);
}
// Dropping
function handleDropLeft() {
console.log("drop left folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: props.data.parentId,
index: props.data.index
})
location.reload()
}
function handleDropRight() {
console.log("drop right folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: props.data.parentId,
index: (props.data.index! + 1)
})
location.reload();
}
function handleDropCenter() {
console.log("drop center folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: props.data.id
});
location.reload()
}
return(
<>
<div className={"bookmark"}>
<a onClick={() => setFolderOpen(!folderOpen)} draggable={settings.editMode} onDrag={handleDrag} onDragEnd={handleDragEnd}>
<div className="icon-box">
{folderOpen ? <FolderIconOpen/> : <FolderIcon/>}
</div>
<span>{props.data.title}</span>
</a>
{activeDrag && activeDrag !== props.data &&
<DropTargets onDropLeft={handleDropLeft} onDropRight={handleDropRight} onDropCenter={handleDropCenter}/>}
</div>
{folderOpen && props.data.children && props.data.children.length > 0 &&
<FolderBody data={props.data}/>}
</>
);
}
export default FolderButton
|
