<commit_before>'use strict';

var React = require('react');
var math = require('annomath');

var Table = require('../lib/table.jsx');
var Search = require('../lib/search.jsx');
var editors = require('../lib/editors.jsx');
var sortColumn = require('../lib/sort_column');

var generateData = require('./generate_data');


var Paginator = React.createClass({
    render() {
        var onSelect = this.props.onSelect || noop;
        var page = this.props.page;
        var pages = this.props.pages;

        return <ul className='pagination'>{
            math.range(pages).map((i) =>
                <li
                    key={'pagination-' + i}
                    onClick={onSelect.bind(null, i)}
                    className={i === page && 'selected'}>
                    <a href='#' onClick={this.preventDefault}>
                        {i + 1}
                    </a>
                </li>
            )
        }</ul>;
    },

    preventDefault(e) {
        e.preventDefault();
    },
});

var DemoTable = React.createClass({
    getInitialState() {
        var countries = {
            'de': 'Germany',
            'fi': 'Finland',
            'se': 'Sweden'
        };

        return {
            data: generateData({
                amount: 40,
                countries: Object.keys(countries)
            }),
            columns: [
                {
                    property: 'name',
                    header: 'Name',
                    editable: true,
                },
                {
                    property: 'position',
                    header: 'Position',
                },
                {
                    property: 'country',
                    header: 'Country',
                    formatter: (country) => countries[country],
                    editable: true,
                    editor: editors.dropdown(countries),
                },
                {
                    property: 'salary',
                    header: 'Salary',
                    editable: true,
                    formatter: (salary) => parseFloat(salary).toFixed(2),
                },
                {
                    property: 'active',
                    header: 'Active',
                    editable: true,
                    editor: editors.boolean(),
                    formatter: (active) => active && <span>&#10003;</span>,
                },
                {
                    cell: ((i) => {
                        var remove = () => {
                            // this could go through flux etc.
                            this.state.data.splice(i, 1);

                            this.setState({
                                data: this.state.data
                            });
                        };

                        return <span>
                            <span onClick={remove.bind(this)} style={{cursor: 'pointer'}}>&#10007;</span>
                        </span>;
                    }).bind(this),
                }
            ],
            pagination: {
                page: 0,
                perPage: 5
            }
        };
    },

    render() {
        var columns = this.state.columns || [];
        var data = this.state.data || [];

        var config = {
            columns: columns,
            events: {
                // you could hook these with flux etc.
                selectedHeader: sortColumn(columns, data, this.setState.bind(this)),
                edited: ((i, property, value) => {
                    data[i][property] = value;

                    this.setState({
                        data: data
                    });
                }).bind(this)
            }
        };

        var pagination = this.state.pagination || {};
        var paginated = paginate({
            data: data.filter((d) => !('_visible' in d) || d._visible),
            page: pagination.page,
            perPage: pagination.perPage,
        });

        return <div>
            <Paginator page={pagination.page} pages={paginated.amount} onSelect={this.onSelect}></Paginator>
            <Search columns={columns} data={data} onResult={this.setState.bind(this)}></Search>
            <Table config={config} data={paginated.data}></Table>
        </div>;
    },

    onSelect(page) {
        var pagination = this.state.pagination || {};

        pagination.page = page;

        this.setState({
            pagination: pagination
        });
    },
});

function paginate(o) {
    var data = o.data || [];
    var page = o.page || 0;
    var perPage = o.perPage;

    var start = page * perPage;

    return {
        amount: Math.ceil(data.length / perPage),
        data: data.slice(start, start + perPage)
    };
}

function noop() {}

module.exports = DemoTable;<commit_msg>Add a `per page` example<commit_after>'use strict';

var React = require('react');
var math = require('annomath');

var Table = require('../lib/table.jsx');
var Search = require('../lib/search.jsx');
var editors = require('../lib/editors.jsx');
var sortColumn = require('../lib/sort_column');

