refactor: use hooks in Hover

ljl11 · Jan 26, 2022 · 74f9400 · 74f9400
1 parent 56db346
commit 74f9400
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 32 deletions.
diff --git a/packages/griffith/src/components/Hover.tsx b/packages/griffith/src/components/Hover.tsx
@@ -1,39 +1,33 @@
 import React from 'react'
-import {sequence} from 'griffith-utils'
-import noop from 'lodash/noop'
+import useBoolean from '../hooks/useBoolean'
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: (isHover: boolean) => React.ReactElement
 }
 
-type State = {
-  isHovered: boolean
-}
-
-export default class Hover extends React.Component<Props, State> {
-  state = {
-    isHovered: false,
-  }
-
-  handlePointerEnter = () => {
-    this.setState({isHovered: true})
-  }
+const Hover: React.FC<Props> = ({
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}) => {
+  const [isHovered, isHoveredSwitch] = useBoolean()
 
-  handlePointerLeave = () => {
-    this.setState({isHovered: false})
-  }
-
-  render() {
-    const {onMouseEnter, onMouseLeave, children, ...rest} = this.props
-    const {isHovered} = this.state
-    return (
-      <div
-        {...rest}
-        onMouseEnter={sequence(this.handlePointerEnter, onMouseEnter || noop)}
-        onMouseLeave={sequence(this.handlePointerLeave, onMouseLeave || noop)}
-      >
-        {children(isHovered)}
-      </div>
-    )
-  }
+  return (
+    <div
+      {...rest}
+      onMouseEnter={(e) => {
+        isHoveredSwitch.on()
+        onMouseEnter?.(e)
+      }}
+      onMouseLeave={(e) => {
+        isHoveredSwitch.off()
+        onMouseLeave?.(e)
+      }}
+    >
+      {children(isHovered)}
+    </div>
+  )
 }
+
+export default Hover
diff --git a/packages/griffith/src/components/items/FullScreenButtonItem.tsx b/packages/griffith/src/components/items/FullScreenButtonItem.tsx
@@ -14,7 +14,7 @@ const FullScreenButtonItem: React.FC<{
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isFullScreen, onClick}) => (
   <Hover className={css(styles.menuContainer)}>
-    {(isFullScreenHovered: any) => (
+    {(isFullScreenHovered) => (
       <>
         <ControllerButton
           icon={isFullScreen ? icons.smallscreen : icons.fullscreen}