- refactored to use multiple states

front/src/modules/ui/action-bar/components/ActionBar.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
+import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
+import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
+import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState';
 
 type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
   selectedIds: string[];
 };
 
@@ -29,31 +30,18 @@ const StyledContainerActionBar = styled.div`
   z-index: 1;
 `;
 
-export function ActionBar({ children, selectedIds }: OwnProps) {
-  const position = useRecoilValue(contextMenuPositionState);
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+export function ActionBar({ selectedIds }: OwnProps) {
+  const actionBarOpen = useRecoilValue(actionBarOpenState);
+  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const actionBarEntries = useRecoilValue(actionBarEntriesState);
+  const wrapperRef = useRef(null);
 
-  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 (selectedIds.length === 0 || position.x || position.y) {
+  if (selectedIds.length === 0 || !actionBarOpen || contextMenuOpen) {
     return null;
   }
   return (
-    <StyledContainerActionBar className="action-bar">
-      {children}
+    <StyledContainerActionBar ref={wrapperRef}>
+      {actionBarEntries}
     </StyledContainerActionBar>
   );
 }

front/src/modules/ui/action-bar/components/ActionBarEntry.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  icon: ReactNode;
+  label: string;
+  type?: 'standard' | 'danger';
+  onClick: () => void;
+};
+
+type StyledButtonProps = {
+  type: 'standard' | 'danger';
+};
+
+const StyledButton = styled.div<StyledButtonProps>`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) =>
+    props.type === 'danger'
+      ? props.theme.color.red
+      : props.theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme, type }) =>
+      type === 'danger' ? theme.tag.background.red : theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function ActionBarEntry({
+  label,
+  icon,
+  type = 'standard',
+  onClick,
+}: OwnProps) {
+  return (
+    <StyledButton type={type} onClick={onClick}>
+      {icon}
+      <StyledButtonLabel>{label}</StyledButtonLabel>
+    </StyledButton>
+  );
+}

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof ActionBar> = {
   title: 'UI/ActionBar/ActionBar',
   component: ActionBar,
   decorators: [ComponentDecorator],
-  args: { children: 'Lorem ipsum', selectedIds: [] },
+  args: { selectedIds: [] },
 };
 
 export default meta;