@geezee/react-ui/esm/pagination/pagination-pageSize.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React from 'react';
import Select from '../select';
import useTheme from '../styles/use-theme';
import { getPageCount } from './utils';
import { usePaginationContext } from './pagination-context';
var defaultProps = {
  size: 'medium',
  total: 0
};

var PaginationNext = function PaginationNext(_ref) {
  var pageSizeOptions = _ref.pageSizeOptions,
      pageSize = _ref.pageSize,
      size = _ref.size,
      total = _ref.total,
      labelPageSizeBefore = _ref.labelPageSizeBefore,
      labelPageSizeAfter = _ref.labelPageSizeAfter;
  var theme = useTheme();

  var _usePaginationContext = usePaginationContext(),
      updatePage = _usePaginationContext.updatePage,
      updatePageSize = _usePaginationContext.updatePageSize,
      page = _usePaginationContext.page,
      simple = _usePaginationContext.simple;

  var changeHandler = function changeHandler(val) {
    var pageSize = Number(val);
    var newPageCount = getPageCount(total, pageSize);
    var newCurrent = page && page > newPageCount ? newPageCount : page;
    updatePageSize && updatePageSize(pageSize);
    updatePage && updatePage('click', newCurrent);
  };

  var getPageSizeOptions = function getPageSizeOptions() {
    if (pageSizeOptions.some(function (option) {
      return option.toString() === pageSize.toString();
    })) {
      return pageSizeOptions;
    }

    return pageSizeOptions.concat([pageSize.toString()]).sort(function (a, b) {
      var numberA = isNaN(Number(a)) ? 0 : Number(a);
      var numberB = isNaN(Number(b)) ? 0 : Number(b);
      return numberA - numberB;
    });
  };

  var mergedOptions = getPageSizeOptions();
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3938931777", [theme.palette.cNeutral6, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "pagination-pagesize"
  }, !simple && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3938931777", [theme.palette.cNeutral6, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "text before"
  }, labelPageSizeBefore), /*#__PURE__*/React.createElement(Select, {
    variant: "line",
    size: size,
    disableMatchWidth: true,
    onChange: changeHandler,
    defaultValue: pageSize.toString()
  }, mergedOptions === null || mergedOptions === void 0 ? void 0 : mergedOptions.map(function (pageSize) {
    return /*#__PURE__*/React.createElement(Select.Option, {
      value: pageSize,
      key: pageSize
    }, pageSize, ' ');
  })), !simple && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3938931777", [theme.palette.cNeutral6, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "text after"
  }, labelPageSizeAfter), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3938931777",
    dynamic: [theme.palette.cNeutral6, theme.layout.gapHalf, theme.layout.gapHalf]
  }, ".pagination-pagesize.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:inherit;}.pagination-pagesize.__jsx-style-dynamic-selector .text.__jsx-style-dynamic-selector{color:".concat(theme.palette.cNeutral6, ";font-weight:500;}.pagination-pagesize.__jsx-style-dynamic-selector .before.__jsx-style-dynamic-selector{margin-right:").concat(theme.layout.gapHalf, ";}.pagination-pagesize.__jsx-style-dynamic-selector .after.__jsx-style-dynamic-selector{margin-left:").concat(theme.layout.gapHalf, ";}")));
};

export default PaginationNext;