fix: lint

src/packages/animatingnumbers/countup.taro.tsx

@@ -2,6 +2,7 @@ import React, {
   CSSProperties,
   FunctionComponent,
   useEffect,
+  useCallback,
   useRef,
   useState,
 } from 'react'
@@ -40,7 +41,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
   const timerRef = useRef(0)
   const numbers = Array.from({ length: 10 }, (v, i) => i)
 
-  const getShowNumber = () => {
+  const getShowNumber = useCallback(() => {
     const splitArr = value.split('.')
     const intNumber =
       length && splitArr[0].length < length
@@ -50,16 +51,16 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
       thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber
     }${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`
     return currNumber.split('')
-  }
+  }, [length, thousands, value])
 
   const [numerArr, setNumerArr] = useState<string[]>([])
 
   const [transformArr, setTransformArr] = useState<Array<string>>([])
   const isLoaded = useRef(false)
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current && numerArr.length) {
-      const query = createSelectorQuery()
+      createSelectorQuery()
         .selectAll('.nut-countup-listitem')
         .node((numberItems: any) => {
           const transformArrCache: string[] = []
@@ -79,7 +80,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         })
         .exec()
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle = (idx: number) => {
     return {
@@ -90,7 +91,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   useEffect(() => {
     setNumberTransform()
-  }, [numerArr])
+  }, [numerArr, setNumberTransform])
 
   useEffect(() => {
     if (!isLoaded.current) {
@@ -104,7 +105,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [value])
+  }, [value, delay, getShowNumber])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>

src/packages/animatingnumbers/countup.tsx

@@ -1,6 +1,7 @@
 import React, {
   CSSProperties,
   FunctionComponent,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -53,7 +54,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   const numerArr = useMemo(getShowNumber, [value, length, thousands])
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current) {
       const numberItems = countupRef.current.querySelectorAll(
         '.nut-countup-number'
@@ -72,7 +73,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         }
       })
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle: CSSProperties = {
     transition: `transform ${duration}s ease-in-out`,
@@ -85,7 +86,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [numerArr])
+  }, [numerArr, delay, setNumberTransform])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>

src/packages/audio/audio.taro.tsx

@@ -97,14 +97,13 @@ export const Audio: FunctionComponent<
       onPlayEnd?.(audioCtx)
     }
   })
-
   audioCtx.onPlay(() => {
     const { duration } = audioCtx
     setTotalSeconds(Math.floor(duration))
     onPlay?.(audioCtx)
   })
   audioCtx.onCanplay(() => {
-    const intervalID = setInterval(function () {
+    const intervalID = setInterval(() => {
       if (audioCtx.duration !== 0) {
         setTotalSeconds(audioCtx.duration)
         clearInterval(intervalID)
@@ -122,8 +121,7 @@ export const Audio: FunctionComponent<
   })
 
   audioCtx.onError((res) => {
-    console.warn('code', res.errCode)
-    console.warn('message', res.errMsg)
+    console.warn('onError', res.errCode, res.errMsg)
   })
 
   function formatSeconds(value: string) {

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -156,10 +156,10 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
   })
 
   useEffect(() => {
-    setCanvasAll({
+    setCanvasAll((canvasAll) => ({
       ...canvasAll,
       cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId),
-    })
+    }))
   }, [])
 
   // 触摸
@@ -174,7 +174,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
-  }, [pixelRatio, state.cropperWidth])
+  }, [pixelRatio, state.cropperWidth, shape])
 
   // 是否是横向
   const isAngle = useMemo(() => {
@@ -260,7 +260,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       // 绘制图片
       ctx.drawImage(src as HTMLImageElement, x, y, width, height)
     },
-    [drawImage, state]
+    [drawImage, state, pixelRatio, space]
   )
 
   // web绘制
@@ -277,7 +277,12 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     canvas.height = state.displayHeight
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas2dDraw(ctx)
-  }, [canvas2dDraw])
+  }, [
+    canvas2dDraw,
+    canvasAll.canvasId,
+    state.displayWidth,
+    state.displayHeight,
+  ])
 
   const alipayDraw = useCallback(() => {
     const ctx = canvasAll.cropperCanvas.getContext(
@@ -337,7 +342,15 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     // 绘制图片
     ctx.drawImage(src as string, x, y, width, height)
     ctx.draw()
-  }, [drawImage, state.scale, state.angle, state.moveX, state.moveY])
+  }, [
+    drawImage,
+    state,
+    canvasAll,
+    space,
+    alipayDraw,
+    showAlipayCanvas2D,
+    webDraw,
+  ])
 
   useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {

src/packages/avatarcropper/avatarcropper.tsx

@@ -115,7 +115,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
-  }, [devicePixelRatio, drawImage.swidth])
+  }, [devicePixelRatio, drawImage.swidth, shape])
 
   // 是否是横向
   const isAngle = useMemo(() => {

src/packages/button/button.taro.tsx

@@ -93,7 +93,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {

src/packages/button/button.tsx

@@ -86,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {

src/packages/collapseitem/collapseitem.taro.tsx

@@ -6,6 +6,7 @@ import React, {
   useContext,
   useRef,
   useMemo,
+  useCallback,
 } from 'react'
 import classNames from 'classnames'
 import { createSelectorQuery } from '@tarojs/taro'
@@ -62,13 +63,13 @@ export const CollapseItem: FunctionComponent<
       return context.isOpen(name)
     }
     return false
-  }, [name, context.isOpen])
+  }, [name, context])
 
   const iconStyle = useMemo(() => {
     return expanded
       ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` }
       : { transform: 'translateY(-50%)' }
-  }, [expanded, rotate])
+  }, [expanded, rotate, context.rotate])
 
   const handleClick = () => {
     if (!disabled) {
@@ -102,7 +103,7 @@ export const CollapseItem: FunctionComponent<
         }
       })
     }, 200)
