-
Notifications
You must be signed in to change notification settings - Fork 352
/
TruncatedText.jsx
46 lines (41 loc) · 1.16 KB
/
TruncatedText.jsx
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
import React from 'react';
import { Button } from 'reactstrap';
import PropTypes from 'prop-types';
export default class TruncatedText extends React.Component {
constructor(props) {
super(props);
this.state = {
showMoreResults: false,
};
}
render() {
const { text, maxLength, title, showMoreClass } = this.props;
const { showMoreResults } = this.state;
return (
<React.Fragment>
<p className={showMoreResults ? '' : 'text-truncate'}>
{title && <span className="font-weight-bold">{title}</span>}
{text}
</p>
{text.length > maxLength && (
<Button
className={`${showMoreClass} mb-0 text-right pointer`}
onClick={() => this.setState({ showMoreResults: !showMoreResults })}
>
{`show ${showMoreResults ? 'less' : 'more'}`}
</Button>
)}
</React.Fragment>
);
}
}
TruncatedText.propTypes = {
text: PropTypes.string.isRequired,
title: PropTypes.string,
maxLength: PropTypes.number.isRequired,
showMoreClass: PropTypes.string,
};
TruncatedText.defaultProps = {
showMoreClass: 'font-weight-bold',
title: '',
};