chore(ts-js): hooks convert (#1027)

Author: mydearxym

src/hooks/index.js renamed to src/hooks/index.ts

@@ -8,7 +8,6 @@ export { default as useOutsideClick } from './useOutsideClick'
 export { default as useLangPress } from './useLangPress'
 export { default as useTrans } from './useTrans'
 export { default as useDevice } from './useDevice'
-export { default as useHover } from './useHover'
 
 export { default as useNetwork } from 'react-use/lib/useNetwork'
 export { default as useCopyToClipboard } from 'react-use/lib/useCopyToClipboard'

src/hooks/useCustomScroll.js renamed to src/hooks/useCustomScroll.ts

@@ -1,13 +1,30 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, RefObject } from 'react'
 import OverlayScrollbars from 'overlayscrollbars'
 
+type TOption = {
+  className?: string
+  themeCategory?: string
+  scrollbars?: {
+    autoHide?: 'scroll' | 'never' // string
+  }
+  callbacks?: {
+    onScroll?: () => void
+    onScrollStart?: () => void
+    onScrollStop?: () => void
+  }
+  // more callbacks see overlayscrollbars docs
+}
+
 /**
  * options detail see:
  * https://kingsora.github.io/OverlayScrollbars/#!documentation/options
  *
  * @returns
  */
-const useCustomScroll = (ref, option = {}) => {
+const useCustomScroll = (
+  ref: RefObject<HTMLElement>,
+  option: TOption = {},
+): any => {
   const [scrollInstance, setScrollInstance] = useState(null)
 
   useEffect(() => {

src/hooks/useDevice.js renamed to src/hooks/useDevice.ts

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react'
 import { isMobile as detectMobile } from '@/utils'
 
-const useDevice = () => {
+type TDevice = {
+  isMobile: boolean
+}
+
+const useDevice = (): TDevice => {
   const [isMobile, setIsMobile] = useState(false)
 
   useEffect(() => {

src/hooks/useHover.js

@@ -21,7 +21,7 @@ import { useState, useEffect, useCallback } from 'react'
  * @param {number} [ms=500] hold m-sec
  * @returns
  */
-const useLongPress = (callback = () => {}, ms = 500) => {
+const useLongPress = (callback: () => void, ms = 500) => {
   const [startLongPress, setStartLongPress] = useState(false)
 
   useEffect(() => {

src/hooks/useLangPress.js renamed to src/hooks/useLangPress.ts

@@ -1,9 +1,12 @@
-import { useEffect } from 'react'
+import { useEffect, RefObject } from 'react'
 
-const useOutsideClick = (ref, callback) => {
-  const handleClick = (e) => {
+const useOutsideClick = (
+  ref: RefObject<HTMLElement>,
+  callback?: (e) => void,
+): void => {
+  const handleClick = (e): void => {
     if (ref.current && !ref.current.contains(e.target)) {
-      callback(e)
+      callback?.(e)
     }
   }
 

src/hooks/useOutsideClick.js renamed to src/hooks/useOutsideClick.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { merge } from 'ramda'
 
+import type { TPlatform } from '@/spec'
 import { Global } from '@/utils'
 
 const initPlatform = {
@@ -14,12 +15,13 @@ const initPlatform = {
 }
 
 // see https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs/49328524
-const usePlatform = (/* { breakpoint } */) => {
+const usePlatform = (/* { breakpoint } */): TPlatform => {
   const [platform, setPlatform] = useState(initPlatform)
 
   /* eslint-disable */
   useEffect(() => {
     // Firefox 1.0+
+    // @ts-ignore
     const isFirefox = typeof InstallTrigger !== 'undefined'
 
     // Safari 3.0+ "[object HTMLElementConstructor]"
@@ -29,10 +31,12 @@ const usePlatform = (/* { breakpoint } */) => {
         return p.toString() === '[object SafariRemoteNotification]'
       })(
         !Global.safari ||
+          // @ts-ignore
           (typeof safari !== 'undefined' && safari.pushNotification),
       )
 
     // Internet Explorer 6-11
+    // @ts-ignore
     const isIE = /*@cc_on!@*/ false || !!document.documentMode
 
     // Edge 20+
@@ -58,8 +62,6 @@ const usePlatform = (/* { breakpoint } */) => {
         isMobile,
       }),
     )
-
-    return () => {}
   }, [])
 
   return platform

src/hooks/usePlatform.js renamed to src/hooks/usePlatform.ts

@@ -1,12 +1,17 @@
 import { useState, useEffect, useCallback } from 'react'
 
+type TSize = {
+  width?: number
+  height?: number
+}
+
 /**
  * hooks for detect window size
  * see: https://usehooks.com/useWindowSize/ for details
  *
  * @returns
  */
-const useWindowSize = (cb) => {
+const useWindowSize = (cb: (size: TSize) => void): TSize => {
   const isClient = typeof window === 'object'
 
   const getSize = useCallback(() => {
@@ -20,12 +25,12 @@ const useWindowSize = (cb) => {
 
   useEffect(() => {
     if (!isClient) {
-      return false
+      return
     }
 
     const handleResize = () => {
       setWindowSize(getSize())
-      if (cb) cb(getSize())
+      cb?.(getSize())
     }
 
     window.addEventListener('resize', handleResize)

src/hooks/useResize.js renamed to src/hooks/useResize.ts

@@ -2,7 +2,9 @@ import { useState, useEffect } from 'react'
 
 const cachedScripts = []
 
-const useScript = (src) => {
+type TLoadState = boolean
+
+const useScript = (src: string): TLoadState[] => {
   // Keeping track of script loaded and error state
   const [state, setState] = useState({
     loaded: false,

src/hooks/useScript.js renamed to src/hooks/useScript.ts

@@ -3,37 +3,46 @@ import { merge } from 'ramda'
 
 import { debounce } from '@/utils'
 
+type TScrollState = {
+  direction: string
+  scrollPos: number
+}
+
 const initState = {
   direction: 'up', // 'down'
   scrollPos: 0,
 }
 
 // detect the scroll direction
 // see https://codepen.io/lehollandaisvolant/pen/ryrrGx?editors=1010
-const useScroll = (cb) => {
+const useScroll = (cb: () => void): TScrollState => {
   const [scroll, setScroll] = useState(initState)
 
   /* eslint-disable */
   useEffect(() => {
     // adding scroll event
     let scrollPos = scroll.scrollPos
-    const handleScroll = debounce(function () {
-      // detects new state and compares it with the new one
-      let direction =
-        document.body.getBoundingClientRect().top > scrollPos ? 'up' : 'down'
-
-      // saves the new position for iteration.
-      scrollPos = document.body.getBoundingClientRect().top
-
-      if (cb) cb()
-
-      setScroll(
-        merge(initState, {
-          direction,
-          scrollPos,
-        }),
-      )
-    }, 50)
+    const handleScroll = debounce(
+      () => {
+        // detects new state and compares it with the new one
+        let direction =
+          document.body.getBoundingClientRect().top > scrollPos ? 'up' : 'down'
+
+        // saves the new position for iteration.
+        scrollPos = document.body.getBoundingClientRect().top
+
+        cb?.()
+
+        setScroll(
+          merge(initState, {
+            direction,
+            scrollPos,
+          }),
+        )
+      },
+      50,
+      true,
+    )
 
     window.addEventListener('scroll', handleScroll)