Commit 92e41e9c authored by Aron Fiechter's avatar Aron Fiechter
Browse files

First version of ReadMore

Needs some work, in general collapsed text is still too long, especially when there's an image on top.
parent 3fbd603b
......@@ -3,12 +3,11 @@ import React from 'react';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import Button from 'react-bootstrap/Button';
import ReadMore from './ReadMore';
export default function Info(props) {
const { node } = props;
// console.log(node);
return (
<Card style={{ width: '100%' }}>
{node.hasImage && (
......@@ -23,8 +22,7 @@ export default function Info(props) {
{node.referenceCode} ({node.level})
</Card.Subtitle>
<Card.Subtitle className="mb-2 text-muted">{node.creationPeriod.text}</Card.Subtitle>
{node.withinInfo &&
node.withinInfo.split('\n').map((para) => <Card.Text>{para} </Card.Text>)}
{node.withinInfo && <ReadMore text={node.withinInfo} />}
</Card.Body>
<ListGroup variant="flush">
{node.customFields.digitaleVersion &&
......
import React, { useState } from 'react';
import Card from 'react-bootstrap/Card';
import Collapse from 'react-bootstrap/Collapse';
export default function ReadMore(props) {
const { text } = props;
const [show, setShow] = useState(false);
const toggle = () => setShow(!show);
const limit = 5;
const textButton = (t, handler) => (
<a href="#" className="text-decoration-none" onClick={handler}>
{t}
</a>
);
const paragraphs = (ps) => ps.map((p) => <Card.Text key={Math.random() * 999}>{p}</Card.Text>);
const lines = text.split('\n');
if (lines.length < limit) {
return <Card.Text>{text}</Card.Text>;
} else {
const start = lines.slice(0, limit);
const rest = lines.slice(limit);
return (
<>
<div>{paragraphs(start)}</div>
<Collapse in={show}>
<div>{paragraphs(rest)}</div>
</Collapse>
{textButton(`See ${show ? 'less' : 'more'}`, toggle)}
</>
);
}
}
Markdown is supported
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