@geezee/react-ui
Version:
Modern and minimalist React UI library.
214 lines (195 loc) • 8.38 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo, forwardRef, useImperativeHandle } from 'react';
import { PaginationContext } from './pagination-context';
import useMergedState from '../utils/use-merged-state';
import usePaginationHandle from './use-pagination-handle';
/**
* styles
*/
import { getSizes } from './styles';
import ChevronLeft from '@zeit-ui/react-icons/chevronLeft';
import ChevronRight from '@zeit-ui/react-icons/chevronRight';
import useTheme from '../styles/use-theme';
/**
* utils
*/
import { getPageCount } from './utils';
import { pickChild } from '../utils/collections';
/**
* sub component
*/
import PaginationPrevious from './pagination-previous';
import PaginationNext from './pagination-next';
import PaginationPages from './pagination-pages';
import PaginationPageSize from './pagination-pageSize';
import PaginationQuickJumper from './pagination-quickjumper';
import PaginationItem from './pagination-item';
var defaultProps = {
total: 0,
defaultPage: 1,
variant: 'line',
limit: 7,
size: 'medium',
defaultPageSize: 10,
pageSizeOptions: ['10', '20', '50', '100'],
labelPageSizeBefore: 'SHOW',
labelPageSizeAfter: 'RECORDS',
labelJumperBefore: 'GO TO',
labelJumperAfter: 'PAGE',
showQuickJumper: false,
showPageSizeChanger: false,
simple: false,
className: ''
};
var Pagination = forwardRef(function (_ref, ref) {
var customPage = _ref.page,
defaultPage = _ref.defaultPage,
total = _ref.total,
limit = _ref.limit,
size = _ref.size,
children = _ref.children,
defaultPageSize = _ref.defaultPageSize,
customPageSize = _ref.pageSize,
variant = _ref.variant,
pageSizeOptions = _ref.pageSizeOptions,
labelPageSizeBefore = _ref.labelPageSizeBefore,
labelPageSizeAfter = _ref.labelPageSizeAfter,
labelJumperBefore = _ref.labelJumperBefore,
labelJumperAfter = _ref.labelJumperAfter,
showQuickJumper = _ref.showQuickJumper,
showPageSizeChanger = _ref.showPageSizeChanger,
simple = _ref.simple,
className = _ref.className,
onPageSizeChange = _ref.onPageSizeChange,
onPageChange = _ref.onPageChange;
var isSolid = variant === 'solid';
var theme = useTheme();
var customSize = simple ? 'small' : size;
var _useMergedState = useMergedState(defaultPage, {
value: customPage,
onChange: function onChange(page) {
return onPageChange && onPageChange(page, pageSize);
}
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
page = _useMergedState2[0],
_setPage = _useMergedState2[1];
var _useMergedState3 = useMergedState(defaultPageSize, {
value: customPageSize,
onChange: function onChange(pageSize) {
return onPageSizeChange && onPageSizeChange(page, pageSize);
}
}),
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
pageSize = _useMergedState4[0],
_setPageSize = _useMergedState4[1];
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 pageCount = useMemo(function () {
return getPageCount(total, pageSize);
}, [total, pageSize]);
var updatePage = function updatePage(type, val) {
var current = 0;
if (type === 'prev' && page > 1) {
current = page - 1;
}
if (type === 'next' && page < pageCount) {
current = page + 1;
}
if (type === 'click') {
current = val;
}
_setPage(current);
};
var updatePageSize = function updatePageSize(val) {
_setPageSize(val);
};
useImperativeHandle(ref, function () {
return {
setPage: function setPage(value) {
_setPage(value);
},
getPage: function getPage() {
return page;
},
setPageSize: function setPageSize(value) {
_setPageSize(value);
},
getPageSize: function getPageSize() {
return pageSize;
}
};
});
var _useMemo = useMemo(function () {
var hasChildren = function hasChildren(c) {
return React.Children.count(c) > 0;
};
var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, /*#__PURE__*/React.createElement(ChevronLeft, {
color: theme.palette.cNeutral7
}));
var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, /*#__PURE__*/React.createElement(ChevronRight, {
color: theme.palette.cNeutral7
}));
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 getSizes(customSize);
}, [customSize]),
font = _useMemo3.font,
width = _useMemo3.width;
var values = useMemo(function () {
return {
isFirst: page <= 1,
isLast: page >= pageCount,
updatePage: updatePage,
updatePageSize: updatePageSize,
variant: variant,
page: page,
pageSize: pageSize,
simple: simple
};
}, [page, pageSize, updatePage, updatePageSize, variant, simple]);
return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
value: values
}, /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["2539736938", [font, showPageSizeChanger, width]]]) + " " + "pagination ".concat(className, " ").concat(isSolid ? 'solid' : 'line')
}, showPageSizeChanger && /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["2539736938", [font, showPageSizeChanger, width]]]) + " " + "left"
}, /*#__PURE__*/React.createElement(PaginationPageSize, {
size: customSize,
pageSizeOptions: pageSizeOptions,
pageSize: pageSize,
total: total,
labelPageSizeBefore: labelPageSizeBefore,
labelPageSizeAfter: labelPageSizeAfter
})), /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["2539736938", [font, showPageSizeChanger, width]]]) + " " + "right"
}, /*#__PURE__*/React.createElement("section", {
className: _JSXStyle.dynamic([["2539736938", [font, showPageSizeChanger, width]]])
}, prevItem, simple ? /*#__PURE__*/React.createElement(PaginationItem, {
key: "pagination-item-".concat(page),
active: true
}, page) : /*#__PURE__*/React.createElement(PaginationPages, {
count: pageCount,
limit: limit
}), nextItem), showQuickJumper && /*#__PURE__*/React.createElement(PaginationQuickJumper, {
count: pageCount,
size: customSize,
labelJumperBefore: labelJumperBefore,
labelJumperAfter: labelJumperAfter
}))), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "2539736938",
dynamic: [font, showPageSizeChanger, width]
}, ".pagination.__jsx-style-dynamic-selector{font-size:".concat(font, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:-0.3571rem 0 0 0;}.pagination.__jsx-style-dynamic-selector>*.__jsx-style-dynamic-selector{margin-top:0.3571rem;}.pagination.__jsx-style-dynamic-selector .left.__jsx-style-dynamic-selector{display:").concat(showPageSizeChanger, "?'block':'none';}.pagination.__jsx-style-dynamic-selector .right.__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;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}section.__jsx-style-dynamic-selector{margin:0;padding:0;font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:").concat(width, ";}section.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
});
Pagination.defaultProps = defaultProps;
export default Pagination;
export { usePaginationHandle };