Skip to content

Instantly share code, notes, and snippets.

@brandondurham
Created March 30, 2016 17:58
Show Gist options
  • Save brandondurham/2479fdb3d24c316c7225d3d0090eee7d to your computer and use it in GitHub Desktop.
Save brandondurham/2479fdb3d24c316c7225d3d0090eee7d to your computer and use it in GitHub Desktop.
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment