137 lines
4.0 KiB
JavaScript
137 lines
4.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Flex, Close, IconButton } from "theme-ui";
|
|
|
|
import { groupsFromIds, itemsFromGroups } from "../../helpers/group";
|
|
|
|
import ConfirmModal from "../../modals/ConfirmModal";
|
|
|
|
import TokenShowIcon from "../../icons/TokenShowIcon";
|
|
import TokenHideIcon from "../../icons/TokenHideIcon";
|
|
import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
|
|
|
|
import { useGroup } from "../../contexts/GroupContext";
|
|
import { useTokenData } from "../../contexts/TokenDataContext";
|
|
import { useKeyboard } from "../../contexts/KeyboardContext";
|
|
|
|
import shortcuts from "../../shortcuts";
|
|
|
|
function TokenEditBar({ disabled, onLoad }) {
|
|
const { tokens, removeTokens, updateTokensHidden } = useTokenData();
|
|
|
|
const { activeGroups, selectedGroupIds, onGroupSelect } = useGroup();
|
|
|
|
const [hasSelectedDefaultToken, setHasSelectedDefaultToken] = useState(false);
|
|
const [allTokensVisible, setAllTokensVisisble] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const selectedGroups = groupsFromIds(selectedGroupIds, activeGroups);
|
|
const selectedTokens = itemsFromGroups(selectedGroups, tokens);
|
|
|
|
setHasSelectedDefaultToken(
|
|
selectedTokens.some((token) => token.type === "default")
|
|
);
|
|
setAllTokensVisisble(selectedTokens.every((token) => !token.hideInSidebar));
|
|
}, [selectedGroupIds, tokens, activeGroups]);
|
|
|
|
function getSelectedTokens() {
|
|
const selectedGroups = groupsFromIds(selectedGroupIds, activeGroups);
|
|
return itemsFromGroups(selectedGroups, tokens);
|
|
}
|
|
|
|
const [isTokensRemoveModalOpen, setIsTokensRemoveModalOpen] = useState(false);
|
|
async function handleTokensRemove() {
|
|
onLoad(true);
|
|
setIsTokensRemoveModalOpen(false);
|
|
const selectedTokens = getSelectedTokens();
|
|
const selectedTokenIds = selectedTokens.map((token) => token.id);
|
|
onGroupSelect();
|
|
await removeTokens(selectedTokenIds);
|
|
onLoad(false);
|
|
}
|
|
|
|
async function handleTokensHide(hideInSidebar) {
|
|
const selectedTokens = getSelectedTokens();
|
|
const selectedTokenIds = selectedTokens.map((token) => token.id);
|
|
updateTokensHidden(selectedTokenIds, hideInSidebar);
|
|
}
|
|
|
|
/**
|
|
* Shortcuts
|
|
*/
|
|
function handleKeyDown(event) {
|
|
if (disabled) {
|
|
return;
|
|
}
|
|
if (shortcuts.delete(event)) {
|
|
const selectedTokens = getSelectedTokens();
|
|
// Selected tokens and none are default
|
|
if (
|
|
selectedTokens.length > 0 &&
|
|
!selectedTokens.some((token) => token.type === "default")
|
|
) {
|
|
// Ensure all other modals are closed
|
|
setIsTokensRemoveModalOpen(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
useKeyboard(handleKeyDown);
|
|
|
|
if (selectedGroupIds.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
let hideTitle = "";
|
|
if (allTokensVisible) {
|
|
hideTitle = "Hide Selected Token(s) in Sidebar";
|
|
} else {
|
|
hideTitle = "Show Selected Token(s) in Sidebar";
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
justifyContent: "space-between",
|
|
}}
|
|
bg="overlay"
|
|
>
|
|
<Close
|
|
title="Clear Selection"
|
|
aria-label="Clear Selection"
|
|
onClick={() => onGroupSelect()}
|
|
/>
|
|
<Flex>
|
|
<IconButton
|
|
aria-label={hideTitle}
|
|
title={hideTitle}
|
|
onClick={() => handleTokensHide(allTokensVisible)}
|
|
>
|
|
{allTokensVisible ? <TokenShowIcon /> : <TokenHideIcon />}
|
|
</IconButton>
|
|
<IconButton
|
|
aria-label="Remove Selected Token(s)"
|
|
title="Remove Selected Token(s)"
|
|
onClick={() => handleTokensRemove()}
|
|
disabled={hasSelectedDefaultToken}
|
|
>
|
|
<RemoveTokenIcon />
|
|
</IconButton>
|
|
</Flex>
|
|
<ConfirmModal
|
|
isOpen={isTokensRemoveModalOpen}
|
|
onRequestClose={() => setIsTokensRemoveModalOpen(false)}
|
|
onConfirm={handleTokensRemove}
|
|
confirmText="Remove"
|
|
label="Remove Selected Token(s)"
|
|
description="This operation cannot be undone."
|
|
/>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default TokenEditBar;
|