Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 520x 1167x 2849x 2849x 1167x 1167x 1x 1167x 1x 1x | import { ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { ProgramItem } from "shared/types/models/programItem";
import { UserGroup } from "shared/types/models/user";
import { ExpandButton } from "client/components/ExpandButton";
import { TextWithLinks } from "client/markdown/components/TextWithLinks";
import { useAppSelector } from "client/utils/hooks";
import { programItemCardEndMargin } from "client/views/my-program-items/components/shared";
import { AdminActionCard } from "client/views/program-item/body/components/AdminActionCard";
import { ProgramItemDetails } from "client/views/program-item/body/components/ProgramItemDetails";
interface Props {
programItem: ProgramItem;
isAlwaysExpanded: boolean;
// True when nothing renders after the body (sign-up section hidden,
// not cancelled), so the body provides the card-end spacing
endOfCard: boolean;
}
export const ProgramItemBody = ({
programItem,
isAlwaysExpanded,
endOfCard,
}: Props): ReactElement => {
const { t } = useTranslation();
const loggedIn = useAppSelector((state) => state.login.loggedIn);
const userGroup = useAppSelector((state) => state.login.userGroup);
const [isExpanded, setIsExpanded] = useState<boolean>(isAlwaysExpanded);
const id = `more-info-${programItem.programItemId}`;
return (
<Container $endOfCard={endOfCard}>
<ShortDescription>
<TextWithLinks>{programItem.shortDescription}</TextWithLinks>
</ShortDescription>
{!isAlwaysExpanded && (
<ExpandButton
isExpanded={isExpanded}
showMoreText={t("programItemInfo.showMore")}
showLessText={t("programItemInfo.showLess")}
showMoreAriaLabel={`${t("programItemInfo.showMoreAriaLabel")} ${programItem.title}`}
showLessAriaLabel={`${t("programItemInfo.showLessAriaLabel")} ${programItem.title}`}
ariaControls={id}
onClick={() => setIsExpanded(!isExpanded)}
/>
)}
{isExpanded && (
<ExpandedDescriptionContainer id={id}>
<ProgramItemDetails programItem={programItem} />
{loggedIn && userGroup === UserGroup.ADMIN && (
<AdminActionCard programItem={programItem} />
)}
</ExpandedDescriptionContainer>
)}
</Container>
);
};
const Container = styled.div<{ $endOfCard: boolean }>`
${(props) =>
props.$endOfCard && `margin-bottom: ${programItemCardEndMargin};`}
`;
const ExpandedDescriptionContainer = styled.div`
padding-top: 8px;
`;
const ShortDescription = styled.p`
overflow-wrap: break-word;
margin: 8px 0 8px 0;
`;
|