@knowmax/genericlist-fluentuiv9
Version:
Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.
37 lines (36 loc) • 1.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { makeStyles, mergeClasses } from '@griffel/react';
import { Pager } from '@knowmax/pager-fluentuiv9';
import { useGenericListSettings, PARAM_PAGE, getParamId } from '@knowmax/genericlist-core';
import { Loader } from '../core';
import { TotalItems } from '.';
const useClasses = makeStyles({
root: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}
});
/** Dedicated pager wrapper including loader and total number of items for lists. */
export const PagerWrapper = observer(({ list, className }) => {
const classes = useClasses();
const settings = useGenericListSettings();
const goto = useCallback((page) => {
const params = new URLSearchParams(settings.params);
if (page > 1) {
params.set(getParamId(PARAM_PAGE, list.id), page.toString());
}
else {
params.delete(getParamId(PARAM_PAGE, list.id));
}
settings.serialize(params);
}, [settings.params, list.id]);
return (_jsx(_Fragment, { children: list.loaded && list.totalCount !== 0 &&
_jsxs("div", { className: mergeClasses(classes.root, className), children: [_jsx(Pager, { pageSize: list.pageSize, totalResults: list.totalCount, currentPage: list.page, onChange: goto, display: 'buttons' }), _jsx("div", { children: list.loading ?
_jsx(Loader, { size: 'sm' })
:
_jsx(TotalItems, { list: list }) })] }) }));
});