From c4fa544083d31129fc6b37446c8ed82121131c05 Mon Sep 17 00:00:00 2001
From: Kazuma Tsuchiya <caichi0424@gmail.com>
Date: Fri, 18 Oct 2024 18:24:26 +0900
Subject: [PATCH] link to assets and reference icon

---
 .../Common/LinkAssetModal/LinkAssetModal.tsx  | 15 ++++-----------
 .../Common/ResizableProTable/index.tsx        |  4 ++++
 .../molecules/Content/LinkItemModal/index.tsx | 19 ++++++-------------
 .../LinkItemRequestModal.tsx                  |  4 +---
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx b/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx
index c21340cba..774111e9e 100644
--- a/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx
+++ b/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useState, useRef, useCallback, useMemo } from "react";
+import { useRef, useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -74,7 +74,6 @@ const LinkAssetModal: React.FC<Props> = ({
   onUploadAndLink,
 }) => {
   const t = useT();
-  const [hoveredAssetId, setHoveredAssetId] = useState<string>();
   const resetFlag = useRef(false);
 
   const options: OptionConfig = useMemo(
@@ -127,14 +126,10 @@ const LinkAssetModal: React.FC<Props> = ({
         width: 48,
         minWidth: 48,
         render: (_, asset) => {
-          const isLink =
-            (asset.id === linkedAsset?.id && hoveredAssetId !== asset.id) ||
-            (asset.id !== linkedAsset?.id && hoveredAssetId === asset.id);
+          const isLink = asset.id !== linkedAsset?.id;
           return (
             <Button
               type="link"
-              onMouseEnter={() => setHoveredAssetId(asset.id)}
-              onMouseLeave={() => setHoveredAssetId(undefined)}
               icon={<Icon icon={isLink ? "linkSolid" : "unlinkSolid"} size={16} />}
               onClick={() => onLinkClick(isLink, asset)}
             />
@@ -184,7 +179,7 @@ const LinkAssetModal: React.FC<Props> = ({
         minWidth: 100,
       },
     ],
-    [hoveredAssetId, linkedAsset?.id, onLinkClick, t],
+    [linkedAsset?.id, onLinkClick, t],
   );
 
   const handleChange = useCallback(
@@ -242,9 +237,7 @@ const LinkAssetModal: React.FC<Props> = ({
       width="70vw"
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px",
+          height: "70vh",
         },
       }}>
       <ResizableProTable
diff --git a/web/src/components/molecules/Common/ResizableProTable/index.tsx b/web/src/components/molecules/Common/ResizableProTable/index.tsx
index d879b9c46..584c85cdf 100644
--- a/web/src/components/molecules/Common/ResizableProTable/index.tsx
+++ b/web/src/components/molecules/Common/ResizableProTable/index.tsx
@@ -136,9 +136,13 @@ const StyledProTable = styled(ProTable)<{
     overflow: auto !important;
     height: calc(100% - 47px);
   }
+  .ant-pro-table-list-toolbar-container {
+    flex-direction: row;
+  }
   .ant-pro-table-list-toolbar-left {
     flex: 1;
     max-width: calc(100% - 150px);
+    margin: 0;
     .ant-pro-table-list-toolbar-search {
       width: 100%;
     }
diff --git a/web/src/components/molecules/Content/LinkItemModal/index.tsx b/web/src/components/molecules/Content/LinkItemModal/index.tsx
index 6ca95c7ad..cd5368264 100644
--- a/web/src/components/molecules/Content/LinkItemModal/index.tsx
+++ b/web/src/components/molecules/Content/LinkItemModal/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useState, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -53,7 +53,6 @@ const LinkItemModal: React.FC<Props> = ({
   onChange,
   onCheckItemReference,
 }) => {
-  const [hoveredAssetId, setHoveredItemId] = useState<string>();
   const t = useT();
   const { confirm } = Modal;
   const { value, pagination, handleInput } = useHooks(
@@ -110,16 +109,12 @@ const LinkItemModal: React.FC<Props> = ({
         width: 48,
         minWidth: 48,
         render: (_, item) => {
-          const link =
-            (item.id === linkedItem && hoveredAssetId !== item.id) ||
-            (item.id !== linkedItem && hoveredAssetId === item.id);
+          const isLink = item.id !== linkedItem;
           return (
             <Button
               type="link"
-              onMouseEnter={() => setHoveredItemId(item.id)}
-              onMouseLeave={() => setHoveredItemId(undefined)}
-              icon={<Icon icon={link ? "linkSolid" : "unlinkSolid"} size={16} />}
-              onClick={() => handleClick(link, item)}
+              icon={<Icon icon={isLink ? "linkSolid" : "unlinkSolid"} size={16} />}
+              onClick={() => handleClick(isLink, item)}
             />
           );
         },
@@ -158,7 +153,7 @@ const LinkItemModal: React.FC<Props> = ({
         render: (_text, record) => dateTimeFormat(record.createdAt),
       },
     ],
-    [t, linkedItem, hoveredAssetId, handleClick],
+    [t, linkedItem, handleClick],
   );
 
   const toolbar: ListToolBarProps = useMemo(
@@ -188,9 +183,7 @@ const LinkItemModal: React.FC<Props> = ({
       onCancel={onLinkItemModalCancel}
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px",
+          height: "70vh",
         },
       }}>
       <ResizableProTable
diff --git a/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx b/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx
index 288cc335d..5a870f38f 100644
--- a/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx
+++ b/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx
@@ -169,9 +169,7 @@ const LinkItemRequestModal: React.FC<Props> = ({
       width="70vw"
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px 12px 0",
+          height: "70vh",
         },
       }}
       afterClose={() => {