Recompose: withHandlers and clearTimeout

[sergiop]

Hi, I need a help with withHandlers hoc. I'm trying to handle a delayed action onMouseEnter with this code. The problem is that clearTimeout(show); doesn't work. Where I'm wrong? Thanks for the help!

<div
  onMouseEnter={() => handleTooltipVisibility('enter')}
  onMouseLeave={() => handleTooltipVisibility('leave')}
>

withHandlers({
  handleTooltipVisibility: props => (action) => {
    const show = () => setTimeout(() => props.setShowTooltip(true), 1000);
    clearTimeout(show);

    if (action === 'enter') {
      show();
    }
    if (action === 'leave') {
      props.setShowTooltip(false);
    }
  },
}),

[deepsweet]

You can use withHandlers as a factory:

withHandlers(
  ({ showTooltip, hideTooltip }) => {
    let timeout = null

    return {
      onMouseEnter: () => () => {
        timeout = setTimeout(showTooltip, 1000)
      },
      onMouseLeave: () => () => {
        clearTimeout(timeout)
        hideTooltip()
      }
    }
  }
)

[sergiop]

Thanks @deepsweet, it works!