From e2220f95de50acc25fd5e35b92a6467d0bc6a8e2 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 6 May 2021 11:49:57 +0300
Subject: [PATCH] Move HotbarCell to separate component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-cell.tsx         | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/renderer/components/hotbar/hotbar-cell.tsx

diff --git a/src/renderer/components/hotbar/hotbar-cell.tsx b/src/renderer/components/hotbar/hotbar-cell.tsx
new file mode 100644
index 0000000000..f4fb3d9ac7
--- /dev/null
+++ b/src/renderer/components/hotbar/hotbar-cell.tsx
@@ -0,0 +1,36 @@
+import "./hotbar-menu.scss";
+import "./hotbar.commands";
+
+import React, { HTMLAttributes, ReactNode, useState } from "react";
+
+import { cssNames } from "../../utils";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  index: number;
+  innerRef?: React.LegacyRef<HTMLDivElement>;
+}
+
+export function HotbarCell({ innerRef, children, className, ...rest }: Props) {
+  const [animating, setAnimating] = useState(false);
+  const onAnimationEnd = () => { setAnimating(false); };
+  const onClick = () => {
+    if (className.includes("isDraggingOver")) {
+      return;
+    }
+
+    setAnimating(true);
+  };
+
+  return (
+    <div
+      className={cssNames("HotbarCell", { animating }, className)}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+      ref={innerRef}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}