Skip to content

Commit e652bf7

Browse files
ShinyChangShinyChang
committed
Fix #24 
2 parents 18ae91d + 27ba9a6 commit e652bf7

File tree

10 files changed

+121
-56
lines changed

10 files changed

+121
-56
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
2929

3030

3131
## Changelog
32+
* 0.6.2 Fix infinite loop bug
3233
* 0.6.1 Fix lib issue for browser
3334
* 0.6.0 Support React 15
3435
* 0.5.2 Fix server render bug

‎build/bundle.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/react-text-truncate.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎build/react-text-truncate.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,53 @@
1313
<a href='https://github.com/ShinyChang/React-Text-Truncate'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png'></a>
1414
<div class='container'>
1515
<h1>React Truncate Text</h1>
16+
<div class="page-header">
17+
<h3>Property</h3>
18+
</div>
19+
<table class="table table-bordered">
20+
<thead>
21+
<tr>
22+
<th>Property Name</th>
23+
<th>Type</th>
24+
<th>Default</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<tr>
29+
<td>text</td>
30+
<td>string</td>
31+
<td>''</td>
32+
</tr>
33+
<tr>
34+
<td>truncateText</td>
35+
<td>string</td>
36+
<td>'…'</td>
37+
</tr>
38+
<tr>
39+
<td>line</td>
40+
<td>number</td>
41+
<td>1</td>
42+
</tr>
43+
<tr>
44+
<td>showTitle</td>
45+
<td>bool</td>
46+
<td>true</td>
47+
</tr>
48+
<tr>
49+
<td>textTruncateChild</td>
50+
<td>node</td>
51+
<td>undefined</td>
52+
</tr>
53+
<tr>
54+
<td>raf</td>
55+
<td>bool</td>
56+
<td>true</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
<div class="page-header">
61+
<h3>Demo</h3>
62+
</div>
1663
<div id='root'></div>
1764
</div>
1865
<footer style='text-align: center; margin-top: 30px; padding-top: 20px; padding-bottom: 20px;background-color: #333;'>

‎lib/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,9 @@
138138
value: function getRenderText() {
139139
var textWidth = this.measureWidth(this.props.text);
140140
var scopeWidth = this.refs.scope.getBoundingClientRect().width;
141-
if (scopeWidth >= textWidth) {
141+
if (scopeWidth === 0) {
142+
return '';
143+
} else if (scopeWidth >= textWidth) {
142144
return this.props.text;
143145
} else {
144146
var currentPos = 1;
@@ -233,8 +235,7 @@
233235
showTitle: true,
234236
raf: true
235237
};
236-
;
237-
238238
exports.default = TextTruncate;
239+
;
239240
module.exports = exports['default'];
240241
});

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-text-truncate",
3-
"version": "0.6.1",
3+
"version": "0.6.2",
44
"description": "Truncate text for React.js",
55
"main": "lib/index.js",
66
"scripts": {

‎src/App.js‎

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ export class App extends Component {
99
line: 2,
1010
truncateText: '…',
1111
showTitle: true,
12-
textTruncateChild: <a className='pull-right' onClick={this.showAll}>show more</a>,
13-
showAll: false,
12+
appendTextTruncateChild: true,
1413
raf: true
1514
};
1615
}
@@ -20,57 +19,75 @@ export class App extends Component {
2019
line: this.refs.line.value << 0,
2120
text: this.refs.text.value,
2221
truncateText: this.refs.truncateText.value,
23-
showTitle: this.refs.showTitle.checked
22+
showTitle: this.refs.showTitle.checked,
23+
appendTextTruncateChild: this.refs.appendTextTruncateChild.checked
2424
});
2525
};
2626

