Skip to content

Commit fad79a4

Browse files
ShinyChangShinyChang
committed
Fix #25 
1 parent e652bf7 commit fad79a4

File tree

8 files changed

+85
-83
lines changed

8 files changed

+85
-83
lines changed

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,19 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
2727

2828
[Demo](http://shinychang.github.io/React-Text-Truncate/)
2929

30+
## FAQ
31+
32+
1. Why TextTruncate not shown after display changed?
33+
34+
You must trigger update manually.
35+
36+
2. Will TextTruncate support IE10 or below?
37+
38+
NO! IE 10 and below are dead according to [Microsoft post](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support).
39+
3040

3141
## Changelog
42+
* 0.7.0 Fix infinite update bug, drop raf
3243
* 0.6.2 Fix infinite loop bug
3344
* 0.6.1 Fix lib issue for browser
3445
* 0.6.0 Support React 15

‎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.

‎index.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,6 @@ <h3>Property</h3>
5050
<td>node</td>
5151
<td>undefined</td>
5252
</tr>
53-
<tr>
54-
<td>raf</td>
55-
<td>bool</td>
56-
<td>true</td>
57-
</tr>
5853
</tbody>
5954
</table>
6055
<div class="page-header">

‎lib/index.js‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@
2525
};
2626
}
2727

28+
function _objectWithoutProperties(obj, keys) {
29+
var target = {};
30+
31+
for (var i in obj) {
32+
if (keys.indexOf(i) >= 0) continue;
33+
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
34+
target[i] = obj[i];
35+
}
36+
37+
return target;
38+
}
39+
2840
function _classCallCheck(instance, Constructor) {
2941
if (!(instance instanceof Constructor)) {
3042
throw new TypeError("Cannot call a class as a function");
@@ -87,16 +99,9 @@
8799
args[_key] = arguments[_key];
88100
}
89101

90-
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TextTruncate)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.animationStep = function (timeStamp) {
91-
if (timeStamp - _this.lastTime < 150) {
92-
_this.loopId = window.requestAnimationFrame(_this.animationStep);
93-
return;
94-
}
95-
96-
_this.lastTime = timeStamp;
97-
_this.onResize();
98-
_this.loopId = window.requestAnimationFrame(_this.animationStep);
99-
}, _this.onResize = function () {
102+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TextTruncate)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onResize = function () {
103+
window.requestAnimationFrame(_this.update.bind(_this));
104+
}, _this.update = function () {
100105
_this.forceUpdate();
101106
}, _temp), _possibleConstructorReturn(_this, _ret);
102107
}
@@ -113,20 +118,12 @@
113118
this.canvas.font = font;
114119
this.forceUpdate();
115120

116-
if (this.props.raf) {
117-
this.loopId = window.requestAnimationFrame(this.animationStep);
118-
} else {
119-
window.addEventListener('resize', this.onResize);
120-
}
121+
window.addEventListener('resize', this.onResize);
121122
}
122123
}, {
123124
key: 'componentWillUnmount',
124125
value: function componentWillUnmount() {
125-
if (this.props.raf) {
126-
window.cancelAnimationFrame(this.loopId);
127-
} else {
128-
window.removeEventListener('resize', this.onResize);
129-
}
126+
window.removeEventListener('resize', this.onResize);
130127
}
131128
}, {
132129
key: 'measureWidth',
@@ -188,31 +185,40 @@
188185
break;
189186
}
190187
}
188+
191189
return startPos === maxTextLength ? this.props.text : this.props.text.substr(0, startPos) + this.props.truncateText;
192190
}
193191
}
194192
}, {
195193
key: 'render',
196194
value: function render() {
197-
var text = '';
195+
var _props = this.props;
196+
var text = _props.text;
197+
var truncateText = _props.truncateText;
198+
var line = _props.line;
199+
var showTitle = _props.showTitle;
200+
var textTruncateChild = _props.textTruncateChild;
201+
202+
var props = _objectWithoutProperties(_props, ['text', 'truncateText', 'line', 'showTitle', 'textTruncateChild']);
203+
204+
var renderText = '';
198205
if (this.refs.scope) {
199-
text = this.getRenderText();
206+
renderText = this.getRenderText();
200207
}
201208

202-
var attrs = {};
203-
if (this.props.showTitle) {
204-
attrs.title = this.props.text;
209+
if (showTitle && !props.title) {
210+
props.title = text;
205211
}
206212

207213
return _react2.default.createElement(
208214
'div',
209215
{ ref: 'scope', style: { overflow: 'hidden' } },
210216
_react2.default.createElement(
211217
'div',
212-
attrs,
213-
text
218+
props,
219+
renderText
214220
),
215-
this.props.text === text ? null : this.props.textTruncateChild
221+
text === renderText ? null : textTruncateChild
216222
);
217223
}
218224
}]);
@@ -225,15 +231,13 @@
225231
truncateText: _react2.default.PropTypes.string,
226232
line: _react2.default.PropTypes.number,
227233
showTitle: _react2.default.PropTypes.bool,
228-
textTruncateChild: _react2.default.PropTypes.node,
229-
raf: _react2.default.PropTypes.bool
234+
textTruncateChild: _react2.default.PropTypes.node
230235
};
231236
TextTruncate.defaultProps = {
232237
text: '',
233238
truncateText: '…',
234239
line: 1,
235-
showTitle: true,
236-
raf: true
240+
showTitle: true
237241
};
238242
exports.default = TextTruncate;
239243
;

