@gssfed/vital-ui-kit-react/dist/Pagination/Pagination.js

Vital UI Kit for React!

var _templateObject = _taggedTemplateLiteral(['\n  font-size: 0;\n'], ['\n  font-size: 0;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  font-size: 0.875rem;\n'], ['\n  font-size: 0.875rem;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: middle;\n  font-size: 0.875rem;\n'], ['\n  display: inline-block;\n  vertical-align: middle;\n  font-size: 0.875rem;\n']);

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/**
 * 
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import * as React from 'react';
import styled from 'styled-components';

import { Button as ButtonBase } from '../Button';
import Icon from '../Icon';

var Root = styled.ul(_templateObject);

var Button = styled(ButtonBase)(_templateObject2);

var ListWrapper = styled.li(_templateObject3);

function Item(_ref) {
  var children = _ref.children,
      selected = _ref.selected,
      onChange = _ref.onChange,
      props = _objectWithoutProperties(_ref, ['children', 'selected', 'onChange']);

  return React.createElement(
    ListWrapper,
    props,
    React.createElement(
      Button,
      { subtle: true, selected: selected, onChange: onChange },
      children
    )
  );
}

Item.defaultProps = {
  selected: false
};

/**
 * @render react
 * @name Pagination
 * @description display pages
 * @example
 * <Pagination
 *  pageSize={5}
 *  current={3}
 *  onChange={() => {}}
 * />
 */

var Pagination = function Pagination(_ref2) {
  var pageSize = _ref2.pageSize,
      current = _ref2.current,
      onChange = _ref2.onChange;
  return React.createElement(
    Root,
    null,
    React.createElement(
      Item,
      null,
      'First'
    ),
    React.createElement(
      Item,
      null,
      React.createElement(Icon, {
        style: { marginRight: '5px' },
        name: 'chevron-left',
        size: '12'
      }),
      'Prev'
    ),
    [].concat(_toConsumableArray(Array(pageSize).keys())).map(function (size) {
      return React.createElement(
        Item,
        {
          selected: size + 1 === current,
          key: size,
          onClick: onChange
        },
        size + 1
      );
    }),
    React.createElement(
      Item,
      null,
      'Next',
      React.createElement(Icon, {
        style: { marginLeft: '5px' },
        name: 'chevron-right',
        size: '12'
      })
    ),
    React.createElement(
      Item,
      null,
      'Last'
    )
  );
};

export default Pagination;