Upgrade ahooks (#814)

* yarn add ahooks

* change @umijs/hooks to ahooks

* fix compile

* yarn remove @umijs/hooks

ui/dashboardApp/layout/main/Sider/Banner.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
-import { useSize } from '@umijs/hooks'
+import { useSize } from 'ahooks'
 import Flexbox from '@g07cha/flexbox-react'
 import { useSpring, animated } from 'react-spring'
 import { useClientRequest } from '@lib/utils/useClientRequest'
@@ -45,7 +45,8 @@ export default function ToggleBanner({
   collapsed,
   onToggle,
 }) {
-  const [bannerSize, bannerRef] = useSize<HTMLDivElement>()
+  const bannerRef = useRef(null)
+  const bannerSize = useSize(bannerRef)
   const transBanner = useSpring({
     opacity: collapsed ? 0 : 1,
     height: collapsed ? toggleHeight : bannerSize.height || 0,

ui/dashboardApp/layout/main/Sider/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react'
 import { ExperimentOutlined, BugOutlined } from '@ant-design/icons'
 import { Layout, Menu } from 'antd'
 import { Link } from 'react-router-dom'
-import { useEventListener } from '@umijs/hooks'
+import { useEventListener } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { useSpring, animated } from 'react-spring'
 import client from '@lib/client'

ui/dashboardApp/layout/main/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { Root } from '@lib/components'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 import { HashRouter as Router } from 'react-router-dom'
 import { useSpring, animated } from 'react-spring'
 

ui/dashboardApp/layout/signin/index.tsx

@@ -19,7 +19,7 @@ import client, { ErrorStrategy, UserAuthenticateForm } from '@lib/client'
 import * as auth from '@lib/utils/auth'
 import { useMount } from 'react-use'
 import Flexbox from '@g07cha/flexbox-react'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 
 import { ReactComponent as Logo } from './logo.svg'
 import styles from './index.module.less'

ui/lib/apps/ClusterInfo/components/InstanceTable.tsx

@@ -1,5 +1,5 @@
 import { DeleteOutlined } from '@ant-design/icons'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import { Divider, Popconfirm, Tooltip } from 'antd'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'

ui/lib/apps/Configuration/InlineEditor.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react'
 import React from 'react'
 import { EditOutlined } from '@ant-design/icons'
 import { Input, Popover, Button, Space, Tooltip } from 'antd'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 
 interface IInlineEditorProps {
   title?: string

ui/lib/apps/Configuration/index.tsx

@@ -6,7 +6,7 @@ import { IGroup, IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
 import InlineEditor from './InlineEditor'
 import { Modal, Spin, Tooltip, Input } from 'antd'
-import { usePersistFn, useDebounce } from '@umijs/hooks'
+import { usePersistFn, useDebounce } from 'ahooks'
 import { LoadingOutlined } from '@ant-design/icons'
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'
 import { useTranslation } from 'react-i18next'
@@ -90,7 +90,7 @@ export default function () {
 
   const { t } = useTranslation()
   const [filterValueLower, setFilterValueLower] = useState('')
-  const debouncedFilterValue = useDebounce(filterValueLower, 200)
+  const debouncedFilterValue = useDebounce(filterValueLower, { wait: 200 })
 
   const handleSaved = useCallback(() => {
     sendRequest()

ui/lib/apps/InstanceProfiling/pages/Detail.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 
 import client from '@lib/client'
 import { CardTable, Head } from '@lib/components'

ui/lib/apps/InstanceProfiling/pages/List.tsx

@@ -3,7 +3,7 @@ import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
 import React, { useMemo, useState, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import client, {
   ProfilingStartRequest,
   ModelRequestTargetNode,

ui/lib/apps/KeyViz/components/KeyViz.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'
 import { Button, Drawer, Result } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useGetSet, useMount, useInterval } from 'react-use'
-import { useBoolean } from '@umijs/hooks'
+import { useBoolean } from 'ahooks'
 
 import client, { ConfigKeyVisualConfig } from '@lib/client'
 import { Heatmap } from '../heatmap'
@@ -91,11 +91,10 @@ const KeyViz = () => {
   const [getBrightLevel, setBrightLevel] = useGetSet(1)
   const [getMetricType, setMetricType] = useGetSet<DataTag>('written_bytes')
   const [config, setConfig] = useState<ConfigKeyVisualConfig | null>(null)
-  const {
-    state: shouldShowSettings,
-    setTrue: openSettings,
-    setFalse: closeSettings,
-  } = useBoolean(false)
+  const [
+    shouldShowSettings,
+    { setTrue: openSettings, setFalse: closeSettings },
+  ] = useBoolean(false)
   const { t } = useTranslation()
 
   const enabled = config?.auto_collection_disabled !== true

ui/lib/apps/KeyViz/heatmap/index.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react'
 import * as d3 from 'd3'
-import { useEventListener } from '@umijs/hooks'
+import { useEventListener } from 'ahooks'
 import { heatmapChart } from './chart'
 import { HeatmapData, DataTag, HeatmapRange } from './types'
 

ui/lib/apps/QueryEditor/Editor.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import AceEditor, { IAceEditorProps } from 'react-ace'
-import { useSize } from '@umijs/hooks'
+import { useSize } from 'ahooks'
 
 import 'ace-builds/src-noconflict/mode-sql'
 import 'ace-builds/src-noconflict/ext-searchbox'
@@ -12,7 +12,8 @@ import styles from './Editor.module.less'
 interface IEditorProps extends IAceEditorProps {}
 
 function Editor({ ...props }: IEditorProps, ref: React.Ref<AceEditor>) {
-  const [state, containerRef] = useSize<HTMLDivElement>()
+  const containerRef = useRef(null)
+  const containerSize = useSize(containerRef)
   return (
     <div className={styles.editorContainer} ref={containerRef}>
       <AceEditor
@@ -23,8 +24,8 @@ function Editor({ ...props }: IEditorProps, ref: React.Ref<AceEditor>) {
         showPrintMargin={false}
         showGutter={true}
         highlightActiveLine={true}
-        width={`${state.width}px`}
-        height={`${state.height}px`}
+        width={`${containerSize.width}px`}
+        height={`${containerSize.height}px`}
         ref={ref}
         {...props}
       />

ui/lib/apps/SearchLogs/components/SearchHeader.tsx

@@ -7,7 +7,7 @@ import { Button, Form, Input, Select, Modal } from 'antd'
 import React, { useState, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { useMount } from '@umijs/hooks'
+import { useMount } from 'ahooks'
 import {
   TimeRangeSelector,
   TimeRange,

ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx

@@ -1,4 +1,4 @@
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import React, { useCallback } from 'react'
 import { CardTable, ICardTableProps } from '@lib/components'
 import DetailPage from '../pages/Detail'

ui/lib/apps/SlowQuery/pages/Detail/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Space } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 
 import client from '@lib/client'
 import { useClientRequest } from '@lib/utils/useClientRequest'

ui/lib/apps/SlowQuery/pages/List/index.tsx

@@ -17,7 +17,7 @@ import {
   ExportOutlined,
 } from '@ant-design/icons'
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 
 import {
   Card,

ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { useSessionStorageState } from '@umijs/hooks'
+import { useSessionStorageState } from 'ahooks'
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 
 import client, { ErrorStrategy, SlowquerySlowQuery } from '@lib/client'

ui/lib/apps/Statement/components/StatementsTable.tsx

@@ -1,4 +1,4 @@
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import React, { useCallback } from 'react'
 import { CardTable, ICardTableProps } from '@lib/components'
 import DetailPage from '../pages/Detail'

ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Space } from 'antd'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import {
   AnimatedSkeleton,

ui/lib/apps/Statement/pages/Detail/index.tsx

@@ -4,7 +4,7 @@ import { Selection } from 'office-ui-fabric-react/lib/Selection'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 
 import client, { StatementModel } from '@lib/client'
 import {

ui/lib/apps/Statement/pages/List/index.tsx

@@ -11,7 +11,7 @@ import {
   Menu,
   message,
 } from 'antd'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 import {
   ReloadOutlined,
   LoadingOutlined,

ui/lib/apps/Statement/utils/useStatementTableController.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { useSessionStorageState } from '@umijs/hooks'
+import { useSessionStorageState } from 'ahooks'
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 
 import client, {

ui/lib/apps/SystemReport/components/ReportHistory.tsx

@@ -4,7 +4,7 @@ import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import type { TFunction } from 'i18next'
 
 import client, { DiagnoseReport } from '@lib/client'

ui/lib/components/AppearAnimate/index.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames'
-import React, { useState, useCallback } from 'react'
-import { useEventListener } from '@umijs/hooks'
+import React, { useState, useCallback, useRef } from 'react'
+import { useEventListener } from 'ahooks'
 
 export interface IAppearAnimateProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,10 +20,8 @@ function AppearAnimate({
     setIsFirst(false)
   }, [])
 
-  const ref = useEventListener<HTMLDivElement>(
-    'animationend',
-    handleAnimationEnd
-  )
+  const ref = useRef(null)
+  useEventListener('animationend', handleAnimationEnd, { target: ref })
 
   return (
     <div ref={ref} className={cx(className, { [motionName]: isFirst })}>

ui/lib/components/BaseSelect/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react'
 import cx from 'classnames'
-import { useEventListener } from '@umijs/hooks'
+import { useEventListener } from 'ahooks'
 import { DownOutlined } from '@ant-design/icons'
 import Trigger from 'rc-trigger'
 import KeyCode from 'rc-util/lib/KeyCode'

ui/lib/components/CardTable/GroupHeader.tsx

@@ -20,7 +20,7 @@ import { getStyles } from 'office-ui-fabric-react/lib/components/GroupedList/Gro
 
 import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import { Checkbox } from 'antd'
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 
 const getClassNames = classNamesFunction<
   IGroupHeaderStyleProps,

ui/lib/components/CardTable/index.tsx

@@ -1,4 +1,4 @@
-import { usePersistFn } from '@umijs/hooks'
+import { usePersistFn } from 'ahooks'
 import { Checkbox } from 'antd'
 import cx from 'classnames'
 import {

ui/lib/components/InstanceSelect/TableWithFilter.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'
 import { SelectionMode } from 'office-ui-fabric-react/lib/Selection'
-import { useSize } from '@umijs/hooks'
+import { useSize } from 'ahooks'
 import {
   DetailsListLayoutMode,
   ISelection,
@@ -58,17 +58,18 @@ function TableWithFilter(
 
   // FIXME: We should put Input inside ScrollablePane after https://github.com/microsoft/fluentui/issues/13557 is resolved
 
-  const [containerState, containerRef] = useSize<HTMLDivElement>()
+  const containerRef = useRef(null)
+  const containerSize = useSize(containerRef)
 
   const paneStyle = useMemo(
     () =>
       ({
         position: 'relative',
-        height: containerState.height,
+        height: containerSize.height,
         maxHeight: tableMaxHeight ?? 400,
         width: tableWidth ?? 400,
       } as React.CSSProperties),
-    [containerState.height, tableMaxHeight, tableWidth]
+    [containerSize.height, tableMaxHeight, tableWidth]
   )
 
   const {

ui/lib/components/InstanceSelect/index.tsx

@@ -11,7 +11,7 @@ import {
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import client from '@lib/client'
 import { addTranslationResource } from '@lib/utils/i18n'
-import { usePersistFn, useControllableValue } from '@umijs/hooks'
+import { usePersistFn, useControllableValue } from 'ahooks'
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import {
   buildInstanceTable,

ui/lib/components/MultiSelect/index.tsx

@@ -2,7 +2,7 @@ import { IBaseSelectProps, BaseSelect, TextWrap } from '..'
 import { ITableWithFilterRefProps } from '../InstanceSelect/TableWithFilter'
 import React, { useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { usePersistFn, useControllableValue } from '@umijs/hooks'
+import { usePersistFn, useControllableValue } from 'ahooks'
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import SelectionWithFilter from '@lib/utils/selectionWithFilter'
 import { useShallowCompareEffect } from 'react-use'

ui/lib/utils/useClientRequest.ts

@@ -1,4 +1,4 @@
-import { useMount, useUnmount, usePersistFn } from '@umijs/hooks'
+import { useMount, useUnmount, usePersistFn } from 'ahooks'
 import { useState, useRef, useEffect } from 'react'
 import axios, { CancelToken, AxiosPromise, CancelTokenSource } from 'axios'
 

ui/lib/utils/useOrderState.ts

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { useLocalStorageState } from '@umijs/hooks'
+import { useLocalStorageState } from 'ahooks'
 
 export interface IOrderOptions {
   orderBy: string

ui/package.json

@@ -10,9 +10,9 @@
     "@baurine/grafana-value-formats": "^1.0.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@g07cha/flexbox-react": "^5.0.0",
-    "@umijs/hooks": "^1.9.3",
     "@welldone-software/why-did-you-render": "^4.2.7",
     "ace-builds": "^1.4.12",
+    "ahooks": "^2.9.2",
     "antd": "~4.8.5",
     "axios": "^0.19.0",
     "bulma": "^0.9.0",