-
Notifications
You must be signed in to change notification settings - Fork 30
/
Description.tsx
49 lines (43 loc) · 1.13 KB
/
Description.tsx
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
import { MarkdownViewer } from '@stoplight/markdown-viewer';
import { Box, Link, Text } from '@stoplight/mosaic';
import * as React from 'react';
export const Description: React.FunctionComponent<{ value: unknown }> = ({ value }) => {
const [showAll, setShowAll] = React.useState(false);
if (typeof value !== 'string' || value.trim().length === 0) return null;
const paragraphs = value.split('\n\n');
if (paragraphs.length <= 1 || showAll) {
return (
<Box
as={MarkdownViewer}
markdown={value}
style={{
fontSize: 12,
}}
/>
);
}
const firstParagraph = paragraphs[0];
return (
<Box
as={MarkdownViewer}
markdown={firstParagraph}
parseOptions={{
components: {
p: (props: any) => {
return (
<Box as="p">
<Text mr={1}>{props.children}</Text>
<Link cursor="pointer" onClick={() => setShowAll(true)}>
Show all...
</Link>
</Box>
);
},
},
}}
style={{
fontSize: 12,
}}
/>
);
};