Skip to content

Commit 71e0b1f

Browse files
DarkGeniusDarkGenius
committed
fix(CompositeBar): optimize multiple tooltips
1 parent 751556e commit 71e0b1f

File tree

1 file changed

+106
-60
lines changed

1 file changed

+106
-60
lines changed

‎src/components/CompositeBar/CompositeBar.tsx

Lines changed: 106 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {FC, ReactNode, useCallback, useContext, useRef} from 'react';
22

33
import {List} from '@gravity-ui/uikit';
4+
import debounce from 'lodash/debounce';
45
import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
56

67
import {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';
@@ -23,6 +24,8 @@ import {
2324

2425
import './CompositeBar.scss';
2526

27+
const DEFAULT_DEBOUNCE_INTERVAL = 10;
28+
2629
const b = block('composite-bar');
2730

2831
export type CompositeBarItem = MenuItem | SubheaderMenuItem;
@@ -56,6 +59,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
5659
}) => {
5760
const ref = useRef<List<CompositeBarItem>>(null);
5861
const tooltipRef = useRef<HTMLDivElement>(null);
62+
// const rafId = useRef(null);
5963

6064
const {
6165
setValue: setMultipleTooltipContextValue,
@@ -80,20 +84,28 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
8084
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
8185

8286
const onTooltipMouseEnter = useCallback(
83-
(e: {clientX: number}) => {
84-
if (
85-
multipleTooltip &&
86-
compact &&
87-
!multipleTooltipActive &&
88-
document.hasFocus() &&
89-
activeIndex !== lastClickedItemIndex &&
90-
e.clientX <= ASIDE_HEADER_COMPACT_WIDTH
91-
) {
92-
setMultipleTooltipContextValue?.({
93-
active: true,
94-
});
95-
}
96-
},
87+
debounce(
88+
(e: {clientX: number}) => {
89+
if (
90+
multipleTooltip &&
91+
compact &&
92+
!multipleTooltipActive &&
93+
document.hasFocus() &&
94+
activeIndex !== lastClickedItemIndex &&
95+
e.clientX <= ASIDE_HEADER_COMPACT_WIDTH
96+
) {
97+
console.log(`onTooltipMouseEnter: active=true`);
98+
setMultipleTooltipContextValue?.({
99+
active: true,
100+
});
101+
}
102+
},
103+
DEFAULT_DEBOUNCE_INTERVAL,
104+
{
105+
leading: true,
106+
trailing: false,
107+
},
108+
),
97109
[
98110
multipleTooltip,
99111
compact,
@@ -104,34 +116,56 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
104116
],
105117
);
106118

107-
const onTooltipMouseLeave = useCallback(() => {
108-
if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
109-
setMultipleTooltipContextValue?.({
110-
active: false,
111-
lastClickedItemIndex: undefined,
112-
});
113-
}
114-
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
119+
const onTooltipMouseLeave = useCallback(
120+
debounce(
121+
() => {
122+
if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
123+
console.log(`onTooltipMouseLeave: active=false`);
124+
setMultipleTooltipContextValue?.({
125+
active: false,
126+
lastClickedItemIndex: undefined,
127+
});
128+
}
129+
},
130+
DEFAULT_DEBOUNCE_INTERVAL,
131+
{
132+
leading: true,
133+
trailing: false,
134+
},
135+
),
136+
[multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue],
137+
);
115138

116139
const onMouseEnterByIndex = useCallback(
117-
(itemIndex: number) => () => {
118-
if (multipleTooltip && document.hasFocus()) {
119-
let multipleTooltipActiveValue = multipleTooltipActive;
120-
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
121-
multipleTooltipActiveValue = true;
122-
}
123-
if (
124-
activeIndex === itemIndex &&
125-
multipleTooltipActive === multipleTooltipActiveValue
126-
) {
127-
return;
128-
}
129-
setMultipleTooltipContextValue({
130-
activeIndex: itemIndex,
131-
active: multipleTooltipActiveValue,
132-
});
133-
}
134-
},
140+
(itemIndex: number) =>
141+
debounce(
142+
() => {
143+
console.log(`onMouseEnterByIndex: itemIndex=${itemIndex}`);
144+
if (multipleTooltip && document.hasFocus()) {
145+
let multipleTooltipActiveValue = multipleTooltipActive;
146+
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
147+
multipleTooltipActiveValue = true;
148+
}
149+
if (
150+
activeIndex === itemIndex &&
151+
multipleTooltipActive === multipleTooltipActiveValue
152+
) {
153+
console.log('onMouseEnterByIndex: skip change');
154+
return;
155+
}
156+
console.log(`onMouseEnterByIndex: set active=${itemIndex}`);
157+
setMultipleTooltipContextValue({
158+
activeIndex: itemIndex,
159+
active: multipleTooltipActiveValue,
160+
});
161+
}
162+
},
163+
DEFAULT_DEBOUNCE_INTERVAL,
164+
{
165+
leading: true,
166+
trailing: false,
167+
},
168+
),
135169
[
136170
multipleTooltip,
137171
multipleTooltipActive,
@@ -141,26 +175,37 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
141175
],
142176
);
143177

144-
const onMouseLeave = useCallback(() => {
145-
if (compact && document.hasFocus()) {
146-
ref.current?.activateItem(undefined as unknown as number);
147-
if (
148-
multipleTooltip &&
149-
(activeIndex !== undefined || lastClickedItemIndex !== undefined)
150-
) {
151-
setMultipleTooltipContextValue({
152-
activeIndex: undefined,
153-
lastClickedItemIndex: undefined,
154-
});
155-
}
156-
}
157-
}, [
158-
activeIndex,
159-
compact,
160-
lastClickedItemIndex,
161-
multipleTooltip,
162-
setMultipleTooltipContextValue,
163-
]);
178+
const onMouseLeave = useCallback(
179+
debounce(
180+
() => {
181+
if (compact && document.hasFocus()) {
182+
ref.current?.activateItem(undefined as unknown as number);
183+
if (
184+
multipleTooltip &&
185+
(activeIndex !== undefined || lastClickedItemIndex !== undefined)
186+
) {
187+
console.log('onMouseLeave: deactivate tooltip');
188+
setMultipleTooltipContextValue({
189+
activeIndex: undefined,
190+
lastClickedItemIndex: undefined,
191+
});
192+
}
193+
}
194+
},
195+
DEFAULT_DEBOUNCE_INTERVAL,
196+
{
197+
leading: true,
198+
trailing: false,
199+
},
200+
),
201+
[
202+
activeIndex,
203+
compact,
204+
lastClickedItemIndex,
205+
multipleTooltip,
206+
setMultipleTooltipContextValue,
207+
],
208+
);
164209

165210
const onItemClickByIndex = useCallback(
166211
(itemIndex: number): ItemProps['onItemClick'] =>
@@ -205,6 +250,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
205250
filterable={false}
206251
sortable={false}
207252
renderItem={(item, _isItemActive, itemIndex) => {
253+
// console.log('renderItem: ', itemIndex);
208254
const itemExtraProps = isMenuItem(item) ? {item} : item;
209255
const enableTooltip = isMenuItem(item)
210256
? !multipleTooltip

0 commit comments

Comments
 (0)