@furystack/shades-common-components
Version:
52 lines • 3.15 kB
JavaScript
import { createComponent, Shade } from '@furystack/shades';
import { DataGridHeader } from './header.js';
import { DataGridBody } from './body.js';
import { DataGridFooter } from './footer.js';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
import { ClickAwayService } from '../../services/click-away-service.js';
export const DataGrid = Shade({
shadowDomName: 'shade-data-grid',
constructed: ({ props }) => {
const listener = (ev) => props.collectionService.handleKeyDown(ev);
window.addEventListener('keydown', listener);
return () => window.removeEventListener('keydown', listener);
},
render: ({ props, injector, useDisposable, element }) => {
const tp = injector.getInstance(ThemeProviderService);
const { theme } = tp;
useDisposable('clickAway', () => new ClickAwayService(element, () => {
props.collectionService.hasFocus.setValue(false);
}));
const headerStyle = {
backdropFilter: 'blur(12px) saturate(180%)',
background: 'rgba(128,128,128,0.3)',
color: theme.text.secondary,
height: '38px',
alignItems: 'center',
borderRadius: '2px',
top: '2px',
position: 'sticky',
fontVariant: 'all-petite-caps',
zIndex: '1',
boxShadow: 'rgba(0, 0, 0, 0.2) 1px 1px 1px 2px',
...props.styles?.header,
};
return (createComponent("div", { className: "shade-grid-wrapper", style: {
...props.styles?.wrapper,
width: '100%',
height: '100%',
overflow: 'auto',
zIndex: '1',
}, onclick: () => {
props.collectionService.hasFocus.setValue(true);
}, ariaMultiSelectable: "true" },
createComponent("table", { style: { width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' } },
createComponent("thead", null,
createComponent("tr", null, props.columns.map((column) => {
return (createComponent("th", { style: headerStyle }, props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (createComponent(DataGridHeader, { field: column, findOptions: props.findOptions }))));
}))),
createComponent(DataGridBody, { columns: props.columns, service: props.collectionService, rowComponents: props.rowComponents, onRowClick: (entry, ev) => props.collectionService.handleRowClick(entry, ev), onRowDoubleClick: (entry) => props.collectionService.handleRowDoubleClick(entry), style: props.styles?.cell, focusedRowStyle: props.focusedRowStyle, selectedRowStyle: props.selectedRowStyle, unfocusedRowStyle: props.unfocusedRowStyle, unselectedRowStyle: props.unselectedRowStyle, emptyComponent: props.emptyComponent, loaderComponent: props.loaderComponent })),
createComponent(DataGridFooter, { service: props.collectionService, findOptions: props.findOptions })));
},
});
//# sourceMappingURL=data-grid.js.map