- refactored to use multiple states

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

@@ -5,12 +5,8 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
 
 import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector';
 
-type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function EntityTableActionBar({ children }: OwnProps) {
+export function EntityTableActionBar() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
-  return <ActionBar selectedIds={selectedRowIds}>{children}</ActionBar>;
+  return <ActionBar selectedIds={selectedRowIds}></ActionBar>;
 }

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

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  icon: ReactNode;
-  label: string;
-  type?: 'standard' | 'warning';
-  onClick: () => void;
-};
-
-type StyledButtonProps = {
-  type: 'standard' | 'warning';
-};
-
-const StyledButton = styled.div<StyledButtonProps>`
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${(props) =>
-    props.type === 'warning'
-      ? 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 === 'warning'
-        ? 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 EntityTableActionBarButton({
-  label,
-  icon,
-  type = 'standard',
-  onClick,
-}: OwnProps) {
-  return (
-    <StyledButton type={type} onClick={onClick}>
-      {icon}
-      <StyledButtonLabel>{label}</StyledButtonLabel>
-    </StyledButton>
-  );
-}

front/src/modules/ui/table/components/CheckboxCell.tsx

@@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
 import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
 
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
-import { contextMenuPositionState } from '../states/contextMenuPositionState';
+import { actionBarOpenState } from '../states/ActionBarIsOpenState';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -18,14 +18,13 @@ const StyledContainer = styled.div`
 `;
 
 export function CheckboxCell() {
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
-
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
   const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected();
 
   const handleClick = useCallback(() => {
     setCurrentRowSelected(!currentRowSelected);
-    setContextMenuPosition({ x: null, y: null });
-  }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]);
+    setActionBarOpenState(true);
+  }, [currentRowSelected, setActionBarOpenState, setCurrentRowSelected]);
 
   return (
     <StyledContainer onClick={handleClick}>

front/src/modules/ui/table/components/EntityTableCell.tsx

@@ -6,23 +6,24 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { ColumnIndexContext } from '../states/ColumnIndexContext';
+import { contextMenuOpenState } from '../states/ContextMenuIsOpenState';
 import { contextMenuPositionState } from '../states/contextMenuPositionState';
 import { ViewFieldContext } from '../states/ViewFieldContext';
 
 export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
 
   function handleContextMenu(event: React.MouseEvent) {
     event.preventDefault();
-
     setCurrentRowSelected(true);
-
     setContextMenuPosition({
       x: event.clientX,
       y: event.clientY,
     });
+    setContextMenuOpenState(true);
   }
 
   const viewField = useContext(ViewFieldContext);

front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx

@@ -5,12 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
 
 import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector';
 
-type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function EntityTableContextMenu({ children }: OwnProps) {
+export function EntityTableContextMenu() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-
-  return <ContextMenu selectedIds={selectedRowIds}>{children}</ContextMenu>;
+  return <ContextMenu selectedIds={selectedRowIds}></ContextMenu>;
 }

front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx

@@ -1,58 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  icon: ReactNode;
-  label: string;
-  type?: 'standard' | 'warning';
-  onClick: () => void;
-};
-
-type StyledButtonProps = {
-  type: 'standard' | 'warning';
-};
-
-const StyledButton = styled.div<StyledButtonProps>`
-  align-items: center;
-  align-self: stretch;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${(props) =>
-    props.type === 'warning'
-      ? props.theme.color.red
-      : props.theme.font.color.secondary};
-  cursor: pointer;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: 32px;
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  transition: background 0.1s ease;
-  user-select: none;
-
-  &:hover {
-    background: ${({ theme, type }) =>
-      type === 'warning'
-        ? 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 EntityTableContextMenuEntry({
-  label,
-  icon,
-  type = 'standard',
-  onClick,
-}: OwnProps) {
-  return (
-    <StyledButton type={type} onClick={onClick}>
-      {icon}
-      <StyledButtonLabel>{label}</StyledButtonLabel>
-    </StyledButton>
-  );
-}

front/src/modules/ui/table/states/ActionBarEntriesState.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { atom } from 'recoil';
+
+export const actionBarEntriesState = atom<ReactElement[]>({
+  key: 'actionBarEntriesState',
+  default: [],
+});

front/src/modules/ui/table/states/ActionBarIsOpenState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const actionBarOpenState = atom<boolean>({
+  key: 'actionBarOpenState',
+  default: false,
+});

front/src/modules/ui/table/states/ContextMenuEntriesState.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { atom } from 'recoil';
+
+export const contextMenuEntriesState = atom<ReactElement[]>({
+  key: 'contextMenuEntriesState',
+  default: [],
+});

front/src/modules/ui/table/states/ContextMenuIsOpenState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const contextMenuOpenState = atom<boolean>({
+  key: 'contextMenuOpenState',
+  default: false,
+});