Skip to content

Commit c65c134

Browse files
ShinyChangShinyChang
committed
Fix #18 , #19 
1 parent f6a17e7 commit c65c134

File tree

6 files changed

+90
-56
lines changed

6 files changed

+90
-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.0 Support React 15
3233
* 0.5.2 Fix server render bug
3334
* 0.5.1 Hide `textTruncateChild` when nothing truncated
3435
* 0.5.0 Add request animation frame

‎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: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -137,39 +137,56 @@
137137
key: 'getRenderText',
138138
value: function getRenderText() {
139139
var textWidth = this.measureWidth(this.props.text);
140-
var ellipsisWidth = this.measureWidth(this.props.truncateText);
141-
var scopeWidth = this.refs.scope.offsetWidth;
142-
140+
var scopeWidth = this.refs.scope.getBoundingClientRect().width;
143141
if (scopeWidth >= textWidth) {
144142
return this.props.text;
145143
} else {
146-
var n = 0;
147-
var max = this.props.text.length;
144+
var currentPos = 1;
145+
var maxTextLength = this.props.text.length;
148146
var text = '';
149147
var splitPos = 0;
150148
var startPos = 0;
151149
var line = this.props.line;
150+
var width = 0;
151+
var lastIsEng = false;
152152
while (line--) {
153153
var ext = line ? '' : this.props.truncateText;
154-
while (n <= max) {
155-
n++;
156-
text = this.props.text.substr(startPos, n);
157-
if (this.measureWidth(text + ext) > scopeWidth) {
158-
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);
159159
if (splitPos === -1) {
160-
splitPos = n - 1;
160+
currentPos += 1;
161+
lastIsEng = false;
162+
} else {
163+
lastIsEng = true;
164+
currentPos = splitPos;
161165
}
162-
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;
163180
break;
164181
}
165182
}
166-
if (n >= max) {
167-
startPos = max;
183+
184+
if (currentPos >= maxTextLength) {
185+
startPos = maxTextLength;
168186
break;
169187
}
170-
n = 0;
171188
}
172-
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;
173190
}
174191
}
175192
}, {
@@ -179,16 +196,15 @@
179196
if (this.refs.scope) {
180197
text = this.getRenderText();
181198
}
182-
var attrs = {
183-
ref: 'scope'
184-
};
199+
200+
var attrs = {};
185201
if (this.props.showTitle) {
186202
attrs.title = this.props.text;
187203
}
188204

189205
return _react2.default.createElement(
190206
'div',
191-
null,
207+
{ ref: 'scope', style: { overflow: 'hidden' } },
192208
_react2.default.createElement(
193209
'div',
194210
attrs,

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-text-truncate",
3-
"version": "0.5.2",
3+
"version": "0.6.0",
44
"description": "Truncate text for React.js",
55
"main": "lib/index.js",
66
"scripts": {
@@ -25,10 +25,8 @@
2525
},
2626
"homepage": "https://github.com/ShinyChang/react-text-truncate",
2727
"devDependencies": {
28-
"react": "^0.14.7",
29-
"react-dom": "^0.14.7",
30-
"babel-cli": "^6.5.2",
31-
"babel-core": "^6.7.4",
28+
"babel-cli": "^6.7.5",
29+
"babel-core": "^6.7.6",
3230
"babel-loader": "^6.2.4",
3331
"babel-plugin-add-module-exports": "^0.1.2",
3432
"babel-plugin-react-transform": "^2.0.2",
@@ -37,11 +35,13 @@
3735
"babel-preset-react": "^6.5.0",
3836
"babel-preset-stage-0": "^6.5.0",
3937
"express": "^4.13.4",
38+
"react": "^15.0.1",
39+
"react-dom": "^15.0.1",
4040
"react-transform-catch-errors": "^1.0.2",
4141
"react-transform-hmr": "^1.0.4",
42-
"redbox-react": "^1.2.2",
43-
"webpack": "^1.12.14",
44-
"webpack-dev-middleware": "^1.5.1",
42+
"redbox-react": "^1.2.3",
43+
"webpack": "^1.12.15",
44+
"webpack-dev-middleware": "^1.6.1",
4545
"webpack-hot-middleware": "^2.10.0"
4646
},
4747
"peerDependencies": {

‎src/TextTruncate.js‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -69,41 +69,59 @@ export default class TextTruncate extends Component {
6969

7070
getRenderText() {
7171
let textWidth = this.measureWidth(this.props.text);
72-
let ellipsisWidth = this.measureWidth(this.props.truncateText);
73-
let scopeWidth = this.refs.scope.offsetWidth;
74-
72+
let scopeWidth = this.refs.scope.getBoundingClientRect().width;
7573
if (scopeWidth >= textWidth) {
7674
return this.props.text;
7775
} else {
78-
let n = 0;
79-
let max = this.props.text.length;
76+
let currentPos = 1;
77+
let maxTextLength = this.props.text.length;
8078
let text = '';
8179
let splitPos = 0;
8280
let startPos = 0;
8381
let line = this.props.line;
82+
let width = 0;
83+
let lastIsEng = false;
8484
while(line--) {
8585
let ext = line ? '' : this.props.truncateText;
86-
while(n <= max) {
87-
n++;
88-
text = this.props.text.substr(startPos, n);
89-
if (this.measureWidth(text + ext) > scopeWidth) {
90-
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);
9191
if (splitPos === -1) {
92-
splitPos = n - 1;
92+
currentPos += 1;
93+
lastIsEng = false;
94+
} else {
95+
lastIsEng = true;
96+
currentPos = splitPos;
9397
}
94-
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;
95112
break;
96113
}
97114
}
98-
if (n >= max) {
99-
startPos = max;
115+
116+
117+
if (currentPos >= maxTextLength) {
118+
startPos = maxTextLength;
100119
break;
101120
}
102-
n = 0;
103121
}
104-
return startPos === max
122+
return startPos === maxTextLength
105123
? this.props.text
106-
: this.props.text.substr(0, startPos - 1) + this.props.truncateText;
124+
: this.props.text.substr(0, startPos) + this.props.truncateText;
107125
}
108126
}
109127

@@ -112,15 +130,14 @@ export default class TextTruncate extends Component {
112130
if (this.refs.scope) {
113131
text = this.getRenderText();
114132
}
115-
let attrs = {
116-
ref: 'scope'
117-
};
133+
134+
let attrs = {};
118135
if (this.props.showTitle) {
119136
attrs.title = this.props.text;
120137
}
121138

122139
return (
123-
<div>
140+
<div ref='scope' style={{overflow: 'hidden'}}>
124141
<div {...attrs}>{text}</div>
125142
{this.props.text === text ? null : this.props.textTruncateChild}
126143
</div>

0 commit comments

Comments
 (0)