‎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.2",
3+
"version": "0.7.0",
44
"description": "Truncate text for React.js",
55
"main": "lib/index.js",
66
"scripts": {

‎src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export class App extends Component {
2727
onToggle = (e) => {
2828
var display = this.refs.invisibleBlock.style.display;
2929
this.refs.invisibleBlock.style.display = display === 'none' ? 'block' : 'none';
30+
this.refs.invisibleTextTruncate.update();
3031
};
3132

3233
render() {
@@ -84,7 +85,7 @@ export class App extends Component {
8485
</div>
8586
<div id='sample-3'>
8687
<div ref='invisibleBlock' style={{display: 'none'}}>
87-
<TextTruncate {...props}/>
88+
<TextTruncate ref='invisibleTextTruncate' {...props}/>
8889
</div>
8990
<button type='button' className='btn btn-default' onClick={this.onToggle}>Toggle show/hide</button>
9091
</div>

‎src/TextTruncate.js‎

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,21 @@ export default class TextTruncate extends Component {
66
truncateText: React.PropTypes.string,
77
line: React.PropTypes.number,
88
showTitle: React.PropTypes.bool,
9-
textTruncateChild: React.PropTypes.node,
10-
raf: React.PropTypes.bool
9+
textTruncateChild: React.PropTypes.node
1110
};
1211

1312
static defaultProps = {
1413
text: '',
1514
truncateText: '…',
1615
line: 1,
17-
showTitle: true,
18-
raf: true
16+
showTitle: true
1917
};
2018

2119
componentDidMount() {
22-
let canvas = document.createElement('canvas');
23-
let docFragment = document.createDocumentFragment();
24-
let style = window.getComputedStyle(this.refs.scope);
25-
let font = [
20+
const canvas = document.createElement('canvas');
21+
const docFragment = document.createDocumentFragment();
22+
const style = window.getComputedStyle(this.refs.scope);
23+
const font = [
2624
style['font-weight'],
2725
style['font-style'],
2826
style['font-size'],
@@ -33,33 +31,18 @@ export default class TextTruncate extends Component {
3331
this.canvas.font = font;
3432
this.forceUpdate();
3533

36-
if (this.props.raf) {
37-
this.loopId = window.requestAnimationFrame(this.animationStep);
38-
} else {
39-
window.addEventListener('resize', this.onResize);
40-
}
34+
window.addEventListener('resize', this.onResize);
4135
}
4236

4337
componentWillUnmount() {
44-
if (this.props.raf) {
45-
window.cancelAnimationFrame(this.loopId);
46-
} else {
47-
window.removeEventListener('resize', this.onResize);
48-
}
38+
window.removeEventListener('resize', this.onResize);
4939
}
5040

51-
animationStep = (timeStamp) => {
52-
if ((timeStamp - this.lastTime) < 150) {
53-
this.loopId = window.requestAnimationFrame(this.animationStep);
54-
return;
55-
}
56-
57-
this.lastTime = timeStamp;
58-
this.onResize();
59-
this.loopId = window.requestAnimationFrame(this.animationStep);
41+
onResize = () => {
42+
window.requestAnimationFrame(this.update.bind(this))
6043
};
6144

62-
onResize = () => {
45+
update = () => {
6346
this.forceUpdate();
6447
};
6548

@@ -115,33 +98,41 @@ export default class TextTruncate extends Component {
11598
}
11699
}
117100

118-
119101
if (currentPos >= maxTextLength) {
120102
startPos = maxTextLength;
121103
break;
122104
}
123105
}
106+
124107
return startPos === maxTextLength
125-
? this.props.text
126-
: this.props.text.substr(0, startPos) + this.props.truncateText;
108+
? this.props.text
109+
: this.props.text.substr(0, startPos) + this.props.truncateText;
127110
}
128111
}
129112

130113
render() {
131-
let text = '';
114+
const {
115+
text,
116+
truncateText,
117+
line,
118+
showTitle,
119+
textTruncateChild,
120+
...props
121+
} = this.props;
122+
123+
let renderText = '';
132124
if (this.refs.scope) {
133-
text = this.getRenderText();
125+
renderText = this.getRenderText();
134126
}
135127

136-
let attrs = {};
137-
if (this.props.showTitle) {
138-
attrs.title = this.props.text;
128+
if (showTitle && !props.title) {
129+
props.title = text;
139130
}
140131

141132
return (
142133
<div ref='scope' style={{overflow: 'hidden'}}>
143-
<div {...attrs}>{text}</div>
144-
{this.props.text === text ? null : this.props.textTruncateChild}
134+
<div {...props}>{renderText}</div>
135+
{text === renderText ? null : textTruncateChild}
145136
</div>
146137
);
147138
}

0 commit comments

Comments
 (0)