fix(backtop & menu): lint, code simplification, deprecated pageYOffset removed

src/packages/backtop/__test__/backtop.spec.tsx

@@ -8,21 +8,19 @@ import BackTop from '@/packages/backtop'
 test('backtop props test', () => {
   const handleClick = vi.fn()
   const { container } = render(
-    <BackTop
-      target="target"
-      threshold={200}
-      style={{
-        right: '20px',
-        bottom: '50px',
-      }}
-      onClick={handleClick}
-    />
+    <div id="target" style={{ height: '100vh' }}>
+      {new Array(24).fill(0).map((_, index) => {
+        return <div key={index}>我是测试数据{index}</div>
+      })}
+      <BackTop
+        target="target"
+        className="backtop-button"
+        onClick={handleClick}
+      />
+    </div>
   )
-  expect(container.querySelector('.nut-backtop')).toHaveAttribute(
-    'style',
-    'z-index: 900; right: 20px; bottom: 50px;'
-  )
-  fireEvent.click(container)
+  const chooseTagEle = container.querySelectorAll('.backtop-button')[0]
+  fireEvent.click(chooseTagEle)
   expect(handleClick).toBeCalled
 })
 

src/packages/backtop/backtop.taro.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState } from 'react'
+import React, { FunctionComponent, useState, useCallback } from 'react'
 import type { MouseEvent } from 'react'
 import { usePageScroll, pageScrollTo } from '@tarojs/taro'
 import { Top } from '@nutui/icons-react-taro'
@@ -28,26 +28,25 @@ export const BackTop: FunctionComponent<
     ...defaultProps,
     ...props,
   }
-
   const classPrefix = 'nut-backtop'
-
-  const [backTop, SetBackTop] = useState(false)
-
+  const [backTop, setBackTop] = useState(false)
+  const cls = classNames(classPrefix, { show: backTop }, className)
   // 监听用户滑动页面事件
-  usePageScroll((res) => {
-    const { scrollTop } = res
-    scrollTop >= threshold ? SetBackTop(true) : SetBackTop(false)
-  })
-
-  // 返回顶部点击事件
+  const handleScroll = useCallback(
+    (res: { scrollTop: number }) => {
+      const { scrollTop } = res
+      setBackTop(scrollTop >= threshold)
+    },
+    [threshold]
+  )
+  usePageScroll(handleScroll)
   const goTop = (e: MouseEvent<HTMLDivElement>) => {
     onClick && onClick(e)
     pageScrollTo({
       scrollTop: 0,
       duration: duration > 0 ? duration : 0,
     })
   }
-
   const styles =
     Object.keys(style || {}).length !== 0
       ? {
@@ -59,21 +58,8 @@ export const BackTop: FunctionComponent<
           bottom: '20px',
           zIndex,
         }
-
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          show: backTop,
-        },
-        className
-      )}
-      style={styles}
-      onClick={(e) => {
-        goTop(e)
-      }}
-    >
+    <div className={cls} style={styles} onClick={(e) => goTop(e)}>
       {children || <Top size={19} className="nut-backtop-main" />}
     </div>
   )

src/packages/backtop/backtop.tsx

@@ -1,13 +1,17 @@
-import React, { FunctionComponent, useEffect, useState, useRef } from 'react'
+import React, {
+  FunctionComponent,
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+} from 'react'
 import type { MouseEvent } from 'react'
 import { Top } from '@nutui/icons-react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import requestAniFrame from '@/utils/raf'
+import requestAniFrame, { cancelRaf } from '@/utils/raf'
 import { useRtl } from '@/packages/configprovider'
 
