Update to react v18.

package.json

@@ -37,8 +37,7 @@
     "@babel/plugin-proposal-decorators": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-typescript": "^7.17.12",
-    "@chakra-ui/icons": "^1.1.5",
-    "@chakra-ui/react": "^1.8.3",
+    "@chakra-ui/react": "^2.1.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@types/assert": "^1.5.6",
@@ -51,7 +50,6 @@
     "@types/node": "^17.0.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "^8.3.4",
     "@umijs/preset-react": "2.x",
@@ -75,10 +73,9 @@
     "power-assert": "^1.6.1",
     "prettier": "^2.6.2",
     "pretty-bytes": "^6.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-icons": "^4.3.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
     "smooth-scroll-into-view-if-needed": "^1.1.33",
     "ts-node": "^10.8.0",

src/main/ui/find.ts

@@ -20,8 +20,8 @@ const makeWindow = () => {
     // transparent: true,
     width: 480,
     height: 400,
-    minWidth: 300,
-    minHeight: 200,
+    minWidth: 400,
+    minHeight: 400,
     maximizable: false,
     minimizable: false,
     skipTaskbar: true,

src/renderer/components/Transfer.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useModel } from '@@/plugin-model/useModel'
-import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons'
+import { IoArrowForward, IoArrowBack } from 'react-icons/io5'
 import { Box, Center, Grid, IconButton, VStack } from '@chakra-ui/react'
 import React, { useState } from 'react'
 import clsx from 'clsx'
@@ -112,7 +112,7 @@ const Transfer = (props: Props) => {
               size="sm"
               variant="outline"
               aria-label="Move to right"
-              icon={<ArrowForwardIcon />}
+              icon={<IoArrowForward />}
               isDisabled={left_selectd_keys.length === 0}
               onClick={moveLeftToRight}
             />
@@ -120,7 +120,7 @@ const Transfer = (props: Props) => {
               size="sm"
               variant="outline"
               aria-label="Move to left"
-              icon={<ArrowBackIcon />}
+              icon={<IoArrowBack />}
               isDisabled={right_selectd_keys.length === 0}
               onClick={moveRightToLeft}
             />

src/renderer/pages/find.tsx

@@ -40,7 +40,6 @@ import {
   IoChevronDownOutline,
   IoSearch,
 } from 'react-icons/io5'
-import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
 import scrollIntoView from 'smooth-scroll-into-view-if-needed'
 import styles from './find.less'
@@ -71,6 +70,7 @@ const find = (props: Props) => {
   const [last_scroll_result_idx, setlastScrollResultIdx] = useState(-1)
   const debounced_keyword = useDebounce(keyword, { wait: 500 })
   const ipt_kw = useRef<HTMLInputElement>(null)
+  const ref_result_box = useRef<HTMLDivElement>(null)
 
   const init = async () => {
     if (!configs) return
@@ -426,19 +426,18 @@ const find = (props: Props) => {
           w="100%"
           flex="1"
           bgColor={configs?.theme === 'dark' ? 'gray.700' : 'gray.100'}
+          ref={ref_result_box}
         >
-          <AutoSizer>
-            {({ width, height }) => (
-              <List
-                width={width}
-                height={height}
-                itemCount={find_positions.length}
-                itemSize={28}
-              >
-                {ResultRow}
-              </List>
-            )}
-          </AutoSizer>
+          <List
+            width={'100%'}
+            height={
+              ref_result_box.current ? ref_result_box.current.clientHeight : 0
+            }
+            itemCount={find_positions.length}
+            itemSize={28}
+          >
+            {ResultRow}
+          </List>
         </Box>
 
         <HStack

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": "./",