@geneui/components
Version:
The Gene UI components library designed for BI tools
262 lines (255 loc) • 9.06 kB
JavaScript
import React__default, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { a as conflictPropsLog, k as keyboardHandler } from '../index-a0e4e333.js';
import Button from '../Button/index.js';
import Divider from '../Divider/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import TextInput from '../ValidatableTextInput/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../Icon/index.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import '../hooks/useDeviceType.js';
import '../configs-00612ce0.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
import '../hooks/useMount.js';
import '../ExtendedInput/index.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../SuggestionList/index.js';
import '../hooks/useKeyDown.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../Scrollbar/index.js';
import '../callAfterDelay-7272faca.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .pagination-holder{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .pagination-holder .icon{cursor:pointer}[data-gene-ui-version=\"2.16.5\"] .pagination-holder .defaultCursor{cursor:default}[data-gene-ui-version=\"2.16.5\"] .pagination-holder .input-element{text-align:center}";
styleInject(css_248z);
const drawCount = 5;
const offset = 2;
const enterCode = 13;
const diff = drawCount - offset;
const numberRegExp = /^[1-9][0-9]*$/;
function Pagination(props) {
const {
count: propCount,
selected,
onChange,
errorText,
defaultSelected,
supportedKeyCodes,
autoFocus,
nextIconTooltipText,
previousIconTooltipText
} = props;
selected && defaultSelected && conflictPropsLog('Pagination', ['selected', 'defaultSelected']);
const [page, setPage] = useState(selected || defaultSelected || 1);
const [isValid, setIsValid] = useState(true);
const [inputValue, setInputValue] = useState('');
const current = selected || page;
const count = propCount === 0 ? current : propCount;
const isLeftIconDisabled = current === 1;
const isRightIconDisabled = current === count;
const canShowDots = count > drawCount;
const areLeftDotsVisible = canShowDots && current > diff;
const areRightDotsVisible = canShowDots && current + diff <= count;
const setSelected = useCallback(nextSelected => {
if (nextSelected) {
!selected && setPage(nextSelected);
onChange && onChange(nextSelected);
}
}, [selected, onChange]);
// button handlers
const onClick = useCallback(e => {
setSelected(Number(e.currentTarget.dataset.key));
setInputValue('');
setIsValid(true);
}, [setSelected]);
const validate = useCallback(value => {
const allowedDigitsCount = String(count).length;
const checkingValue = value.length > allowedDigitsCount ? value.substring(0, allowedDigitsCount) : value;
const number = Number(checkingValue);
if (isNaN(number)) return true;
return !number || number <= count && number >= 1;
}, [count]);
// input handlers
const onInputChange = useCallback(e => {
setIsValid(validate(e.target.value));
const {
value = ''
} = e.target;
if (!value || numberRegExp.test(value) && value.length <= String(count).length) {
setInputValue(value);
}
}, [count, validate]);
const onBlur = useCallback(e => {
if (isValid) {
setSelected(Number(e.target.value));
setInputValue('');
}
}, [isValid, setSelected]);
const onInputKeyPress = useCallback(e => {
if (isValid && keyboardHandler(e, supportedKeyCodes)) {
setSelected(Number(e.target.value));
setInputValue('');
}
}, [isValid, setSelected, supportedKeyCodes]);
// icon handlers
const onLeftClick = useCallback(e => {
if (current > 1) {
setSelected(current - 1);
setInputValue('');
setIsValid(true);
}
}, [current, setSelected]);
const onRightClick = useCallback(e => {
if (current < count) {
setSelected(current + 1);
setInputValue('');
setIsValid(true);
}
}, [count, current, setSelected]);
const leftButtons = [1];
const rightButtons = count > 1 ? [count] : [];
let centerButtons = [];
if (count > offset) {
if (count - offset > diff) {
const customPage = current < diff ? diff : current + diff > count ? count - offset : current;
centerButtons = [customPage - 1, customPage, customPage + 1];
} else {
for (let i = offset; i < count; i++) {
centerButtons.push(i);
}
}
}
const dotedButton = () => /*#__PURE__*/React__default.createElement(Button, {
flexibility: "content-size",
color: "default",
appearance: "minimal",
className: "pointer-events-none"
}, "...");
const Input = /*#__PURE__*/React__default.createElement(Tooltip, {
alwaysShow: !isValid,
title: isValid ? '' : errorText,
padding: 25
}, /*#__PURE__*/React__default.createElement(TextInput, {
min: 1,
forceAllowValidation: true,
autoFocus: autoFocus,
max: count,
type: "text",
onBlur: onBlur,
value: inputValue,
colorBorderOnError: true,
showErrorIcon: false,
showNumberIcon: false,
onChange: onInputChange,
flexibility: "content-size",
placeholder: "1-".concat(count),
isValid: isValid,
onKeyPress: onInputKeyPress,
showClickableTooltipOnError: false,
className: classnames('number-input')
}));
return /*#__PURE__*/React__default.createElement("div", {
className: "pagination-holder"
}, /*#__PURE__*/React__default.createElement(Tooltip, {
title: previousIconTooltipText
}, /*#__PURE__*/React__default.createElement(Button, {
flexibility: "content-size",
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-left-nav",
onClick: onLeftClick,
disabled: isLeftIconDisabled
})), /*#__PURE__*/React__default.createElement(Divider, {
type: "vertical"
}), leftButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
key: number,
flexibility: "content-size",
color: "default",
appearance: "minimal",
onClick: number !== current ? onClick : undefined,
"data-key": number,
className: classnames(number === current && 'defaultCursor'),
active: number === current
}, number)), areLeftDotsVisible ? areRightDotsVisible ? dotedButton() : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dotedButton(), Input, dotedButton()) : null, centerButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
key: number,
flexibility: "content-size",
color: "default",
appearance: "minimal",
onClick: number !== current ? onClick : undefined,
"data-key": number,
className: classnames(number === current && 'defaultCursor'),
active: number === current
}, number)), areRightDotsVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dotedButton(), Input, dotedButton()), rightButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
key: number,
flexibility: "content-size",
color: "default",
appearance: "minimal",
onClick: number !== current ? onClick : undefined,
"data-key": number,
className: classnames(number === current && 'defaultCursor'),
active: number === current
}, number)), /*#__PURE__*/React__default.createElement(Divider, {
type: "vertical"
}), /*#__PURE__*/React__default.createElement(Tooltip, {
title: nextIconTooltipText
}, /*#__PURE__*/React__default.createElement(Button, {
flexibility: "content-size",
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-right-nav",
onClick: onRightClick,
disabled: isRightIconDisabled
})));
}
Pagination.propTypes = {
/**
* Fires event when user changes the page
* (page: Number) => void
*/
onChange: PropTypes.func,
/**
* Initially selected page
*/
selected: PropTypes.number,
/**
* Custom text if element will indicate error
*/
errorText: PropTypes.string,
/**
* Turn on/off pagination's autofocus
*/
autoFocus: PropTypes.bool,
/**
* Initially selected page
*/
defaultSelected: PropTypes.number,
/**
* Total pages count
*/
count: PropTypes.number.isRequired,
/**
* Text for next icon tooltip.
*/
nextIconTooltipText: PropTypes.string,
/**
* Text for previous icon tooltip.
*/
previousIconTooltipText: PropTypes.string,
// TODO: bad naming
supportedKeyCodes: PropTypes.arrayOf(PropTypes.number)
};
Pagination.defaultProps = {
count: 1,
errorText: 'Page does not exist',
supportedKeyCodes: [enterCode],
nextIconTooltipText: 'Next page',
previousIconTooltipText: 'Previous page'
};
export { Pagination as default };