-declare const window: any
-
 export interface BackTopProps extends BasicComponent {
   target: string
   threshold: number
@@ -46,33 +50,37 @@
   const [backTop, SetBackTop] = useState(false)
   const [scrollTop, SetScrollTop] = useState(0)
   let startTime = 0
-  const scrollEl: any = useRef<any>(null)
-  useEffect(() => {
-    init()
-    return () => removeEventListener()
-  }, [])
+  const scrollEl = useRef<any>(null)
+  const cls = classNames(classPrefix, { show: backTop }, className)
+
+  const scrollListener = useCallback(() => {
+    let top = null
+    if (scrollEl.current instanceof Window) {
+      top = scrollEl.current.scrollY
+    } else {
+      top = scrollEl.current?.scrollTop
+    }
+    SetScrollTop(top)
+    SetBackTop(top >= threshold)
+  }, [threshold])
 
-  const init = () => {
+  const init = useCallback(() => {
     if (target && document.getElementById(target)) {
-      scrollEl.current = document.getElementById(target) as HTMLElement | Window
+      scrollEl.current = document.getElementById(target)
     } else {
       scrollEl.current = window
     }
-    addEventListener()
-    initCancelAniFrame()
-  }
-  const scrollListener = () => {
-    let top: any = null
-    if (scrollEl.current instanceof Window) {
-      top = scrollEl.current.pageYOffset
-      SetScrollTop(top)
-    } else {
-      top = scrollEl.current.scrollTop
-      SetScrollTop(top)
+    scrollEl.current?.addEventListener('scroll', scrollListener, false)
+    scrollEl.current?.addEventListener('resize', scrollListener, false)
+  }, [target, scrollListener])
+
+  useEffect(() => {
+    init()
+    return () => {
+      scrollEl.current?.removeEventListener('scroll', scrollListener, false)
+      scrollEl.current?.removeEventListener('resize', scrollListener, false)
     }
-    const showBtn = top >= threshold
-    SetBackTop(showBtn)
-  }
+  }, [init, scrollListener])
 
   const scroll = (y = 0) => {
     if (scrollEl.current instanceof Window) {
@@ -90,29 +98,14 @@
       scroll(y)
       cid = requestAniFrame(fn)
       if (t === duration || y === 0) {
-        window.cancelAnimationFrame(cid)
+        cancelRaf(cid)
       }
     })
   }
 
-  const initCancelAniFrame = () => {
-    window.cancelAnimationFrame = window.webkitCancelAnimationFrame
-  }
-
-  function addEventListener() {
-    scrollEl.current?.addEventListener('scroll', scrollListener, false)
-    scrollEl.current?.addEventListener('resize', scrollListener, false)
-  }
-
-  function removeEventListener() {
-    scrollEl.current?.removeEventListener('scroll', scrollListener, false)
-    scrollEl.current?.removeEventListener('resize', scrollListener, false)
-  }
-
   const goTop = (e: MouseEvent<HTMLDivElement>) => {
     onClick && onClick(e)
-    const otime = +new Date()
-    startTime = otime
+    startTime = +new Date()
     duration > 0 ? scrollAnimation() : scroll()
   }
 
@@ -129,19 +122,7 @@
         }
 
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          show: backTop,
-        },
-        className
-      )}
-      style={styles}
-      onClick={(e) => {
-        goTop(e)
-      }}
-    >
+    <div className={cls} style={styles} onClick={(e) => goTop(e)}>
       {children || <Top width={19} height={19} className="nut-backtop-main" />}
     </div>
   )

src/packages/menu/menu.taro.tsx

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { ArrowDown, ArrowUp } from '@nutui/icons-react-taro'
 import { OptionItem, MenuItem } from '@/packages/menuitem/menuitem.taro'
@@ -53,29 +59,33 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
     ...props,
   }
   const menuRef = useRef(null)
+  const [showMenuItem, setShowMenuItem] = useState<boolean[]>([])
+  const [menuItemTitle, setMenuItemTitle] = useState<string[]>([])
   const [isScrollFixed, setIsScrollFixed] = useState(false)
+  const cls = classNames(`nut-menu`, className, {
+    'scroll-fixed': isScrollFixed,
+  })
 
   const getScrollTop = (el: Element | Window) => {
-    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset)
+    return Math.max(
+      0,
+      el === window ? window.scrollY : (el as Element).scrollTop
+    )
   }
