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

4900 multi select field front implement expanded cells (#5151)

Browse Source 
Add expanded cell


https://github.com/twentyhq/twenty/assets/29927851/363f2b44-7b3c-4771-a651-dfc4014da6ac


![image](https://github.com/twentyhq/twenty/assets/29927851/741bb0f9-fd1e-4a38-8b0e-71e144376876)
This commit is contained in:
martmull
2024-05-03 15:03:06 +02:00
committed by GitHub
parent 1351a95754
commit 87994c26ff
51 changed files with 687 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
View File

@ -1,14 +1,15 @@
import { useRef } from 'react';
import { useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui';
import { v4 } from 'uuid';
import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
import { ParticipantChip } from '@/activities/components/ParticipantChip';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { ExpandableList } from '@/ui/display/expandable-list/ExpandableList';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompleted';
const StyledInlineCellBaseContainer = styled.div`
align-items: center;
@ -55,6 +56,9 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
font-size: ${({ theme }) => theme.font.size.sm};
width: ${({ width }) => width}px;
`;
const StyledDiv = styled.div`
max-width: 70%;
`;
export const CalendarEventParticipantsResponseStatusField = ({
responseStatus,
@ -64,6 +68,9 @@ export const CalendarEventParticipantsResponseStatusField = ({
participants: CalendarEventParticipant[];
}) => {
const theme = useTheme();
const isRightDrawerAnimationCompleted = useRecoilValue(
isRightDrawerAnimationCompletedState,
);
const Icon = {
Yes: <IconCheck stroke={theme.icon.stroke.sm} />,
@ -81,9 +88,9 @@ export const CalendarEventParticipantsResponseStatusField = ({
];
const participantsContainerRef = useRef<HTMLDivElement>(null);
const StyledChips = orderedParticipants.map((participant) => (
<ParticipantChip participant={participant} />
const [isHovered, setIsHovered] = useState(false);
const styledChips = orderedParticipants.map((participant, index) => (
<ParticipantChip key={index} participant={participant} />
));
return (
@ -96,12 +103,21 @@ export const CalendarEventParticipantsResponseStatusField = ({
<EllipsisDisplay>{responseStatus}</EllipsisDisplay>
</StyledLabelContainer>
</StyledLabelAndIconContainer>
<ExpandableList
listItems={StyledChips}
id={v4()}
rootRef={participantsContainerRef}
/>
<StyledDiv
ref={participantsContainerRef}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isRightDrawerAnimationCompleted && (
<ExpandableList
isHovered={isHovered}
reference={participantsContainerRef.current || undefined}
forceDisplayHiddenCount
>
{styledChips}
</ExpandableList>
)}
</StyledDiv>
</StyledInlineCellBaseContainer>
</StyledPropertyBox>
);