Pagination Component

[sebastiansandqvist]

Overview

This PR adds a Pagination component. Usage is as follows:

<Pagination
  length={this.state.pageCount}
  currentIndex={this.state.currentPage}
  onChange={(currentPage) => this.setState({ currentPage })}
/>

In context, that would be something like this:

import React, { Component } from 'react';
import { Pagination } from '@vhx/quartz-react';

class MyPage extends Component {
  constructor() {
    super();
    this.state = {
      currentPage: 0,
      pageCount: 0,
    };
  }
  componentWillMount() {
    // This would make a request to get the total number of rows or pages
  }
  fetchPage(nextPage) {
    // This function would also make an ajax request to get the new page's contents
    this.setState({ currentPage: nextPage });
  }
  render() {
    return (
      <div>
        <table>
          { /* video/collection rows would go here... */ }
        </table>
        <Pagination
          length={this.state.pageCount}
          currentIndex={this.state.currentPage}
          onChange={this.fetchPage}
        />
      </div>
    );
  }
}

The most important thing to understand here is the component's onChange handler. Whenever "Next", "Previous", or any of the numbers are clicked, that callback will be called with the index of the new active page.

Preview

[erikmoldovan]

Whoops, meant to comment, not block