mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-22 11:31:39 +03:00
- refactor context menu and action bar into seperate components
- fix styling context menu
This commit is contained in:
parent
807506549a
commit
b76f01d930
front/src
modules
companies/table/components
TableActionBarButtonCreateActivityCompany.tsxTableActionBarButtonDeleteCompanies copy.tsxTableContextMenuEntryCreateActivityCompany copy.tsx
people/table/components
TableActionBarButtonCreateActivityPeople.tsxTableActionContextMenuEntryDeletePeople.tsxTableContextMenuEntryCreateActivityPeople.tsx
ui
action-bar/components
context-menu
table
action-bar/components
context-menu/components
states
pages
@ -1,6 +1,7 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
|
||||
import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
|
||||
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableActionBarButtonCreateActivityCompany() {
|
||||
@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityCompany() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableActionBarButtonToggleComments
|
||||
<EntityTableActionBarButton
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<TableActionBarButtonToggleTasks
|
||||
<EntityTableActionBarButton
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
|
@ -0,0 +1,54 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { GET_PIPELINES } from '@/pipeline/queries';
|
||||
import { IconTrash } from '@/ui/icon/index';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryDeleteCompanies() {
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteCompanies] = useDeleteManyCompaniesMutation({
|
||||
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
|
||||
});
|
||||
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteCompanies({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyCompany: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<EntityTableContextMenuEntry
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="warning"
|
||||
onClick={handleDeleteClick}
|
||||
/>
|
||||
);
|
||||
}
|
@ -0,0 +1,29 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryCreateActivityCompany() {
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleButtonClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Company);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
|
||||
import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
|
||||
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableActionBarButtonCreateActivityPeople() {
|
||||
@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityPeople() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableActionBarButtonToggleComments
|
||||
<EntityTableActionBarButton
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<TableActionBarButtonToggleTasks
|
||||
<EntityTableActionBarButton
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
|
@ -0,0 +1,53 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { GET_PEOPLE } from '@/people/queries';
|
||||
import { IconTrash } from '@/ui/icon/index';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { useDeleteManyPersonMutation } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryDeletePeople() {
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteManyPerson] = useDeleteManyPersonMutation({
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteManyPerson({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyPerson: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<EntityTableContextMenuEntry
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="warning"
|
||||
onClick={handleDeleteClick}
|
||||
/>
|
||||
);
|
||||
}
|
@ -0,0 +1,29 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryCreateActivityPeople() {
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleButtonClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Person);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
@ -4,42 +4,11 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
|
||||
|
||||
import { PositionType } from '../types/PositionType';
|
||||
|
||||
type OwnProps = {
|
||||
children: React.ReactNode | React.ReactNode[];
|
||||
selectedIds: string[];
|
||||
};
|
||||
|
||||
type StyledContainerProps = {
|
||||
position: PositionType;
|
||||
};
|
||||
|
||||
const StyledContainerContextMenu = styled.div<StyledContainerProps>`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
|
||||
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
|
||||
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
|
||||
|
||||
transform: translateX(-50%);
|
||||
width: 160px;
|
||||
z-index: 1;
|
||||
|
||||
div {
|
||||
justify-content: left;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainerActionBar = styled.div`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
@ -79,16 +48,9 @@ export function ActionBar({ children, selectedIds }: OwnProps) {
|
||||
};
|
||||
}, [setContextMenuPosition]);
|
||||
|
||||
if (selectedIds.length === 0) {
|
||||
if (selectedIds.length === 0 || position.x || position.y) {
|
||||
return null;
|
||||
}
|
||||
if (position.x && position.y) {
|
||||
return (
|
||||
<StyledContainerContextMenu className="action-bar" position={position}>
|
||||
{children}
|
||||
</StyledContainerContextMenu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<StyledContainerActionBar className="action-bar">
|
||||
{children}
|
||||
|
64
front/src/modules/ui/context-menu/components/ContextMenu.tsx
Normal file
64
front/src/modules/ui/context-menu/components/ContextMenu.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
|
||||
|
||||
import { PositionType } from '../types/PositionType';
|
||||
|
||||
type OwnProps = {
|
||||
children: React.ReactNode | React.ReactNode[];
|
||||
selectedIds: string[];
|
||||
};
|
||||
|
||||
type StyledContainerProps = {
|
||||
position: PositionType;
|
||||
};
|
||||
|
||||
const StyledContainerContextMenu = styled.div<StyledContainerProps>`
|
||||
align-items: flex-start;
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
|
||||
left: ${(props) => `${props.position.x}px`};
|
||||
position: fixed;
|
||||
top: ${(props) => `${props.position.y}px`};
|
||||
|
||||
transform: translateX(-50%);
|
||||
width: 160px;
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
export function ContextMenu({ children, selectedIds }: OwnProps) {
|
||||
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 (selectedIds.length === 0 || (!position.x && !position.y)) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<StyledContainerContextMenu className="action-bar" position={position}>
|
||||
{children}
|
||||
</StyledContainerContextMenu>
|
||||
);
|
||||
}
|
@ -1,17 +0,0 @@
|
||||
import { IconNotes } from '@/ui/icon/index';
|
||||
|
||||
import { EntityTableActionBarButton } from './EntityTableActionBarButton';
|
||||
|
||||
type OwnProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
|
||||
return (
|
||||
<EntityTableActionBarButton
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
}
|
@ -1,17 +0,0 @@
|
||||
import { IconCheckbox } from '@/ui/icon/index';
|
||||
|
||||
import { EntityTableActionBarButton } from './EntityTableActionBarButton';
|
||||
|
||||
type OwnProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export function TableActionBarButtonToggleTasks({ onClick }: OwnProps) {
|
||||
return (
|
||||
<EntityTableActionBarButton
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
}
|
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
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) {
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
|
||||
return <ContextMenu selectedIds={selectedRowIds}>{children}</ContextMenu>;
|
||||
}
|
@ -0,0 +1,58 @@
|
||||
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>
|
||||
);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { PositionType } from '@/ui/action-bar/types/PositionType';
|
||||
import { PositionType } from '@/ui/context-menu/types/PositionType';
|
||||
|
||||
export const contextMenuPositionState = atom<PositionType>({
|
||||
key: 'contextMenuPositionState',
|
||||
|
@ -7,10 +7,13 @@ import { v4 } from 'uuid';
|
||||
import { CompanyTable } from '@/companies/table/components/CompanyTable';
|
||||
import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
|
||||
import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
|
||||
import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy';
|
||||
import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy';
|
||||
import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
|
||||
import { IconBuildingSkyscraper } from '@/ui/icon';
|
||||
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
|
||||
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
|
||||
import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
|
||||
import { TableContext } from '@/ui/table/states/TableContext';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
@ -72,6 +75,10 @@ export function Companies() {
|
||||
<TableActionBarButtonCreateActivityCompany />
|
||||
<TableActionBarButtonDeleteCompanies />
|
||||
</EntityTableActionBar>
|
||||
<EntityTableContextMenu>
|
||||
<TableContextMenuEntryCreateActivityCompany />
|
||||
<TableContextMenuEntryDeleteCompanies />
|
||||
</EntityTableContextMenu>
|
||||
</RecoilScope>
|
||||
</WithTopBarContainer>
|
||||
</>
|
||||
|
@ -6,9 +6,12 @@ import { v4 } from 'uuid';
|
||||
import { PeopleTable } from '@/people/table/components/PeopleTable';
|
||||
import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
|
||||
import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
|
||||
import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople';
|
||||
import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople';
|
||||
import { IconUser } from '@/ui/icon';
|
||||
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
|
||||
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
|
||||
import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
|
||||
import { TableContext } from '@/ui/table/states/TableContext';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
@ -67,6 +70,10 @@ export function People() {
|
||||
<TableActionBarButtonCreateActivityPeople />
|
||||
<TableActionBarButtonDeletePeople />
|
||||
</EntityTableActionBar>
|
||||
<EntityTableContextMenu>
|
||||
<TableContextMenuEntryCreateActivityPeople />
|
||||
<TableContextMenuEntryDeletePeople />
|
||||
</EntityTableContextMenu>
|
||||
</WithTopBarContainer>
|
||||
</RecoilScope>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user