104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
|
import AddressBar from "components/apps/FileExplorer/AddressBar";
|
||
|
|
import {
|
||
|
|
Back,
|
||
|
|
Down,
|
||
|
|
Forward,
|
||
|
|
Up,
|
||
|
|
} from "components/apps/FileExplorer/NavigationIcons";
|
||
|
|
import SearchBar from "components/apps/FileExplorer/SearchBar";
|
||
|
|
import StyledNavigation from "components/apps/FileExplorer/StyledNavigation";
|
||
|
|
import useTitlebarContextMenu from "components/system/Window/Titlebar/useTitlebarContextMenu";
|
||
|
|
import { useMenu } from "contexts/menu";
|
||
|
|
import { useProcesses } from "contexts/process";
|
||
|
|
import useHistory from "hooks/useHistory";
|
||
|
|
import { basename, dirname } from "path";
|
||
|
|
import { forwardRef, useMemo } from "react";
|
||
|
|
import Button from "styles/common/Button";
|
||
|
|
import { ROOT_NAME } from "utils/constants";
|
||
|
|
import { haltEvent, label } from "utils/functions";
|
||
|
|
|
||
|
|
type NavigationProps = {
|
||
|
|
hideSearch: boolean;
|
||
|
|
id: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
|
||
|
|
({ hideSearch, id }, inputRef) => {
|
||
|
|
const {
|
||
|
|
url: changeUrl,
|
||
|
|
processes: {
|
||
|
|
[id]: { url = "" },
|
||
|
|
},
|
||
|
|
} = useProcesses();
|
||
|
|
const upTo = url === "/" ? "" : basename(dirname(url));
|
||
|
|
const { contextMenu } = useMenu();
|
||
|
|
const { canGoBack, canGoForward, history, moveHistory, position } =
|
||
|
|
useHistory(url, id);
|
||
|
|
const { onContextMenuCapture } = useMemo(
|
||
|
|
() =>
|
||
|
|
contextMenu?.(() =>
|
||
|
|
history.map((historyUrl, index) => ({
|
||
|
|
action: () => moveHistory(index - position),
|
||
|
|
checked: position === index,
|
||
|
|
label: basename(historyUrl) || ROOT_NAME,
|
||
|
|
primary: position === index,
|
||
|
|
}))
|
||
|
|
),
|
||
|
|
[contextMenu, history, moveHistory, position]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<StyledNavigation
|
||
|
|
{...useTitlebarContextMenu(id)}
|
||
|
|
onDragOver={haltEvent}
|
||
|
|
onDrop={haltEvent}
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
disabled={!canGoBack}
|
||
|
|
onClick={() => moveHistory(-1)}
|
||
|
|
{...label(
|
||
|
|
canGoBack
|
||
|
|
? `Back to ${basename(history[position - 1]) || ROOT_NAME}`
|
||
|
|
: "Back"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Back />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
disabled={!canGoForward}
|
||
|
|
onClick={() => moveHistory(+1)}
|
||
|
|
{...label(
|
||
|
|
canGoForward
|
||
|
|
? `Forward to ${basename(history[position + 1]) || ROOT_NAME}`
|
||
|
|
: "Forward"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Forward />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
disabled={history.length === 1}
|
||
|
|
onClick={onContextMenuCapture}
|
||
|
|
{...label("Recent locations")}
|
||
|
|
>
|
||
|
|
<Down />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
disabled={url === "/"}
|
||
|
|
onClick={() => changeUrl(id, dirname(url))}
|
||
|
|
{...label(
|
||
|
|
url === "/"
|
||
|
|
? "Up one level"
|
||
|
|
: `Up to "${upTo === "" ? ROOT_NAME : upTo}"`
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Up />
|
||
|
|
</Button>
|
||
|
|
<AddressBar ref={inputRef} id={id} />
|
||
|
|
{!hideSearch && <SearchBar id={id} />}
|
||
|
|
</StyledNavigation>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
export default Navigation;
|