65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import React from "react";
|
|
|
|
import TokenTile from "./TokenTile";
|
|
import TokenTileGroup from "./TokenTileGroup";
|
|
|
|
import SortableTiles from "../tile/SortableTiles";
|
|
|
|
import { getGroupItems } from "../../helpers/group";
|
|
|
|
import { useGroup } from "../../contexts/GroupContext";
|
|
|
|
function TokenTiles({ tokens, onTokenEdit, subgroup }) {
|
|
const {
|
|
selectedGroupIds,
|
|
selectMode,
|
|
onGroupOpen,
|
|
onGroupSelect,
|
|
} = useGroup();
|
|
|
|
function renderTile(group) {
|
|
if (group.type === "item") {
|
|
const token = tokens.find((token) => token.id === group.id);
|
|
const isSelected = selectedGroupIds.includes(group.id);
|
|
const canEdit =
|
|
isSelected &&
|
|
token.type !== "default" &&
|
|
selectMode === "single" &&
|
|
selectedGroupIds.length === 1;
|
|
|
|
return (
|
|
<TokenTile
|
|
key={token.id}
|
|
token={token}
|
|
isSelected={isSelected}
|
|
onSelect={onGroupSelect}
|
|
onTokenEdit={onTokenEdit}
|
|
canEdit={canEdit}
|
|
badges={[`${token.defaultSize}x`]}
|
|
/>
|
|
);
|
|
} else {
|
|
const isSelected = selectedGroupIds.includes(group.id);
|
|
const items = getGroupItems(group);
|
|
const canOpen =
|
|
isSelected && selectMode === "single" && selectedGroupIds.length === 1;
|
|
return (
|
|
<TokenTileGroup
|
|
key={group.id}
|
|
group={group}
|
|
tokens={items.map((item) =>
|
|
tokens.find((token) => token.id === item.id)
|
|
)}
|
|
isSelected={isSelected}
|
|
onSelect={onGroupSelect}
|
|
onDoubleClick={() => canOpen && onGroupOpen(group.id)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <SortableTiles renderTile={renderTile} subgroup={subgroup} />;
|
|
}
|
|
|
|
export default TokenTiles;
|