feat: Add option for component: 'mention'

components/mention/demo/placement.md

@@ -0,0 +1,37 @@
+---
+order: 0
+title:
+  zh-CN: 向上展开
+  en-US: Expand up
+---
+
+## zh-CN
+
+向上展开建议。
+
+## en-US
+
+Expand the suggestions up.
+
+````jsx
+import { Mention } from 'antd';
+const { toString } = Mention;
+
+function onChange(contentState) {
+  console.log(toString(contentState));
+}
+
+function onSelect(suggestion) {
+  console.log('onSelect', suggestion);
+}
+
+ReactDOM.render(
+  <Mention
+    style={{ width: '100%', height: 100 }}
+    onChange={onChange}
+    suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+    onSelect={onSelect}
+    placement="top"
+  />
+, mountNode);
+````

components/mention/index.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import shallowequal from 'shallowequal';
 import Icon from '../icon';
 
+export type MentionPlacement = 'top' | 'bottom';
+
 export interface MentionProps {
   prefixCls?: string;
   suggestionStyle?: React.CSSProperties;
@@ -24,6 +26,7 @@ export interface MentionProps {
   onBlur?: Function;
   readOnly?: boolean;
   disabled?: boolean;
+  placement?: MentionPlacement;
 }
 
 export interface MentionState {
@@ -38,6 +41,7 @@ export default class Mention extends React.Component<MentionProps, MentionState>
     notFoundContent: '无匹配结果，轻敲空格完成输入',
     loading: false,
     multiLines: false,
+    placement: 'bottom',
   };
   static Nav = Nav;
   static toString = toString;
@@ -117,10 +121,11 @@ export default class Mention extends React.Component<MentionProps, MentionState>
     this.mentionEle = ele;
   }
   render() {
-    const { className = '', prefixCls, loading } = this.props;
+    const { className = '', prefixCls, loading, placement } = this.props;
     const { suggestions, focus } = this.state;
     const cls = classNames(className, {
       [`${prefixCls}-active`]: focus,
+      [`${prefixCls}-placement-top`]: placement === 'top',
     });
 
     const notFoundContent = loading

components/mention/style/index.less

@@ -61,6 +61,10 @@
   overflow-x: hidden;
   overflow-y: auto;
 
+  &-placement-top {
+    margin-top: -0.1em;
+  }
+
   &-notfound&-item {
     color: @disabled-color;
 

package.json

@@ -56,7 +56,7 @@
     "rc-collapse": "~1.7.5",
     "rc-dialog": "~6.5.10",
     "rc-dropdown": "~1.5.0",
-    "rc-editor-mention": "~0.6.12",
+    "rc-editor-mention": "^1.0.2",
     "rc-form": "~1.4.0",
     "rc-input-number": "~3.6.0",
     "rc-menu": "~5.1.0",