docs: use functional component for mention list

demos/src/Examples/Community/React/MentionList.jsx

@@ -1,79 +1,68 @@
-import React from 'react'
+import React, {
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
 import './MentionList.scss'
 
-export class MentionList extends React.Component {
+export const MentionList = forwardRef((props, ref) => {
-  constructor(props) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
-    super(props)
 
-    this.state = {
+  const selectItem = index => {
-      selectedIndex: 0,
+    const item = props.items[index]
+
+    if (item) {
+      props.command({ id: item })
     }
   }
 
-  componentDidUpdate(oldProps) {
+  const upHandler = () => {
-    if (this.props.items !== oldProps.items) {
+    setSelectedIndex(((selectedIndex + props.items.length) - 1) % props.items.length)
-      this.setState({
-        selectedIndex: 0,
-      })
-    }
   }
 
-  onKeyDown({ event }) {
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length)
+  }
+
+  const enterHandler = () => {
+    selectItem(selectedIndex)
+  }
+
+  useEffect(() => setSelectedIndex(0), [props.items])
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
       if (event.key === 'ArrowUp') {
-      this.upHandler()
+        upHandler()
         return true
       }
 
       if (event.key === 'ArrowDown') {
-      this.downHandler()
+        downHandler()
         return true
       }
 
       if (event.key === 'Enter') {
-      this.enterHandler()
+        enterHandler()
         return true
       }
 
       return false
-  }
+    },
+  }))
 
-  upHandler() {
-    this.setState({
-      selectedIndex: ((this.state.selectedIndex + this.props.items.length) - 1) % this.props.items.length,
-    })
-  }
-
-  downHandler() {
-    this.setState({
-      selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length,
-    })
-  }
-
-  enterHandler() {
-    this.selectItem(this.state.selectedIndex)
-  }
-
-  selectItem(index) {
-    const item = this.props.items[index]
-
-    if (item) {
-      this.props.command({ id: item })
-    }
-  }
-
-  render() {
   return (
     <div className="items">
-        {this.props.items.map((item, index) => (
+      {props.items.map((item, index) => (
         <button
-            className={`item ${index === this.state.selectedIndex ? 'is-selected' : ''}`}
+          className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
           key={index}
-            onClick={() => this.selectItem(index)}
+          onClick={() => selectItem(index)}
         >
           {item}
         </button>
       ))}
     </div>
   )
-  }
+})
-}