@furystack/shades-common-components
Version:
78 lines • 4.18 kB
JavaScript
import { attachStyles, createComponent, Shade } from '@furystack/shades';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
export const DataGridRow = Shade({
shadowDomName: 'shades-data-grid-row',
render: ({ props, element, useObservable, injector }) => {
const { entry, rowComponents, columns, service } = props;
const { theme } = injector.getInstance(ThemeProviderService);
const attachSelectedStyles = (selection) => {
if (selection.includes(entry)) {
element.classList.add('selected');
attachStyles(element, { style: props.selectedRowStyle || { backgroundColor: theme.background.default } });
element.setAttribute('aria-selected', 'true');
}
else {
element.classList.remove('selected');
attachStyles(element, { style: props.unselectedRowStyle || { backgroundColor: 'transparent' } });
element.setAttribute('aria-selected', 'false');
}
};
const attachFocusedStyle = (newEntry) => {
if (newEntry === props.entry) {
attachStyles(element, {
style: props.focusedRowStyle || {
boxShadow: `0 0 50px 1px rgba(255,255,255,0.2) inset, 0 0 35px 1px var(--shades-theme-palette-primary-main) inset, 2px 0px 5px 0px rgba(0,0,0,0.3)`,
transition: 'box-shadow 0.1s ease-in-out',
fontWeight: 'bolder',
},
});
element.classList.add('focused');
const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42;
const parent = element.closest('.shade-grid-wrapper');
const maxTop = element.offsetTop - headerHeight;
const currentTop = parent.scrollTop;
if (maxTop < currentTop) {
parent.scrollTo({ top: maxTop, behavior: 'smooth' });
}
const footerHeight = element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
42;
const visibleMaxTop = parent.clientHeight - footerHeight;
const desiredMaxTop = element.offsetTop + element.clientHeight;
if (desiredMaxTop > visibleMaxTop) {
parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' });
}
}
else {
element.classList.remove('focused');
attachStyles(element, {
style: props.unfocusedRowStyle || {
boxShadow: 'none',
fontWeight: 'inherit',
},
});
}
};
const [selection] = useObservable('isSelected', service.selection, {
onChange: attachSelectedStyles,
});
attachSelectedStyles(selection);
const [focus] = useObservable('focus', service.focusedEntry, {
onChange: attachFocusedStyle,
});
attachFocusedStyle(focus);
element.style.display = 'table-row';
element.style.cursor = 'default';
element.style.userSelect = 'none';
if (selection?.includes(entry)) {
element.setAttribute('aria-selected', 'true');
element.classList.add('selected');
}
if (focus === entry) {
element.classList.add('focused');
}
element.setAttribute('aria-selected', selection?.includes(entry).toString() || 'false');
return (createComponent(createComponent, null, columns.map((column) => (createComponent("td", { style: { padding: '0.5em' }, onclick: (ev) => props.onRowClick?.(entry, ev), ondblclick: (ev) => props.onRowDoubleClick?.(entry, ev) }, rowComponents?.[column]?.(entry, { selection, focus }) ||
rowComponents?.default?.(entry, { selection, focus }) || createComponent("span", null, entry[column]))))));
},
});
//# sourceMappingURL=data-grid-row.js.map