ScrollPanel.js

import React, {Component, PropTypes} from 'react';
import Hammer from 'react-hammerjs';
import classNames from 'classnames';

export default class ScrollPanel extends Component {

	static propTypes = {
		items: PropTypes.array,
		menuStyle: PropTypes.string,
		selectedItem: PropTypes.number,
		selectItem: PropTypes.func,
		subPanel: PropTypes.bool,
		subPanelOpenPosition: PropTypes.number
	};

	static defaultProps = {
		menuStyle: 'Fonts',
		subPanelOpenPosition: 60, // From right side of viewport
		subPanel: false
	};

	state = {
		dragging: false,
		isOnScreen: false,
		transform: this.props.subPanel ? `translate3d(calc(100% - ${this.props.subPanelOpenPosition}px), 0, 0)` : 'none'
	};

	componentDidMount() {
		const {
			selectedItem
		} = this.props;

		if (selectedItem) {
			const selectedItemNode = this.refs[`menu-item-${this.props.selectedItem}`];
			const thePanel = this.refs.Panel;
			console.log('selectedItemNode.offsetTop', selectedItemNode.offsetTop, selectedItemNode.scrollY);
			thePanel.scrollTop = selectedItemNode.offsetTop;
		}
	}

	hidePanel = () => {
		const panel = this.refs.Panel;
		const width = panel.clientWidth;
		const transform = width - this.props.subPanelOpenPosition;
		this.setState({
			dragging: false,
			isOnScreen: false,
			transform: `translateX(${transform}px)`
		});
	}

	showPanel = () => {
		this.setState({
			dragging: false,
			isOnScreen: true,
			transform: `translateX(0px)`
		});
	}

	render() {
		const styles = require('./ScrollPanel.css');

		const {
			items,
			menuStyle,
			selectItem,
			selectedItem,
			subPanel
		} = this.props;

		const panelClasses = classNames({
			[styles.Base]: !subPanel,
			[styles['Base--isSubPanel']]: subPanel,
			[styles['Base--isDragging']]: this.state.dragging
		});

		return (
			<div className={panelClasses} ref="Panel" style={{
				transform: this.state.transform
			}}>
				{ subPanel && this.state.isOnScreen && <div className={styles['TogglePanel--open']} onClick={this.hidePanel} /> }
				{ subPanel && !this.state.isOnScreen && <div className={styles['TogglePanel--close']} onClick={this.showPanel} /> }
				<ul className={styles[`TheItems--is${menuStyle}Menu`]}>
					{ items.map((item) => {
						const subMenuItemClasses = classNames({
							[styles[`${menuStyle}MenuItem`]]: selectedItem !== item.id,
							[styles[`${menuStyle}MenuItem--isActive`]]: selectedItem === item.id
						});
						return (
							<Hammer
								key={`menu-item-${item.id}`}
								onTap={() => {
									selectItem(item.id);
								}}>
								<li
									className={subMenuItemClasses}
									ref={`menu-item-${item.id}`}
									{item.label}
								</li>
							</Hammer>
						);
					})}
				</ul>
			</div>
		);
	}
}