import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import dimensions from 'Styles/Variables/dimensions'; import Measure from 'Components/Measure'; import PageJumpBarItem from './PageJumpBarItem'; import styles from './PageJumpBar.css'; const ITEM_HEIGHT = parseInt(dimensions.jumpBarItemHeight); class PageJumpBar extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { height: 0, visibleItems: props.items }; } componentDidMount() { this.computeVisibleItems(); } componentDidUpdate(prevProps, prevState) { if ( prevProps.items !== this.props.items || prevState.height !== this.state.height ) { this.computeVisibleItems(); } } // // Control computeVisibleItems() { const { items, minimumItems } = this.props; const height = this.state.height; const maximumItems = Math.floor(height / ITEM_HEIGHT); const diff = items.length - maximumItems; if (diff < 0) { this.setState({ visibleItems: items }); return; } if (items.length < minimumItems) { this.setState({ visibleItems: items }); return; } const removeDiff = Math.ceil(items.length / maximumItems); const visibleItems = _.reduce(items, (acc, item, index) => { if (index % removeDiff === 0) { acc.push(item); } return acc; }, []); this.setState({ visibleItems }); } // // Listeners onMeasure = ({ height }) => { this.setState({ height }); } // // Render render() { const { minimumItems, onItemPress } = this.props; const { visibleItems } = this.state; if (!visibleItems.length || visibleItems.length < minimumItems) { return null; } return (