only pass wrapper when not rendering virtually #27, #246

impactoss · Jul 27, 2017 · 08e8c9a · 08e8c9a
1 parent 5b10019
commit 08e8c9a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/...ponents/entityList/EntityListMain/EntityListGroups/EntityListItems/EntityListItemWatch.js b/...ponents/entityList/EntityListMain/EntityListGroups/EntityListItems/EntityListItemWatch.js
@@ -18,7 +18,7 @@ class EntityListItemWatch extends React.PureComponent { // eslint-disable-line r
     this.state = { height: 0 };
   }
   componentWillMount() {
-    this.setState({ height: getRenderedHeight(this.props.renderEntity()) });
+    this.setState({ height: getRenderedHeight(this.props.renderEntity(true)) });
   }
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.isInViewport !== nextProps.isInViewport
@@ -30,8 +30,7 @@ class EntityListItemWatch extends React.PureComponent { // eslint-disable-line r
   componentWillUpdate(nextProps) {
     // only recalculate height if not in viewport and only if things changed
     if (!nextProps.isInViewport && (this.props.expandNo !== nextProps.expandNo || this.props.entity !== nextProps.entity)) {
-      // console.log('componentWillUpdate setheight', this.props.entity.get('id'))
-      this.setState({ height: getRenderedHeight(this.props.renderEntity()) });
+      this.setState({ height: getRenderedHeight(this.props.renderEntity(true)) });
     }
   }
 

diff --git a/...tyListMain/EntityListGroups/EntityListItems/EntityListItemWrapper/EntityListItem/index.js b/...tyListMain/EntityListGroups/EntityListItems/EntityListItemWrapper/EntityListItem/index.js
@@ -55,6 +55,7 @@ class EntityListItem extends React.PureComponent { // eslint-disable-line react/
       entityPath,
       connections,
     } = this.props;
+
     return (
       <Styled expanded={expandNo > 0}>
         <Item>

diff --git a/...entityList/EntityListMain/EntityListGroups/EntityListItems/EntityListItemWrapper/index.js b/...entityList/EntityListMain/EntityListGroups/EntityListItems/EntityListItemWrapper/index.js
@@ -24,7 +24,7 @@ export class EntityListItemWrapper extends React.PureComponent { // eslint-disab
     return this.props.expandNo !== nextProps.expandNo
     || this.props.entity !== nextProps.entity
     || this.props.entityIdsSelected !== nextProps.entityIdsSelected
-    || this.state.wrapper !== nextState.wrapper;
+    || (!this.props.simulate && this.state.wrapper !== nextState.wrapper);
   }
   render() {
     const {
@@ -41,18 +41,17 @@ export class EntityListItemWrapper extends React.PureComponent { // eslint-disab
       entity,
       entityPath,
     } = this.props;
-    // console.log('EntityListItemWrapper.render', this.state.wrapper)
 
     return (
       <ItemWrapper
         separated={expandNo}
         innerRef={(node) => {
-          if (!this.state.wrapper) {
+          if (!this.props.simulate && !this.state.wrapper) {
             this.setState({ wrapper: node });
           }
         }}
       >
-        { this.state.wrapper &&
+        { (this.props.simulate || this.state.wrapper) &&
           <div>
             <EntityListItem
               entity={entity}
@@ -110,6 +109,7 @@ EntityListItemWrapper.propTypes = {
   expandNo: PropTypes.number,
   entityPath: PropTypes.string,
   entityIcon: PropTypes.string,
+  simulate: PropTypes.bool,
 };
 
 export default EntityListItemWrapper;
diff --git a/app/components/entityList/EntityListMain/EntityListGroups/EntityListItems/index.js b/app/components/entityList/EntityListMain/EntityListGroups/EntityListItems/index.js
@@ -12,10 +12,11 @@ const Styled = styled.div`
 
 export class EntityListItems extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
 
-  renderEntity = (entity, key) => (
+  renderEntity = (entity, key, simulate = false) => (
     <EntityListItemWrapper
       key={key}
       entity={entity}
+      simulate={simulate}
       {...this.props}
     />
   );
@@ -30,7 +31,7 @@ export class EntityListItems extends React.PureComponent { // eslint-disable-lin
             entity={entity}
             expandNo={this.props.expandNo}
             entityIdsSelected={this.props.entityIdsSelected}
-            renderEntity={() => this.renderEntity(entity, key)}
+            renderEntity={(simulate) => this.renderEntity(entity, key, simulate)}
           />
           : this.renderEntity(entity, key)
         )}