87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
|
|
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
|
|
import { EventList } from '@/activities/timeline-activities/components/EventList';
|
|
import { TimelineCreateButtonGroup } from '@/activities/timeline-activities/components/TimelineCreateButtonGroup';
|
|
import { useTimelineActivities } from '@/activities/timeline-activities/hooks/useTimelineActivities';
|
|
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
|
|
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
|
|
import {
|
|
AnimatedPlaceholderEmptyContainer,
|
|
AnimatedPlaceholderEmptySubTitle,
|
|
AnimatedPlaceholderEmptyTextContainer,
|
|
AnimatedPlaceholderEmptyTitle,
|
|
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
|
|
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
|
|
const StyledMainContainer = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
border-top: ${({ theme }) =>
|
|
useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
justify-content: center;
|
|
padding-top: ${({ theme }) => theme.spacing(6)};
|
|
padding-right: ${({ theme }) => theme.spacing(6)};
|
|
padding-left: ${({ theme }) => theme.spacing(6)};
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
export const TimelineActivities = ({
|
|
targetableObject,
|
|
isInRightDrawer = false,
|
|
}: {
|
|
targetableObject: ActivityTargetableObject;
|
|
isInRightDrawer?: boolean;
|
|
}) => {
|
|
const { timelineActivities, loading, fetchMoreRecords } =
|
|
useTimelineActivities(targetableObject);
|
|
|
|
const isTimelineActivitiesEmpty =
|
|
!timelineActivities || timelineActivities.length === 0;
|
|
|
|
if (loading === true) {
|
|
return <SkeletonLoader withSubSections />;
|
|
}
|
|
|
|
if (isTimelineActivitiesEmpty) {
|
|
return (
|
|
<AnimatedPlaceholderEmptyContainer
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
|
|
>
|
|
<AnimatedPlaceholder type="emptyTimeline" />
|
|
<AnimatedPlaceholderEmptyTextContainer>
|
|
<AnimatedPlaceholderEmptyTitle>
|
|
Add your first Activity
|
|
</AnimatedPlaceholderEmptyTitle>
|
|
<AnimatedPlaceholderEmptySubTitle>
|
|
There are no activities associated with this record.{' '}
|
|
</AnimatedPlaceholderEmptySubTitle>
|
|
</AnimatedPlaceholderEmptyTextContainer>
|
|
<TimelineCreateButtonGroup isInRightDrawer={isInRightDrawer} />
|
|
</AnimatedPlaceholderEmptyContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StyledMainContainer>
|
|
<EventList
|
|
targetableObject={targetableObject}
|
|
title="All"
|
|
events={timelineActivities ?? []}
|
|
/>
|
|
<CustomResolverFetchMoreLoader
|
|
loading={loading}
|
|
onLastRowVisible={fetchMoreRecords}
|
|
/>
|
|
</StyledMainContainer>
|
|
);
|
|
};
|