-  }, [children])
+  }, [children, target])
 
   useEffect(() => {
     setTimeout(() => {
@@ -112,9 +113,9 @@ export const CollapseItem: FunctionComponent<
         }
       })
     }, 100)
-  }, [])
+  }, [target])
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     // 连续切换状态时，清除打开的后续操作
     if (timer) {
       clearTimeout(timer)
@@ -134,7 +135,7 @@ export const CollapseItem: FunctionComponent<
         setTimer(timer)
       }
     }, 100)
-  }
+  }, [currentHeight, expanded, timer])
 
   const init = useRef(true)
 

src/packages/collapseitem/collapseitem.tsx

@@ -5,6 +5,7 @@ import React, {
   useContext,
   useRef,
   useMemo,
+  useCallback,
 } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -58,13 +59,13 @@ export const CollapseItem: FunctionComponent<
       return context.isOpen(name)
     }
     return false
-  }, [name, context.isOpen])
+  }, [name, context])
 
   const iconStyle = useMemo(() => {
     return expanded
       ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` }
       : { transform: 'translateY(-50%)' }
-  }, [expanded, rotate])
+  }, [expanded, rotate, context.rotate])
 
   const handleClick = () => {
     if (!disabled) {
@@ -85,7 +86,7 @@ export const CollapseItem: FunctionComponent<
     return height ? `${height}px` : ''
   }
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     const start = expanded ? '0px' : getOffsetHeight()
     if (wrapperRef.current) {
       wrapperRef.current.style.height = start
@@ -98,7 +99,8 @@ export const CollapseItem: FunctionComponent<
         }
       })
     })
-  }
+  }, [expanded])
+
   const init = useRef(true)
 
   useEffect(() => {
@@ -110,7 +112,7 @@ export const CollapseItem: FunctionComponent<
     } else {
       toggle()
     }
-  }, [expanded])
+  }, [expanded, toggle])
 
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>

src/packages/countdown/countdown.tsx

@@ -273,7 +273,7 @@ const InternalCountDown: ForwardRefRenderFunction<
       stateRef.current.isIninted = true
     }
     return componentWillUnmount
-  }, [])
+  }, [autoStart, time])
 
   const componentWillUnmount = () => {
     destroy && cancelAnimationFrame(stateRef.current.timer)

src/packages/image/image.tsx

@@ -192,7 +192,7 @@ export const Image: FunctionComponent<
       return <div className="nut-img-error">{error}</div>
     }
     return null
-  }, [error, isError])
+  }, [error, isError, innerLoading])
 
   const renderLoading = useCallback(() => {
     if (!loading) return null

src/packages/inputnumber/inputnumber.taro.tsx

@@ -130,14 +130,14 @@ export const InputNumber: FunctionComponent<
       setShadowValue(bound(Number(shadowValue), Number(min), Number(max)))
       setInputValue(format(shadowValue))
     }
-  }, [focused, shadowValue])
+  }, [focused, shadowValue, async, min, max])
 
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
       setInputValue(format(value))
     }
-  }, [value])
+  }, [value, async, min, max])
 
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1

src/packages/inputnumber/inputnumber.tsx

@@ -126,14 +126,14 @@ export const InputNumber: FunctionComponent<
       setShadowValue(bound(Number(shadowValue), Number(min), Number(max)))
       setInputValue(format(shadowValue))
     }
-  }, [focused, shadowValue])
+  }, [focused, shadowValue, async, min, max, value])
 
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
       setInputValue(format(value))
     }
-  }, [value])
+  }, [value, async, min, max])
 
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1

src/packages/menuitem/menuitem.taro.tsx

@@ -106,7 +106,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
         })
       }
     })
-  }, [direction, windowHeight])
+  }, [direction, windowHeight, parent.lockScroll, parent.menuRef])
   usePageScroll(updateItemOffset)
 
   useImperativeHandle<any, any>(ref, () => ({

src/packages/navbar/navbar.taro.tsx

@@ -99,7 +99,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
       setContentWidth(centerWidth.toFixed(2))
     }
     init()
-  }, [left, right, back])
+  }, [left, right, back, titleAlign])
 
   const renderLeft = () => {
     return back || left ? (

src/packages/navbar/navbar.tsx

@@ -96,7 +96,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
     }
 
     setContentWidth(centerWidth.toFixed(2))
-  }, [left, right, back])
+  }, [left, right, back, titleAlign])
 
   const renderLeft = () => {
     return back || left ? (