@confi/conflux-react-ui-test-package/esm/pagination/pagination.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useMemo } from 'react';
import PaginationPrevious from './pagination-previous';
import PaginationNext from './pagination-next';
import PaginationPages from './pagination-pages';
import { PaginationContext } from './pagination-context';
import useCurrentState from '../utils/use-current-state';
import { pickChild } from '../utils/collections';
var defaultProps = {
  size: 'medium',
  initialPage: 1,
  count: 1,
  limit: 7
};

var getPaginationSizes = function getPaginationSizes(size) {
  var sizes = {
    mini: {
      font: '.75rem',
      width: '1.25rem'
    },
    small: {
      font: '.75rem',
      width: '1.65rem'
    },
    medium: {
      font: '.875rem',
      width: '2rem'
    },
    large: {
      font: '1rem',
      width: '2.4rem'
    }
  };
  return sizes[size];
};

var Pagination = function Pagination(_ref) {
  var customPage = _ref.page,
      initialPage = _ref.initialPage,
      count = _ref.count,
      limit = _ref.limit,
      size = _ref.size,
      children = _ref.children,
      onChange = _ref.onChange;

  var _useCurrentState = useCurrentState(initialPage),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      page = _useCurrentState2[0],
      setPage = _useCurrentState2[1],
      pageRef = _useCurrentState2[2];

  var _pickChild = pickChild(children, PaginationPrevious),
      _pickChild2 = _slicedToArray(_pickChild, 2),
      prevChildren = _pickChild2[1];

  var _pickChild3 = pickChild(children, PaginationNext),
      _pickChild4 = _slicedToArray(_pickChild3, 2),
      nextChildren = _pickChild4[1];

  var _useMemo = useMemo(function () {
    var hasChildren = function hasChildren(c) {
      return React.Children.count(c) > 0;
    };

    var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
    var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
    return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
  }, [prevChildren, nextChildren]),
      _useMemo2 = _slicedToArray(_useMemo, 2),
      prevItem = _useMemo2[0],
      nextItem = _useMemo2[1];

  var _useMemo3 = useMemo(function () {
    return getPaginationSizes(size);
  }, [size]),
      font = _useMemo3.font,
      width = _useMemo3.width;

  var update = function update(type) {
    if (type === 'prev' && pageRef.current > 1) {
      setPage(function (last) {
        return last - 1;
      });
    }

    if (type === 'next' && pageRef.current < count) {
      setPage(function (last) {
        return last + 1;
      });
    }
  };

  var values = useMemo(function () {
    return {
      isFirst: page <= 1,
      isLast: page >= count,
      update: update
    };
  }, [page]);
  useEffect(function () {
    onChange && onChange(page);
  }, [page]);
  useEffect(function () {
    if (customPage !== undefined) {
      setPage(customPage);
    }
  }, [customPage]);
  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
    value: values
  }, /*#__PURE__*/React.createElement("nav", {
    className: _JSXStyle.dynamic([["4276671234", [font, width]]])
  }, prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
    count: count,
    current: page,
    limit: limit,
    setPage: setPage
  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4276671234",
    dynamic: [font, width]
  }, "nav.__jsx-style-dynamic-selector{margin:0;padding:0;font-variant:tabular-nums;font-feature-settings:'tnum';font-size:".concat(font, ";--pagination-size:").concat(width, ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
};

Pagination.defaultProps = defaultProps;
export default React.memo(Pagination);