All files / components/xBars xBar.js

7.69% Statements 1/13
100% Branches 0/0
0% Functions 0/2
7.69% Lines 1/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 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 83 84 85 86 87 88 89 90 91 92 93                                                                                                                                                1x                                        
/**
* 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 withPositionStore from '../../store/withPositionStore';
 
import ListComponent from '../ListComponent';
 
/**
* Displays the sequence names with an arbitrary Marker component
*/
class XBarComponent extends PureComponent {
 
  constructor(props) {
    super(props);
    this.el = createRef();
  }
 
  render() {
    const {
      tileWidth,
      sequences,
      width,
      cacheElements,
      tileComponent,
      nrXTiles,
      maxLength,
      position,
      positionDispatch,
      ...otherProps
    } = this.props;
    const style = {
      width,
      overflow: "hidden",
      position: "relative",
      whiteSpace: "nowrap",
    };
    const containerStyle = {
      ...this.props.style,
      height: this.props.height,
    };
    const forwardedProps = {
      tileWidth,
      sequences,
      tileComponent,
    };
    const startTile = Math.max(0, this.props.position.currentViewSequencePosition - this.props.cacheElements);
    const endTile = Math.min(this.props.maxLength, startTile + this.props.nrXTiles + this.props.cacheElements * 2);
    const maxWidth = this.props.width + this.props.cacheElements * 2 * this.props.tileWidth;
    this.props.position.lastStartXTile = startTile;
    this.props.position.lastCurrentViewSequencePosition = this.props.position.currentViewSequencePosition;
    return (
      <div style={containerStyle} {...otherProps}>
        <div style={style} ref={this.el}>
          <ListComponent {...forwardedProps}
            startTile={startTile}
            endTile={endTile}
            maxWidth={maxWidth}
          />
        </div>
      </div>
    );
  }
}
 
XBarComponent.propTypes = {
  /**
   * Tile to render.
   */
  tileComponent: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.object,
  ]).isRequired,
 
  cacheElements: PropTypes.number.isRequired,
 
  tileWidth: PropTypes.number.isRequired,
  nrXTiles: PropTypes.number.isRequired,
  maxLength: PropTypes.number.isRequired,
}
 
export default withPositionStore(XBarComponent, {withX: true});
export {
  XBarComponent as xBar,
}