@amaui/ui-react
Version:
UI for React
148 lines • 7.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "color", "version", "elevation", "size", "page", "pageDefault", "onChange", "rowsPerPage", "rowsPerPageDefault", "rowsPerPageOptions", "rowsPerPageText", "onRowsPerPageChange", "total", "first", "before", "next", "last", "IconFirst", "IconBefore", "IconNext", "IconLast", "Component", "className", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { clamp, is } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import IconMaterialLastPage from '@amaui/icons-material-rounded-react/IconMaterialLastPageW100';
import IconMaterialFirstPage from '@amaui/icons-material-rounded-react/IconMaterialFirstPageW100';
import IconMaterialNavigateNext from '@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100';
import IconMaterialNavigateBefore from '@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100';
import LineElement from '../Line';
import TypeElement from '../Type';
import SelectElement from '../Select';
import ListItemElement from '../ListItem';
import IconButtonElement from '../IconButton';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
root: {},
select: {
minWidth: '140px'
},
text: {
flex: '0 0 auto'
}
}), {
name: 'amaui-TablePagination'
});
const TablePagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiTablePagination?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const Select = React.useMemo(() => theme?.elements?.Select || SelectElement, [theme]);
const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const {
tonal = false,
color = 'default',
version = 'text',
elevation = false,
size = 'regular',
page: page_ = 0,
pageDefault,
onChange,
rowsPerPage: rowsPerPage_ = props.total < 4 ? props.total : props.total * 0.05,
rowsPerPageDefault,
rowsPerPageOptions = props.total < 4 ? [props.total] : [props.total * 0.05, props.total * 0.1, props.total * 0.25, props.total * 0.5, props.total],
rowsPerPageText = 'Rows per page',
onRowsPerPageChange,
total,
first = false,
before = true,
next = true,
last = false,
IconFirst = IconMaterialFirstPage,
IconBefore = IconMaterialNavigateBefore,
IconNext = IconMaterialNavigateNext,
IconLast = IconMaterialLastPage,
Component = 'div',
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [page, setPage] = React.useState(pageDefault !== undefined ? pageDefault : page_);
const [rowsPerPage, setRowsPerPage] = React.useState(rowsPerPageDefault !== undefined ? rowsPerPageDefault : rowsPerPage_);
React.useEffect(() => {
if (rowsPerPage_ !== rowsPerPage) setRowsPerPage(rowsPerPage_);
}, [rowsPerPage_]);
const onUpdateRowsPerPage = value => {
// Update inner or controlled
if (!props.hasOwnProperty('rowsPerPage')) setRowsPerPage(value);
if (is('function', onRowsPerPageChange)) onRowsPerPageChange(value);
update(0);
};
const update = value => {
// Update inner or controlled
if (!props.hasOwnProperty('page')) setPage(value);
if (is('function', onChange)) onChange(value);
};
const maxPage = Math.ceil(total / rowsPerPage) - 1;
const IconButtonProps = {
tonal,
color,
version,
elevation,
size
};
return /*#__PURE__*/React.createElement(Line, _extends({
ref: ref,
gap: 3,
direction: "row",
justify: "flex-start",
align: "center",
Component: Component,
className: classNames([staticClassName('TablePagination', theme) && [`amaui-TablePagination-root`, `amaui-TablePagination-version-${version}`, `amaui-TablePagination-size-${size}`], className, classes.root])
}, other), /*#__PURE__*/React.createElement(Line, {
gap: 1,
direction: "row",
justify: "flex-start",
align: "center"
}, /*#__PURE__*/React.createElement(Select, {
tonal: tonal,
color: color,
label: rowsPerPageText,
size: "small",
value: rowsPerPage,
onChange: onUpdateRowsPerPage,
className: classNames([staticClassName('TablePagination', theme) && [`amaui-TablePagination-select`], classes.select])
}, rowsPerPageOptions.map(item => /*#__PURE__*/React.createElement(ListItem, {
key: item,
primary: item,
value: item,
button: true
})))), /*#__PURE__*/React.createElement(Type, {
version: "b2",
gap: 1,
direction: "row",
justify: "flex-start",
align: "center",
Component: Line,
className: classNames([staticClassName('TablePagination', theme) && [`amaui-TablePagination-text`], classes.text])
}, /*#__PURE__*/React.createElement("span", null, page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total), " ", /*#__PURE__*/React.createElement("span", null, "of"), " ", /*#__PURE__*/React.createElement("span", null, total)), /*#__PURE__*/React.createElement(Line, {
gap: 1,
direction: "row",
justify: "flex-start",
align: "center"
}, first && /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: () => update(0),
disabled: page === 0
}, IconButtonProps), /*#__PURE__*/React.createElement(IconFirst, null)), before && /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: () => update(clamp(page - 1, 0, maxPage)),
disabled: page === 0
}, IconButtonProps), /*#__PURE__*/React.createElement(IconBefore, null)), next && /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: () => update(clamp(page + 1, 0, maxPage)),
disabled: page === maxPage
}, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, null)), last && /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: () => update(maxPage),
disabled: page === maxPage
}, IconButtonProps), /*#__PURE__*/React.createElement(IconLast, null))));
});
TablePagination.displayName = 'amaui-TablePagination';
export default TablePagination;