variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX tweak for tooltips

Browse source
This commit is contained in:
Aria Minaei 2021-08-20 20:58:02 +02:00
parent f0d450e9dc
commit c5254c3e6b
2 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
View file

@ -46,11 +46,12 @@ const TooltipContext: React.FC<{}> = ({children}) => {
const set = useMemo(() => { const set = useMemo(() => {
let lastTimeout: NodeJS.Timeout | undefined = undefined let lastTimeout: NodeJS.Timeout | undefined = undefined
return (id: number, delay: number) => { return (id: number, delay: number) => {
const overridingPreviousTimeout = lastTimeout !== undefined
if (lastTimeout !== undefined) { if (lastTimeout !== undefined) {
clearTimeout(lastTimeout) clearTimeout(lastTimeout)
lastTimeout = undefined lastTimeout = undefined
} }
if (delay === 0) { if (delay === 0 || overridingPreviousTimeout) {
currentTooltipId.set(id) currentTooltipId.set(id)
} else { } else {
lastTimeout = setTimeout(() => { lastTimeout = setTimeout(() => {

8
theatre/studio/src/uiComponents/Popover/useTooltip.tsx
View file

@ -10,7 +10,7 @@ import {PortalContext} from 'reakit'
import noop from '@theatre/shared/utils/noop' import noop from '@theatre/shared/utils/noop'
export default function useTooltip( export default function useTooltip(
opts: {enabled?: boolean; delay?: number}, opts: {enabled?: boolean; enterDelay?: number; exitDelay?: number},
render: () => React.ReactElement, render: () => React.ReactElement,
): [ ): [
node: React.ReactNode, node: React.ReactNode,
@ -32,8 +32,8 @@ export default function useTooltip(
const target = targetRef.current const target = targetRef.current
if (!target) return if (!target) return
const onMouseEnter = () => setIsOpen(true, opts.delay ?? 200) const onMouseEnter = () => setIsOpen(true, opts.enterDelay ?? 400)
const onMouseLeave = () => setIsOpen(false, opts.delay ?? 200) const onMouseLeave = () => setIsOpen(false, opts.exitDelay ?? 200)
target.addEventListener('mouseenter', onMouseEnter) target.addEventListener('mouseenter', onMouseEnter)
target.addEventListener('mouseleave', onMouseLeave) target.addEventListener('mouseleave', onMouseLeave)
@ -42,7 +42,7 @@ export default function useTooltip(
target.removeEventListener('mouseenter', onMouseEnter) target.removeEventListener('mouseenter', onMouseEnter)
target.removeEventListener('mouseleave', onMouseLeave) target.removeEventListener('mouseleave', onMouseLeave)
} }
}, [targetRef, enabled, opts.delay]) }, [targetRef, enabled, opts.enterDelay, opts.exitDelay])
const portalLayer = useContext(PortalContext) const portalLayer = useContext(PortalContext)