export default function DemoDefault()

in packages-hook/react-hook-mouse-hover/stories/demo-default/index.tsx [35:91]
52 lines of code
6 McCabe index (conditional complexity)

export default function DemoDefault(): JSX.Element {
  const [stateInProtected, setStateInProtected] = useState(false);
  const [stateInUnprotected, setStateInUnprotected] = useState(false);
  const [statePlaying, setStatePlaying] = useState(false);
  
  const handleMouseEnterProtected = useCallback(() => setStateInProtected(true), [setStateInProtected]);
  const handleMouseLeaveProtected = useCallback(() => setStateInProtected(false), [setStateInProtected]);
  
  const handleMouseEnterUnprotected = useCallback(() => setStateInUnprotected(true), [setStateInUnprotected]);
  const handleMouseLeaveUnprotected = useCallback(() => setStateInUnprotected(false), [setStateInUnprotected]);
  
  const handlePlaying = useCallback(() => setStatePlaying(true), [setStatePlaying]);
  const handleClickPlaying = useCallback(() => {
    setStatePlaying(!statePlaying);
  }, [statePlaying, setStatePlaying]);
  
  const [onMouseEnter, onMouseLeave] = useMouseHover({
    onEnter: handleMouseEnterProtected,
    onLeave: handleMouseLeaveProtected
  });
  const [onMouseEnterPlay, onMouseLeavePlay, onActiveChange] = useMouseHover({
    active: statePlaying,
    onEnter: handlePlaying,
    onActiveChange: handleClickPlaying
  });
  
  return <>
    <H1>{pkgInfo.name}@{pkgInfo.version}</H1>
    <Alert type="warning">注意：在 CodeSandbox 下，修改代码，热部署后，hover 会有问题，需要刷新（本地的 Storybook 下没有这个问题）。</Alert>
    <H2>不需要 click</H2>
    <P>无延时保护的 MouseEnter/Leave，鼠标快速经过会频闪；有延时保护的则不会，可以避免不必要的接口请求和界面变化</P>
    <ScSpan {...{
      style: {
        background: stateInUnprotected ? '#0c0' : '#f60'
      },
      onMouseEnter: handleMouseEnterUnprotected,
      onMouseLeave: handleMouseLeaveUnprotected
    }}>延时保护：无</ScSpan>
    <ScSpan {...{
      style: {
        background: stateInProtected ? '#0c0' : '#00c'
      },
      onMouseEnter,
      onMouseLeave
    }}>延时保护：有</ScSpan>
    <H2>配合 active，鼠标移入后延时触发 active（能够被 click 抢先）</H2>
    <P>当前状态：<kbd>{statePlaying ? '播放中' : '暂停'}</kbd>，移入短暂停留将暂停播放，点击切换状态</P>
    <ScActiveButton {...{
      style: {
        background: statePlaying ? '#90f' : '#fc0'
      },
      onMouseEnter: onMouseEnterPlay,
      onMouseLeave: onMouseLeavePlay,
      onClick: onActiveChange
    }}>{statePlaying ? '⏸' : '▶'}</ScActiveButton>
  </>;
}