All files / components ListComponent.js

84.62% Statements 11/13
50% Branches 2/4
100% Functions 2/2
84.62% Lines 11/13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51                                  333x 333x     325x       325x 325x         18x 18x 333x   10x       10x         4x            
/**
* Copyright 2018, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
 
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
 
/**
 * Renders a list of tiles, but caches already seen components.
 */
class ListComponent extends PureComponent {
 
  renderTile(i) {
    const TileComponent = this.props.tileComponent;
    Iif (i in this.props.componentCache) {
      return this.props.componentCache[i];
    } else {
      const el = <TileComponent
          key={i}
          index={i}
      />;
      this.props.componentCache[i] = el;
      return el;
    }
  }
 
  render() {
    const elements = [];
    for (let i = this.props.startTile; i < this.props.endTile; i++) {
      elements.push(this.renderTile(i));
    }
    Iif (elements.length === 0) {
      console.warn(`The TileComponent rendered returned 0 elements from ${this.props.startTile} to ${this.props.endTile}`);
    }
    // React 15 doesn't allow to return arrays directly. Only React 16 does.
    return <div>
      {elements}
    </div>
  }
}
ListComponent.propTypes = {
  startTile: PropTypes.number.isRequired,
  endTile: PropTypes.number.isRequired,
  componentCache: PropTypes.func.isRequired,
}
export default ListComponent;