Add Right click to take action (#263)

* Add Right click to take action

* Create Position type and style row with background when selected

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -1,24 +1,32 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
 import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+import { PositionType } from '@/ui/types/PositionType';
 
 type OwnProps = {
   children: React.ReactNode | React.ReactNode[];
 };
 
-const StyledContainer = styled.div`
+type StyledContainerProps = {
+  position: PositionType;
+};
+
+const StyledContainer = styled.div<StyledContainerProps>`
   display: flex;
-  position: absolute;
+  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
   z-index: 1;
   height: 48px;
-  bottom: 38px;
+  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
+  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
+  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
+
   background: ${(props) => props.theme.secondaryBackground};
   align-items: center;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
-  left: 50%;
   transform: translateX(-50%);
 
   border-radius: 8px;
@@ -27,10 +35,31 @@ const StyledContainer = styled.div`
 
 export function EntityTableActionBar({ children }: OwnProps) {
   const selectedRowIds = useRecoilValue(selectedRowIdsState);
+  const position = useRecoilValue(contextMenuPositionState);
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (!(event.target as HTMLElement).closest('.action-bar')) {
+        setContextMenuPosition({ x: null, y: null });
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setContextMenuPosition]);
 
   if (selectedRowIds.length === 0) {
-    return <></>;
+    return null;
   }
 
-  return <StyledContainer>{children}</StyledContainer>;
+  return (
+    <StyledContainer className="action-bar" position={position}>
+      {children}
+    </StyledContainer>
+  );
 }