From 22cf693044db82ae83f57ca9f03c5d5904e0463a Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Tue, 13 Oct 2020 13:58:32 -0400 Subject: [PATCH] fix(inventoryList): issues/403 adjust for expanded guestsList (#460) * graphCard, remove default minHeight prop * inventoryList, autoUpdate prop * minHeight, flip autoUpdate, inner container height for reset --- .../__tests__/__snapshots__/graphCard.test.js.snap | 10 ++++++++++ src/components/graphCard/graphCard.js | 4 ++-- .../__tests__/__snapshots__/inventoryList.test.js.snap | 6 +++--- src/components/inventoryList/inventoryList.js | 4 ++-- .../__tests__/__snapshots__/minHeight.test.js.snap | 4 +++- src/components/minHeight/__tests__/minHeight.test.js | 4 +++- src/components/minHeight/minHeight.js | 9 ++++++--- 7 files changed, 29 insertions(+), 12 deletions(-) diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index d95e10f05..2614bef2d 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -71,6 +71,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec > @@ -123,6 +124,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec @@ -198,6 +200,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu > @@ -250,6 +253,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu @@ -321,6 +325,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu > @@ -373,6 +378,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu @@ -444,6 +450,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` > @@ -496,6 +503,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` @@ -567,6 +575,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` > @@ -619,6 +628,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js index 11bae4e74..a3f6fb5dc 100644 --- a/src/components/graphCard/graphCard.js +++ b/src/components/graphCard/graphCard.js @@ -181,7 +181,7 @@ class GraphCard extends React.Component { return ( - + @@ -200,7 +200,7 @@ class GraphCard extends React.Component { </CardActions> </CardHeader> </MinHeight> - <MinHeight autoUpdate={false}> + <MinHeight key="bodyMinHeight"> <CardBody> <div className={(error && 'blur') || 'fadein'}> {pending && <Loader variant="graph" />} diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap index 1dba3d635..dd573293c 100644 --- a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap +++ b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap @@ -152,7 +152,7 @@ exports[`InventoryList Component should handle variations in data: filtered data </CardHeader> </MinHeight> <MinHeight - autoUpdate={true} + autoUpdate={false} key="bodyMinHeight-10" minHeight={0} > @@ -249,7 +249,7 @@ exports[`InventoryList Component should handle variations in data: variable data </CardHeader> </MinHeight> <MinHeight - autoUpdate={true} + autoUpdate={false} key="bodyMinHeight-10" minHeight={0} > @@ -349,7 +349,7 @@ exports[`InventoryList Component should render a non-connected component: non-co </CardHeader> </MinHeight> <MinHeight - autoUpdate={true} + autoUpdate={false} key="bodyMinHeight-10" minHeight={0} > diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js index 2a7faa87e..e9327bc60 100644 --- a/src/components/inventoryList/inventoryList.js +++ b/src/components/inventoryList/inventoryList.js @@ -165,7 +165,7 @@ class InventoryList extends React.Component { return ( <Card className="curiosity-inventory-card"> - <MinHeight key="headerMinHeight"> + <MinHeight key="headerMinHeight" autoUpdate> <CardHeader> <CardTitle> <Title headingLevel="h2" size="lg"> @@ -202,7 +202,7 @@ class InventoryList extends React.Component { </div> </CardBody> </MinHeight> - <MinHeight key="footerMinHeight"> + <MinHeight key="footerMinHeight" autoUpdate> <CardFooter className={(error && 'blur') || ''}> <TableToolbar isFooter> <Pagination diff --git a/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap b/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap index 563a10f6f..23d5e40a8 100644 --- a/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap +++ b/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap @@ -8,6 +8,8 @@ exports[`MinHeight Component should render a non-connected component: non-connec } } > - lorem ipsum + <div> + lorem ipsum + </div> </div> `; diff --git a/src/components/minHeight/__tests__/minHeight.test.js b/src/components/minHeight/__tests__/minHeight.test.js index b4649881d..b99a4cac6 100644 --- a/src/components/minHeight/__tests__/minHeight.test.js +++ b/src/components/minHeight/__tests__/minHeight.test.js @@ -11,7 +11,9 @@ describe('MinHeight Component', () => { }); it('should set minHeight in relation to contents and props', () => { - const props = {}; + const props = { + autoUpdate: true + }; const component = shallow(<MinHeight {...props}>lorem ipsum</MinHeight>); expect(component.instance().setMinHeight).toBeDefined(); diff --git a/src/components/minHeight/minHeight.js b/src/components/minHeight/minHeight.js index cc7263cf7..aeace0bda 100644 --- a/src/components/minHeight/minHeight.js +++ b/src/components/minHeight/minHeight.js @@ -11,6 +11,8 @@ import { helpers } from '../../common'; class MinHeight extends React.Component { containerRef = React.createRef(); + innerContainerRef = React.createRef(); + updatedMinHeight = 0; updatedContainerWidth = 0; @@ -58,9 +60,10 @@ class MinHeight extends React.Component { const { updatedMinHeight } = this; const { minHeight: overrideMinHeight } = this.props; const { current: domElement = {} } = this.containerRef; + const { current: innerDomElement = {} } = this.innerContainerRef; if (resetMinHeight && domElement.style) { - domElement.style.minHeight = 0; + domElement.style.minHeight = innerDomElement?.clientHeight || 0; } const clientHeight = domElement?.clientHeight || 0; @@ -102,7 +105,7 @@ class MinHeight extends React.Component { return ( <div ref={this.containerRef} style={{ minHeight: updatedMinHeight }}> - {children} + <div ref={this.innerContainerRef}>{children}</div> </div> ); } @@ -125,7 +128,7 @@ MinHeight.propTypes = { * @type {{minHeight: number, autoUpdate: boolean}} */ MinHeight.defaultProps = { - autoUpdate: true, + autoUpdate: false, minHeight: 0 };