@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
95 lines • 3.68 kB
JavaScript
import { AnalyticalTablePopinDisplay } from '../../../../enums/AnalyticalTablePopinDisplay.js';
import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
import { FlexBoxDirection } from '../../../../enums/FlexBoxDirection.js';
import { FlexBoxWrap } from '../../../../enums/FlexBoxWrap.js';
import { FlexBox } from '../../../FlexBox/index.js';
import { makeRenderer } from '../../react-table/index.js';
import { RenderColumnTypes } from '../../types/index.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const PopIn = instance => {
const {
state,
contentToRender,
cell,
row,
internalRowHeight,
webComponentsReactProperties: {
classes: classNames,
uniqueId
}
} = instance;
return /*#__PURE__*/_jsxs(FlexBox, {
direction: FlexBoxDirection.Column,
className: classNames.popInContainer,
children: [/*#__PURE__*/_jsx(FlexBox, {
alignItems: contentToRender !== RenderColumnTypes.Grouped && contentToRender !== RenderColumnTypes.Expandable ? FlexBoxAlignItems.Start : FlexBoxAlignItems.Center,
wrap: FlexBoxWrap.NoWrap,
className: classNames.defaultCell,
style: {
height: internalRowHeight
},
children: cell.render(contentToRender)
}), contentToRender !== RenderColumnTypes.Grouped && state.popInColumns?.map(item => {
const {
popinDisplay,
id,
column
} = item;
const popInInstanceProps = row.allCells.find(cell => cell.column.id === item.id);
const renderHeader = () => {
if (column.PopInHeader) {
return typeof column.PopInHeader === 'function' ? column.PopInHeader({
...instance,
...popInInstanceProps
}) : column.PopInHeader;
}
return typeof column.Header === 'function' ? makeRenderer({
...instance,
...popInInstanceProps
}, column)(column.Header) : column.Header;
};
const renderCell = () => {
if (column?.Cell) {
const cell = column.Cell;
if (typeof cell === 'string') {
return /*#__PURE__*/_jsx("span", {
title: cell,
className: classNames.textEllipsis,
children: cell
});
}
return makeRenderer({
...instance,
...popInInstanceProps,
cell: popInInstanceProps,
isPopIn: true
}, column)(column.Cell);
}
return popInInstanceProps?.value ? /*#__PURE__*/_jsx("span", {
title: popInInstanceProps.value,
className: classNames.textEllipsis,
children: popInInstanceProps.value
}) : null;
};
return /*#__PURE__*/_jsxs(FlexBox, {
direction: popinDisplay === AnalyticalTablePopinDisplay.Inline ? FlexBoxDirection.Row : FlexBoxDirection.Column,
className: popinDisplay === AnalyticalTablePopinDisplay.Inline ? classNames.gap : undefined,
children: [popinDisplay !== AnalyticalTablePopinDisplay.WithoutHeader && column?.Header && /*#__PURE__*/_jsxs("div", {
id: `${uniqueId}popin-h-${id}-${row.id}`,
"aria-hidden": "true",
className: classNames.popInHeader,
"data-component-name": "AnalyticalTablePopinHeaderContainer",
children: [renderHeader(), ":"]
}), /*#__PURE__*/_jsx("div", {
id: `${uniqueId}popin-v-${id}-${row.id}`,
"aria-hidden": "true",
style: {
height: internalRowHeight
},
children: popInInstanceProps && renderCell()
})]
}, id);
})]
});
};
PopIn.displayName = 'PopIn';