securityos/components/apps/FileExplorer/AddressBar.tsx

77 lines
2.6 KiB
TypeScript
Raw Normal View History

2024-09-06 15:32:35 +00:00
import { Refresh } from "components/apps/FileExplorer/NavigationIcons";
import StyledAddressBar from "components/apps/FileExplorer/StyledAddressBar";
import useAddressBarContextMenu from "components/apps/FileExplorer/useAddressBarContextMenu";
import { useFileSystem } from "contexts/fileSystem";
import { useProcesses } from "contexts/process";
import { basename } from "path";
import { forwardRef, useEffect, useState } from "react";
import Button from "styles/common/Button";
import Icon from "styles/common/Icon";
import { ROOT_NAME } from "utils/constants";
import { label } from "utils/functions";
type AddressBarProps = {
id: string;
};
const AddressBar = forwardRef<HTMLInputElement, AddressBarProps>(
({ id }, ref) => {
const addressBarRef =
ref as React.MutableRefObject<HTMLInputElement | null>;
const {
url: changeUrl,
processes: {
[id]: { icon, url = "" },
},
} = useProcesses();
const displayName = basename(url) || ROOT_NAME;
const [addressBar, setAddressBar] = useState(displayName);
const { exists, updateFolder } = useFileSystem();
useEffect(() => {
if (addressBarRef.current) {
if (addressBar === url) {
addressBarRef.current.select();
} else if (addressBar === displayName) {
window.getSelection()?.removeAllRanges();
} else if (document.activeElement !== addressBarRef.current) {
setAddressBar(displayName);
}
}
}, [addressBar, addressBarRef, displayName, url]);
return (
<StyledAddressBar>
<Icon alt={displayName} imgSize={16} src={icon} />
<input
ref={addressBarRef}
aria-label="Address"
enterKeyHint="go"
onBlurCapture={() => setAddressBar(displayName)}
onChange={({ target }) => setAddressBar(target.value)}
onFocusCapture={() => setAddressBar(url)}
onKeyDown={async ({ key }) => {
if (key === "Enter" && addressBarRef.current) {
const { value } = addressBarRef.current;
if (value && (await exists(value))) changeUrl(id, value);
addressBarRef.current.blur();
}
}}
spellCheck={false}
type="text"
value={addressBar}
{...useAddressBarContextMenu(url)}
/>
<Button
id="refresh"
onClick={() => updateFolder(url)}
{...label(`Refresh "${displayName}" (F5)`)}
>
<Refresh />
</Button>
</StyledAddressBar>
);
}
);
export default AddressBar;