refactor: Refactor with hooks & use React18 (#126)

* refactor: use hooks

* test: init 18

* test: key code

* test: all test

* refactor: more hooks

Author: zombieJ

examples/debug.tsx

@@ -0,0 +1,15 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+export default () => (
+  <Mentions rows={3} defaultValue="Hello World" open>
+    <Option value="light">Light</Option>
+    <Option value="bamboo">Bamboo</Option>
+    <Option value="cat">Cat</Option>
+  </Mentions>
+);

package.json

@@ -39,22 +39,21 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "@types/classnames": "^2.2.6",
-    "@types/enzyme": "^3.1.15",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^2.0.8",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.1.4",
     "eslint": "^7.0.0",
     "father": "^2.13.6",
     "jest": "^28.0.3",
     "lodash.debounce": "^4.0.8",
     "np": "^7.0.0",
     "prettier": "^2.0.5",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.0.3"
   },
   "dependencies": {
@@ -63,6 +62,6 @@
     "rc-menu": "~9.6.0",
     "rc-textarea": "^0.3.0",
     "rc-trigger": "^5.0.4",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.22.5"
   }
 }

src/DropdownMenu.tsx

@@ -1,7 +1,7 @@
 import Menu, { MenuItem } from 'rc-menu';
 import * as React from 'react';
-import { MentionsContextConsumer, MentionsContextProps } from './MentionsContext';
-import { OptionProps } from './Option';
+import MentionsContext from './MentionsContext';
+import type { OptionProps } from './Option';
 
 interface DropdownMenuProps {
   prefixCls?: string;
@@ -12,54 +12,50 @@ interface DropdownMenuProps {
  * We only use Menu to display the candidate.
  * The focus is controlled by textarea to make accessibility easy.
  */
-class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
-  public renderDropdown = ({
+function DropdownMenu(props: DropdownMenuProps) {
+  const {
     notFoundContent,
     activeIndex,
     setActiveIndex,
     selectOption,
     onFocus,
     onBlur,
-  }: MentionsContextProps) => {
-    const { prefixCls, options } = this.props;
-    const activeOption = options[activeIndex] || {};
+  } = React.useContext(MentionsContext);
 
-    return (
-      <Menu
-        prefixCls={`${prefixCls}-menu`}
-        activeKey={activeOption.key}
-        onSelect={({ key }) => {
-          const option = options.find(({ key: optionKey }) => optionKey === key);
-          selectOption(option);
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      >
-        {options.map((option, index) => {
-          const { key, disabled, children, className, style } = option;
-          return (
-            <MenuItem
-              key={key}
-              disabled={disabled}
-              className={className}
-              style={style}
-              onMouseEnter={() => {
-                setActiveIndex(index);
-              }}
-            >
-              {children}
-            </MenuItem>
-          );
-        })}
+  const { prefixCls, options } = props;
+  const activeOption = options[activeIndex] || {};
 
-        {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
-      </Menu>
-    );
-  };
+  return (
+    <Menu
+      prefixCls={`${prefixCls}-menu`}
+      activeKey={activeOption.key}
+      onSelect={({ key }) => {
+        const option = options.find(({ key: optionKey }) => optionKey === key);
+        selectOption(option);
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      {options.map((option, index) => {
+        const { key, disabled, children, className, style } = option;
+        return (
+          <MenuItem
+            key={key}
+            disabled={disabled}
+            className={className}
+            style={style}
+            onMouseEnter={() => {
+              setActiveIndex(index);
+            }}
+          >
+            {children}
+          </MenuItem>
+        );
+      })}
 
-  public render() {
-    return <MentionsContextConsumer>{this.renderDropdown}</MentionsContextConsumer>;
-  }
+      {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
+    </Menu>
+  );
 }
 
 export default DropdownMenu;