support placement

Author: zombieJ

README.md

@@ -69,6 +69,7 @@ React.render(<Demo />, container);
 | defaultValue | Default value | string | - |
 | filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
 | notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
+| placement | Set popup placement | 'top' \| 'bottom' | 'bottom' |
 | prefix | Set trigger prefix keyword | string \| string[] | '@' |
 | rows | Set row count | number | 1 |
 | split | Set split string before and after selected mention | string | ' ' |

examples/textarea.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import Mentions from '../src';
 import '../assets/index.less';
+import './textarea.less';
 
 const { Option } = Mentions;
 
@@ -19,5 +20,13 @@ export default () => (
       <Option value="bamboo">Bamboo</Option>
       <Option value="cat">Cat</Option>
     </Mentions>
+
+    <div style={{ paddingTop: 200 }}>
+      <Mentions placeholder="placement: top" placement="top" transitionName="motion">
+        <Option value="light">Light</Option>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>
+    </div>
   </div>
 );

examples/textarea.less

@@ -0,0 +1,3 @@
+.motion {
+  transform: scale(.3);
+}

src/KeywordTrigger.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import DropdownMenu from './DropdownMenu';
 import { OptionProps } from './Option';
 
+import { Placement } from './Mentions';
+
 const BUILT_IN_PLACEMENTS = {
   bottomRight: {
     points: ['tl', 'br'],
@@ -23,10 +25,12 @@ const BUILT_IN_PLACEMENTS = {
 };
 
 interface KeywordTriggerProps {
-  visible?: boolean;
   loading?: boolean;
-  prefixCls?: string;
   options: OptionProps[];
+  prefixCls?: string;
+  placement?: Placement;
+  visible?: boolean;
+  transitionName?: string;
 }
 
 class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
@@ -38,7 +42,7 @@ class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
   };
 
   public render() {
-    const { children, visible } = this.props;
+    const { children, visible, placement, transitionName } = this.props;
 
     const popupElement = this.getDropdownElement();
 
@@ -47,7 +51,8 @@ class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
         prefixCls={this.getDropdownPrefix()}
         popupVisible={visible}
         popup={popupElement}
-        popupPlacement="bottomRight"
+        popupPlacement={placement === 'top' ? 'topRight' : 'bottomRight'}
+        popupTransitionName={transitionName}
         builtinPlacements={BUILT_IN_PLACEMENTS}
       >
         {children}

src/Mentions.tsx

@@ -22,23 +22,27 @@ type BaseTextareaAttrs = Omit<
   'prefix' | 'onChange' | 'onSelect'
 >;
 
+export type Placement = 'top' | 'bottom';
+
 export interface MentionsProps extends BaseTextareaAttrs {
+  autoFocus?: boolean;
+  className?: string;
   defaultValue?: string;
+  notFoundContent?: React.ReactNode;
+  split?: string;
+  style?: React.CSSProperties;
+  transitionName?: string;
+  placement?: Placement;
+  prefix?: string | string[];
+  prefixCls?: string;
   value?: string;
+  filterOption?: false | typeof defaultFilterOption;
+  validateSearch?: typeof defaultValidateSearch;
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-  prefixCls?: string;
-  prefix?: string | string[];
-  className?: string;
-  style?: React.CSSProperties;
-  autoFocus?: boolean;
-  split?: string;
-  validateSearch?: typeof defaultValidateSearch;
-  filterOption?: false | typeof defaultFilterOption;
-  notFoundContent?: React.ReactNode;
 }
 interface MentionsState {
   value: string;
@@ -206,7 +210,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public onInputBlur: React.FocusEventHandler<HTMLTextAreaElement> = event => {
-    this.onBlur(event);
+    // this.onBlur(event);
   };
 
   public onDropdownFocus = () => {
@@ -317,7 +321,16 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public render() {
     const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
-    const { prefixCls, className, style, autoFocus, notFoundContent, ...restProps } = this.props;
+    const {
+      prefixCls,
+      placement,
+      transitionName,
+      className,
+      style,
+      autoFocus,
+      notFoundContent,
+      ...restProps
+    } = this.props;
 
     const inputProps = omit(
       restProps,
@@ -359,7 +372,13 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
                 onFocus: this.onDropdownFocus,
               }}
             >
-              <KeywordTrigger prefixCls={prefixCls} options={options} visible={true}>
+              <KeywordTrigger
+                prefixCls={prefixCls}
+                transitionName={transitionName}
+                placement={placement}
+                options={options}
+                visible={true}
+              >
                 <span>{measurePrefix}</span>
               </KeywordTrigger>
             </MentionsContextProvider>