@razorpay/blade
Version:
The Design System that powers Razorpay
173 lines (160 loc) • 8.78 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useEffect, useMemo } from 'react';
import { useTableContext } from './TableContext.js';
import { ComponentIds } from './componentIds.js';
import { tablePagination } from './tokens.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import '../Box/BaseBox/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import '../Pagination/index.js';
import { jsx } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Pagination } from '../Pagination/Pagination.web.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 _TablePagination = function _TablePagination(_ref) {
var controlledCurrentPage = _ref.currentPage,
onPageChange = _ref.onPageChange,
onPageSizeChange = _ref.onPageSizeChange,
_ref$defaultPageSize = _ref.defaultPageSize,
defaultPageSize = _ref$defaultPageSize === void 0 ? tablePagination.defaultPageSize : _ref$defaultPageSize,
_ref$showPageSizePick = _ref.showPageSizePicker,
showPageSizePicker = _ref$showPageSizePick === void 0 ? true : _ref$showPageSizePick,
_ref$showPageNumberSe = _ref.showPageNumberSelector,
showPageNumberSelector = _ref$showPageNumberSe === void 0 ? false : _ref$showPageNumberSe,
showLabel = _ref.showLabel,
label = _ref.label,
totalItemCount = _ref.totalItemCount,
_ref$paginationType = _ref.paginationType,
paginationType = _ref$paginationType === void 0 ? 'client' : _ref$paginationType,
rest = _objectWithoutProperties(_ref, _excluded);
var _useTableContext = useTableContext(),
setPaginationPage = _useTableContext.setPaginationPage,
currentPaginationState = _useTableContext.currentPaginationState,
totalItems = _useTableContext.totalItems,
setPaginationRowSize = _useTableContext.setPaginationRowSize,
setPaginationType = _useTableContext.setPaginationType;
// Sync pagination type with table context
useEffect(function () {
setPaginationType(paginationType);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [paginationType]);
// Calculate totalPages - use provided value, or calculate from totalItemCount
var totalPages = useMemo(function () {
if (!isUndefined(totalItemCount) && currentPaginationState && !isUndefined(currentPaginationState.size)) {
return Math.ceil(totalItemCount / currentPaginationState.size);
}
if (paginationType === 'client' && totalItems && currentPaginationState && !isUndefined(currentPaginationState.size)) {
return Math.ceil(totalItems / currentPaginationState.size);
}
return 1;
}, [totalItemCount, currentPaginationState, totalItems, paginationType]);
// Determine current page - use controlled value, fallback to table context, or default to 0 (0-indexed)
var currentPage = useMemo(function () {
if (!isUndefined(controlledCurrentPage)) {
return controlledCurrentPage;
}
if (!isUndefined(currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page)) {
return currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page;
}
return 0;
}, [controlledCurrentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page]);
// Determine current page size - fallback to table context, or default
var currentPageSize = useMemo(function () {
if (!isUndefined(currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size)) {
return currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size;
}
return defaultPageSize;
}, [currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size, defaultPageSize]);
// Generate default label for table context
var defaultLabel = useMemo(function () {
if (label) {
return label;
}
if (currentPaginationState && totalItemCount) {
var start = currentPaginationState.page * currentPaginationState.size + 1;
var end = Math.min((currentPaginationState.page + 1) * currentPaginationState.size, totalItemCount);
return "Showing ".concat(start, "-").concat(end, " Items");
}
if (currentPaginationState && totalItems) {
var _start = currentPaginationState.page * currentPaginationState.size + 1;
var _end = Math.min((currentPaginationState.page + 1) * currentPaginationState.size, totalItems);
return "Showing ".concat(_start, "-").concat(_end, " Items");
}
if (totalItemCount) {
return "Showing 1 to ".concat(totalItemCount, " Items");
}
if (totalItems) {
return "Showing 1 to ".concat(totalItems, " Items");
}
return 'Showing Items';
}, [label, currentPaginationState, totalItemCount, totalItems]);
// Sync page size with table context
useEffect(function () {
if (!isUndefined(currentPageSize)) {
setPaginationRowSize(currentPageSize);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPageSize]);
// Sync page with table context
useEffect(function () {
if (!isUndefined(currentPage) && (currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== currentPage) {
setPaginationPage(currentPage);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page]);
// Handle page change - update table context and call callback
// Pagination component uses 1-indexed pages, but Table uses 0-indexed
var handlePageChange = function handlePageChange(_ref2) {
var page = _ref2.page;
// Convert from 1-indexed (Pagination) to 0-indexed (Table)
var zeroIndexedPage = page - 1;
onPageChange === null || onPageChange === void 0 || onPageChange({
page: zeroIndexedPage
});
setPaginationPage(zeroIndexedPage);
};
// Handle page size change - update table context and call callback
var handlePageSizeChange = function handlePageSizeChange(_ref3) {
var pageSize = _ref3.pageSize;
onPageSizeChange === null || onPageSizeChange === void 0 || onPageSizeChange({
pageSize: pageSize
});
setPaginationRowSize(pageSize);
};
// Validation for server-side pagination
if (false) {
if (paginationType === 'server' && (isUndefined(totalItemCount) || isUndefined(onPageChange))) {
throwBladeError({
message: '`onPageChange` and `totalItemCount` props are required when paginationType is server.',
moduleName: 'TablePagination'
});
}
}
return /*#__PURE__*/jsx(BaseBox, {
children: /*#__PURE__*/jsx(Pagination, _objectSpread({
totalPages: totalPages,
selectedPage: currentPage !== undefined ? currentPage + 1 : undefined,
defaultSelectedPage: 1,
onSelectedPageChange: handlePageChange,
defaultPageSize: defaultPageSize,
pageSize: currentPageSize,
onPageSizeChange: handlePageSizeChange,
showPageSizePicker: showPageSizePicker,
showPageNumberSelector: showPageNumberSelector,
showLabel: showLabel,
label: defaultLabel,
pageSizeLabel: "rows / page"
}, rest))
});
};
var TablePagination = /*#__PURE__*/assignWithoutSideEffects(_TablePagination, {
componentId: ComponentIds.TablePagination
});
export { TablePagination };
//# sourceMappingURL=TablePagination.web.js.map