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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
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, {useEffect, useState} from "react";
import DropTargets from "./DropTargets.tsx";
import {ActiveDrag, ActiveEdit, Settings} from "./Body.tsx";
import {getBrowser} from "../main.tsx";
import ContextMenu from "./ContextMenu.tsx";
/**
* A component for the button used to open a bookmark folder.
* This is themed the same as a bookmark
*/
function FolderButton(props: {id: string}) {
let [settings, ] = React.useContext(Settings);
let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
let [, setActiveEdit] = React.useContext(ActiveEdit)
const [folderOpen, setFolderOpen] = useState<undefined | boolean>(undefined);
const [bmData, setBmData] = useState<BookmarkTreeNode | undefined>()
useEffect(() => {
console.log(props.id+" state="+folderOpen)
getBrowser().storage.local.set({['keepopen-'+props.id]: folderOpen})
}, [folderOpen]);
useEffect(() => {
if (settings.keepFoldersOpen) {
getBrowser().storage.local.get('keepopen-' + props.id).then(r => {
setFolderOpen(r['keepopen-' + props.id] == true);
})
} else {
setFolderOpen(false);
}
getBrowser().bookmarks.get(props.id).then(r => {
setBmData(r[0])
})
}, []);
if (!bmData) return;
// Dragging
const handleDragStart = (e: React.DragEvent<HTMLAnchorElement>) => {
e.dataTransfer.setData("sowgro", "placeholder")
};
const handleDrag = () => {
setActiveDrag(bmData);
};
const handleDragEnd = () => {
console.log("drop end")
setActiveDrag(null);
};
// Dropping
const handleDropLeft = () => {
console.log("drop left folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: bmData.parentId,
index: bmData.index
})
location.reload()
};
const handleDropRight = () => {
console.log("drop right folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: bmData.parentId,
index: (bmData.index! + 1)
})
location.reload();
};
const handleDropCenter = () => {
console.log("drop center folder")
getBrowser().bookmarks.move(activeDrag!.id, {
parentId: bmData.id
});
location.reload()
};
const handleDelete = () => {
getBrowser().bookmarks.removeTree(bmData.id);
location.reload();
};
const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
setActiveEdit(bmData);
};
return(
<>
<div className={"bookmark"}>
<a onClick={() => setFolderOpen(!folderOpen)} draggable={settings.editMode} onDrag={handleDrag}
onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<div className="icon-box">
{folderOpen ? <FolderIconOpen/> : <FolderIcon/>}
</div>
<span>{bmData.title}</span>
</a>
{settings.editMode && <ContextMenu onEdit={handleEdit} onDelete={handleDelete}/>}
{activeDrag && activeDrag !== bmData &&
<DropTargets onDropLeft={handleDropLeft} onDropRight={handleDropRight} onDropCenter={handleDropCenter}/>}
</div>
{folderOpen && /*bmData.children && bmData.children.length > 0 &&*/
<FolderBody id={bmData.id}/>}
</>
);
}
export default FolderButton
|
