link to assets and reference icon

reearth · Oct 18, 2024 · c4fa544 · c4fa544
1 parent cf26d01
commit c4fa544
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -169,9 +169,7 @@ const LinkItemRequestModal: React.FC<Props> = ({
       width="70vw"
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px 12px 0",
+          height: "70vh",
         },
       }}
       afterClose={() => {