tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Max - Prettify StaggeredMotion [skip ci]

This commit is contained in:
Ivan Diaz 2016-12-08 01:55:57 -03:00
parent 7dbdac126f
commit 84c25e46c1
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/app-components/people-list.js
View File

@ -31,20 +31,8 @@ class PeopleList extends React.Component {
return (
<div className="people-list">
<div className="people-list__list">
<StaggeredMotion defaultStyles={_.times(this.props.pageSize).map(() => {return {offset: -100, alpha: 0};})} styles={(prevStyles) => prevStyles.map((_, i) => {
return i === 0
? {offset: spring(0), alpha: spring(1)}
: {offset: spring(prevStyles[i - 1].offset), alpha: spring(prevStyles[i - 1].alpha)}
})}>
{(styles) =>
<div>
{styles.map((style, index) =>
<div style={{transform: 'translateX('+style.offset+'px)', opacity: style.alpha}}>
{this.renderItem(index + this.props.pageSize * (this.props.page - 1))}
</div>
)}
</div>
}
<StaggeredMotion defaultStyles={this.getDefaultStyles()} styles={this.getStyles.bind(this)}>
{this.renderList.bind(this)}
</StaggeredMotion>
</div>
<div className="people-list__pagination">
@ -54,6 +42,34 @@ class PeopleList extends React.Component {
);
}
getDefaultStyles() {
return _.times(this.props.pageSize).map(() => {return {offset: -100, alpha: 0}});
}
getStyles(prevStyles) {
return prevStyles.map((_, i) => {
return i === 0
? {offset: spring(0), alpha: spring(1)}
: {offset: spring(prevStyles[i - 1].offset), alpha: spring(prevStyles[i - 1].alpha)}
});
}
renderList(styles) {
return (
<div>
{styles.map(this.renderAnimatedItem.bind(this))}
</div>
);
}
renderAnimatedItem(style, index) {
return (
<div style={{transform: 'translateX('+style.offset+'px)', opacity: style.alpha}}>
{this.renderItem(index + this.props.pageSize * (this.props.page - 1))}
</div>
);
}
renderItem(index) {
if(index >= this.props.list.length) {
return null;