imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix wrong room topic tooltip position (#10667)

Browse source 
* Fix wrong room topic tooltip position

* Update snapshots

* Fix tests
This commit is contained in:
Michael Telatynski 2023-04-20 09:25:53 +01:00 • committed by GitHub
parent 93b4ee654b
commit 1efa82917a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/elements/RoomTopic.tsx
View file

@ -103,10 +103,17 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
const className = classNames(props.className, "mx_RoomTopic");
return (
<div {...props} ref={ref} onClick={onClick} dir="auto" className={className}>
<TooltipTarget label={_t("Click to read topic")} alignment={Alignment.Bottom} ignoreHover={ignoreHover}>
<Linkify>{body}</Linkify>
</TooltipTarget>
</div>
<TooltipTarget
{...props}
ref={ref}
onClick={onClick}
dir="auto"
tooltipTargetClassName={className}
label={_t("Click to read topic")}
alignment={Alignment.Bottom}
ignoreHover={ignoreHover}
>
<Linkify>{body}</Linkify>
</TooltipTarget>
);
}

92
src/components/views/elements/TooltipTarget.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { HTMLAttributes } from "react";
import React, { forwardRef, HTMLAttributes } from "react";
import useFocus from "../../../hooks/useFocus";
import useHover from "../../../hooks/useHover";
@ -29,49 +29,55 @@ interface IProps extends HTMLAttributes<HTMLSpanElement>, Omit<ITooltipProps, "v
* Generic tooltip target element that handles tooltip visibility state
* and displays children
*/
const TooltipTarget: React.FC<IProps> = ({
children,
tooltipTargetClassName,
// tooltip pass through props
className,
id,
label,
alignment,
tooltipClassName,
maxParentWidth,
ignoreHover,
...rest
}) => {
const [isFocused, focusProps] = useFocus();
const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
(
{
children,
tooltipTargetClassName,
// tooltip pass through props
className,
id,
label,
alignment,
tooltipClassName,
maxParentWidth,
ignoreHover,
...rest
},
ref,
) => {
const [isFocused, focusProps] = useFocus();
const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
// No need to fill up the DOM with hidden tooltip elements. Only add the
// tooltip when we're hovering over the item (performance)
const tooltip = (isFocused || isHovering) && (
<Tooltip
id={id}
className={className}
tooltipClassName={tooltipClassName}
label={label}
alignment={alignment}
visible={isFocused || isHovering}
maxParentWidth={maxParentWidth}
/>
);
// No need to fill up the DOM with hidden tooltip elements. Only add the
// tooltip when we're hovering over the item (performance)
const tooltip = (isFocused || isHovering) && (
<Tooltip
id={id}
className={className}
tooltipClassName={tooltipClassName}
label={label}
alignment={alignment}
visible={isFocused || isHovering}
maxParentWidth={maxParentWidth}
/>
);
return (
<div
{...hoverProps}
{...focusProps}
tabIndex={0}
aria-describedby={id}
className={tooltipTargetClassName}
{...rest}
>
{children}
{tooltip}
</div>
);
};
return (
<div
{...hoverProps}
{...focusProps}
tabIndex={0}
aria-describedby={id}
className={tooltipTargetClassName}
{...rest}
ref={ref}
>
{children}
{tooltip}
</div>
);
},
);
export default TooltipTarget;