@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
61 lines • 3.02 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
import { Pagination } from '../pagination.js';
export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity];
export const DataGridFooter = Shade({
customElementName: 'shade-data-grid-footer',
css: {
display: 'block',
fontFamily: cssVariableTheme.typography.fontFamily,
'& .pager': {
backdropFilter: 'blur(10px)',
color: cssVariableTheme.text.secondary,
position: 'sticky',
bottom: '0',
display: 'flex',
justifyContent: 'flex-end',
padding: '8px 12px',
alignItems: 'center',
gap: '16px',
fontSize: cssVariableTheme.typography.fontSize.xs,
},
'& .pager-section': {
display: 'flex',
alignItems: 'center',
gap: '6px',
},
'& select': {
padding: '4px 8px',
borderRadius: cssVariableTheme.shape.borderRadius.sm,
border: `1px solid ${cssVariableTheme.divider}`,
background: cssVariableTheme.background.default,
color: cssVariableTheme.text.primary,
fontSize: cssVariableTheme.typography.fontSize.xs,
cursor: 'pointer',
},
},
render: ({ props, useObservable }) => {
const { service, findOptions, onFindOptionsChange, paginationOptions = dataGridItemsPerPage } = props;
const [currentData] = useObservable('dataUpdater', service.data);
const top = findOptions.top || Infinity;
const skip = findOptions.skip || 0;
const currentPage = Math.ceil(skip) / (top || 1);
const currentEntriesPerPage = top;
const pageCount = Math.ceil(currentData.count / (findOptions.top || Infinity));
return (createComponent("div", { className: "pager" },
currentEntriesPerPage !== Infinity && pageCount > 1 && (createComponent(Pagination, { count: pageCount, page: currentPage + 1, size: "small", onPageChange: (newPage) => {
onFindOptionsChange({ ...findOptions, skip: (findOptions.top || 0) * (newPage - 1) });
} })),
paginationOptions.length > 1 && (createComponent("div", { className: "pager-section" },
createComponent("span", null, "Rows per page"),
createComponent("select", { onchange: (ev) => {
const value = parseInt(ev.currentTarget.value, 10);
onFindOptionsChange({
...findOptions,
top: value,
skip: currentPage * value,
});
} }, paginationOptions.map((no) => (createComponent("option", { value: no.toString(), selected: no === currentEntriesPerPage }, no === Infinity ? 'All' : no.toString()))))))));
},
});
//# sourceMappingURL=footer.js.map