var generateData = require('./generate_data');


var Paginator = React.createClass({
    render() {
        var onSelect = this.props.onSelect || noop;
        var page = this.props.page;
        var pages = this.props.pages;

        return <ul className='pagination'>{
            math.range(pages).map((i) =>
                <li
                    key={'pagination-' + i}
                    onClick={onSelect.bind(null, i)}
                    className={i === page && 'selected'}>
                    <a href='#' onClick={this.preventDefault}>
                        {i + 1}
                    </a>
                </li>
            )
        }</ul>;
    },

    preventDefault(e) {
        e.preventDefault();
    },
});

var DemoTable = React.createClass({
    getInitialState() {
        var countries = {
            'de': 'Germany',
            'fi': 'Finland',
            'se': 'Sweden'
        };

        return {
            data: generateData({
                amount: 40,
                countries: Object.keys(countries)
            }),
            columns: [
                {
                    property: 'name',
                    header: 'Name',
                    editable: true,
                },
                {
                    property: 'position',
                    header: 'Position',
                },
                {
                    property: 'country',
                    header: 'Country',
                    formatter: (country) => countries[country],
                    editable: true,
                    editor: editors.dropdown(countries),
                },
                {
                    property: 'salary',
                    header: 'Salary',
                    editable: true,
                    formatter: (salary) => parseFloat(salary).toFixed(2),
                },
                {
                    property: 'active',
                    header: 'Active',
                    editable: true,
                    editor: editors.boolean(),
                    formatter: (active) => active && <span>&#10003;</span>,
                },
                {
                    cell: ((i) => {
                        var remove = () => {
                            // this could go through flux etc.
                            this.state.data.splice(i, 1);

                            this.setState({
                                data: this.state.data
                            });
                        };

                        return <span>
                            <span onClick={remove.bind(this)} style={{cursor: 'pointer'}}>&#10007;</span>
                        </span>;
                    }).bind(this),
                }
            ],
            pagination: {
                page: 0,
                perPage: 5
            }
        };
    },

    render() {
        var columns = this.state.columns || [];
        var data = this.state.data || [];

        var config = {
            columns: columns,
            events: {
                // you could hook these with flux etc.
                selectedHeader: sortColumn(columns, data, this.setState.bind(this)),
                edited: ((i, property, value) => {
                    data[i][property] = value;

                    this.setState({
                        data: data
                    });
                }).bind(this)
            }
        };

        var pagination = this.state.pagination || {};
        var paginated = paginate({
            data: data.filter((d) => !('_visible' in d) || d._visible),
            page: pagination.page,
            perPage: pagination.perPage,
        });

        return <div>
            <input type='text' defaultValue={pagination.perPage} onChange={this.onPerPage}></input>
            <Paginator page={pagination.page} pages={paginated.amount} onSelect={this.onSelect}></Paginator>
            <Search columns={columns} data={data} onResult={this.setState.bind(this)}></Search>
            <Table config={config} data={paginated.data}></Table>
        </div>;
    },

    onSelect(page) {
        var pagination = this.state.pagination || {};

        pagination.page = page;

        this.setState({
            pagination: pagination
        });
    },

    onPerPage(e) {
        var pagination = this.state.pagination || {};

        pagination.perPage = parseInt(event.target.value, 10);

        this.setState({
            pagination: pagination
        });
    },
});

function paginate(o) {
    var data = o.data || [];
    var page = o.page || 0;
    var perPage = o.perPage;

    var start = page * perPage;

    return {
        amount: Math.ceil(data.length / perPage),
        data: data.slice(start, start + perPage)
    };
}

function noop() {}

module.exports = DemoTable;
{'fraction_non_alphanumeric': 0.13291523366376695, 'fraction_numerical': 0.0038438195427877805, 'mean_word_length': 1.1568499127399652, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4584661', 'n_tokens_mistral': 2624, 'n_tokens_neox': 2448, 'n_words': 515}