admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: Only show 2 relations in ActivityTargetChips (#4325)

Browse Source 
* limits activity target relations count to 2

* Remove dynamic width calculation

---------

Co-authored-by: Abhishek Bindra <abindra@commvault.com>
Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Abhishek Bindra
2024-03-07 16:56:19 +05:30
committed by GitHub
parent dd961209de
commit e8252eca86
1 changed files with 71 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
View File

@ -1,7 +1,14 @@
import { useMemo } from 'react';
import styled from '@emotion/styled';
import { v4 } from 'uuid';
import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
import { RecordChip } from '@/object-record/components/RecordChip';
import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { RGBA } from '@/ui/theme/constants/Rgba';
const MAX_RECORD_CHIPS_DISPLAY = 2;
const StyledContainer = styled.div`
display: flex;
@ -9,22 +16,77 @@ const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
const StyledRelationsListContainer = styled(StyledContainer)`
padding: ${({ theme }) => theme.spacing(2)};
border-radius: ${({ theme }) => theme.spacing(1)};
background-color: ${({ theme }) => RGBA(theme.color.gray10, 0.8)};
box-shadow: '0px 2px 4px ${({ theme }) =>
theme.boxShadow.light}, 2px 4px 16px ${({ theme }) =>
theme.boxShadow.strong}';
backdrop-filter: ${({ theme }) => theme.blur.strong};
`;
const showMoreRelationsHandler = (event?: React.MouseEvent<HTMLDivElement>) => {
event?.preventDefault();
event?.stopPropagation();
};
export const ActivityTargetChips = ({
activityTargetObjectRecords,
}: {
activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
}) => {
const dropdownId = useMemo(() => `multiple-relations-dropdown-${v4()}`, []);
return (
<StyledContainer>
{activityTargetObjectRecords?.map((activityTargetObjectRecord) => (
<RecordChip
key={activityTargetObjectRecord.targetObject.id}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
}
/>
))}
{activityTargetObjectRecords
?.slice(0, MAX_RECORD_CHIPS_DISPLAY)
.map((activityTargetObjectRecord) => (
<RecordChip
key={activityTargetObjectRecord.targetObject.id}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
}
/>
))}
{activityTargetObjectRecords.length > MAX_RECORD_CHIPS_DISPLAY && (
<div onClick={showMoreRelationsHandler}>
<Dropdown
dropdownId={dropdownId}
dropdownHotkeyScope={{
scope: dropdownId,
}}
clickableComponent={
<Chip
label={`+${
activityTargetObjectRecords.length - MAX_RECORD_CHIPS_DISPLAY
}`}
variant={ChipVariant.Highlighted}
/>
}
dropdownOffset={{ x: 0, y: -20 }}
dropdownComponents={
<StyledRelationsListContainer>
{activityTargetObjectRecords.map(
(activityTargetObjectRecord) => (
<RecordChip
key={activityTargetObjectRecord.targetObject.id}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem
.nameSingular
}
/>
),
)}
</StyledRelationsListContainer>
}
/>
</div>
)}
</StyledContainer>
);
};