pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Cody Leff 2022-11-28 04:35:13 -07:00 committed by GitHub
parent 4b96474d6c
commit 93158ea649
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
View File

@ -59,6 +59,7 @@ test('horizontal mode, title', () => {
orientation={FilterBarOrientation.HORIZONTAL}
title={SAMPLE_TITLE}
description=""
overflow
/>,
);
@ -88,9 +89,7 @@ test('horizontal mode, title and description', async () => {
const descriptionIcon = screen.getByTestId('divider-description-icon');
expect(descriptionIcon).toBeVisible();
userEvent.hover(descriptionIcon);
const tooltip = await screen.findByRole('tooltip', {
name: SAMPLE_DESCRIPTION,
});
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toBeInTheDocument();
expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);

6
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
View File

@ -35,7 +35,7 @@ const VerticalDivider = ({ title, description }: FilterDividerProps) => (
const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
const theme = useTheme();
const [titleRef, titleIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(title);
useCSSTextTruncation<HTMLHeadingElement>();
const tooltipOverlay = (
<>
@ -95,10 +95,10 @@ const HorizontalOverflowDivider = ({
}: FilterDividerProps) => {
const theme = useTheme();
const [titleRef, titleIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(title);
useCSSTextTruncation<HTMLHeadingElement>();
const [descriptionRef, descriptionIsTruncated] =
useCSSTextTruncation<HTMLHeadingElement>(description);
useCSSTextTruncation<HTMLHeadingElement>();
return (
<div

25
superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
View File

@ -36,16 +36,27 @@ export const truncationCSS = css`
* to be displayed, this hook returns a ref to attach to the text
* element and a boolean for whether that element is currently truncated.
*/
const useCSSTextTruncation = <T extends HTMLElement>(
text: string,
): [React.RefObject<T>, boolean] => {
const ref = useRef<T>(null);
const useCSSTextTruncation = <T extends HTMLElement>(): [
React.RefObject<T>,
boolean,
] => {
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(() => {
if (ref.current) {
setIsTruncated(ref.current.offsetWidth < ref.current.scrollWidth);
if (
offsetWidth &&
scrollWidth &&
(offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
) {
prevWidths.current = { offsetWidth, scrollWidth };
setIsTruncated(offsetWidth < scrollWidth);
}
}, [text]);
}, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
return [ref, isTruncated];
};