This repository has been archived by the owner on Jul 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
/
ProductContent.js
73 lines (69 loc) · 1.84 KB
/
ProductContent.js
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
import { Button } from 'antd'
import ReactMarkdown from 'react-markdown'
import styled from 'styled-components'
import useToggle from 'react-use/lib/useToggle'
import { useEffect, useRef } from 'react'
import Article from './Article'
const More = styled.div`
position: absolute;
bottom: 0;
left: 0;
height: ${({ height }) => height - 60}px;
line-height: ${({ height }) => height - 60}px;
background: #FFF;
width: 100%;
text-align: center;
background: ${({ background }) => background};
display: flex;
justify-content: center;
align-items: flex-end;
`
const StyledArticle = styled(Article)`
font-size: 14px;
overflow: hidden;
position: relative;
height: ${({ more }) => more === 'true' ? 'auto' : `${({ height }) => height - 60}px`};
`
const Container = styled.div`
height: ${({ height }) => height};
overflow: hidden;
`
export default ({
content,
background = 'linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))',
height = 160,
full = false,
...rest
}) => {
const [more, setMore] = useToggle(true)
const [checked, setChecked] = useToggle(false)
const ref = useRef()
useEffect(() => {
if (!ref.current) return
if (!full && !checked) {
setMore(ref.current.offsetHeight < height)
setChecked(true)
}
})
if (!content) {
return (
<div {...rest} style={{ padding: 0 }} />
)
}
const renderMore = () => {
if (more) return null
return (
<More height={height} background={background}>
<Button icon='down' type='link' onClick={() => setMore(true)}>查看全部</Button>
</More>
)
}
return (
<Container height={full ? 'auto' : (checked ? 'auto' : `${height}px`)}>
<StyledArticle {...rest} height={height} ref={ref} more={more.toString()}>
<ReactMarkdown source={content} />
{renderMore()}
</StyledArticle>
</Container>
)
}