phx-react
Version:
PHX REACT
42 lines • 2.11 kB
JavaScript
import React, { useEffect } from 'react';
import { PHXDropdown } from '../../Dropdown';
import { applyUrlQuery } from '../utils';
import { PHXUseDirectLink } from '../../../hooks/direct-link';
const optionNumber = [150, 125, 100, 75, 50, 25, 10];
function PaginationSelected({ rowQuantity, setCurrentPage, setRowQuantity, paginationChange, setOffset, configUrlApply, tableKey, }) {
const directLink = PHXUseDirectLink();
useEffect(() => {
if (configUrlApply) {
const { searchParams } = configUrlApply;
const rowQuery = applyUrlQuery.get(searchParams, `row-${tableKey}`);
if (rowQuery) {
setRowQuantity === null || setRowQuantity === void 0 ? void 0 : setRowQuantity(Number(rowQuery));
}
}
}, []);
const options = optionNumber.map((item) => ({
content: item + '',
active: rowQuantity === item,
onClick: () => {
var _a;
setRowQuantity === null || setRowQuantity === void 0 ? void 0 : setRowQuantity(item);
setCurrentPage(1);
setOffset(0);
if (paginationChange) {
paginationChange(1);
}
if (configUrlApply) {
applyUrlQuery.set(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
{ key: `row-${tableKey}`, value: item + '' },
{ key: `pagi-${tableKey}`, value: '1' },
]);
}
},
}));
return (React.createElement("div", { className: 'relative' },
React.createElement("div", { className: 'absolute bottom-0 top-0 flex items-center gap-x-1' },
React.createElement(PHXDropdown, { buttonContent: `${rowQuantity}`, options: options, origin: 'top-left', type: 'default' }),
React.createElement("div", { className: 'w-24 text-xs' }, "b\u1EA3n ghi/trang"))));
}
export default PaginationSelected;
//# sourceMappingURL=PaginaitonSelected.js.map