diff --git a/package.json b/package.json index f28d631..af28bc9 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,6 @@ "classnames": "2.2.5", "jss": "^9.8.7", "prop-types": "^15.6.2", - "react-height": "^3.0.0", "react-icons": "^2.2.7", "react-jss": "^8.6.1", "react-overflow-tooltip": "^2.0.1", diff --git a/src/components/with_responsive_height.js b/src/components/with_responsive_height.js index 9b16cea..bf479d0 100644 --- a/src/components/with_responsive_height.js +++ b/src/components/with_responsive_height.js @@ -1,6 +1,5 @@ import React, { PureComponent } from "react"; import PropTypes from "prop-types"; -import ReactHeight from "react-height"; const DEFAULT_HEIGHT = 400; @@ -23,20 +22,37 @@ const withResponsiveHeight = WrappedComponent => height: DEFAULT_HEIGHT }; - changeHeight = height => { + getClientHeight() { + return this.divRef.clientHeight; + } + + componentDidMount() { + const clientHeight = this.getClientHeight(); + this.changeHeight(clientHeight); + } + + componentDidUpdate() { + const { height } = this.state; + const clientHeight = this.getClientHeight(); + if (clientHeight && height !== clientHeight) { + this.changeHeight(clientHeight); + } + } + + changeHeight(height) { this.setState({ height: height - 2 }); - }; + } render() { const { responsiveHeight, ...props } = this.props; const { height } = this.state; return ( - (this.divRef = element)} > - + ); } }; diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap index 470194c..cdba0e1 100644 --- a/tests/components/__snapshots__/multi_select.spec.js.snap +++ b/tests/components/__snapshots__/multi_select.spec.js.snap @@ -4346,11 +4346,7 @@ exports[`MultiSelect Snapshots with generateClassName 1`] = ` `; exports[`MultiSelect Snapshots with responsiveHeight 1`] = ` - + `; exports[`MultiSelect Snapshots without responsiveHeight 1`] = ` - + `; exports[`MultiSelect passes properties can remove search 1`] = ` diff --git a/tests/components/multi_select.spec.js b/tests/components/multi_select.spec.js index 27038bf..5a5a0b4 100644 --- a/tests/components/multi_select.spec.js +++ b/tests/components/multi_select.spec.js @@ -248,6 +248,17 @@ describe("MultiSelect", () => { ); expect(tree).toMatchSnapshot(); }); + + test("changeHeight will not be called", () => { + const changeHeight = jest.fn(); + const getClientHeight = jest.fn(() => 44); + const tree = mount(); + const instance = tree.instance(); + instance.getClientHeight = getClientHeight; + instance.changeHeight = changeHeight; + instance.componentDidUpdate(); + expect(changeHeight).toHaveBeenCalled(); + }); }); describe("passes properties", () => { diff --git a/yarn.lock b/yarn.lock index f81c1f7..10ec781 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8607,12 +8607,6 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.5.8: - version "15.5.8" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" - dependencies: - fbjs "^0.8.9" - prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" @@ -8934,12 +8928,6 @@ react-fuzzy@^0.5.2: fuse.js "^3.0.1" prop-types "^15.5.9" -react-height@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-height/-/react-height-3.0.0.tgz#fae322f9da64d3e9e25536f26b77c73954261524" - dependencies: - prop-types "15.5.8" - react-html-attributes@^1.4.2: version "1.4.3" resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.3.tgz#8c36c35fce6b750938d286af428ed1da7625186e"