1
1
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:
brendanlaschke 2023-08-10 21:30:25 +02:00
parent 807506549a
commit b76f01d930
16 changed files with 337 additions and 82 deletions

View File

@ -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)}
/>
</>

View File

@ -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}
/>
);
}

View File

@ -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)}
/>
</>
);
}

View File

@ -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)}
/>
</>

View File

@ -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}
/>
);
}

View File

@ -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)}
/>
</>
);
}

View File

@ -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}

View 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>
);
}

View File

@ -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}
/>
);
}

View File

@ -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}
/>
);
}

View File

@ -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>;
}

View File

@ -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>
);
}

View File

@ -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',

View File

@ -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>
</>

View File

@ -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>
);