lucid-ui/lib/components/Paginator/Paginator.js

A UI component library from AppNexus.

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import _isNil from "lodash/isNil";
import _partial from "lodash/partial";
import _map from "lodash/map";
import _isFunction from "lodash/isFunction";
import _isNumber from "lodash/isNumber";
import _isNaN from "lodash/isNaN";
import _parseInt from "lodash/parseInt";
import _noop from "lodash/noop";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import * as reducers from './Paginator.reducers';
import selectors from './Paginator.selectors';
import { SingleSelectDumb as SingleSelect } from '../SingleSelect/SingleSelect';
import TextField from '../TextField/TextField';
import { Button } from '../Button/Button';
import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon';
import { buildModernHybridComponent } from '../../util/state-management';
var cx = lucidClassNames.bind('&-Paginator');
var arrayOf = PropTypes.arrayOf,
    bool = PropTypes.bool,
    func = PropTypes.func,
    number = PropTypes.number,
    object = PropTypes.object,
    oneOfType = PropTypes.oneOfType,
    shape = PropTypes.shape,
    string = PropTypes.string;
var Option = SingleSelect.Option;
var defaultProps = {
  hasPageSizeSelector: false,
  isDisabled: false,
  objectLabel: 'Object',
  onPageSelect: _noop,
  selectedPageIndex: 0,
  selectedPageSizeIndex: 0,
  showTotalObjects: false,
  totalCount: null,
  totalPages: undefined,
  pageSizeOptions: [10, 50, 100],
  SingleSelect: _objectSpread(_objectSpread({}, SingleSelect.defaultProps), {}, {
    selectedIndex: 0
  }),
  TextField: TextField.defaultProps
};

var Paginator = /*#__PURE__*/function (_React$Component) {
  _inherits(Paginator, _React$Component);

  var _super = _createSuper(Paginator);

  function Paginator() {
    var _this;

    _classCallCheck(this, Paginator);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "handleTextFieldChange", function (pageNum, _ref) {
      var props = _ref.props,
          event = _ref.event;
      var _this$props = _this.props,
          onPageSelect = _this$props.onPageSelect,
          selectedPageIndex = _this$props.selectedPageIndex,
          totalPages = _this$props.totalPages;

      var parsedPageNum = _parseInt(pageNum);

      if (_isNaN(parsedPageNum)) {
        return onPageSelect(selectedPageIndex, totalPages, {
          props: props,
          event: event
        });
      }

      return onPageSelect(parsedPageNum - 1, totalPages, {
        props: props,
        event: event
      });
    });

    return _this;
  }

  _createClass(Paginator, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          className = _this$props2.className,
          hasPageSizeSelector = _this$props2.hasPageSizeSelector,
          isDisabled = _this$props2.isDisabled,
          objectLabel = _this$props2.objectLabel,
          objectLabelPlural = _this$props2.objectLabelPlural,
          onPageSelect = _this$props2.onPageSelect,
          onPageSizeSelect = _this$props2.onPageSizeSelect,
          pageSizeOptions = _this$props2.pageSizeOptions,
          selectedPageIndex = _this$props2.selectedPageIndex,
          selectedPageSizeIndex = _this$props2.selectedPageSizeIndex,
          showTotalObjects = _this$props2.showTotalObjects,
          totalPages = _this$props2.totalPages,
          totalCount = _this$props2.totalCount,
          style = _this$props2.style,
          singleSelectProps = _this$props2.SingleSelect,
          textFieldProps = _this$props2.TextField;
      return /*#__PURE__*/React.createElement("div", {
        style: style,
        className: cx('&', className)
      }, showTotalObjects && _isNumber(totalCount) && /*#__PURE__*/React.createElement("div", {
        className: cx('&-total-count')
      }, _isFunction(showTotalObjects) ? showTotalObjects(totalCount) : totalCount.toLocaleString(), ' ', totalCount === 1 ? objectLabel : objectLabelPlural || "".concat(objectLabel, "s")), hasPageSizeSelector ? /*#__PURE__*/React.createElement("div", {
        className: cx('&-page-size-container')
      }, /*#__PURE__*/React.createElement("span", {
        className: cx('&-rows-per-page-label')
      }, "Rows per page:"), /*#__PURE__*/React.createElement(SingleSelect, _extends({}, singleSelectProps, {
        hasReset: false,
        isInvisible: true,
        isSelectionHighlighted: false,
        isDisabled: isDisabled,
        selectedIndex: selectedPageSizeIndex,
        onSelect: onPageSizeSelect
      }), _map(pageSizeOptions, function (option) {
        return /*#__PURE__*/React.createElement(Option, {
          key: option
        }, option);
      }))) : null, /*#__PURE__*/React.createElement(Button, {
        onClick: _partial(onPageSelect, selectedPageIndex - 1, totalPages),
        isDisabled: isDisabled || selectedPageIndex === 0,
        kind: "invisible",
        hasOnlyIcon: true
      }, /*#__PURE__*/React.createElement(ArrowIcon, {
        direction: "left"
      })), /*#__PURE__*/React.createElement(TextField, _extends({
        lazyLevel: 100
      }, textFieldProps, {
        onBlur: this.handleTextFieldChange,
        onSubmit: this.handleTextFieldChange,
        isDisabled: isDisabled,
        value: selectedPageIndex + 1
      })), !_isNil(totalPages) && /*#__PURE__*/React.createElement("span", null, "of ", totalPages.toLocaleString()), /*#__PURE__*/React.createElement(Button, {
        kind: "invisible",
        onClick: _partial(onPageSelect, selectedPageIndex + 1, totalPages),
        isDisabled: isDisabled || selectedPageIndex === totalPages - 1,
        hasOnlyIcon: true
      }, /*#__PURE__*/React.createElement(ArrowIcon, {
        direction: "right"
      })));
    }
  }]);

  return Paginator;
}(React.Component);

_defineProperty(Paginator, "displayName", 'Paginator');

_defineProperty(Paginator, "peek", {
  description: "\t\n\t\t\tA paginator that has an optional page size selector.\t\n\t\t",
  categories: ['navigation'],
  madeFrom: ['ArrowIcon', 'TextField', 'Button', 'SingleSelect']
});

_defineProperty(Paginator, "reducers", reducers);

_defineProperty(Paginator, "selectors", selectors);

_defineProperty(Paginator, "defaultProps", defaultProps);

_defineProperty(Paginator, "propTypes", {
  className: string,
  style: object,
  isDisabled: bool,
  hasPageSizeSelector: bool,
  selectedPageIndex: number,
  selectedPageSizeIndex: number,
  SingleSelect: shape(SingleSelect.propTypes),
  showTotalObjects: oneOfType([bool, func]),
  objectLabel: string,
  objectLabelPlural: string,
  totalPages: number,
  totalCount: number,
  pageSizeOptions: arrayOf(number),
  TextField: shape(TextField.propTypes),
  onPageSelect: func,
  onPageSizeSelect: func
});

export default buildModernHybridComponent(Paginator, {
  reducers: reducers,
  selectors: selectors
});
export { Paginator as PaginatorDumb };