@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
79 lines • 2.91 kB
JavaScript
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { makeRenderer } from 'react-table';
import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxWrap } from '../../../../enums/index.js';
import { Text } from '../../../../webComponents/Text/index.js';
import { FlexBox } from '../../../FlexBox/index.js';
import { classNames, styleData } from './PopIn.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const PopIn = instance => {
const {
state,
contentToRender,
cell,
row,
internalRowHeight
} = instance;
useStylesheet(styleData, PopIn.displayName);
return /*#__PURE__*/_jsxs(FlexBox, {
direction: FlexBoxDirection.Column,
className: classNames.container,
children: [/*#__PURE__*/_jsx(FlexBox, {
alignItems: contentToRender !== 'Grouped' && contentToRender !== 'Expandable' ? FlexBoxAlignItems.Start : FlexBoxAlignItems.Center,
wrap: FlexBoxWrap.NoWrap,
className: classNames.defaultCell,
style: {
height: internalRowHeight
},
children: cell.render(contentToRender)
}), contentToRender !== 'Grouped' && state.popInColumns?.map(item => {
const popInInstanceProps = row.allCells.find(cell => cell.column.id === item.id);
const renderHeader = () => {
if (item.column.PopInHeader) {
return typeof item.column.PopInHeader === 'function' ? item.column.PopInHeader({
...instance,
...popInInstanceProps
}) : item.column.PopInHeader;
}
return typeof item.column.Header === 'function' ? makeRenderer({
...instance,
...popInInstanceProps
}, item.column)(item.column.Header) : item.column.Header;
};
const renderCell = () => {
if (item.column?.Cell) {
const cell = item.column.Cell;
if (typeof cell === 'string') {
return /*#__PURE__*/_jsx(Text, {
maxLines: 1,
title: cell,
children: cell
});
}
return makeRenderer({
...instance,
...popInInstanceProps,
isPopIn: true
}, item.column)(item.column.Cell);
}
return popInInstanceProps?.value ? /*#__PURE__*/_jsx(Text, {
maxLines: 1,
title: popInInstanceProps.value,
children: popInInstanceProps.value
}) : null;
};
return /*#__PURE__*/_jsxs(FlexBox, {
direction: FlexBoxDirection.Column,
children: [item.column?.Header && /*#__PURE__*/_jsxs("div", {
className: classNames.header,
children: [renderHeader(), ":"]
}), /*#__PURE__*/_jsx("div", {
style: {
height: internalRowHeight
},
children: popInInstanceProps && renderCell()
})]
}, item.id);
})]
});
};
PopIn.displayName = 'PopIn';