Commit 29739569 authored by Estelle Veisemburger's avatar Estelle Veisemburger
Browse files

fix(Read More Button):only show when necessary

parent 82577697
...@@ -10,11 +10,12 @@ function TruncatedMarkdown(props) { ...@@ -10,11 +10,12 @@ function TruncatedMarkdown(props) {
const [truncated, setTruncated] = useState(false); const [truncated, setTruncated] = useState(false);
const { source, truncateFromLength, classes } = props; const { source, truncateFromLength, classes } = props;
const sourceAsString = source === null ? "" : source; const sourceAsString = source === null ? "" : source;
const truncatable = sourceAsString.length > truncateFromLength; const truncatable = sourceAsString.length > 3 * truncateFromLength;
if (!truncatable) { if (!truncatable) {
return <Markdown source={sourceAsString} />; return <Markdown source={sourceAsString} />;
} }
return ( return (
<> <>
<Collapse in={truncated} collapsedHeight="4rem"> <Collapse in={truncated} collapsedHeight="4rem">
...@@ -22,9 +23,10 @@ function TruncatedMarkdown(props) { ...@@ -22,9 +23,10 @@ function TruncatedMarkdown(props) {
</Collapse> </Collapse>
{!truncated && <div className={classes.gradientBorder} />} {!truncated && <div className={classes.gradientBorder} />}
<Button <Button
variant="contained" variant="outlined"
className={classes.moreButton} className={classes.moreButton}
onClick={() => setTruncated(!truncated)} onClick={() => setTruncated(!truncated)}
size="small"
> >
{!truncated ? "En lire plus..." : "En lire moins..."} {!truncated ? "En lire plus..." : "En lire moins..."}
</Button> </Button>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment