Skip to content

Commit

Permalink
V3.0.0 dev (pre-release-2) (#41)
Browse files Browse the repository at this point in the history
V3.0.0 dev (pre-release-2)
  • Loading branch information
DaniloNovakovic authored Nov 2, 2019
2 parents 58befdf + 5a5056d commit 75cae50
Show file tree
Hide file tree
Showing 34 changed files with 618 additions and 282 deletions.
8 changes: 8 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"notistack": "^0.9.2",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-hotkeys": "^2.0.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
Expand Down
37 changes: 20 additions & 17 deletions src/bookmarkManager/MainNav.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
import MainNavToolbar from "./MainNavToolbar";
import { selectedNodeIdsSelector, filterSelector } from "shared/store";
import MainNavToolbarSelected from "./MainNavToolbarSelected";
import { IgnoreKeys } from "react-hotkeys";

export function MainNav({
className,
Expand All @@ -29,23 +30,25 @@ export function MainNav({
const multipleSelected = numberOfSelected > 1;

return (
<AppBar position="fixed" className={className}>
<Box hidden={!multipleSelected}>
<MainNavToolbarSelected
numberOfSelected={numberOfSelected}
onCancel={clearSelected}
onDelete={handleDelete}
drawerWidth={drawerWidth}
/>
</Box>
<Box hidden={multipleSelected}>
<MainNavToolbar
handleDrawerToggle={handleDrawerToggle}
filter={filter}
applyFilter={applyFilter}
/>
</Box>
</AppBar>
<IgnoreKeys>
<AppBar position="fixed" className={className}>
<Box hidden={!multipleSelected}>
<MainNavToolbarSelected
numberOfSelected={numberOfSelected}
onCancel={clearSelected}
onDelete={handleDelete}
drawerWidth={drawerWidth}
/>
</Box>
<Box hidden={multipleSelected}>
<MainNavToolbar
handleDrawerToggle={handleDrawerToggle}
filter={filter}
applyFilter={applyFilter}
/>
</Box>
</AppBar>
</IgnoreKeys>
);
}

Expand Down
11 changes: 3 additions & 8 deletions src/bookmarkManager/MainSection.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { Paper, Container } from "@material-ui/core";
import {
BookmarkList,
BookmarkBreadcrumbs,
ActionMenuContext
ActionMenuContext,
getAnchorPosition
} from "shared/components/bookmarks";
import { actionMenuIds } from "shared/constants";

Expand All @@ -18,13 +19,7 @@ export default function MainSection({ className }) {

function handleContextMenu(event) {
openActionMenu(actionMenuIds.addBookmarkNodeActionMenuId, {
menuProps: {
anchorReference: "anchorPosition",
anchorPosition: {
top: event.pageY,
left: event.pageX
}
}
menuProps: getAnchorPosition(event)
});
event.preventDefault();
event.stopPropagation();
Expand Down
19 changes: 10 additions & 9 deletions src/bookmarkManager/Manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import MainSection from "./MainSection";
import SideNav from "./SideNav";
import MainNav from "./MainNav";
import {
FolderActionMenuProvider,
DialogProvider,
ActionMenuProvider
} from "shared/components/bookmarks";
import { StatusSnackbar } from "shared/components/helpers";
import SelectedNodesKeyHandler from "shared/components/bookmarks/SelectedNodesKeyHandler";

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -51,11 +51,12 @@ export default function Manager() {
}

return (
<Box className={classes.root}>
<CssBaseline />
<StatusSnackbar />
<DialogProvider>
<ActionMenuProvider>
<DialogProvider>
<ActionMenuProvider>
<CssBaseline />
<StatusSnackbar />
<SelectedNodesKeyHandler />
<Box className={classes.root}>
<MainNav
className={classes.mainNav}
drawerWidth={drawerWidth}
Expand All @@ -69,8 +70,8 @@ export default function Manager() {
handleDrawerToggle={handleDrawerToggle}
/>
<MainSection className={classes.mainSection} />
</ActionMenuProvider>
</DialogProvider>
</Box>
</Box>
</ActionMenuProvider>
</DialogProvider>
);
}
122 changes: 122 additions & 0 deletions src/shared/components/bookmarks/SelectedNodesKeyHandler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import React, { useCallback } from "react";
import { connect } from "react-redux";
import { GlobalHotKeys } from "react-hotkeys";
import {
selectedNodeIdsSelector,
filteredNodesSelector,
copyToClipboard,
cutToClipboard,
removeBookmarkNode,
pasteToBookmarkNode,
clearSelected,
setSelected,
filterSelector,
clipboardSelector
} from "shared/store";
import { isFolder } from "shared/lib/bookmarkNodes";

const keyMap = {
COPY: "ctrl+c",
CUT: "ctrl+x",
DELETE: "del",
PASTE: "ctrl+v",
ESCAPE: ["esc", "escape"],
SELECT_ALL: "ctrl+a"
};

function SelectedNodesKeyHandler(props) {
const {
selectedNodeIds = [],
filteredNodes = [],
parentId,
clipboard = {}
} = props;

const firstSelectedNode =
findById(filteredNodes, firstOrDefault(selectedNodeIds)) || {};

const copySelected = useCallback(
() => props.copyToClipboard({ id: selectedNodeIds }),
[selectedNodeIds]
);

const cutSelected = useCallback(
() => props.cutToClipboard({ id: selectedNodeIds }),
[selectedNodeIds]
);

const removeSelected = useCallback(
() => props.removeBookmarkNode(selectedNodeIds),
[selectedNodeIds]
);

const pasteClipboard = useCallback(() => {
let toParentId = parentId;
if (selectedNodeIds.length === 1) {
if (isFolder(firstSelectedNode)) {
toParentId = firstSelectedNode.id;
}
}
if (toParentId) {
props.pasteToBookmarkNode({
type: clipboard.type,
from: clipboard.data,
to: { parentId: toParentId }
});
}
}, [parentId, selectedNodeIds, firstSelectedNode, clipboard]);

const clearSelected = useCallback(() => props.clearSelected(), []);

const selectAll = useCallback(
event => {
const filteredNodeIds = filteredNodes.map(node => node.id);
props.setSelected(filteredNodeIds);
event.preventDefault();
},
[filteredNodes]
);

const handlers = {
COPY: copySelected,
CUT: cutSelected,
DELETE: removeSelected,
PASTE: pasteClipboard,
ESCAPE: clearSelected,
SELECT_ALL: selectAll
};

return (
<GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges={true} />
);
}

function firstOrDefault(arr = [], defaultVal = "") {
return arr.length === 0 ? defaultVal : arr[0];
}

function findById(filteredNodes, selectedNodeId) {
return filteredNodes.find(node => node.id == selectedNodeId);
}

function mapStateToProps(state) {
const filter = filterSelector(state);
return {
parentId: filter.parentId,
clipboard: clipboardSelector(state),
selectedNodeIds: selectedNodeIdsSelector(state),
filteredNodes: filteredNodesSelector(state)
};
}

export default connect(
mapStateToProps,
{
copyToClipboard,
cutToClipboard,
removeBookmarkNode,
pasteToBookmarkNode,
clearSelected,
setSelected
}
)(SelectedNodesKeyHandler);
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import ActionMenuContext from "./ActionMenuContext";
import { actionMenuIds } from "shared/constants";
import FileActionMenu from "./FileActionMenu";
Expand All @@ -11,9 +11,7 @@ export default function ActionMenuReducer() {
ActionMenuContext
);

function handleClose() {
openActionMenu(null);
}
const handleClose = useCallback(() => openActionMenu(null), [openActionMenu]);

return (
<>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import { Menu, MenuItem } from "@material-ui/core";
import { DialogContext } from "shared/components/bookmarks";
import { dialogIds, actionMenuIds } from "shared/constants";
Expand All @@ -7,14 +7,17 @@ export default function AddBookmarkNodeActionMenu(props) {
const { open, onClose, menuProps = {} } = props;
const { openDialog } = React.useContext(DialogContext);

function handleClose() {
const handleClose = useCallback(() => {
onClose();
}
}, [onClose]);

function handleDialogOpen(dialogId, args = {}) {
openDialog(dialogId, args);
handleClose();
}
const handleDialogOpen = useCallback(
(dialogId, args = {}) => {
openDialog(dialogId, args);
handleClose();
},
[openDialog, handleClose]
);

return (
<Menu
Expand All @@ -26,17 +29,19 @@ export default function AddBookmarkNodeActionMenu(props) {
>
<MenuItem
dense
onClick={() => {
handleDialogOpen(dialogIds.addBookmarkDialogId);
}}
onClick={useCallback(
() => handleDialogOpen(dialogIds.addBookmarkDialogId),
[handleDialogOpen]
)}
>
Add new bookmark
</MenuItem>
<MenuItem
dense
onClick={() => {
handleDialogOpen(dialogIds.addFolderDialogId);
}}
onClick={useCallback(
() => handleDialogOpen(dialogIds.addFolderDialogId),
[handleDialogOpen]
)}
>
Add new folder
</MenuItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function FolderActionMenu(props) {
Paste
</MenuItem>
<Divider />
<OpenLinksActionMenuItems links={childUrls} />
<OpenLinksActionMenuItems links={childUrls} onClose={handleClose} />
</Menu>
);
}
Expand Down
Loading

0 comments on commit 75cae50

Please sign in to comment.