@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
85 lines • 3.8 kB
JavaScript
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { Button, Icon } from '../../../../webComponents/index.js';
import { classNames, styleData } from './Expandable.module.css.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const getPadding = level => {
switch (level) {
case 0:
return '0px';
case 1:
return CssSizeVariables.ui5WcrAnalyticalTableTreePaddingLevel1;
case 2:
return CssSizeVariables.ui5WcrAnalyticalTableTreePaddingLevel2;
case 3:
return CssSizeVariables.ui5WcrAnalyticalTableTreePaddingLevel3;
default:
return `calc(${CssSizeVariables.ui5WcrAnalyticalTableTreePaddingLevel3} + ${level - 3}rem * 0.5)`;
}
};
export const Expandable = props => {
const {
cell,
row,
column,
visibleColumns: columns,
webComponentsReactProperties
} = props;
const {
renderRowSubComponent,
alwaysShowSubComponent,
translatableTexts
} = webComponentsReactProperties;
const currentTheme = useCurrentTheme();
useStylesheet(styleData, Expandable.displayName);
const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
const tableColumns = columns.filter(({
id
}) => id !== '__ui5wcr__internal_selection_column' && id !== '__ui5wcr__internal_highlight_column' && id !== '__ui5wcr__internal_navigation_column');
const columnIndex = tableColumns.findIndex(col => col.id === column.id);
const paddingLeft = getPadding(row.depth);
const rowProps = row.getToggleRowExpandedProps();
const subComponentExpandable = typeof renderRowSubComponent === 'function' && !!renderRowSubComponent(row) && !alwaysShowSubComponent;
return /*#__PURE__*/_jsxs(_Fragment, {
children: [columnIndex === 0 &&
/*#__PURE__*/
// todo rowProps should be applied to the whole row, not just the cell. We should consider refactoring this.
_jsx(_Fragment, {
children: row.canExpand || subComponentExpandable ? /*#__PURE__*/_jsx("span", {
title: row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText,
style: {
...rowProps.style,
paddingInlineStart: paddingLeft
},
className: classNames.container,
"aria-expanded": row.isExpanded,
"aria-label": row.isExpanded ? translatableTexts.collapseA11yText : translatableTexts.expandA11yText,
children: shouldRenderButton ? /*#__PURE__*/_jsx(Button, {
tabIndex: -1,
icon: row.isExpanded ? iconNavDownArrow : iconNavRightArrow,
design: ButtonDesign.Transparent,
onClick: rowProps.onClick,
className: classNames.button
}) : /*#__PURE__*/_jsx(Icon, {
tabIndex: -1,
onClick: rowProps.onClick,
mode: IconMode.Interactive,
name: row.isExpanded ? iconNavDownArrow : iconNavRightArrow,
"data-component-name": "AnalyticalTableExpandIcon",
className: classNames.icon
})
}) : /*#__PURE__*/_jsx("span", {
style: {
paddingInlineStart: paddingLeft
},
"data-component-name": "AnalyticalTableNonExpandableCellSpacer",
className: clsx(classNames.nonExpandableCellSpacer, shouldRenderButton && classNames.withExpandableButton)
})
}), cell.render('Cell')]
});
};
Expandable.displayName = 'Expandable';