Merge pull request #242 from dabapps/pagination

Pagination

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/less/index.less

@@ -24,6 +24,7 @@
 @import 'spaced-group.less';
 @import 'speech-bubble.less';
 @import 'code-block.less';
+@import 'pagination.less';
 @import 'highlight.less';
 // NOTE: These must remain after the other imports
 @import 'float.less';

src/less/pagination.less

@@ -0,0 +1,27 @@
+
+.pagination {
+
+    .button {
+        color: @pagination-button-color;
+        background-color: @pagination-button-background;
+    }
+
+    .selected {
+        color: @pagination-selected-color;
+        background-color: @pagination-selected-background;
+    }
+
+    .next,
+    .prev {
+        color: @pagination-indicator-color;
+        background-color: @pagination-indicator-background;
+    }
+
+    .dots {
+        display: inline-block;
+        height: auto;
+        padding: @padding-small @padding-base;
+        text-decoration: none;
+    }
+
+}

src/less/variables.less

@@ -184,6 +184,13 @@
 @checkbox-icon-border: 2px solid @checkbox-icon-background;
 @checkbox-shadow: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.1);
 
+@pagination-button-color: @grey-dark;
+@pagination-button-background: @grey-lighter;
+@pagination-selected-color: @white;
+@pagination-selected-background: @primary;
+@pagination-indicator-color: @grey-dark;
+@pagination-indicator-background: @grey-lighter;
+
 /* @end Component styles */
 
 /* @group Shadows */

src/ts/components/pagination/pagination-display.tsx

@@ -0,0 +1,62 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+import { PureComponent } from 'react';
+import { ComponentProps } from '../../types';
+
+export interface PaginationDisplayProps extends ComponentProps {
+  /**
+   * className
+   */
+  className?: string;
+  /**
+   * items count per page
+   */
+  pageSize: number;
+  /**
+   * current page number (1 indexed)
+   */
+  currentPageNumber: number;
+  /**
+   * total number of items to display
+   */
+  itemCount: number;
+}
+
+export class PaginationDisplay extends PureComponent<
+  PaginationDisplayProps,
+  {}
+> {
+  public render() {
+    const {
+      className,
+      itemCount,
+      pageSize,
+      currentPageNumber,
+      ...remainingProps
+    } = this.props;
+
+    return (
+      <p
+        {...remainingProps}
+        className={classNames('pagination-display', className)}
+      >
+        Showing {this.showingLowerCount()}-{this.showingUpperCount()} of{' '}
+        {itemCount}
+      </p>
+    );
+  }
+
+  private showingLowerCount = () => {
+    const { currentPageNumber, pageSize } = this.props;
+    return (currentPageNumber - 1) * pageSize || 1;
+  };
+
+  private showingUpperCount = () => {
+    const { pageSize, currentPageNumber, itemCount } = this.props;
+    return pageSize * currentPageNumber > itemCount
+      ? itemCount
+      : pageSize * currentPageNumber;
+  };
+}
+
+export default PaginationDisplay;

src/ts/components/pagination/pagination.examples.md

@@ -0,0 +1,61 @@
+#### Pagination example:
+
+```js
+class PaginationExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      page: 1,
+    };
+
+    this.changePage = this.changePage.bind(this);
+  }
+
+  changePage(value) {
+    this.setState({ page: value });
+  }
+
+  render() {
+    const ITEM_COUNT = 22;
+    const PAGE_SIZE = 3;
+    const { page } = this.state;
+
+    return (
+      <div>
+        <Row>
+          <Column xs={4}>
+            <PaginationDisplay
+              pageSize={PAGE_SIZE}
+              currentPageNumber={page}
+              itemCount={ITEM_COUNT}
+            />
+          </Column>
+          <Column xs={8}>
+            <Pagination
+              className="float-right margin-top-base"
+              pageSize={PAGE_SIZE}
+              changePage={this.changePage}
+              currentPageNumber={page}
+              itemCount={ITEM_COUNT}
+            />
+          </Column>
+        </Row>
+      </div>
+    );
+  }
+}
+
+<PaginationExample />;
+```
+
+#### Less variables
+
+```less
+@pagination-button-color: @grey-dark;
+@pagination-button-background: @grey-lighter;
+@pagination-selected-color: @white;
+@pagination-selected-background: @primary;
+@pagination-indicator-color: @grey-dark;
+@pagination-indicator-background: @grey-lighter;
+```