Only render first 3 categories on first render

release
Etienne Lemay 2016-07-15 12:24:50 -04:00
parent ce3ab53400
commit 9eb8f0b6ac
2 changed files with 44 additions and 14 deletions

View File

@ -11,6 +11,7 @@ class Example extends React.Component {
perLine: 9,
skin: 1,
set: 'apple',
hidden: false,
}
}
@ -43,6 +44,12 @@ class Example extends React.Component {
})}
</div>
<div>
<button
onClick={() => this.setState({ hidden: !this.state.hidden })}
>{this.state.hidden ? 'Mount' : 'Unmount'}</button>
</div>
<pre style={{
fontSize: 18,
display: 'inline-block',
@ -61,13 +68,15 @@ class Example extends React.Component {
<br /><Operator>/&gt;</Operator>
</pre>
<Picker
emojiSize={this.state.emojiSize}
perLine={this.state.perLine}
skin={this.state.skin}
sheetURL={`../sheets/sheet_${this.state.set}_64.png`}
onClick={(emoji) => console.log(emoji)}
/>
{!this.state.hidden &&
<Picker
emojiSize={this.state.emojiSize}
perLine={this.state.perLine}
skin={this.state.skin}
sheetURL={`../sheets/sheet_${this.state.set}_64.png`}
onClick={(emoji) => console.log(emoji)}
/>
}
</div>
}
}

View File

@ -21,6 +21,7 @@ export default class Picker extends React.Component {
this.state = {
skin: store.get('skin') || props.skin,
firstRender: true,
}
}
@ -30,6 +31,15 @@ export default class Picker extends React.Component {
}
}
componentDidMount() {
if (this.state.firstRender) {
setTimeout(() => {
if (!this.isMounted) return
this.setState({ firstRender: false })
}, 60)
}
}
componentDidUpdate() {
this.updateCategoriesSize()
this.handleScroll()
@ -86,6 +96,10 @@ export default class Picker extends React.Component {
handleScrollPaint() {
this.waitingForPaint = false
if (!this.refs.scroll) {
return
}
var target = this.refs.scroll,
scrollTop = target.scrollTop,
scrollingDown = scrollTop > (this.scrollTop || 0),
@ -97,14 +111,15 @@ export default class Picker extends React.Component {
category = CATEGORIES[ii],
component = this.refs[`category-${ii}`]
if (!minTop || component.top < minTop) {
if (component.top > 0) {
minTop = component.top
}
}
if (component) {
let active = component.handleScroll(scrollTop)
if (!minTop || component.top < minTop) {
if (component.top > 0) {
minTop = component.top
}
}
if (active && !activeCategory) {
if (category.anchor) category = category.anchor
activeCategory = category
@ -186,6 +201,12 @@ export default class Picker extends React.Component {
}
}
getCategories() {
var categories = CATEGORIES
return this.state.firstRender ? categories.slice(0, 3) : categories
}
render() {
var { perLine, emojiSize, sheetURL, style } = this.props,
{ skin } = this.state,
@ -206,7 +227,7 @@ export default class Picker extends React.Component {
onSearch={this.handleSearch.bind(this)}
/>
{CATEGORIES.map((category, i) => {
{this.getCategories().map((category, i) => {
return <Category
ref={`category-${i}`}
key={category.name}