@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
215 lines • 8.03 kB
JavaScript
import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
import iconDecline from '@ui5/webcomponents-icons/dist/decline.js';
import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { useEffect, useMemo, useRef } from 'react';
import { FlexBoxAlignItems, TextAlign } from '../../../enums/index.js';
import { CLEAR_SORTING, FILTER, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
import { stopPropagation } from '../../../internal/stopPropagation.js';
import { getUi5TagWithSuffix } from '../../../internal/utils.js';
import { Icon } from '../../../webComponents/Icon/index.js';
import { List } from '../../../webComponents/List/index.js';
import { ListItemCustom } from '../../../webComponents/ListItemCustom/index.js';
import { ListItemStandard } from '../../../webComponents/ListItemStandard/index.js';
import { Popover } from '../../../webComponents/Popover/index.js';
import { Text } from '../../../webComponents/Text/index.js';
import { FlexBox } from '../../FlexBox/index.js';
import { classNames, styleData } from './ColumnHeaderModal.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ColumnHeaderModal = props => {
const {
column,
onSort,
onGroupBy,
open,
setPopoverOpen,
isRtl,
openerRef
} = props;
useStylesheet(styleData, ColumnHeaderModal.displayName);
const showFilter = column.canFilter;
const showGroup = column.canGroupBy;
const showSort = column.canSort;
const ref = useRef(null);
const listRef = useRef(null);
const {
Filter
} = column;
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
const clearSortingText = i18nBundle.getText(CLEAR_SORTING);
const sortAscendingText = i18nBundle.getText(SORT_ASCENDING);
const sortDescendingText = i18nBundle.getText(SORT_DESCENDING);
const groupText = i18nBundle.getText(GROUP);
const ungroupText = i18nBundle.getText(UNGROUP);
const filterText = i18nBundle.getText(FILTER);
const filterStyles = useMemo(() => {
if (showFilter) {
return {
iconDimensions: `var(${getScopedVarName('--_ui5_list_item_icon_size')})`,
fontSize: `var(${getScopedVarName('--_ui5_list_item_title_size')})`
};
}
}, [showFilter]);
const handleSort = e => {
const sortType = e.detail.item.getAttribute('data-sort');
switch (sortType) {
case 'asc':
column.toggleSortBy(false, !!column.enableMultiSort);
if (typeof onSort === 'function') {
onSort(enrichEventWithDetails(e, {
column,
sortDirection: sortType
}));
}
break;
case 'desc':
column.toggleSortBy(true, !!column.enableMultiSort);
if (typeof onSort === 'function') {
onSort(enrichEventWithDetails(e, {
column,
sortDirection: sortType
}));
}
break;
case 'clear':
column.clearSortBy();
if (typeof onSort === 'function') {
onSort(enrichEventWithDetails(e, {
column,
sortDirection: sortType
}));
}
break;
case 'group':
const willGroup = !column.isGrouped;
column.toggleGroupBy(willGroup);
if (typeof onGroupBy === 'function') {
onGroupBy(enrichEventWithDetails(e, {
column,
isGrouped: willGroup
}));
}
break;
}
setPopoverOpen(false);
};
const isSortedAscending = column.isSorted && column.isSortedDesc === false;
const isSortedDescending = column.isSorted && column.isSortedDesc === true;
const onAfterClose = e => {
stopPropagation(e);
setPopoverOpen(false);
};
const onAfterOpen = () => {
listRef.current?.children?.[0]?.focus();
};
const horizontalAlign = (() => {
switch (column.hAlign) {
case TextAlign.Begin:
return isRtl ? PopoverHorizontalAlign.End : PopoverHorizontalAlign.Start;
case TextAlign.End:
return isRtl ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
case TextAlign.Left:
return PopoverHorizontalAlign.Start;
case TextAlign.Right:
return PopoverHorizontalAlign.End;
case TextAlign.Center:
return PopoverHorizontalAlign.Center;
default:
return isRtl ? PopoverHorizontalAlign.End : PopoverHorizontalAlign.Start;
}
})();
const handleCustomLiKeyDown = e => {
if (e.key === 'Enter') {
setPopoverOpen(false);
}
};
const handleListKeyDown = e => {
if (e.key !== 'Escape') {
stopPropagation(e);
}
};
useEffect(() => {
if (open && ref.current && openerRef.current) {
void customElements.whenDefined(getUi5TagWithSuffix('ui5-popover')).then(() => {
ref.current.opener = openerRef.current;
});
}
}, [open]);
return /*#__PURE__*/_jsx(Popover, {
open: open,
hideArrow: true,
horizontalAlign: horizontalAlign,
placement: PopoverPlacement.Bottom,
ref: ref,
className: classNames.popover,
onClick: stopPropagation,
onClose: onAfterClose,
onOpen: onAfterOpen,
"data-component-name": "ATHeaderPopover",
children: /*#__PURE__*/_jsxs(List, {
onItemClick: handleSort,
ref: listRef,
onKeyDown: handleListKeyDown,
"data-component-name": "ATHeaderPopoverList",
children: [isSortedAscending && /*#__PURE__*/_jsx(ListItemStandard, {
type: ListItemType.Active,
icon: iconDecline,
"data-sort": "clear",
children: clearSortingText
}), showSort && !isSortedAscending && /*#__PURE__*/_jsx(ListItemStandard, {
type: ListItemType.Active,
icon: iconSortAscending,
"data-sort": "asc",
children: sortAscendingText
}), showSort && !isSortedDescending && /*#__PURE__*/_jsx(ListItemStandard, {
type: ListItemType.Active,
icon: iconSortDescending,
"data-sort": "desc",
children: sortDescendingText
}), isSortedDescending && /*#__PURE__*/_jsx(ListItemStandard, {
type: ListItemType.Active,
icon: iconDecline,
"data-sort": "clear",
children: clearSortingText
}), showFilter && /*#__PURE__*/_jsx(ListItemCustom, {
type: ListItemType.Inactive,
onKeyDown: handleCustomLiKeyDown,
accessibleName: filterText,
children: /*#__PURE__*/_jsxs(FlexBox, {
alignItems: FlexBoxAlignItems.Center,
children: [/*#__PURE__*/_jsx(Icon, {
name: iconFilter,
className: classNames.filterIcon,
"aria-hidden": true,
style: {
minWidth: filterStyles.iconDimensions,
minHeight: filterStyles.iconDimensions
}
}), /*#__PURE__*/_jsx(Text, {
maxLines: 1,
className: classNames.filterText,
style: {
fontSize: filterStyles.fontSize
},
children: filterText
}), /*#__PURE__*/_jsx(Filter, {
column: column,
popoverRef: ref
})]
})
}), showGroup && /*#__PURE__*/_jsx(ListItemStandard, {
type: ListItemType.Active,
icon: iconGroup,
"data-sort": 'group',
children: column.isGrouped ? ungroupText : groupText
})]
})
});
};
ColumnHeaderModal.displayName = 'ColumnHeaderModal';