refactor: function component (#175)

Author: MadCcc

src/KeywordTrigger.tsx

@@ -1,7 +1,8 @@
 import Trigger from 'rc-trigger';
 import * as React from 'react';
+import { FC, useMemo } from 'react';
 import DropdownMenu from './DropdownMenu';
-import type { Direction, Placement, DataDrivenOptionProps } from './Mentions';
+import type { DataDrivenOptionProps, Direction, Placement } from './Mentions';
 
 const BUILT_IN_PLACEMENTS = {
   bottomRight: {
@@ -51,47 +52,49 @@ interface KeywordTriggerProps {
   dropdownClassName?: string;
 }
 
-class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
-  public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`;
+const KeywordTrigger: FC<KeywordTriggerProps> = props => {
+  const {
+    prefixCls,
+    options,
+    children,
+    visible,
+    transitionName,
+    getPopupContainer,
+    dropdownClassName,
+    direction,
+    placement,
+  } = props;
 
-  public getDropdownElement = () => {
-    const { options } = this.props;
-    return (
-      <DropdownMenu prefixCls={this.getDropdownPrefix()} options={options} />
-    );
-  };
+  const dropdownPrefix = `${prefixCls}-dropdown`;
 
-  public getDropDownPlacement = () => {
-    const { placement, direction } = this.props;
+  const dropdownElement = (
+    <DropdownMenu prefixCls={dropdownPrefix} options={options} />
+  );
+
+  const dropdownPlacement = useMemo(() => {
     let popupPlacement;
     if (direction === 'rtl') {
       popupPlacement = placement === 'top' ? 'topLeft' : 'bottomLeft';
     } else {
       popupPlacement = placement === 'top' ? 'topRight' : 'bottomRight';
     }
     return popupPlacement;
-  };
-
-  public render() {
-    const { children, visible, transitionName, getPopupContainer } = this.props;
-
-    const popupElement = this.getDropdownElement();
+  }, [direction, placement]);
 
-    return (
-      <Trigger
-        prefixCls={this.getDropdownPrefix()}
-        popupVisible={visible}
-        popup={popupElement}
-        popupPlacement={this.getDropDownPlacement()}
-        popupTransitionName={transitionName}
-        builtinPlacements={BUILT_IN_PLACEMENTS}
-        getPopupContainer={getPopupContainer}
-        popupClassName={this.props.dropdownClassName}
-      >
-        {children}
-      </Trigger>
-    );
-  }
-}
+  return (
+    <Trigger
+      prefixCls={dropdownPrefix}
+      popupVisible={visible}
+      popup={dropdownElement}
+      popupPlacement={dropdownPlacement}
+      popupTransitionName={transitionName}
+      builtinPlacements={BUILT_IN_PLACEMENTS}
+      getPopupContainer={getPopupContainer}
+      popupClassName={dropdownClassName}
+    >
+      {children}
+    </Trigger>
+  );
+};
 
 export default KeywordTrigger;

src/Mentions.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import type { TextAreaProps } from 'rc-textarea';
+import TextArea from 'rc-textarea';
 import toArray from 'rc-util/lib/Children/toArray';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import KeyCode from 'rc-util/lib/KeyCode';
 import warning from 'rc-util/lib/warning';
 import React, { useEffect, useRef, useState } from 'react';
-import type { TextAreaProps } from 'rc-textarea';
-import TextArea from 'rc-textarea';
+import useEffectState from './hooks/useEffectState';
 import KeywordTrigger from './KeywordTrigger';
 import MentionsContext from './MentionsContext';
 import type { OptionProps } from './Option';
@@ -18,7 +19,6 @@ import {
   setInputSelection,
   validateSearch as defaultValidateSearch,
 } from './util';
-import useEffectState from './hooks/useEffectState';
 
 type BaseTextareaAttrs = Omit<
   TextAreaProps,
@@ -71,23 +71,23 @@ export interface MentionsRef {
 const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
   const {
     // Style
-    prefixCls,
+    prefixCls = 'rc-mentions',
     className,
     style,
 
     // Misc
-    prefix,
-    split,
-    notFoundContent,
+    prefix = '@',
+    split = ' ',
+    notFoundContent = 'Not Found',
     value,
     defaultValue,
     children,
     options,
     open,
 
     // Events
-    validateSearch,
-    filterOption,
+    validateSearch = defaultValidateSearch,
+    filterOption = defaultFilterOption,
     onChange,
     onKeyDown,
     onKeyUp,
@@ -105,15 +105,13 @@ const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
     getPopupContainer,
     dropdownClassName,
 
+    rows = 1,
+
     // Rest
     ...restProps
   } = props;
 
   const mergedPrefix = Array.isArray(prefix) ? prefix : [prefix];
-  const mergedProps = {
-    ...props,
-    prefix: mergedPrefix,
-  };
 
   // =============================== Refs ===============================
   const textareaRef = useRef<TextArea>(null);
@@ -355,10 +353,7 @@ const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
       const nextMeasureText = selectionStartText.slice(
         measureIndex + nextMeasurePrefix.length,
       );
-      const validateMeasure: boolean = validateSearch(
-        nextMeasureText,
-        mergedProps,
-      );
+      const validateMeasure: boolean = validateSearch(nextMeasureText, split);
       const matchOption = !!getOptions(nextMeasureText).length;
 
       if (validateMeasure) {
@@ -429,6 +424,7 @@ const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
         ref={textareaRef}
         value={mergedValue}
         {...restProps}
+        rows={rows}
         onChange={onInternalChange}
         onKeyDown={onInternalKeyDown}
         onKeyUp={onInternalKeyUp}
@@ -475,16 +471,6 @@ const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
   Option: typeof Option;
 };
 
-Mentions.defaultProps = {
-  prefixCls: 'rc-mentions',
-  prefix: '@',
-  split: ' ',
-  validateSearch: defaultValidateSearch,
-  filterOption: defaultFilterOption,
-  notFoundContent: 'Not Found',
-  rows: 1,
-};
-
 Mentions.Option = Option;
 
 export default Mentions;

src/util.ts

@@ -122,8 +122,7 @@ export function setInputSelection(
   input.focus();
 }
 
-export function validateSearch(text: string, props: MentionsProps) {
-  const { split } = props;
+export function validateSearch(text: string, split: MentionsProps['split']) {
   return !split || text.indexOf(split) === -1;
 }
 

tests/Mentions.spec.tsx

@@ -1,11 +1,11 @@
-import React, { createRef } from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import Mentions from '../src';
-import type { MentionsProps } from '../src';
-import { expectMatchOptions, expectMeasuring, simulateInput } from './util';
 import { fireEvent, render } from '@testing-library/react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import React, { createRef } from 'react';
 import { act } from 'react-dom/test-utils';
+import type { MentionsProps } from '../src';
+import Mentions from '../src';
 import type { MentionsRef } from '../src/Mentions';
+import { expectMatchOptions, expectMeasuring, simulateInput } from './util';
 
 const { Option } = Mentions;
 
@@ -244,6 +244,15 @@ describe('Mentions', () => {
     ).toBeTruthy();
   });
 
+  it('should support direction', () => {
+    const { container } = renderMentions({ direction: 'rtl' });
+    simulateInput(container, '@');
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelector('.rc-mentions-dropdown')).toBeTruthy();
+  });
+
   it('should support textarea in ref', () => {
     const ref = createRef<MentionsRef>();
     const { container } = render(createMentions({ ref }));