@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
108 lines • 4.17 kB
JavaScript
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { useEffect, useRef } from 'react';
import { classNames, styleData } from './RowSubComponent.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
export const RowSubComponent = props => {
const {
subComponentsHeight,
virtualRow,
dispatch,
row,
rowHeight,
children,
rows,
alwaysShowSubComponent,
rowIndex
} = props;
const subComponentRef = useRef(null);
useStylesheet(styleData, RowSubComponent.displayName);
useEffect(() => {
const subComponentHeightObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const target = entry.target.getBoundingClientRect();
if (target) {
// Firefox implements `borderBoxSize` as a single content rect, rather than an array
const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize;
// Safari doesn't implement `borderBoxSize`
const subCompHeight = borderBoxSize?.blockSize ?? target.height;
if (subComponentsHeight?.[virtualRow.index]?.subComponentHeight !== subCompHeight && subCompHeight !== 0) {
// use most common sub-component height of first 10 sub-components as default height
if (alwaysShowSubComponent && subComponentsHeight && Object.keys(subComponentsHeight).length === 10) {
const objGroupedByHeight = Object.values(subComponentsHeight).reduce((acc, cur) => {
const count = acc?.[cur.subComponentHeight];
if (typeof count === 'number') {
return {
...acc,
[cur.subComponentHeight]: count + 1
};
}
return {
...acc,
[cur.subComponentHeight]: 1
};
}, {});
const mostUsedHeight = Object.keys(objGroupedByHeight).reduce((a, b) => objGroupedByHeight[a] > objGroupedByHeight[b] ? a : b);
const estimatedHeights = rows.reduce((acc, cur, index) => {
acc[index] = {
subComponentHeight: parseInt(mostUsedHeight),
rowId: cur.id
};
return acc;
}, {});
dispatch({
type: 'SUB_COMPONENTS_HEIGHT',
payload: {
...estimatedHeights,
...subComponentsHeight
}
});
} else {
dispatch({
type: 'SUB_COMPONENTS_HEIGHT',
payload: {
...subComponentsHeight,
[virtualRow.index]: {
subComponentHeight: subCompHeight,
rowId: row.id
}
}
});
}
}
// recalc if row id of row index has changed
if (subComponentsHeight?.[virtualRow.index]?.rowId != null && subComponentsHeight?.[virtualRow.index]?.rowId !== row.id) {
dispatch({
type: 'SUB_COMPONENTS_HEIGHT',
payload: {
...subComponentsHeight,
[virtualRow.index]: {
subComponentHeight: subCompHeight,
rowId: row.id
}
}
});
}
}
});
});
if (subComponentRef.current?.firstChild) {
subComponentHeightObserver.observe(subComponentRef.current?.firstChild);
}
return () => {
subComponentHeightObserver.disconnect();
};
}, [subComponentRef.current?.firstChild, subComponentsHeight, row.id, subComponentsHeight?.[virtualRow.index]?.subComponentHeight, virtualRow.index]);
return /*#__PURE__*/_jsx("div", {
ref: subComponentRef,
"data-subcomponent": true,
"data-subcomponent-row-index": rowIndex,
tabIndex: -1,
style: {
boxSizing: 'border-box',
transform: `translateY(${rowHeight}px)`
},
className: classNames.subcomponent,
children: children
});
};
RowSubComponent.displayName = 'RowSubComponent';