@razorpay/blade
Version:
The Design System that powers Razorpay
433 lines (426 loc) • 19.9 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default, { useEffect, useCallback } from 'react';
import styled from 'styled-components';
import { useTableContext } from './TableContext.js';
import { ComponentIds } from './componentIds.js';
import { tablePagination } 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/logger/index.js';
import '../../utils/getFocusRingStyles/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../../utils/metaAttribute/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 { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.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 = ["currentPage", "onPageChange", "onPageSizeChange", "defaultPageSize", "showPageSizePicker", "showPageNumberSelector", "showLabel", "label", "totalItemCount", "paginationType"];
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: "TablePaginationweb__PageSelectionButton",
componentId: "sc-127igl5-0"
})(function (_ref) {
var theme = _ref.theme,
isSelected = _ref.isSelected;
return {
backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelected) : 'transparent',
border: 'none',
cursor: 'pointer',
height: makeSize(tablePagination.pageSelectionButton.height),
width: makeSize(tablePagination.pageSelectionButton.width),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: getIn(theme.border.radius, tablePagination.pageSelectionButton.borderRadius),
'&:hover': {
backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedHover) : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorHover)
},
'&:focus-visible': {
backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorActive),
outline: 'none',
'&:focus-visible': getFocusRingStyles({
theme: theme
})
},
'&:active': {
backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, tablePagination.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 _TablePagination = function _TablePagination(_ref3) {
var _currentPaginationSta;
var controlledCurrentPage = _ref3.currentPage,
onPageChange = _ref3.onPageChange,
onPageSizeChange = _ref3.onPageSizeChange,
_ref3$defaultPageSize = _ref3.defaultPageSize,
defaultPageSize = _ref3$defaultPageSize === void 0 ? tablePagination.defaultPageSize : _ref3$defaultPageSize,
_ref3$showPageSizePic = _ref3.showPageSizePicker,
showPageSizePicker = _ref3$showPageSizePic === void 0 ? true : _ref3$showPageSizePic,
_ref3$showPageNumberS = _ref3.showPageNumberSelector,
showPageNumberSelector = _ref3$showPageNumberS === void 0 ? false : _ref3$showPageNumberS,
showLabel = _ref3.showLabel,
label = _ref3.label,
totalItemCount = _ref3.totalItemCount,
_ref3$paginationType = _ref3.paginationType,
paginationType = _ref3$paginationType === void 0 ? 'client' : _ref3$paginationType,
rest = _objectWithoutProperties(_ref3, _excluded);
var _useTableContext = useTableContext(),
setPaginationPage = _useTableContext.setPaginationPage,
currentPaginationState = _useTableContext.currentPaginationState,
totalItems = _useTableContext.totalItems,
setPaginationRowSize = _useTableContext.setPaginationRowSize,
setPaginationType = _useTableContext.setPaginationType,
backgroundColor = _useTableContext.backgroundColor;
var _React$useState = React__default.useState(defaultPageSize),
_React$useState2 = _slicedToArray(_React$useState, 2),
currentPageSize = _React$useState2[0],
setCurrentPageSize = _React$useState2[1];
var _React$useState3 = React__default.useState(!isUndefined(controlledCurrentPage) ? controlledCurrentPage : (_currentPaginationSta = currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== null && _currentPaginationSta !== void 0 ? _currentPaginationSta : 0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
currentPage = _React$useState4[0],
setCurrentPage = _React$useState4[1];
var _React$useState5 = React__default.useState(undefined),
_React$useState6 = _slicedToArray(_React$useState5, 2),
currentEllipseHover = _React$useState6[0],
setCurrentEllipseHover = _React$useState6[1];
var defaultLabel = currentPaginationState ? "Showing ".concat(currentPaginationState.page * currentPaginationState.size + 1, "-").concat(currentPaginationState.page * currentPaginationState.size + currentPaginationState.size, " Items") : "Showing 1 to ".concat(totalItems, " Items");
var _useTheme = useTheme(),
platform = _useTheme.platform;
var onMobile = platform === 'onMobile';
useEffect(function () {
setPaginationRowSize(currentPageSize);
setPaginationType(paginationType);
}, []);
useEffect(function () {
if (currentPage && (currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== currentPage) {
setPaginationPage(currentPage);
}
}, [currentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page, setPaginationPage]);
var totalPages = isUndefined(totalItemCount) ? Math.ceil(totalItems / currentPageSize) : Math.ceil(totalItemCount / currentPageSize);
var handlePageChange = useCallback(function (page) {
var pageToJumpTo = page;
if (pageToJumpTo < 0) {
pageToJumpTo = 0;
} else if (pageToJumpTo > totalPages - 1) {
pageToJumpTo = totalPages - 1;
}
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({
page: pageToJumpTo
});
if (!isUndefined(controlledCurrentPage)) {
pageToJumpTo = controlledCurrentPage;
}
setPaginationPage(pageToJumpTo);
setCurrentPage(pageToJumpTo);
}, [controlledCurrentPage, onPageChange, setPaginationPage, totalPages]);
useEffect(function () {
if (!isUndefined(controlledCurrentPage) && controlledCurrentPage !== currentPage) {
handlePageChange(controlledCurrentPage);
}
}, [controlledCurrentPage, currentPage, handlePageChange, onPageChange]);
if (true) {
if (paginationType === 'server' && (isUndefined(totalItemCount) || isUndefined(onPageChange))) {
throwBladeError({
message: '`onPageChange` and `totalItemCount` props are required when paginationType is server.',
moduleName: 'TablePagination'
});
}
}
var handlePageSizeChange = function handlePageSizeChange(pageSize) {
onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange({
pageSize: pageSize
});
setPaginationRowSize(pageSize);
setCurrentPageSize(pageSize);
};
var shouldDisableNextPage = function shouldDisableNextPage() {
return currentPage >= totalPages - 1;
};
var paginationButtons = getPaginationButtons({
currentSelection: currentPage + 1,
totalPages: totalPages
});
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
display: "flex",
flexDirection: "row",
padding: tablePagination.padding,
backgroundColor: backgroundColor
}, makeAnalyticsAttribute(rest)), {}, {
children: [showLabel && !onMobile && /*#__PURE__*/jsx(BaseBox, {
display: "flex",
justifyContent: "center",
alignItems: "center",
children: /*#__PURE__*/jsx(Text, {
size: "medium",
weight: "semibold",
children: label !== null && label !== void 0 ? label : defaultLabel
})
}), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flex: 1,
gap: "spacing.2",
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 pages per row",
name: "page-size",
label: "",
labelPosition: "inside-input",
placeholder: "",
onChange: function onChange(_ref4) {
var values = _ref4.values;
handlePageSizeChange(Number(values[0]));
},
defaultValue: currentPageSize.toString()
}), /*#__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__*/jsx(Text, {
children: "rows / page"
})
})]
}), /*#__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(currentPage - 1);
},
isDisabled: currentPage <= 0
}), onMobile && /*#__PURE__*/jsx(BaseBox, {
flex: 1,
alignItems: "center",
justifyContent: "center",
children: /*#__PURE__*/jsx(Text, {
textAlign: "center",
children: "Showing ".concat(currentPage + 1, " of ").concat(totalPages, " pages")
})
}), totalPages > 1 && showPageNumberSelector && !onMobile && /*#__PURE__*/jsxs(BaseBox, {
gap: "spacing.1",
display: "flex",
flexDirection: "row",
children: [/*#__PURE__*/jsx(PageSelectionButton, {
onClick: function onClick() {
return handlePageChange(paginationButtons.firstItem - 1);
},
isSelected: currentPage === paginationButtons.firstItem - 1,
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: currentPage === paginationButtons.firstItem - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
children: paginationButtons.firstItem
})
}), paginationButtons.showStartEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(currentPage - 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);
}
}, 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: currentPage === item - 1
}, makeAccessible({
label: "Page ".concat(item)
})), {}, {
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: currentPage === item - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
children: item
})
}), item - 1);
}), paginationButtons.showEndEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
onClick: function onClick() {
return handlePageChange(currentPage + 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);
}
}, makeAccessible({
label: 'Go forward 5 pages'
})), {}, {
children: currentEllipseHover === 'end' ? /*#__PURE__*/jsx(ChevronsRightIcon, {
size: "medium"
}) : /*#__PURE__*/jsx(MoreHorizontalIcon, {
size: "medium"
})
})), /*#__PURE__*/jsx(PageSelectionButton, {
onClick: function onClick() {
return handlePageChange(paginationButtons.lastItem - 1);
},
isSelected: currentPage === paginationButtons.lastItem - 1,
children: /*#__PURE__*/jsx(Text, {
size: "medium",
color: currentPage === paginationButtons.lastItem - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
children: paginationButtons.lastItem
})
})]
}), /*#__PURE__*/jsx(Button, {
variant: "tertiary",
icon: ChevronRightIcon,
accessibilityLabel: "Next Page",
onClick: function onClick() {
handlePageChange(currentPage + 1);
},
isDisabled: shouldDisableNextPage()
})]
})]
})]
}));
};
var TablePagination = /*#__PURE__*/assignWithoutSideEffects(_TablePagination, {
componentId: ComponentIds.TablePagination
});
export { TablePagination };
//# sourceMappingURL=TablePagination.web.js.map