Skip to content

Commit a6e332f

Browse files
ShinyChangShinyChang
committed
Update demo page
2 parents c2978d1 + c65c134 commit a6e332f

File tree

6 files changed

+116
-94
lines changed

6 files changed

+116
-94
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,11 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
2929

3030

3131
## Changelog
32+
* 0.6.0 Support React 15
33+
* 0.5.2 Fix server render bug
34+
* 0.5.1 Hide `textTruncateChild` when nothing truncated
3235
* 0.5.0 Add request animation frame
33-
* 0.4.0 New property `textTruncateChild` for show more or others.
36+
* 0.4.0 New property `textTruncateChild` for show more or others
3437
* 0.3.7 Support CommonJS and UMD module loader
3538
* 0.3.5 Fix window resize issue
3639
* 0.3.4 supports Babel6

‎build/bundle.js‎

Lines changed: 6 additions & 6 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.

‎lib/index.js‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
2-
31
(function (global, factory) {
42
if (typeof define === "function" && define.amd) {
53
define(['module', 'exports', 'react'], factory);
@@ -33,7 +31,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
3331
}
3432
}
3533

36-
var _createClass = (function () {
34+
var _createClass = function () {
3735
function defineProperties(target, props) {
3836
for (var i = 0; i < props.length; i++) {
3937
var descriptor = props[i];
@@ -49,14 +47,14 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
4947
if (staticProps) defineProperties(Constructor, staticProps);
5048
return Constructor;
5149
};
52-
})();
50+
}();
5351

5452
function _possibleConstructorReturn(self, call) {
5553
if (!self) {
5654
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
5755
}
5856

59-
return call && ((typeof call === 'undefined' ? 'undefined' : _typeof(call)) === "object" || typeof call === "function") ? call : self;
57+
return call && (typeof call === "object" || typeof call === "function") ? call : self;
6058
}
6159

6260
function _inherits(subClass, superClass) {
@@ -75,7 +73,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
7573
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
7674
}
7775

78-
var TextTruncate = (function (_Component) {
76+
var TextTruncate = function (_Component) {
7977
_inherits(TextTruncate, _Component);
8078

8179
function TextTruncate() {
@@ -104,23 +102,15 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
104102
}
105103

106104
_createClass(TextTruncate, [{
107-
key: 'componentWillMount',
108-
value: function componentWillMount() {
105+
key: 'componentDidMount',
106+
value: function componentDidMount() {
109107
var canvas = document.createElement('canvas');
110108
var docFragment = document.createDocumentFragment();
109+
var style = window.getComputedStyle(this.refs.scope);
110+
var font = [style['font-weight'], style['font-style'], style['font-size'], style['font-family']].join(' ');
111111
docFragment.appendChild(canvas);
112112
this.canvas = canvas.getContext('2d');
113-
}
114-
}, {
115-
key: 'componentDidMount',
116-
value: function componentDidMount() {
117-
var style = window.getComputedStyle(this.refs.scope);
118-
var font = [];
119-
font.push(style['font-weight']);
120-
font.push(style['font-style']);
121-
font.push(style['font-size']);
122-
font.push(style['font-family']);
123-
this.canvas.font = font.join(' ');
113+
this.canvas.font = font;
124114
this.forceUpdate();
125115

126116
if (this.props.raf) {
@@ -147,39 +137,56 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
147137
key: 'getRenderText',
148138
value: function getRenderText() {
149139
var textWidth = this.measureWidth(this.props.text);
150-
var ellipsisWidth = this.measureWidth(this.props.truncateText);
151-
var scopeWidth = this.refs.scope.offsetWidth;
152-
140+
var scopeWidth = this.refs.scope.getBoundingClientRect().width;
153141
if (scopeWidth >= textWidth) {
154142
return this.props.text;
155143
} else {
156-
var n = 0;
157-
var max = this.props.text.length;
144+
var currentPos = 1;
145+
var maxTextLength = this.props.text.length;
158146
var text = '';
159147
var splitPos = 0;
160148
var startPos = 0;
161149
var line = this.props.line;
150+
var width = 0;
151+
var lastIsEng = false;
162152
while (line--) {
163153
var ext = line ? '' : this.props.truncateText;
164-
while (n <= max) {
165-
n++;
166-
text = this.props.text.substr(startPos, n);
167-
if (this.measureWidth(text + ext) > scopeWidth) {
168-
splitPos = text.lastIndexOf(' ');
154+
while (currentPos <= maxTextLength) {
155+
text = this.props.text.substr(startPos, currentPos);
156+
width = this.measureWidth(text + ext);
157+
if (width < scopeWidth) {
158+
splitPos = this.props.text.indexOf(' ', currentPos + 1);
169159
if (splitPos === -1) {
170-
splitPos = n - 1;
160+
currentPos += 1;
161+
lastIsEng = false;
162+
} else {
163+
lastIsEng = true;
164+
currentPos = splitPos;
171165
}
172-
startPos += splitPos;
166+
} else {
167+
do {
168+
currentPos--;
169+
text = this.props.text.substr(startPos, currentPos);
170+
if (text[text.length - 1] === ' ') {
171+
text = this.props.text.substr(startPos, currentPos - 1);
172+
}
173+
if (lastIsEng) {
174+
currentPos = text.lastIndexOf(' ');
175+
text = this.props.text.substr(startPos, currentPos);
176+
}
177+
width = this.measureWidth(text + ext);
178+
} while (width >= scopeWidth);
179+
startPos += currentPos;
173180
break;
174181
}
175182
}
176-
if (n >= max) {
177-
startPos = max;
183+
184+
if (currentPos >= maxTextLength) {
185+
startPos = maxTextLength;
178186
break;
179187
}
180-
n = 0;
181188
}
182-
return startPos === max ? this.props.text : this.props.text.substr(0, startPos - 1) + this.props.truncateText;
189+
return startPos === maxTextLength ? this.props.text : this.props.text.substr(0, startPos) + this.props.truncateText;
183190
}
184191
}
185192
}, {
@@ -189,28 +196,27 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
189196
if (this.refs.scope) {
190197
text = this.getRenderText();
191198
}
192-
var attrs = {
193-
ref: 'scope'
194-
};
199+
200+
var attrs = {};
195201
if (this.props.showTitle) {
196202
attrs.title = this.props.text;
197203
}
198204

199205
return _react2.default.createElement(
200206
'div',
201-
null,
207+
{ ref: 'scope', style: { overflow: 'hidden' } },
202208
_react2.default.createElement(
203209
'div',
204210
attrs,
205211
text
206212
),
207-
this.props.textTruncateChild
213+
this.props.text === text ? null : this.props.textTruncateChild
208214
);
209215
}
210216
}]);
211217

212218
return TextTruncate;
213-
})(_react.Component);
219+
}(_react.Component);
214220

215221
TextTruncate.propTypes = {
216222
text: _react2.default.PropTypes.string,

‎package.json‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-text-truncate",
3-
"version": "0.5.0",
3+
"version": "0.6.0",
44
"description": "Truncate text for React.js",
55
"main": "lib/index.js",
66
"scripts": {
@@ -25,8 +25,8 @@
2525
},
2626
"homepage": "https://github.com/ShinyChang/react-text-truncate",
2727
"devDependencies": {
28-
"babel": "^6.5.2",
29-
"babel-core": "^6.7.4",
28+
"babel-cli": "^6.7.5",
29+
"babel-core": "^6.7.6",
3030
"babel-loader": "^6.2.4",
3131
"babel-plugin-add-module-exports": "^0.1.2",
3232
"babel-plugin-react-transform": "^2.0.2",
@@ -35,19 +35,17 @@
3535
"babel-preset-react": "^6.5.0",
3636
"babel-preset-stage-0": "^6.5.0",
3737
"express": "^4.13.4",
38+
"react": "^15.0.1",
39+
"react-dom": "^15.0.1",
3840
"react-transform-catch-errors": "^1.0.2",
3941
"react-transform-hmr": "^1.0.4",
40-
"redbox-react": "^1.2.2",
41-
"webpack": "^1.12.14",
42-
"webpack-dev-middleware": "^1.5.1",
42+
"redbox-react": "^1.2.3",
43+
"webpack": "^1.12.15",
44+
"webpack-dev-middleware": "^1.6.1",
4345
"webpack-hot-middleware": "^2.10.0"
4446
},
4547
"peerDependencies": {
46-
"react": "^0.14.7",
47-
"react-dom": "^0.14.7"
48-
},
49-
"dependencies": {
50-
"react": "^0.14.7",
51-
"react-dom": "^0.14.7"
48+
"react": "^0.14.7 || ^15.0.0",
49+
"react-dom": "^0.14.7 || ^15.0.0"
5250
}
5351
}

‎src/TextTruncate.js‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,19 @@ export default class TextTruncate extends Component {
1818
raf: true
1919
};
2020

21-
componentWillMount() {
21+
componentDidMount() {
2222
let canvas = document.createElement('canvas');
2323
let docFragment = document.createDocumentFragment();
24+
let style = window.getComputedStyle(this.refs.scope);
25+
let font = [
26+
style['font-weight'],
27+
style['font-style'],
28+
style['font-size'],
29+
style['font-family']
30+
].join(' ');
2431
docFragment.appendChild(canvas);
2532
this.canvas = canvas.getContext('2d');
26-
}
27-
28-
componentDidMount() {
29-
let style = window.getComputedStyle(this.refs.scope);
30-
let font = [];
31-
font.push(style['font-weight']);
32-
font.push(style['font-style']);
33-
font.push(style['font-size']);
34-
font.push(style['font-family']);
35-
this.canvas.font = font.join(' ');
33+
this.canvas.font = font;
3634
this.forceUpdate();
3735

3836
if (this.props.raf) {
@@ -71,41 +69,59 @@ export default class TextTruncate extends Component {
7169

7270
getRenderText() {
7371
let textWidth = this.measureWidth(this.props.text);
74-
let ellipsisWidth = this.measureWidth(this.props.truncateText);
75-
let scopeWidth = this.refs.scope.offsetWidth;
76-
72+
let scopeWidth = this.refs.scope.getBoundingClientRect().width;
7773
if (scopeWidth >= textWidth) {
7874
return this.props.text;
7975
} else {
80-
let n = 0;
81-
let max = this.props.text.length;
76+
let currentPos = 1;
77+
let maxTextLength = this.props.text.length;
8278
let text = '';
8379
let splitPos = 0;
8480
let startPos = 0;
8581
let line = this.props.line;
82+
let width = 0;
83+
let lastIsEng = false;
8684
while(line--) {
8785
let ext = line ? '' : this.props.truncateText;
88-
while(n <= max) {
89-
n++;
90-
text = this.props.text.substr(startPos, n);
91-
if (this.measureWidth(text + ext) > scopeWidth) {
92-
splitPos = text.lastIndexOf(' ');
86+
while (currentPos <= maxTextLength) {
87+
text = this.props.text.substr(startPos, currentPos);
88+
width = this.measureWidth(text + ext);
89+
if (width < scopeWidth) {
90+
splitPos = this.props.text.indexOf(' ', currentPos + 1);
9391
if (splitPos === -1) {
94-
splitPos = n - 1;
92+
currentPos += 1;
93+
lastIsEng = false;
94+
} else {
95+
lastIsEng = true;
96+
currentPos = splitPos;
9597
}
96-
startPos += splitPos;
98+
} else {
99+
do {
100+
currentPos--;
101+
text = this.props.text.substr(startPos, currentPos);
102+
if (text[text.length - 1] === ' ') {
103+
text = this.props.text.substr(startPos, currentPos - 1);
104+
}
105+
if (lastIsEng) {
106+
currentPos = text.lastIndexOf(' ');
107+
text = this.props.text.substr(startPos, currentPos);
108+
}
109+
width = this.measureWidth(text + ext);
110+
} while (width >= scopeWidth);
111+
startPos += currentPos;
97112
break;
98113
}
99114
}
100-
if (n >= max) {
101-
startPos = max;
115+
116+
117+
if (currentPos >= maxTextLength) {
118+
startPos = maxTextLength;
102119
break;
103120
}
104-
n = 0;
105121
}
106-
return startPos === max
122+
return startPos === maxTextLength
107123
? this.props.text
108-
: this.props.text.substr(0, startPos - 1) + this.props.truncateText;
124+
: this.props.text.substr(0, startPos) + this.props.truncateText;
109125
}
110126
}
111127

@@ -114,17 +130,16 @@ export default class TextTruncate extends Component {
114130
if (this.refs.scope) {
115131
text = this.getRenderText();
116132
}
117-
let attrs = {
118-
ref: 'scope'
119-
};
133+
134+
let attrs = {};
120135
if (this.props.showTitle) {
121136
attrs.title = this.props.text;
122137
}
123138

124139
return (
125-
<div>
140+
<div ref='scope' style={{overflow: 'hidden'}}>
126141
<div {...attrs}>{text}</div>
127-
{this.props.textTruncateChild}
142+
{this.props.text === text ? null : this.props.textTruncateChild}
128143
</div>
129144
);
130145
}

0 commit comments

Comments
 (0)