mirror of https://github.com/apache/superset.git
fix(dashboard): Fix hover labels for horizontal overflow native filter dividers (#22210)
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
parent
4b96474d6c
commit
93158ea649
|
@ -59,6 +59,7 @@ test('horizontal mode, title', () => {
|
||||||
orientation={FilterBarOrientation.HORIZONTAL}
|
orientation={FilterBarOrientation.HORIZONTAL}
|
||||||
title={SAMPLE_TITLE}
|
title={SAMPLE_TITLE}
|
||||||
description=""
|
description=""
|
||||||
|
overflow
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -88,9 +89,7 @@ test('horizontal mode, title and description', async () => {
|
||||||
const descriptionIcon = screen.getByTestId('divider-description-icon');
|
const descriptionIcon = screen.getByTestId('divider-description-icon');
|
||||||
expect(descriptionIcon).toBeVisible();
|
expect(descriptionIcon).toBeVisible();
|
||||||
userEvent.hover(descriptionIcon);
|
userEvent.hover(descriptionIcon);
|
||||||
const tooltip = await screen.findByRole('tooltip', {
|
const tooltip = await screen.findByRole('tooltip');
|
||||||
name: SAMPLE_DESCRIPTION,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(tooltip).toBeInTheDocument();
|
expect(tooltip).toBeInTheDocument();
|
||||||
expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);
|
expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);
|
||||||
|
|
|
@ -35,7 +35,7 @@ const VerticalDivider = ({ title, description }: FilterDividerProps) => (
|
||||||
const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
|
const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [titleRef, titleIsTruncated] =
|
const [titleRef, titleIsTruncated] =
|
||||||
useCSSTextTruncation<HTMLHeadingElement>(title);
|
useCSSTextTruncation<HTMLHeadingElement>();
|
||||||
|
|
||||||
const tooltipOverlay = (
|
const tooltipOverlay = (
|
||||||
<>
|
<>
|
||||||
|
@ -95,10 +95,10 @@ const HorizontalOverflowDivider = ({
|
||||||
}: FilterDividerProps) => {
|
}: FilterDividerProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [titleRef, titleIsTruncated] =
|
const [titleRef, titleIsTruncated] =
|
||||||
useCSSTextTruncation<HTMLHeadingElement>(title);
|
useCSSTextTruncation<HTMLHeadingElement>();
|
||||||
|
|
||||||
const [descriptionRef, descriptionIsTruncated] =
|
const [descriptionRef, descriptionIsTruncated] =
|
||||||
useCSSTextTruncation<HTMLHeadingElement>(description);
|
useCSSTextTruncation<HTMLHeadingElement>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -36,16 +36,27 @@ export const truncationCSS = css`
|
||||||
* to be displayed, this hook returns a ref to attach to the text
|
* to be displayed, this hook returns a ref to attach to the text
|
||||||
* element and a boolean for whether that element is currently truncated.
|
* element and a boolean for whether that element is currently truncated.
|
||||||
*/
|
*/
|
||||||
const useCSSTextTruncation = <T extends HTMLElement>(
|
const useCSSTextTruncation = <T extends HTMLElement>(): [
|
||||||
text: string,
|
React.RefObject<T>,
|
||||||
): [React.RefObject<T>, boolean] => {
|
boolean,
|
||||||
const ref = useRef<T>(null);
|
] => {
|
||||||
const [isTruncated, setIsTruncated] = useState(true);
|
const [isTruncated, setIsTruncated] = useState(true);
|
||||||
|
const ref = useRef<T>(null);
|
||||||
|
const { offsetWidth, scrollWidth } = ref.current ?? {};
|
||||||
|
const prevWidths = useRef({ offsetWidth, scrollWidth });
|
||||||
|
const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
|
||||||
|
prevWidths.current;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (ref.current) {
|
if (
|
||||||
setIsTruncated(ref.current.offsetWidth < ref.current.scrollWidth);
|
offsetWidth &&
|
||||||
|
scrollWidth &&
|
||||||
|
(offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
|
||||||
|
) {
|
||||||
|
prevWidths.current = { offsetWidth, scrollWidth };
|
||||||
|
setIsTruncated(offsetWidth < scrollWidth);
|
||||||
}
|
}
|
||||||
}, [text]);
|
}, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
|
||||||
|
|
||||||
return [ref, isTruncated];
|
return [ref, isTruncated];
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue