From e95e1fc01c35a933f5621dac7295696752894689 Mon Sep 17 00:00:00 2001 From: Eric Foster Date: Tue, 28 Feb 2017 23:03:09 -0800 Subject: [PATCH 1/5] Take parent padding into account when sizing container. --- src/Truncate.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Truncate.js b/src/Truncate.js index f206f76b..5bcb7bbb 100644 --- a/src/Truncate.js +++ b/src/Truncate.js @@ -127,7 +127,11 @@ export default class Truncate extends Component { return; } - const targetWidth = target.parentNode.getBoundingClientRect().width; + const targetParentStyles = window.getComputedStyle(target.parentNode); + const targetParentPadding = parseFloat(targetParentStyles.paddingLeft) + + parseFloat(targetParentStyles.paddingRight); + const targetWidth = target.parentNode.getBoundingClientRect().width - + targetParentPadding; // Delay calculation until parent node is inserted to the document // Mounting order in React is ChildComponent, ParentComponent From 86352e52d118852a4d2a0becdb7d53baad44467d Mon Sep 17 00:00:00 2001 From: Eric Foster Date: Tue, 28 Feb 2017 23:03:30 -0800 Subject: [PATCH 2/5] Take letter-spacing into account when sizing container. --- src/Truncate.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Truncate.js b/src/Truncate.js index 5bcb7bbb..335361c0 100644 --- a/src/Truncate.js +++ b/src/Truncate.js @@ -156,7 +156,9 @@ export default class Truncate extends Component { } measureWidth(text) { - return this.canvas.measureText(text).width; + const targetStyles = window.getComputedStyle(this.refs.target); + const letterSpacing = parseFloat(targetStyles['letter-spacing']) || 0; + return this.canvas.measureText(text).width + (letterSpacing * text.length); } ellipsisWidth(node) { From eaa5bca6ec68a3772ed22de68d2667cb26a6fb4d Mon Sep 17 00:00:00 2001 From: Eric Foster Date: Tue, 28 Mar 2017 16:20:55 -0700 Subject: [PATCH 3/5] Fix tests, add defaults to prevent NaN. --- src/Truncate.js | 4 ++-- test/Truncate.js | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/Truncate.js b/src/Truncate.js index 335361c0..4c8b0c41 100644 --- a/src/Truncate.js +++ b/src/Truncate.js @@ -128,8 +128,8 @@ export default class Truncate extends Component { } const targetParentStyles = window.getComputedStyle(target.parentNode); - const targetParentPadding = parseFloat(targetParentStyles.paddingLeft) + - parseFloat(targetParentStyles.paddingRight); + const targetParentPadding = parseFloat(targetParentStyles.paddingLeft || 0) + + parseFloat(targetParentStyles.paddingRight || 0); const targetWidth = target.parentNode.getBoundingClientRect().width - targetParentPadding; diff --git a/test/Truncate.js b/test/Truncate.js index 09c3575a..db77d9af 100644 --- a/test/Truncate.js +++ b/test/Truncate.js @@ -122,6 +122,17 @@ describe('', () => { ).children[0]; + const spacingAndPaddingStyles = { + padding: '10px', + letterSpacing: '1px' + }; + + const renderIntoBoxWithPaddingAndLetterSpacing = component => renderIntoDocument( +
+ {component} +
+ ).children[0]; + before(() => { sinon.stub(global.window.HTMLDivElement.prototype, 'getBoundingClientRect', () => ({ width }) @@ -164,6 +175,22 @@ describe('', () => { `); }); + it('should take padding and letter-spacing into account', () => { + const component = renderIntoBoxWithPaddingAndLetterSpacing( + + This text should + stop after here + and not contain the + next lines + + ); + + expect(component, 'to display text', ` + This text + should stop… + `); + }); + it('should preserve newlines', () => { const component = renderIntoBox( From de27ca9bbd4797e7a736efe9fdb2046b66601da8 Mon Sep 17 00:00:00 2001 From: Eric Foster Date: Tue, 28 Mar 2017 17:00:09 -0700 Subject: [PATCH 4/5] Some formatting changes for consistency. --- src/Truncate.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Truncate.js b/src/Truncate.js index 4c8b0c41..d1c35412 100644 --- a/src/Truncate.js +++ b/src/Truncate.js @@ -128,8 +128,8 @@ export default class Truncate extends Component { } const targetParentStyles = window.getComputedStyle(target.parentNode); - const targetParentPadding = parseFloat(targetParentStyles.paddingLeft || 0) + - parseFloat(targetParentStyles.paddingRight || 0); + const targetParentPadding = parseFloat(targetParentStyles['padding-left'] || 0) + + parseFloat(targetParentStyles['padding-right'] || 0); const targetWidth = target.parentNode.getBoundingClientRect().width - targetParentPadding; @@ -156,7 +156,12 @@ export default class Truncate extends Component { } measureWidth(text) { - const targetStyles = window.getComputedStyle(this.refs.target); + const { + refs: { + target + } + } = this; + const targetStyles = window.getComputedStyle(target); const letterSpacing = parseFloat(targetStyles['letter-spacing']) || 0; return this.canvas.measureText(text).width + (letterSpacing * text.length); } From 861cb5211e34499aa7cc4f6ca826f217b1de02b1 Mon Sep 17 00:00:00 2001 From: Eric Foster Date: Tue, 28 Mar 2017 17:00:17 -0700 Subject: [PATCH 5/5] Fix test timeout. --- test/Truncate.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/test/Truncate.js b/test/Truncate.js index db77d9af..9d8ea780 100644 --- a/test/Truncate.js +++ b/test/Truncate.js @@ -406,9 +406,8 @@ describe('', () => { }); }); - it('should recalculate when resizing the window', () => { + it('should recalculate when resizing the window', (done) => { const calcTargetWidth = sinon.spy(Truncate.prototype, 'calcTargetWidth'); - try { renderIntoDocument(); @@ -418,9 +417,9 @@ describe('', () => { expect(calcTargetWidth, 'was called times', numCalled + 1); } finally { - Truncate.prototype.calcTargetWidth.restore(); + Truncate.prototype.calcTargetWidth.restore(done()); } - }); + }).timeout(2500); it('should clean up all event listeners on window when unmounting', () => { const events = new Set();