@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
19 lines (18 loc) • 2.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiButtonTertiary } from "../button/ButtonTertiary";
import { VuiIcon } from "../icon/Icon";
import { createPagination } from "./createPagination";
import classNames from "classnames";
export const VuiTablePagination = ({ currentPage, numPages, onSelectPage, isDisabled }) => {
const { items, activeIndex } = createPagination(currentPage, numPages);
const manyPagesTokenClasses = classNames("vuiTableManyPagesToken", {
"vuiTableManyPagesToken-isDisabled": isDisabled
});
return (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "start", alignItems: "center", spacing: "none" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiLeftArrowAlt, {}) }), color: "neutral", size: "s", onClick: () => onSelectPage(currentPage - 1), isDisabled: isDisabled || currentPage === 1 }, { children: "Previous" })) })), items.map((item, index) => {
const isActive = index === activeIndex;
return (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: item === "..." ? (_jsx("div", Object.assign({ className: manyPagesTokenClasses }, { children: item }))) : (_jsx(VuiButtonTertiary, Object.assign({ color: isActive ? "primary" : "neutral", isInert: isActive, isSelected: isActive, size: "s", onClick: () => onSelectPage(item), isDisabled: isDisabled }, { children: item }))) }), index));
}), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiRightArrowAlt, {}) }), iconSide: "right", color: "neutral", size: "s", onClick: () => onSelectPage(currentPage + 1), isDisabled: isDisabled || currentPage === numPages }, { children: "Next" })) }))] })));
};