Refactor map and token image

src/components/map/MapImage.js

@@ -4,7 +4,7 @@ import { Image } from "theme-ui";
 import { useDataURL } from "../../contexts/AssetsContext";
 import { mapSources as defaultMapSources } from "../../maps";
 
-function MapTileImage({ map, sx }) {
+const MapTileImage = React.forwardRef(({ map, ...props }) => {
   const mapURL = useDataURL(
     map,
     defaultMapSources,
@@ -12,7 +12,7 @@ function MapTileImage({ map, sx }) {
     map.type === "file"
   );
 
-  return <Image sx={sx} src={mapURL}></Image>;
+  return <Image src={mapURL} {...props} />;
-}
+});
 
 export default MapTileImage;

src/components/map/MapTile.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 function MapTile({
   map,
@@ -23,7 +23,7 @@ function MapTile({
       badges={badges}
       editTitle="Edit Map"
     >
-      <MapTileImage map={map} />
+      <MapImage map={map} />
     </Tile>
   );
 }

src/components/map/MapTileGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -22,7 +22,7 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
         sx={{ gridGap: 2 }}
       >
         {maps.slice(0, 9).map((map) => (
-          <MapTileImage
+          <MapImage
             sx={{ borderRadius: "8px" }}
             map={map}
             key={`${map.id}-group-tile`}

src/components/token/ListToken.js

@@ -1,28 +1,19 @@
 import React, { useRef } from "react";
-import { Box, Image } from "theme-ui";
+import { Box } from "theme-ui";
 
 import usePreventTouch from "../../hooks/usePreventTouch";
 
-import { useDataURL } from "../../contexts/AssetsContext";
+import TokenImage from "./TokenImage";
-
-import { tokenSources, unknownSource } from "../../tokens";
 
 function ListToken({ token }) {
-  const tokenURL = useDataURL(
-    token,
-    tokenSources,
-    unknownSource,
-    token.type === "file"
-  );
-
   const imageRef = useRef();
   // Stop touch to prevent 3d touch gesutre on iOS
   usePreventTouch(imageRef);
 
   return (
     <Box py={1} sx={{ width: "48px", height: "56px" }}>
-      <Image
+      <TokenImage
-        src={tokenURL}
+        token={token}
         ref={imageRef}
         sx={{
           userSelect: "none",

src/components/token/TokenImage.js

@@ -5,7 +5,7 @@ import { useDataURL } from "../../contexts/AssetsContext";
 
 import { tokenSources as defaultTokenSources } from "../../tokens";
 
-function TokenTileImage({ token, sx }) {
+const TokenImage = React.forwardRef(({ token, ...props }) => {
   const tokenURL = useDataURL(
     token,
     defaultTokenSources,
@@ -13,7 +13,7 @@ function TokenTileImage({ token, sx }) {
     token.type === "file"
   );
 
-  return <Image sx={sx} src={tokenURL}></Image>;
+  return <Image src={tokenURL} {...props} />;
-}
+});
 
-export default TokenTileImage;
+export default TokenImage;

src/components/token/TokenTile.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Tile from "../tile/Tile";
-import TokenTileImage from "./TokenTileImage";
+import TokenImage from "./TokenImage";
 
 function TokenTile({
   token,
@@ -21,7 +21,7 @@ function TokenTile({
       badges={badges}
       editTitle="Edit Token"
     >
-      <TokenTileImage token={token} />
+      <TokenImage token={token} />
     </Tile>
   );
 }

src/components/token/TokenTileGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import TokenTileImage from "./TokenTileImage";
+import TokenImage from "./TokenImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -29,7 +29,7 @@ function TokenTileGroup({
         sx={{ gridGap: 2 }}
       >
         {tokens.slice(0, 9).map((token) => (
-          <TokenTileImage
+          <TokenImage
             sx={{ borderRadius: "8px" }}
             token={token}
             key={`${token.id}-group-tile`}