Skip to content

Commit c42c3b4

Browse files
WesSouzaarturbien
WesSouza
authored and
arturbien
committed
docs(tooltip): categorize under Controls
1 parent f10e7fe commit c42c3b4

File tree

3 files changed

+124
-149
lines changed

3 files changed

+124
-149
lines changed

‎src/Tooltip/Tooltip.mdx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/Tooltip/Tooltip.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
99
`;
1010

1111
export default {
12-
title: 'Tooltip',
12+
title: 'Controls/Tooltip',
1313
component: Tooltip,
1414
decorators: [story => <Wrapper>{story()}</Wrapper>]
1515
} as ComponentMeta<typeof Tooltip>;

‎src/Tooltip/Tooltip.tsx‎

Lines changed: 123 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -68,126 +68,130 @@ const Wrapper = styled.div`
6868
white-space: nowrap;
6969
`;
7070

71-
const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip(
72-
{
73-
className,
74-
children,
75-
disableFocusListener = false,
76-
disableMouseListener = false,
77-
enterDelay = 1000,
78-
leaveDelay = 0,
79-
onBlur,
80-
onClose,
81-
onFocus,
82-
onMouseEnter,
83-
onMouseLeave,
84-
onOpen,
85-
style,
86-
text,
87-
position = 'top',
88-
...otherProps
89-
},
90-
ref
91-
) {
92-
const [show, setShow] = useState(false);
93-
const [openTimer, setOpenTimer] = useState<number>();
94-
const [closeTimer, setCloseTimer] = useState<number>();
95-
96-
const isUsingFocus = !disableFocusListener;
97-
const isUsingMouse = !disableMouseListener;
98-
99-
const handleOpen = (
100-
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
101-
) => {
102-
window.clearTimeout(openTimer);
103-
window.clearTimeout(closeTimer);
104-
105-
const timer = window.setTimeout(() => {
106-
setShow(true);
107-
108-
onOpen?.(event);
109-
}, enterDelay);
110-
111-
setOpenTimer(timer);
112-
};
113-
114-
const handleEnter = (
115-
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
116-
) => {
117-
event.persist();
118-
119-
if (isReactFocusEvent(event)) {
120-
onFocus?.(event);
121-
} else if (isReactMouseEvent(event)) {
122-
onMouseEnter?.(event);
123-
}
124-
125-
handleOpen(event);
126-
};
127-
128-
const handleClose = (
129-
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
130-
) => {
131-
window.clearTimeout(openTimer);
132-
window.clearTimeout(closeTimer);
133-
134-
const timer = window.setTimeout(() => {
135-
setShow(false);
136-
137-
onClose?.(event);
138-
}, leaveDelay);
139-
140-
setCloseTimer(timer);
141-
};
142-
143-
const handleLeave = (
144-
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
71+
const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
72+
(
73+
{
74+
className,
75+
children,
76+
disableFocusListener = false,
77+
disableMouseListener = false,
78+
enterDelay = 1000,
79+
leaveDelay = 0,
80+
onBlur,
81+
onClose,
82+
onFocus,
83+
onMouseEnter,
84+
onMouseLeave,
85+
onOpen,
86+
style,
87+
text,
88+
position = 'top',
89+
...otherProps
90+
},
91+
ref
14592
) => {
146-
event.persist();
147-
148-
if (isReactFocusEvent(event)) {
149-
onBlur?.(event);
150-
} else if (isReactMouseEvent(event)) {
151-
onMouseLeave?.(event);
152-
}
153-
154-
handleClose(event);
155-
};
156-
157-
// set callbacks for onBlur and onFocus, unless disableFocusListener is true
158-
const blurCb = isUsingFocus ? handleLeave : undefined;
159-
const focusCb = isUsingFocus ? handleEnter : undefined;
160-
161-
// set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true
162-
const mouseEnterCb = isUsingMouse ? handleEnter : undefined;
163-
const mouseLeaveCb = isUsingMouse ? handleLeave : undefined;
164-
165-
// set the wrapper's tabIndex for focus events, unless disableFocusListener is true
166-
const tabIndex = isUsingFocus ? 0 : undefined;
167-
168-
return (
169-
<Wrapper
170-
data-testid='tooltip-wrapper'
171-
onBlur={blurCb}
172-
onFocus={focusCb}
173-
onMouseEnter={mouseEnterCb}
174-
onMouseLeave={mouseLeaveCb}
175-
tabIndex={tabIndex}
176-
>
177-
<Tip
178-
className={className}
179-
data-testid='tooltip'
180-
position={position}
181-
ref={ref}
182-
show={show}
183-
style={style}
184-
{...otherProps}
93+
const [show, setShow] = useState(false);
94+
const [openTimer, setOpenTimer] = useState<number>();
95+
const [closeTimer, setCloseTimer] = useState<number>();
96+
97+
const isUsingFocus = !disableFocusListener;
98+
const isUsingMouse = !disableMouseListener;
99+
100+
const handleOpen = (
101+
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
102+
) => {
103+
window.clearTimeout(openTimer);
104+
window.clearTimeout(closeTimer);
105+
106+
const timer = window.setTimeout(() => {
107+
setShow(true);
108+
109+
onOpen?.(event);
110+
}, enterDelay);
111+
112+
setOpenTimer(timer);
113+
};
114+
115+
const handleEnter = (
116+
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
117+
) => {
118+
event.persist();
119+
120+
if (isReactFocusEvent(event)) {
121+
onFocus?.(event);
122+
} else if (isReactMouseEvent(event)) {
123+
onMouseEnter?.(event);
124+
}
125+
126+
handleOpen(event);
127+
};
128+
129+
const handleClose = (
130+
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
131+
) => {
132+
window.clearTimeout(openTimer);
133+
window.clearTimeout(closeTimer);
134+
135+
const timer = window.setTimeout(() => {
136+
setShow(false);
137+
138+
onClose?.(event);
139+
}, leaveDelay);
140+
141+
setCloseTimer(timer);
142+
};
143+
144+
const handleLeave = (
145+
event: React.FocusEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>
146+
) => {
147+
event.persist();
148+
149+
if (isReactFocusEvent(event)) {
150+
onBlur?.(event);
151+
} else if (isReactMouseEvent(event)) {
152+
onMouseLeave?.(event);
153+
}
154+
155+
handleClose(event);
156+
};
157+
158+
// set callbacks for onBlur and onFocus, unless disableFocusListener is true
159+
const blurCb = isUsingFocus ? handleLeave : undefined;
160+
const focusCb = isUsingFocus ? handleEnter : undefined;
161+
162+
// set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true
163+
const mouseEnterCb = isUsingMouse ? handleEnter : undefined;
164+
const mouseLeaveCb = isUsingMouse ? handleLeave : undefined;
165+
166+
// set the wrapper's tabIndex for focus events, unless disableFocusListener is true
167+
const tabIndex = isUsingFocus ? 0 : undefined;
168+
169+
return (
170+
<Wrapper
171+
data-testid='tooltip-wrapper'
172+
onBlur={blurCb}
173+
onFocus={focusCb}
174+
onMouseEnter={mouseEnterCb}
175+
onMouseLeave={mouseLeaveCb}
176+
tabIndex={tabIndex}
185177
>
186-
{text}
187-
</Tip>
188-
{children}
189-
</Wrapper>
190-
);
191-
});
178+
<Tip
179+
className={className}
180+
data-testid='tooltip'
181+
position={position}
182+
ref={ref}
183+
show={show}
184+
style={style}
185+
{...otherProps}
186+
>
187+
{text}
188+
</Tip>
189+
{children}
190+
</Wrapper>
191+
);
192+
}
193+
);
194+
195+
Tooltip.displayName = 'Tooltip';
192196

193197
export { Tooltip, TooltipProps };

0 commit comments

Comments
 (0)