Skip to content

Commit

Permalink
fix(MessageViewItem): enable details view if titleText is overflowi…
Browse files Browse the repository at this point in the history
…ng (#6015)

Fixes #5990
  • Loading branch information
Lukas742 authored Jul 5, 2024
1 parent 0e6a326 commit dba28ce
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 8 deletions.
39 changes: 32 additions & 7 deletions packages/main/src/components/MessageView/MessageItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import iconArrowRight from '@ui5/webcomponents-icons/dist/slim-arrow-right.js';
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import type { ReactNode } from 'react';
import { forwardRef, useContext } from 'react';
import { Children, forwardRef, useContext, useEffect, useRef, useState } from 'react';
import { FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
import { MessageViewContext } from '../../internal/MessageViewContext.js';
import type { CommonProps } from '../../types/index.js';
Expand Down Expand Up @@ -59,6 +59,9 @@ export interface MessageItemPropTypes extends CommonProps {
*/
const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((props, ref) => {
const { titleText, subtitleText, counter, type = ValueState.Negative, children, className, ...rest } = props;
const [isTitleTextOverflowing, setIsTitleTextIsOverflowing] = useState(false);
const titleTextRef = useRef<HTMLSpanElement>(null);
const hasDetails = !!(children || isTitleTextOverflowing);

useStylesheet(styleData, MessageItem.displayName);

Expand All @@ -71,10 +74,10 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
subtitleText && classNames.withSubtitle
);

const messageClasses = clsx(classNames.message, children && classNames.withChildren);
const messageClasses = clsx(classNames.message, hasDetails && classNames.withChildren);

const handleListItemClick = (e) => {
if (children) {
if (hasDetails) {
selectMessage(props);
if (typeof rest.onClick === 'function') {
rest.onClick(e);
Expand All @@ -90,13 +93,31 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
handleListItemClick(e);
}
};

const hasChildren = Children.count(children);
useEffect(() => {
const titleTextObserver = new ResizeObserver(([titleTextSpan]) => {
if (titleTextSpan.target.scrollWidth > titleTextSpan.target.clientWidth) {
setIsTitleTextIsOverflowing(true);
} else {
setIsTitleTextIsOverflowing(false);
}
});
if (!hasChildren && titleTextRef.current) {
titleTextObserver.observe(titleTextRef.current);
}
return () => {
titleTextObserver.disconnect();
};
}, [hasChildren]);

return (
<ListItemCustom
onClick={handleListItemClick}
onKeyDown={handleKeyDown}
data-title={titleText}
data-type={type}
type={children ? ListItemType.Active : ListItemType.Inactive}
type={hasDetails ? ListItemType.Active : ListItemType.Inactive}
{...rest}
className={listItemClasses}
ref={ref}
Expand All @@ -109,11 +130,15 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
direction={FlexBoxDirection.Column}
style={{ flex: 'auto', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
{titleText && <span className={classNames.title}>{titleText}</span>}
{subtitleText && <Label className={classNames.subtitle}>{subtitleText}</Label>}
{titleText && (
<span className={classNames.title} ref={titleTextRef}>
{titleText}
</span>
)}
{titleText && subtitleText && <Label className={classNames.subtitle}>{subtitleText}</Label>}
</FlexBox>
{counter != null && <span className={classNames.counter}>{counter}</span>}
{children && <Icon className={classNames.navigation} name={iconArrowRight} />}
{hasDetails && <Icon className={classNames.navigation} name={iconArrowRight} />}
</FlexBox>
</ListItemCustom>
);
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/components/MessageView/MessageView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ function MyComponent() {
const [isOnDetailsPage, setIsOnDetailsPage] = useState(false);
return (
<Dialog
resizable
style={{ width: '500px' }}
className="modal-without-padding"
header={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,13 @@ const meta = {
type={ValueState.Critical}
counter={3}
/>,
<MessageItem key={4} titleText={'Empty Message Type'} groupName={'Products'} />,
<MessageItem
key={4}
titleText={
'Long Empty Message Type (no title, no subtitle, no children/details) - The details view is only available if the `titleText` is not fully visible. It is NOT recommended to use long titles!'
}
groupName={'Products'}
/>,
<MessageItem
key={5}
titleText={'Information Message Type without subtitle'}
Expand Down Expand Up @@ -123,6 +129,7 @@ export const MessageViewInDialog: Story = {
Open Dialog
</Button>
<Dialog
resizable
style={{ width: '500px' }}
className="contentPartNoPadding headerPartNoPadding"
open={open}
Expand Down

0 comments on commit dba28ce

Please sign in to comment.