@razorpay/blade
Version:
The Design System that powers Razorpay
471 lines (461 loc) • 20.3 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { useMemo, useState, useCallback } from 'react';
import styled from 'styled-components';
import { pagination } from './tokens.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Box/BaseBox/index.js';
import '../Icons/index.js';
import '../Dropdown/index.js';
import '../Input/DropdownInputTriggers/index.js';
import '../ActionList/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import '../Button/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../BladeProvider/index.js';
import '../../utils/getFocusRingStyles/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../../utils/metaAttribute/index.js';
import { useControllableState } from '../../utils/useControllable.js';
import '../Box/styledProps/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
import useTheme from '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { Text } from '../Typography/Text/Text.js';
import { Dropdown } from '../Dropdown/Dropdown.js';
import { SelectInput } from '../Input/DropdownInputTriggers/SelectInput.js';
import { DropdownOverlay } from '../Dropdown/DropdownOverlay.web.js';
import { ActionList } from '../ActionList/ActionList.js';
import { ActionListItem } from '../ActionList/ActionListItem.js';
import Button from '../Button/Button/Button.js';
import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import ChevronsLeftIcon from '../Icons/ChevronsLeftIcon/ChevronsLeftIcon.js';
import MoreHorizontalIcon from '../Icons/MoreHorizontalIcon/MoreHorizontalIcon.js';
import ChevronsRightIcon from '../Icons/ChevronsRightIcon/ChevronsRightIcon.js';
import ChevronRightIcon from '../Icons/ChevronRightIcon/ChevronRightIcon.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["totalPages", "selectedPage", "defaultSelectedPage", "onSelectedPageChange", "defaultPageSize", "pageSize", "pageSizeLabel", "onPageSizeChange", "showPageSizePicker", "showPageNumberSelector", "showLabel", "label", "isDisabled"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var pageSizeOptions = [10, 25, 50];
var PageSelectionButton = /*#__PURE__*/styled.button.attrs(function () {
return _objectSpread({}, metaAttribute({
name: MetaConstants.TablePageSelectionButton
}));
}).withConfig({
displayName: "Paginationweb__PageSelectionButton",
componentId: "m9qfda-0"
})(function (_ref) {
var theme = _ref.theme,
isSelected = _ref.isSelected,
isDisabled = _ref.isDisabled;
return {
backgroundColor: isSelected ? getIn(theme.colors, pagination.pageSelectionButton.backgroundColorSelected) : 'transparent',
border: 'none',
cursor: isDisabled ? 'not-allowed' : 'pointer',
height: makeSize(pagination.pageSelectionButton.height),
width: makeSize(pagination.pageSelectionButton.width),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: getIn(theme.border.radius, pagination.pageSelectionButton.borderRadius),
opacity: isDisabled ? 0.5 : 1,
'&:hover': {
backgroundColor: isDisabled ? 'transparent' : isSelected ? getIn(theme.colors, pagination.pageSelectionButton.backgroundColorSelectedHover) : getIn(theme.colors, pagination.pageSelectionButton.backgroundColorHover)
},
'&:focus-visible': _objectSpread(_objectSpread({
backgroundColor: isDisabled ? 'transparent' : isSelected ? getIn(theme.colors, pagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, pagination.pageSelectionButton.backgroundColorActive)
}, getFocusRingStyles({
theme: theme
})), {}, {
outline: 'none',
'&:focus-visible': getFocusRingStyles({
theme: theme
})
}),
'&:active': {
backgroundColor: isDisabled ? 'transparent' : isSelected ? getIn(theme.colors, pagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, pagination.pageSelectionButton.backgroundColorActive)
}
};
});
var getPaginationButtons = function getPaginationButtons(_ref2) {
var currentSelection = _ref2.currentSelection,
totalPages = _ref2.totalPages;
var halfRange = 2;
var minMiddleItems = 5;
// return if totalPages is less than minMiddleItems
if (totalPages <= minMiddleItems) {
return {
middleItems: Array.from({
length: totalPages - 2
}, function (_, index) {
return index + 2;
}),
showStartEllipsis: false,
showEndEllipsis: false,
firstItem: 1,
lastItem: totalPages
};
}
var start = Math.max(1, currentSelection - halfRange);
var end = Math.min(totalPages, start + 2 * halfRange);
// Ensure at least minMiddleItems items in middleItems
while (end - start + 1 < minMiddleItems && (start > 1 || end < totalPages)) {
if (start > 1) {
start--;
}
if (end < totalPages) {
end++;
}
}
var showStartEllipsis = false;
var showEndEllipsis = false;
var paginationButtons = [];
for (var i = start; i <= end; i++) {
paginationButtons.push(i);
}
// if paginationButtons contains 1, remove it
if (paginationButtons.includes(1)) {
paginationButtons.shift();
// add an extra item at the end if length of total pages is greater than minMiddleItems+1
if (totalPages > minMiddleItems + 1) paginationButtons.push(end + 1);
}
// if paginationButtons contains totalPages, remove it
if (paginationButtons.includes(totalPages)) {
paginationButtons.pop();
// add an extra item at the beginning if length of total pages is greater than minMiddleItems+1
if (totalPages > minMiddleItems + 1) paginationButtons.unshift(start - 1);
}
if (paginationButtons[0] > 2) {
showStartEllipsis = true;
}
if (paginationButtons[paginationButtons.length - 1] + 1 < totalPages) {
showEndEllipsis = true;
}
return {
middleItems: paginationButtons,
showStartEllipsis: showStartEllipsis,
showEndEllipsis: showEndEllipsis,
firstItem: 1,
lastItem: totalPages
};
};
var _Pagination = function _Pagination(_ref3) {
var controlledTotalPages = _ref3.totalPages,
controlledSelectedPage = _ref3.selectedPage,
_ref3$defaultSelected = _ref3.defaultSelectedPage,
defaultSelectedPage = _ref3$defaultSelected === void 0 ? 1 : _ref3$defaultSelected,
onSelectedPageChange = _ref3.onSelectedPageChange,
_ref3$defaultPageSize = _ref3.defaultPageSize,
defaultPageSize = _ref3$defaultPageSize === void 0 ? pagination.defaultPageSize : _ref3$defaultPageSize,
controlledPageSize = _ref3.pageSize,
_ref3$pageSizeLabel = _ref3.pageSizeLabel,
pageSizeLabel = _ref3$pageSizeLabel === void 0 ? 'items / page' : _ref3$pageSizeLabel,
onPageSizeChange = _ref3.onPageSizeChange,
_ref3$showPageSizePic = _ref3.showPageSizePicker,
showPageSizePicker = _ref3$showPageSizePic === void 0 ? false : _ref3$showPageSizePic,
_ref3$showPageNumberS = _ref3.showPageNumberSelector,
showPageNumberSelector = _ref3$showPageNumberS === void 0 ? false : _ref3$showPageNumberS,
_ref3$showLabel = _ref3.showLabel,
showLabel = _ref3$showLabel === void 0 ? false : _ref3$showLabel,
label = _ref3.label,
_ref3$isDisabled = _ref3.isDisabled,
isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
rest = _objectWithoutProperties(_ref3, _excluded);
// Convert 1-based external page to 0-based internal page
var controlledInternalPage = useMemo(function () {
if (isUndefined(controlledSelectedPage)) {
return undefined;
}
return controlledSelectedPage - 1;
}, [controlledSelectedPage]);
var defaultInternalPage = useMemo(function () {
return defaultSelectedPage - 1;
}, [defaultSelectedPage]);
var _useControllableState = useControllableState({
defaultValue: defaultInternalPage,
value: controlledInternalPage,
onChange: function onChange(page) {
// Convert 0-based internal page back to 1-based external page
onSelectedPageChange === null || onSelectedPageChange === void 0 || onSelectedPageChange({
page: page + 1
});
}
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
internalPage = _useControllableState2[0],
setInternalPage = _useControllableState2[1];
var _useControllableState3 = useControllableState({
defaultValue: defaultPageSize,
value: controlledPageSize,
onChange: function onChange(pageSize) {
onPageSizeChange === null || onPageSizeChange === void 0 || onPageSizeChange({
pageSize: pageSize
});
setInternalPage(function () {
return defaultInternalPage;
});
}
}),
_useControllableState4 = _slicedToArray(_useControllableState3, 2),
internalPageSize = _useControllableState4[0],
setInternalPageSize = _useControllableState4[1];
// Calculate totalPages
var totalPages = useMemo(function () {
if (!isUndefined(controlledTotalPages)) {
return controlledTotalPages;
}
return 1;
}, [controlledTotalPages]);
var _useState = useState(undefined),
_useState2 = _slicedToArray(_useState, 2),
currentEllipseHover = _useState2[0],
setCurrentEllipseHover = _useState2[1];
// Generate default label
var defaultLabel = label ? label : "Showing ".concat(internalPage * internalPageSize + 1, "-").concat((internalPage + 1) * internalPageSize, " items");
var _useTheme = useTheme(),
platform = _useTheme.platform;
var onMobile = platform === 'onMobile';
var handlePageChange = useCallback(function (page) {
if (isDisabled) return;
// page is 0-based internally
var pageToJumpTo = page;
if (pageToJumpTo < 0) {
pageToJumpTo = 0;
} else if (pageToJumpTo > totalPages - 1) {
pageToJumpTo = totalPages - 1;
}
setInternalPage(function () {
return pageToJumpTo;
});
}, [isDisabled, setInternalPage, totalPages]);
var handlePageSizeChange = useCallback(function (pageSize) {
if (isDisabled) return;
setInternalPageSize(function () {
return pageSize;
});
}, [isDisabled, setInternalPageSize]);
var shouldDisableNextPage = function shouldDisableNextPage() {
return internalPage >= totalPages - 1 || isDisabled;
};
var shouldDisablePreviousPage = function shouldDisablePreviousPage() {
return internalPage <= 0 || isDisabled;
};
var paginationButtons = getPaginationButtons({
currentSelection: internalPage + 1,
totalPages: totalPages
});
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
display: "flex",
flexDirection: "row",
backgroundColor: "transparent",
padding: pagination.padding
}, getStyledProps(rest)), makeAnalyticsAttribute(rest)), metaAttribute({
name: MetaConstants.Pagination,
testID: rest.testID
})), {}, {
children: [showLabel && !onMobile && /*#__PURE__*/jsx(BaseBox, {
display: "flex",
justifyContent: "center",
alignItems: "center",
children: /*#__PURE__*/jsx(Text, {
size: "small",
weight: "regular",
children: defaultLabel
})
}), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flex: 1,
gap: "spacing.3",
justifyContent: "flex-end",
alignItems: "center",
children: [showPageSizePicker && !onMobile && /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
children: [/*#__PURE__*/jsxs(Dropdown, {
selectionType: "single",
children: [/*#__PURE__*/jsx(SelectInput, {
accessibilityLabel: "Select items per page",
name: "page-size",
label: "",
labelPosition: "inside-input",
placeholder: "",
onChange: function onChange(_ref4) {
var values = _ref4.values;
handlePageSizeChange(Number(values[0]));
},
value: internalPageSize.toString(),
isDisabled: isDisabled
}), /*#__PURE__*/jsx(DropdownOverlay, {
children: /*#__PURE__*/jsx(ActionList, {
children: pageSizeOptions.map(function (item, index) {
return /*#__PURE__*/jsx(ActionListItem, {
title: item.toString(),
value: item.toString()
}, index);
})
})
})]
}), /*#__PURE__*/jsx(BaseBox, {
"aria-hidden": true,
paddingLeft: "spacing.3",
paddingRight: "spacing.3",
children: /*#__PURE__*/jsxs(Text, {
size: "small",
weight: "regular",
children: [' ', pageSizeLabel, ' ']
})
})]
}), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
gap: "spacing.2",
flex: onMobile ? 1 : undefined,
alignItems: "center",
children: [/*#__PURE__*/jsx(Button, {
icon: ChevronLeftIcon,
accessibilityLabel: "Previous Page",
variant: "tertiary",
onClick: function onClick() {
handlePageChange(internalPage - 1);
},
isDisabled: shouldDisablePreviousPage()
}), onMobile && /*#__PURE__*/jsx(BaseBox, {
flex: 1,
alignItems: "center",
justifyContent: "center",
children: /*#__PURE__*/jsx(Text, {
textAlign: "center",
size: "small",
weight: "regular",
children: "Showing ".concat(internalPage + 1, " of ").concat(totalPages, " pages")
})
}), totalPages > 1 && showPageNumberSelector && !onMobile && /*#__PURE__*/jsxs(BaseBox, {
gap: "spacing.1",
display: "flex",
flexDirection: "row",
children: [/*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(paginationButtons.firstItem - 1);
},
isSelected: internalPage === paginationButtons.firstItem - 1,
isDisabled: isDisabled
}, makeAccessible({
label: "Page ".concat(paginationButtons.firstItem)
})), {}, {
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: internalPage === paginationButtons.firstItem - 1 ? pagination.pageSelectionButton.textColorSelected : pagination.pageSelectionButton.textColor,
children: paginationButtons.firstItem
})
})), paginationButtons.showStartEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(internalPage - 5);
},
onMouseOver: function onMouseOver() {
return setCurrentEllipseHover('start');
},
onMouseLeave: function onMouseLeave() {
return setCurrentEllipseHover(undefined);
},
onFocus: function onFocus() {
return setCurrentEllipseHover('start');
},
onBlur: function onBlur() {
return setCurrentEllipseHover(undefined);
},
isDisabled: isDisabled
}, makeAccessible({
label: 'Go back 5 pages'
})), {}, {
children: currentEllipseHover === 'start' ? /*#__PURE__*/jsx(ChevronsLeftIcon, {
size: "medium"
}) : /*#__PURE__*/jsx(MoreHorizontalIcon, {
size: "medium"
})
})), paginationButtons.middleItems.map(function (item) {
return /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(item - 1);
},
isSelected: internalPage === item - 1,
isDisabled: isDisabled
}, makeAccessible({
label: "Page ".concat(item)
})), {}, {
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: internalPage === item - 1 ? pagination.pageSelectionButton.textColorSelected : pagination.pageSelectionButton.textColor,
children: item
})
}), item - 1);
}), paginationButtons.showEndEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(internalPage + 5);
},
onMouseOver: function onMouseOver() {
return setCurrentEllipseHover('end');
},
onMouseLeave: function onMouseLeave() {
return setCurrentEllipseHover(undefined);
},
onFocus: function onFocus() {
return setCurrentEllipseHover('end');
},
onBlur: function onBlur() {
return setCurrentEllipseHover(undefined);
},
isDisabled: isDisabled
}, makeAccessible({
label: 'Go forward 5 pages'
})), {}, {
children: currentEllipseHover === 'end' ? /*#__PURE__*/jsx(ChevronsRightIcon, {
size: "medium"
}) : /*#__PURE__*/jsx(MoreHorizontalIcon, {
size: "medium"
})
})), /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(paginationButtons.lastItem - 1);
},
isSelected: internalPage === paginationButtons.lastItem - 1,
isDisabled: isDisabled
}, makeAccessible({
label: "Page ".concat(paginationButtons.lastItem)
})), {}, {
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: internalPage === paginationButtons.lastItem - 1 ? pagination.pageSelectionButton.textColorSelected : pagination.pageSelectionButton.textColor,
children: paginationButtons.lastItem
})
}))]
}), /*#__PURE__*/jsx(Button, {
variant: "tertiary",
icon: ChevronRightIcon,
accessibilityLabel: "Next Page",
onClick: function onClick() {
handlePageChange(internalPage + 1);
},
isDisabled: shouldDisableNextPage()
})]
})]
})]
}));
};
var Pagination = /*#__PURE__*/assignWithoutSideEffects(_Pagination, {
componentId: 'Pagination'
});
export { Pagination };
//# sourceMappingURL=Pagination.web.js.map