@talend/react-components/lib/List/Toolbar/Pagination/Pagination.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _utils = require("@talend/utils");
var _Icon = _interopRequireDefault(require("../../../Icon"));
var _PaginationModule = _interopRequireDefault(require("./Pagination.module.scss"));
var _translate = _interopRequireDefault(require("../../../translate"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const FIRST = 'first';
const PREV = 'prev';
const NEXT = 'next';
const LAST = 'last';
function getItemsPerPageTitle(option) {
  if (option > 0) {
    return option;
  }
  return 'All';
}
function getMenuItem(option, index) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.MenuItem, {
    eventKey: option,
    children: getItemsPerPageTitle(option)
  }, index);
}
function Pagination({
  id,
  startIndex,
  itemsPerPage,
  totalResults,
  onChange,
  t,
  ...opts
}) {
  // eslint-disable-next-line no-console
  console.warn('Warning: Pagination is deprecated and will be removed in the next major version.');
  const {
    itemsPerPageOptions,
    paginationIconProps = {}
  } = opts;
  const {
    first = {
      name: 'talend-chevron-end'
    },
    prev = {
      name: 'talend-chevron-left'
    },
    next = {
      name: 'talend-chevron-left',
      transform: 'rotate-180'
    },
    last = {
      name: 'talend-chevron-end',
      transform: 'rotate-180'
    }
  } = paginationIconProps;
  const currentPage = Math.ceil(startIndex / itemsPerPage);
  const pagesLength = Math.ceil(totalResults / itemsPerPage);
  const isNavigationShown = itemsPerPage > 0 && pagesLength > 1;
  function onChangeItemsPerPage(value) {
    return onChange(1, value);
  }
  function changePageTo(type) {
    let from;
    switch (type) {
      case FIRST:
        {
          from = 1;
          break;
        }
      case PREV:
        {
          from = startIndex - itemsPerPage;
          break;
        }
      case NEXT:
        {
          from = startIndex + itemsPerPage;
          break;
        }
      case LAST:
        {
          from = (pagesLength - 1) * itemsPerPage + 1;
          break;
        }
      default:
        return;
    }
    onChange(from, itemsPerPage);
  }
  function getNavigationItems() {
    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.NavItem, {
      eventKey: FIRST,
      id: id && `${id}-nav-to-first`,
      className: "btn-link",
      disabled: startIndex <= 1,
      "aria-label": t('LIST_PAGINATION_GOTO_FIRST_PAGE', {
        defaultValue: 'Go to first page.'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        ...first
      })
    }, FIRST), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.NavItem, {
      eventKey: PREV,
      id: id && `${id}-nav-to-prev`,
      className: "btn-link",
      disabled: startIndex <= 1,
      "aria-label": t('LIST_PAGINATION_GOTO_PREVIOUS_PAGE', {
        defaultValue: 'Go to previous page. Current page: {{currentPage}}.',
        currentPage
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        ...prev
      })
    }, PREV), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
      className: _PaginationModule.default['page-index'],
      children: [currentPage, "/", pagesLength]
    }, "page-index"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.NavItem, {
      eventKey: NEXT,
      id: id && `${id}-nav-to-next`,
      className: "btn-link",
      disabled: startIndex + itemsPerPage > totalResults,
      "aria-label": t('LIST_PAGINATION_GOTO_NEXT_PAGE', {
        defaultValue: 'Go to next page. Current page: {{currentPage}}.',
        currentPage
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        ...next
      })
    }, NEXT), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.NavItem, {
      eventKey: LAST,
      id: id && `${id}-nav-to-last`,
      className: "btn-link",
      disabled: startIndex + itemsPerPage > totalResults,
      "aria-label": t('LIST_PAGINATION_GOTO_LAST_PAGE', {
        defaultValue: 'Go to last page.'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        ...last
      })
    }, LAST)];
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav, {
    className: _PaginationModule.default['tc-pagination'],
    onSelect: selectedKey => changePageTo(selectedKey),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.NavDropdown, {
      id: id ? `${id}-size` : (0, _utils.randomUUID)(),
      title: getItemsPerPageTitle(itemsPerPage),
      onSelect: onChangeItemsPerPage,
      children: itemsPerPageOptions.map((option, index) => getMenuItem(option, index))
    }), isNavigationShown && getNavigationItems()]
  });
}
Pagination.propTypes = {
  id: _propTypes.default.string,
  startIndex: _propTypes.default.number,
  itemsPerPage: _propTypes.default.number,
  totalResults: _propTypes.default.number.isRequired,
  itemsPerPageOptions: _propTypes.default.arrayOf(_propTypes.default.number),
  onChange: _propTypes.default.func.isRequired,
  t: _propTypes.default.func
};
Pagination.defaultProps = {
  itemsPerPage: 5,
  startIndex: 1,
  itemsPerPageOptions: [5, 10, 20, 50],
  t: (0, _translate.default)()
};
var _default = exports.default = Pagination;
//# sourceMappingURL=Pagination.component.js.map