All files / yBars yBar.js

100% Statements 12/12
100% Branches 0/0
100% Functions 2/2
100% Lines 12/12
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82                                          8x 8x                           11x 11x           11x 11x   11x 11x 11x 11x                           4x   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';
import createRef from 'create-react-ref/lib/createRef';
 
import positionStoreMixin from '../../store/positionStoreMixin';
 
import ListComponent from '../ListComponent';
 
/**
* Displays the sequence names with an arbitrary Marker component
*/
class YBarComponent extends PureComponent {
 
  constructor(props) {
    super(props);
    this.el = createRef();
  }
 
  render() {
    const {
      yPosOffset,
      tileHeight,
      currentViewSequence,
      sequences,
      height,
      cacheElements,
      tileComponent,
      nrYTiles,
      ...otherProps
    } = this.props;
    const style = {
      height,
      overflow: "hidden",
      position: "relative",
      whiteSpace: "nowrap",
    };
    const startTile = Math.max(0, this.position.currentViewSequence - this.props.cacheElements);
    const endTile = Math.min(this.props.sequences.length,
      startTile + Math.ceil(height / this.props.tileHeight) + this.props.cacheElements * 2);
    this.position.lastCurrentViewSequence = this.position.currentViewSequence;
    this.position.lastStartYTile = startTile;
    console.log("foo");
    return (
      <div {...otherProps}>
        <div style={style} ref={this.el}>
          <ListComponent
            startTile={startTile}
            endTile={endTile}
            tileComponent={this.props.tileComponent}
          />
        </div>
      </div>
    );
  }
}
 
positionStoreMixin(YBarComponent, {withY: true});
 
YBarComponent.propTypes = {
  /**
   * Tile to render.
   */
  tileComponent: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.object,
  ]).isRequired,
 
  cacheElements: PropTypes.number.isRequired,
 
  tileHeight: PropTypes.number.isRequired,
  nrYTiles: PropTypes.number.isRequired,
}
 
export default YBarComponent;