fix(CardHeightMatching): fix infinite calls to match heights (pattern…

…fly#628) affects: patternfly-react ISSUES CLOSED: patternfly#627
redallen · Sep 18, 2018 · 2d6a290 · 2d6a290
1 parent 817548c
commit 2d6a290
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js b/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js
@@ -12,16 +12,8 @@ class CardHeightMatching extends React.Component {
   }
 
   componentDidMount() {
-    // setup the event listening on '_container' for our height matching selectors
-    this._selectors.forEach(selector => {
-      const elements = this._container.querySelectorAll(selector);
-      this._resizeSensors.push(new ResizeSensor(elements, debounce(() => this._matchHeights([selector]), 200)));
-    });
-
     // schedule the initial height matching
-    setTimeout(() => {
-      this._matchHeights();
-    }, 0);
+    this._matchHeights();
   }
 
   componentDidUpdate() {
@@ -32,16 +24,32 @@ class CardHeightMatching extends React.Component {
   }
 
   componentWillUnmount() {
+    this._removeSensors();
+  }
+
+  _addSensors() {
+    // setup the event listening on '_container' for our height matching selectors
+    this._selectors.forEach(selector => {
+      const elements = this._container.querySelectorAll(selector);
+      this._resizeSensors.push(new ResizeSensor(elements, debounce(() => this._matchHeights([selector]), 200)));
+    });
+  }
+
+  _removeSensors() {
     this._resizeSensors.forEach(sensor => {
       sensor.detach();
     });
+    this._resizeSensors = [];
   }
 
   _matchHeights(selectors = this._selectors) {
     if (!this._container) {
       return;
     }
 
+    // Remove any existing sensors so they do not detect changes made here
+    this._removeSensors();
+
     const arrayMap = elements =>
       Array.prototype.map.call(elements, el => el.scrollHeight).reduce((pre, cur) => Math.max(pre, cur), -Infinity);
     selectors.forEach(selector => {
@@ -54,6 +62,9 @@ class CardHeightMatching extends React.Component {
         el.style.height = `${maxHeight}px`;
       });
     });
+
+    // Add resize sensors to watch for resizes
+    this._addSensors();
   }
 
   render() {

diff --git a/...patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js b/...patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js
@@ -14,9 +14,16 @@ const handleClick = e => {
   action('some on click')();
 };
 
+const fakeContent =
+  'This is card content that is used to fill up the card. There is lots of content so it should cause ' +
+  'the card to grow in height so that we can test the match height attribute and what happens when card ' +
+  'contents change and cause the card to grow. The other cards should grow as well and it should only cause ' +
+  'the resize sensor to be called one time.';
+
 const baseCardHeightMatchingStory = stories => {
   stories.addWithInfo('Base Card w/HeightMatching', '', () => {
     const matchHeightBool = boolean('Match Height', true);
+    const content = boolean('Content', false);
     const story = (
       <body className="cards-pf">
         <CardGrid matchHeight={matchHeightBool}>
@@ -35,7 +42,7 @@ const baseCardHeightMatchingStory = stories => {
                     <Icon name="shield" /> Card Title
                   </CardTitle>
                 </CardHeading>
-                <CardBody>[card contents]</CardBody>
+                <CardBody>{content ? <span>{fakeContent}</span> : '[card contents]'}</CardBody>
                 <CardFooter>
                   <CardLink onClick={handleClick} href="#" icon={<Icon type="pf" name="add-circle-o" />}>
                     Add New Cluster