From a1e85e490b03f0b8df4bca7908e402cb22f82988 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 13 Apr 2020 11:22:10 +1000
Subject: [PATCH] Added token label to proxy token

---
 src/components/ProxyToken.js | 38 ++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/ProxyToken.js b/src/components/ProxyToken.js
index 27722ad..1f0787a 100644
--- a/src/components/ProxyToken.js
+++ b/src/components/ProxyToken.js
@@ -4,12 +4,14 @@ import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
 import usePortal from "../helpers/usePortal";
+import TokenLabel from "./TokenLabel";
 
 function ProxyToken({ tokenClassName, onProxyDragEnd }) {
   const proxyContainer = usePortal("root");
 
   const [imageSource, setImageSource] = useState("");
-  const imageRef = useRef();
+  const [label, setLabel] = useState("");
+  const proxyRef = useRef();
 
   const proxyOnMap = useRef(false);
 
@@ -19,10 +21,11 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
         start: (event) => {
           let target = event.target;
           // Hide the token and copy it's image to the proxy
-          target.style.opacity = "0.25";
+          target.parentElement.style.opacity = "0.25";
           setImageSource(target.src);
+          setLabel(target.dataset.label || "");
 
-          let proxy = imageRef.current;
+          let proxy = proxyRef.current;
           if (proxy) {
             // Find and set the initial offset of the token to the proxy
             const proxyRect = proxy.getBoundingClientRect();
@@ -40,7 +43,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
         },
 
         move: (event) => {
-          let proxy = imageRef.current;
+          let proxy = proxyRef.current;
           // Move the proxy based off of the movment of the token
           if (proxy) {
             // keep the dragged position in the data-x/data-y attributes
@@ -69,7 +72,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
 
         end: (event) => {
           let target = event.target;
-          let proxy = imageRef.current;
+          let proxy = proxyRef.current;
           if (proxy) {
             if (onProxyDragEnd) {
               // TODO: look at cleaning this up with a props instead of
@@ -103,7 +106,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
           }
 
           // Show the token
-          target.style.opacity = "1";
+          target.parentElement.style.opacity = "1";
           setImageSource("");
         },
       },
@@ -126,15 +129,20 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
         right: 0,
       }}
     >
-      <Image
-        src={imageSource}
-        sx={{
-          touchAction: "none",
-          userSelect: "none",
-          position: "absolute",
-        }}
-        ref={imageRef}
-      />
+      <Box
+        sx={{ position: "absolute", display: "flex", flexDirection: "column" }}
+        ref={proxyRef}
+      >
+        <Image
+          src={imageSource}
+          sx={{
+            touchAction: "none",
+            userSelect: "none",
+            width: "100%",
+          }}
+        />
+        {label && <TokenLabel label={label} />}
+      </Box>
     </Box>,
     proxyContainer
   );