-  const onScroll = () => {
-    const { scrollFixed } = props
-
+  const onScroll = useCallback(() => {
     const scrollTop = getScrollTop(window)
     const isFixed =
       scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed))
     setIsScrollFixed(isFixed)
-  }
+  }, [scrollFixed])
 
   useEffect(() => {
     if (scrollFixed) {
       window.addEventListener('scroll', onScroll)
     }
     return () => window.removeEventListener('scroll', onScroll)
-  }, [])
+  }, [scrollFixed, onScroll])
 
-  const [showMenuItem, setShowMenuItem] = useState<boolean[]>([])
-  const [menuItemTitle, setMenuItemTitle] = useState<string[]>([])
   const toggleMenuItem: MenuCallBackFunction = (index, from = 'NORMAL') => {
     showMenuItem[index] = !showMenuItem[index]
     if (showMenuItem[index]) {
@@ -97,7 +107,6 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
     menuItemTitle[index] = text
     setMenuItemTitle([...menuItemTitle])
   }
-
   const cloneChildren = () => {
     return React.Children.map(children, (child, index) => {
       return React.cloneElement(child as any, {
@@ -179,13 +188,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
     })
   }
   return (
-    <div
-      {...rest}
-      className={classNames(`nut-menu`, className, {
-        'scroll-fixed': isScrollFixed,
-      })}
-      ref={menuRef}
-    >
+    <div {...rest} className={cls} ref={menuRef}>
       <div
         className={classNames('nut-menu-bar', {
           opened: showMenuItem.includes(true),

src/packages/menu/menu.tsx

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { ArrowDown, ArrowUp } from '@nutui/icons-react'
 import { OptionItem, MenuItem } from '@/packages/menuitem/menuitem'
@@ -53,29 +59,30 @@
     ...props,
   }
   const menuRef = useRef(null)
+  const [showMenuItem, setShowMenuItem] = useState<boolean[]>([])
+  const [menuItemTitle, setMenuItemTitle] = useState<string[]>([])
   const [isScrollFixed, setIsScrollFixed] = useState(false)
+  const cls = classNames(`nut-menu`, className, {
+    'scroll-fixed': isScrollFixed,
+  })
 
   const getScrollTop = (el: Element | Window) => {
-    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset)
+    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.scrollY)
   }
-  const onScroll = () => {
-    const { scrollFixed } = props
-
+  const onScroll = useCallback(() => {
     const scrollTop = getScrollTop(window)
     const isFixed =
       scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed))
     setIsScrollFixed(isFixed)
-  }
+  }, [scrollFixed])
 
   useEffect(() => {
     if (scrollFixed) {
       window.addEventListener('scroll', onScroll)
     }
     return () => window.removeEventListener('scroll', onScroll)
-  }, [])
+  }, [scrollFixed, onScroll])
 
-  const [showMenuItem, setShowMenuItem] = useState<boolean[]>([])
-  const [menuItemTitle, setMenuItemTitle] = useState<string[]>([])
   const toggleMenuItem: MenuCallBackFunction = (index, from = 'NORMAL') => {
     showMenuItem[index] = !showMenuItem[index]
     if (showMenuItem[index]) {
@@ -180,13 +187,7 @@
     })
   }
   return (
-    <div
-      {...rest}
-      className={classNames(`nut-menu`, className, {
-        'scroll-fixed': isScrollFixed,
-      })}
-      ref={menuRef}
-    >
+    <div {...rest} className={cls} ref={menuRef}>
       <div
         className={classNames('nut-menu-bar', {
           opened: showMenuItem.includes(true),

src/utils/raf.ts

@@ -2,7 +2,7 @@ export const inBrowser = typeof window !== 'undefined'
 
 // 防频
 function requestAniFrame() {
-  if (typeof window !== 'undefined') {
+  if (inBrowser) {
     const _window = window as any
     return (
       _window.requestAnimationFrame ||
@@ -19,7 +19,8 @@ function requestAniFrame() {
 
 export function cancelRaf(id: number) {
   if (inBrowser) {
-    cancelAnimationFrame(id)
+    const _window = window as any
+    ;(_window.cancelAnimationFrame || _window.webkitCancelAnimationFrame)(id)
   } else {
     clearTimeout(id)
   }