-
Notifications
You must be signed in to change notification settings - Fork 256
/
ExpandableMessage.tsx
65 lines (53 loc) · 1.33 KB
/
ExpandableMessage.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React, {Component} from 'react'
import {ClickOutside} from 'src/shared/components/ClickOutside'
interface State {
expanded: boolean
}
interface Props {
formattedValue: string | JSX.Element
onExpand?: () => void
}
export class ExpandableMessage extends Component<Props, State> {
constructor(props) {
super(props)
this.state = {
expanded: false,
}
}
public render() {
const formattedValue = `${this.props.formattedValue}`
const trimmedValue = formattedValue.trimLeft()
return (
<ClickOutside onClickOutside={this.handleClickOutside}>
<div onClick={this.handleClick} className="expandable--message">
<div className="expandable--text">{trimmedValue}</div>
<div className={this.isExpanded}>{trimmedValue}</div>
</div>
</ClickOutside>
)
}
private get isExpanded() {
const {expanded} = this.state
if (expanded) {
return 'expanded--message'
} else {
return 'collapsed--message'
}
}
private handleClick = () => {
const {expanded} = this.state
const {onExpand} = this.props
if (!expanded && onExpand) {
onExpand()
}
this.setState({
expanded: true,
})
}
private handleClickOutside = () => {
this.setState({
expanded: false,
})
}
}
export default ExpandableMessage