+ Pager control, actually it is not defined at matereal design but de…

…finitely it is helpful to have.

the control is based on react-toolbox controls and corresponds to matereal design. It is highly customisable and it follows default style patterns of react-toolbox components. actually what differentiate the control from others similar that it has always const set of buttons and the set depends on two properties: number of total pages (latsPage) and number of visible pages at block. e.g.
[<][1][...][4][5][6][...][8][>] or [<][1][2][3][4][5][...][8][>] or [<][1][...][4][5][6][7][8][>] where block size is 3. it gives smooth user experience. A layouting is based on flex but easily can be rewritten using inline-block at custom theme.

example is added to specs.

components/identifiers.js

@@ -25,3 +25,4 @@ export const TABLE = 'RTTable';
 export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
 export const TIME_PICKER = 'RTTimePicker';
+export const PAGER = 'RTPager';

components/index.js

@@ -28,3 +28,4 @@ export Table from './table';
 export * from './tabs';
 export Tooltip from './tooltip';
 export TimePicker from './time_picker';
+export Pager from './pager';

components/pager/_config.scss

@@ -0,0 +1,3 @@
+@import "../button/config";
+
+$button-margin: 0rem .5rem 0rem 0rem !default;

components/pager/index.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+import ReactToolbox from "./index";
+
+export interface PagerTheme {
+  /**
+   * Used for the root element.
+   */
+  pager?: string;
+  /**
+   * Used for the active page.
+   */
+  active?: string;
+  /**
+   * Used for the next and previous page buttons.
+   */
+  leftRightArrowButton?: string;
+  /**
+   * Used for the next and previous range pages buttons.
+   */
+  leftRightRangeButton?: string;
+  /**
+   * Used for the regular page buttons.
+   */
+  pagesButton?: string;
+}
+
+interface PagerProps extends ReactToolbox.Props {
+  /**
+   *  Used for the previous button content.
+   */
+  prevButtonContent?: string;
+  /**
+   * Used for the left range button content
+   */
+  rangeLeftButtonContent?: string;
+  /**
+   * Used for the right range button content
+   */
+  rangeRightButtonContent?: string;
+  /**
+   * Used for the next button content
+   */
+  nextButtonContent?: string;
+  /**
+   * A Number with the currently selected page
+   */
+  currentPage?: number;
+  /**
+   * A Number of last page.
+   */
+  lastPage?: number;
+  /**
+   * A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.
+   */
+  visiblePagesBlockSize?: number;
+  /**
+   * Callback called when the page is changing.
+   */
+  onPageChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PagerTheme;
+  /**
+   * This class will be applied to the root elemt.
+   */
+  pagerClassName?: string;
+  /**
+   * Defining default style of next, previous buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  leftRightArrowButtonTypes?: object;
+  /**
+   * Defining default style of left, right range buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  leftRightRangeButtonTypes?: object;
+  /**
+   * Defining default style of regular page buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  pagesButtonTypes?: object;
+}
+
+export class Pager extends React.Component<PagerProps, {}> { }
+
+export default Pager;

components/pager/index.js

@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { PAGER } from '../identifiers.js';
+import { pagerFactory } from './pager.js';
+import { Button } from '../button';
+import theme from './theme.scss';
+
+const Pager = pagerFactory(Button);
+
+const ThemedPager = themr(PAGER, theme)(Pager);
+export default ThemedPager;
+export { ThemedPager as Pager };