From 66dfc6094e9d1507b5590470ac1c9db0a706c894 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Thu, 15 Aug 2019 13:51:07 -0400 Subject: [PATCH 1/4] fix: update state.text if props.children change --- .gitignore | 6 ++++++ src/index.js | 5 +++++ src/index.test.js | 21 +++++++++++++++++++++ 3 files changed, 32 insertions(+) diff --git a/.gitignore b/.gitignore index 106d0d3..4e92394 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,9 @@ typings/ # compiled dist + +# I don't see this committed, so putting in ignore +package-lock.json + +# vim swap files +**/*.swp diff --git a/src/index.js b/src/index.js index 5349a3a..9b6e49b 100644 --- a/src/index.js +++ b/src/index.js @@ -35,6 +35,11 @@ class EllipisWithTooltip extends React.Component { } } + componentWillReceiveProps(nextProps) { + if (nextProps.children === this.props.children) return; + this.setState({ hasOverflowingChildren: false }); + } + render() { const { hasOverflowingChildren, text } = this.state; const { diff --git a/src/index.test.js b/src/index.test.js index 809e1a9..71028d8 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -109,4 +109,25 @@ describe('Ellipsis', () => { expect(toJson(wrapper)).toMatchSnapshot(); }); + + it('should update text when props change', () => { + const wrapper = setup('this is some long text'); + let domElement = wrapper.find('#a div').getDOMNode(); + + expect(wrapper.state().hasOverflowingChildren).toEqual(false); + Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } }); + Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } }); + wrapper.find('#a div').simulate('mouseEnter'); + expect(wrapper.state().hasOverflowingChildren).toEqual(true); + + expect(wrapper.state().text).toEqual('this is some long text'); + wrapper.setProps({children: 'this changed'}); + expect(wrapper.state().hasOverflowingChildren).toEqual(false); + domElement = wrapper.find('#a div').getDOMNode(); + Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } }); + Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } }); + wrapper.find('#a div').simulate('mouseEnter'); + expect(wrapper.state().hasOverflowingChildren).toEqual(true); + expect(wrapper.state().text).toEqual('this changed'); + }); }); From 5a0eeea14ca7e8e0c34ba2fc6f0d220cea65561c Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Thu, 29 Aug 2019 13:52:04 -0400 Subject: [PATCH 2/4] fix: use getderivedstatefromprops --- src/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 9b6e49b..25c3d88 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ class EllipisWithTooltip extends React.Component { this.state = { hasOverflowingChildren: false, text: undefined, + prevPropsChildren: props.children, }; this.updateOverflow = this.updateOverflow.bind(this); } @@ -35,9 +36,12 @@ class EllipisWithTooltip extends React.Component { } } - componentWillReceiveProps(nextProps) { - if (nextProps.children === this.props.children) return; - this.setState({ hasOverflowingChildren: false }); + static getDerivedStateFromProps(props, state) { + if (props.children === state.prevPropsChildren) return null; + return { + hasOverflowingChildren: false, + prevPropsChildren: props.children, + }; } render() { From 89e74512bea994e0b158b8ce49ed0ac6719b666c Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Thu, 29 Aug 2019 14:07:54 -0400 Subject: [PATCH 3/4] fix(lint): do what lint wants --- src/index.test.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/index.test.js b/src/index.test.js index 71028d8..54c20e7 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -115,17 +115,33 @@ describe('Ellipsis', () => { let domElement = wrapper.find('#a div').getDOMNode(); expect(wrapper.state().hasOverflowingChildren).toEqual(false); - Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } }); - Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } }); + Object.defineProperty(domElement, 'clientWidth', { + get() { + return 300; + }, + }); + Object.defineProperty(domElement, 'scrollWidth', { + get() { + return 400; + }, + }); wrapper.find('#a div').simulate('mouseEnter'); expect(wrapper.state().hasOverflowingChildren).toEqual(true); expect(wrapper.state().text).toEqual('this is some long text'); - wrapper.setProps({children: 'this changed'}); + wrapper.setProps({ children: 'this changed' }); expect(wrapper.state().hasOverflowingChildren).toEqual(false); domElement = wrapper.find('#a div').getDOMNode(); - Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } }); - Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } }); + Object.defineProperty(domElement, 'clientWidth', { + get() { + return 300; + }, + }); + Object.defineProperty(domElement, 'scrollWidth', { + get() { + return 400; + }, + }); wrapper.find('#a div').simulate('mouseEnter'); expect(wrapper.state().hasOverflowingChildren).toEqual(true); expect(wrapper.state().text).toEqual('this changed'); From a2dd887f8ffd2c06f2cc8c933effa468f6dd62cd Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Thu, 29 Aug 2019 14:38:34 -0400 Subject: [PATCH 4/4] fix: remove lowercase license --- license | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 license diff --git a/license b/license deleted file mode 100644 index 1278ddd..0000000 --- a/license +++ /dev/null @@ -1,9 +0,0 @@ -MIT License - -Copyright (c) Amir Fefer - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.