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 | 356x 285x 285x 285x 285x 285x 1634x 285x 285x 1x 1x 1x | import { ReactElement, ReactNode, useState } from "react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { partition } from "remeda";
import { ExpandButton } from "client/components/ExpandButton";
import { RaisedCard } from "client/components/RaisedCard";
interface Props {
children: ReactNode;
}
export const Expand = ({ children }: Props): ReactElement | null => {
const { t, i18n } = useTranslation();
const [isExpanded, setIsExpanded] = useState<boolean>(false);
Iif (!children || !Array.isArray(children)) {
return null;
}
const headerElements = new Set(["h3"]);
const [headers, elements] = partition(children, (child) =>
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
headerElements.has(child.props.children?.type as string),
);
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const header = i18n.language === "fi" ? headers[0] : headers[1];
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
const headerText = header.props.children.props.children;
return (
<Container>
<ExpandButton
isExpanded={isExpanded}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
showMoreText={header}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
showLessText={header}
showMoreAriaLabel={`${t("aboutView.showMore")} ${headerText}`}
showLessAriaLabel={`${t("aboutView.showLess")} ${headerText}`}
ariaControls={`more-info-${headerText}`}
onClick={() => setIsExpanded(!isExpanded)}
/>
{isExpanded && <StyledRaisedCard>{elements}</StyledRaisedCard>}
</Container>
);
};
const Container = styled.div`
h3 {
margin: 12px 0 12px 0;
}
span {
text-decoration: none;
}
`;
const StyledRaisedCard = styled(RaisedCard)`
margin: 0;
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
`;
|