@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
37 lines • 1.38 kB
JavaScript
import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
import { clsx } from 'clsx';
import { Icon } from '../../../../webComponents/Icon/index.js';
import { RenderColumnTypes } from '../../types/index.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const Grouped = props => {
const {
cell,
row,
webComponentsReactProperties
} = props;
const {
translatableTexts,
classes
} = webComponentsReactProperties;
const {
column: _0,
...attr
} = row.getToggleRowExpandedProps({
column: cell.column
});
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("button", {
...attr,
className: clsx(attr.className, classes.expandGroupButton),
title: row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText,
"aria-label": row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText,
tabIndex: -1,
children: /*#__PURE__*/_jsx(Icon, {
name: row.isExpanded ? iconNavDownArrow : iconNavRightArrow,
className: classes.expandGroupIcon
})
}), cell.render(RenderColumnTypes.Cell)]
});
};
Grouped.displayName = 'GroupedCellContent';