import React from 'react';
import * as _ from 'lodash';
import Infinite from 'react-infinite';

class Img extends React.Component {
    render() {
        return (
            <div className="thumbnail">
                <img src="http://media2.giphy.com/media/geozuBY5Y6cXm/giphy.gif" alt="..." />
            </div>
        );
    }
};

class View extends React.Component {
    render() {
        return (
            <div className="col-xs-4">
                {this.props.children}
            </div>
        );
    }
};

class Row extends React.Component {
    render() {
        let children = this.props.children.map((child, i) => {
            return (<View key={i}>{child}</View>);
        });

        return (
            <div className="row">
                {children}
            </div>
        );
    }
};

class Rows extends React.Component {
    constructor(props) {
        super(props);

        this.onInfiniteLoad = this.onInfiniteLoad.bind(this);
    }
    onInfiniteLoad() {
        this.props.more();
    }
    render() {
        let children = this.props.children.map((child, i) => {
            return (<Row key={i}>{child}</Row>);
        });

        return (
            <Infinite
                className="col-xs-12"
                useWindowAsScrollContainer={true}
                elementHeight={230}
                infiniteLoadBeginEdgeOffset={690}
                onInfiniteLoad={this.onInfiniteLoad}>
                {children}
            </Infinite>
        );
    }
};

class Options extends React.Component {
    constructor(props) {
        super(props);

        this.more = this.more.bind(this);

        this.state = {
            data: [],
            max: 0
        };

        for (var i = 0; i < 20; i++) {
            this.state.data.push(<Img key={i} />);
        }
    }
    more() {
        if (this.state.max < 4) {
            console.log('more', this.state.max);

            let data = [];

            for (var i = 0; i < 20; i++) {
                data.push(<Img key={i} />);
            }

            this.setState({
                data: this.state.data.concat(data),
                max: this.state.max + 1
            })
        } else {
            console.log('no more');
        }
    }
    render() {
        let data = this.state.data,
            chunk = _.chunk(data, 3);

        return (<Rows more={this.more}>{chunk}</Rows>);
    }
};

export default Options;
@@ -24,2375 +24,95 @@
 t';%0A
-import * as _ from 'lodash';%0Aimport Infinite from 'react-infinite';%0A%0Aclass Img extends React.Component %7B%0A    render() %7B%0A        return (%0A            %3Cdiv className=%22thumbnail%22%3E%0A                %3Cimg src=%22http://media2.giphy.com/media/geozuBY5Y6cXm/giphy.gif%22 alt=%22...%22 /%3E%0A            %3C/div%3E%0A        );%0A    %7D%0A%7D;%0A%0Aclass View extends React.Component %7B%0A    render() %7B%0A        return (%0A            %3Cdiv className=%22col-xs-4%22%3E%0A                %7Bthis.props.children%7D%0A            %3C/div%3E%0A        );%0A    %7D%0A%7D;%0A%0Aclass Row extends React.Component %7B%0A    render() %7B%0A        let children = this.props.children.map((child, i) =%3E %7B%0A            return (%3CView key=%7Bi%7D%3E%7Bchild%7D%3C/View%3E);%0A        %7D);%0A%0A        return (%0A            %3Cdiv className=%22row%22%3E%0A                %7Bchildren%7D%0A            %3C/div%3E%0A        );%0A    %7D%0A%7D;%0A%0Aclass Rows extends React.Component %7B%0A    constructor(props) %7B%0A        super(props);%0A%0A        this.onInfiniteLoad = this.onInfiniteLoad.bind(this);%0A    %7D%0A    onInfiniteLoad() %7B%0A        this.props.more();%0A    %7D%0A    render() %7B%0A        let children = this.props.children.map((child, i) =%3E %7B%0A            return (%3CRow key=%7Bi%7D%3E%7Bchild%7D%3C/Row%3E);%0A        %7D);%0A%0A        return (%0A            %3CInfinite%0A                className=%22col-xs-12%22%0A                useWindowAsScrollContainer=%7Btrue%7D%0A                elementHeight=%7B230%7D%0A                infiniteLoadBeginEdgeOffset=%7B690%7D%0A                onInfiniteLoad=%7Bthis.onInfiniteLoad%7D%3E%0A                %7Bchildren%7D%0A            %3C/Infinite%3E%0A        );%0A    %7D%0A%7D;%0A%0Aclass Options extends React.Component %7B%0A    constructor(props) %7B%0A        super(props);%0A%0A        this.more = this.more.bind(this);%0A%0A        this.state = %7B%0A            data: %5B%5D,%0A            max: 0%0A        %7D;%0A%0A        for (var i = 0; i %3C 20; i++) %7B%0A            this.state.data.push(%3CImg key=%7Bi%7D /%3E);%0A        %7D%0A    %7D%0A    more() %7B%0A        if (this.state.max %3C 4) %7B%0A            console.log('more', this.state.max);%0A%0A            let data = %5B%5D;%0A%0A            for (var i = 0; i %3C 20; i++) %7B%0A                data.push(%3CImg key=%7Bi%7D /%3E);%0A            %7D%0A%0A            this.setState(%7B%0A                data: this.state.data.concat(data),%0A                max: this.state.max + 1%0A            %7D)%0A        %7D else %7B%0A            console.log('no more');%0A        %7D%0A    %7D%0A    render() %7B%0A        let data = this.state.data,%0A            chunk = _.chunk(data, 3);%0A%0A        return (%3CRows more=%7Bthis.more%7D%3E%7Bchunk%7D%3C/Rows
+%0Aclass Options extends React.Component %7B%0A    render() %7B%0A        return (%3Ch1%3EOptions%3C/h1
 %3E);%0A

Undo options tests