27-
showAll = () => {
28-
this.setState({
29-
showAll: true
30-
});
27+
onToggle = (e) => {
28+
var display = this.refs.invisibleBlock.style.display;
29+
this.refs.invisibleBlock.style.display = display === 'none' ? 'block' : 'none';
3130
};
3231

33-
noShowAll = () => {
34-
this.setState({
35-
showAll: false
36-
});
37-
}
38-
3932
render() {
40-
const {showAll, ...props} = this.state;
41-
let text;
42-
if (showAll) {
43-
text = (
44-
<div>
45-
{props.text}
46-
<a className='pull-right' onClick={this.noShowAll}>Hide</a>
47-
</div>
33+
const {
34+
appendTextTruncateChild,
35+
...props
36+
} = this.state;
37+
38+
if (appendTextTruncateChild) {
39+
props.textTruncateChild = (
40+
<a href='#'>Read On</a>
4841
);
49-
} else {
50-
text = <TextTruncate {...props}/>
5142
}
43+
5244
return (
53-
<div>
54-
<div className='form-group'>
55-
<label htmlFor='line'>Line</label>
56-
<input className='form-control' id='line' ref='line' onChange={this.handleChange} type='number' value={this.state.line} min={1} required/>
57-
</div>
58-
<div className='form-group'>
59-
<label htmlFor='text'>Text</label>
60-
<textarea className='form-control' id='text' ref='text' onChange={this.handleChange} rows={10} value={this.state.text}></textarea>
61-
</div>
62-
<div className='form-group'>
63-
<label htmlFor='truncateText'>TruncateText</label>
64-
<input className='form-control' id='truncateText' ref='truncateText' onChange={this.handleChange} type='text' value={this.state.truncateText}/>
65-
</div>
66-
<div className='checkbox'>
67-
<label htmlFor='showTitle'>
68-
<input id='showTitle' ref='showTitle' onChange={this.handleChange} type='checkbox' checked={this.state.showTitle}/>Show Title
69-
</label>
45+
<div className='row'>
46+
<div className='col-md-6 col-xs-12'>
47+
<div className='form-group'>
48+
<label htmlFor='line'>Line</label>
49+
<input className='form-control' id='line' ref='line' onChange={this.handleChange} type='number' value={this.state.line} min={1} required/>
50+
</div>
51+
<div className='form-group'>
52+
<label htmlFor='text'>Text</label>
53+
<textarea className='form-control' id='text' ref='text' onChange={this.handleChange} rows={5} value={this.state.text}></textarea>
54+
</div>
55+
<div className='form-group'>
56+
<label htmlFor='truncateText'>TruncateText</label>
57+
<input className='form-control' id='truncateText' ref='truncateText' onChange={this.handleChange} type='text' value={this.state.truncateText}/>
58+
</div>
59+
<div className='checkbox'>
60+
<label htmlFor='showTitle'>
61+
<input id='showTitle' ref='showTitle' onChange={this.handleChange} type='checkbox' checked={this.state.showTitle}/>Show title
62+
</label>
63+
</div>
64+
<div className='checkbox'>
65+
<label htmlFor='appendTextTruncateChild'>
66+
<input id='appendTextTruncateChild' ref='appendTextTruncateChild' onChange={this.handleChange} type='checkbox' checked={this.state.appendTextTruncateChild}/>Append TextTruncate child
67+
</label>
68+
</div>
7069
</div>
71-
<div className='form-group sample'>
70+
<div className='col-md-6 col-xs-12'>
7271
<label>Result</label>
73-
{text}
72+
<div id='sample-1'>
73+
<TextTruncate {...props}/>
74+
</div>
75+
<div id='sample-2'>
76+
<div className='media'>
77+
<div className='media-left'>
78+
<img className='media-object' src='http://fakeimg.pl/64' width='64' height='64'/>
79+
</div>
80+
<div className='media-body'>
81+
<TextTruncate {...props}/>
82+
</div>
83+
</div>
84+
</div>
85+
<div id='sample-3'>
86+
<div ref='invisibleBlock' style={{display: 'none'}}>
87+
<TextTruncate {...props}/>
88+
</div>
89+
<button type='button' className='btn btn-default' onClick={this.onToggle}>Toggle show/hide</button>
90+
</div>
7491
</div>
7592
</div>
7693
)

‎src/TextTruncate.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,9 @@ export default class TextTruncate extends Component {
7070
getRenderText() {
7171
let textWidth = this.measureWidth(this.props.text);
7272
let scopeWidth = this.refs.scope.getBoundingClientRect().width;
73-
if (scopeWidth >= textWidth) {
73+
if (scopeWidth === 0) {
74+
return '';
75+
} else if (scopeWidth >= textWidth) {
7476
return this.props.text;
7577
} else {
7678
let currentPos = 1;

0 commit comments

Comments
 (0)