Mention Component fix

- 现在只输入一个 @ 符号，dropdown 也会弹出。
 - 输入框失去焦点后，dropdown 会消失。
 - 添加受控模式示例
 - 添加 `getMentions(editorState: EditorState): Array<String>` Api,
   可以获取当前提到的人。
 - 添加了校验样式
 - 其他样式修正

components/form/style/index.less

@@ -390,6 +390,18 @@ form {
       border-color: @error-color;
     }
   }
+  .ant-mention-wrapper,
+  .ant-mention-wrapper.active {
+    .ant-mention-editor {
+      border-color: @error-color;
+      box-shadow: 0 0 0 2px fade(@error-color, 20%);
+      &:not([disabled]):hover,
+      &:not([disabled]):focus {
+        border-color: @error-color;
+        box-shadow: 0 0 0 2px fade(@error-color, 20%);
+      }
+    }
+  }
 }
 
 .is-validating {

components/mention/demo/avatar.md

@@ -41,7 +41,7 @@ const CustomNavMention = React.createClass({
     const suggestions = filtered.map(suggestion =>
       <Nav value={suggestion.name} data={suggestion} disabled={suggestion.disabled}>
         <span>
-          <img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5 }} src={suggestion.icon} />
+          <img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5, float: 'left' }} src={suggestion.icon} />
           {suggestion.name} - {suggestion.type}
         </span>
       </Nav>);

components/mention/demo/basic.md

@@ -25,7 +25,7 @@ ReactDOM.render(
   <Mention
     onChange={onChange}
     defaultValue={toEditorState('@afc163')}
-    suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
+    suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
   />,
   mountNode
 );

components/mention/demo/controlled.md

@@ -0,0 +1,86 @@
+---
+order: 3
+title: 受控模式
+---
+
+## zh-CN
+
+受控模式，例如配合 Form 使用
+
+## en-US
+
+Controlled mode, for example, work with `Form` .
+
+````jsx
+
+import { Mention, Form, Button } from 'antd';
+const { toEditorState, getMentions } = Mention;
+const FormItem = Form.Item;
+
+let App = React.createClass({
+  getInitialState() {
+    return {
+      initValue: toEditorState('@afc163'),
+    };
+  },
+  handleReset(e) {
+    e.preventDefault();
+    this.props.form.resetFields();
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.form.validateFields((errors, values) => {
+      if (!!errors) {
+        console.log('Errors in form!!!');
+        return;
+      }
+      console.log('Submit!!!');
+      console.log(values);
+    });
+  },
+  checkMention(rule, value, callback) {
+    const { getFieldValue } = this.props.form;
+    const mentions = getMentions(getFieldValue('mention'));
+    if (mentions.length < 2) {
+      callback(new Error('最帅的码农不止一个！!'));
+    } else {
+      callback();
+    }
+  },
+  render() {
+    const { getFieldProps, getFieldValue } = this.props.form;
+    const mentionProps = getFieldProps('mention', {
+      rules: [
+        { validator: this.checkMention },
+      ],
+      initialValue: this.state.initValue,
+    });
+    console.log('>> render', getFieldValue('mention') === this.state.initValue);
+    return (<Form horizontal form={this.props.form}>
+      <FormItem
+        id="control-mention"
+        label="最帅的码农"
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 14 }}
+      >
+        <Mention
+          {...mentionProps}
+          suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+        />
+      </FormItem> 
+      <FormItem wrapperCol={{ span: 12, offset: 7 }}>
+        <Button type="primary" onClick={this.handleSubmit}>确定</Button>
+        &nbsp;&nbsp;&nbsp;
+        <Button type="ghost" onClick={this.handleReset}>重置</Button>
+      </FormItem>
+    </Form>);
+  },
+});
+
+
+App = Form.create()(App);
+ReactDOM.render(
+  <App />,
+  mountNode
+);
+````

components/mention/index.en-US.md

@@ -21,6 +21,16 @@ When need to mention someone or something.
 
 ## API
 
+
+### Mention API
+
+| API     | Description           | Type     | 
+|----------|---------------|----------|--------------|
+| toString    | convert EditorState to string | Function(editorState: EditorState): String |
+| toEditorState    | convert string to  EditorState | Function(string: String): EditorState |
+| getMentions    | get mentioned people in current editorState | Function(editorState: EditorState): Array<String> |
+
+
 ### Mention props
 
 | Property     | Description          | Type     | Default       |

components/mention/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import RcMention, { Nav, toString, toEditorState } from 'rc-editor-mention';
+import RcMention, { Nav, toString, toEditorState, getMentions } from 'rc-editor-mention';
 import classnames from 'classnames';
 
 export interface MentionProps {
@@ -25,6 +25,7 @@ export default class Mention extends React.Component<MentionProps, MentionState>
   static Nav = Nav;
   static toString = toString;
   static toEditorState = toEditorState;
+  static getMentions = getMentions;
   static defaultProps = {
     prefixCls: 'ant-mention',
     suggestions: [],

components/mention/index.zh-CN.md

@@ -21,6 +21,15 @@ english: Mention
 
 ## API
 
+### Mention API
+
+| API     | 说明           | 类型     | 
+|----------|---------------|----------|
+| toString    | 把 EditorState 转成字符串 | Function(editorState: EditorState): String |
+| toEditorState    | 把字符串转成 EditorState | Function(string: String): EditorState |
+| getMentions    | 获取当前 editorState 中提到的人的列表 | Function(editorState: EditorState): Array<String> |
+
+
 ### Mention props
 
 | 参数     | 说明           | 类型     | 默认值       |

package.json

@@ -47,7 +47,7 @@
     "rc-collapse": "~1.6.4",
     "rc-dialog": "~6.2.1",
     "rc-dropdown": "~1.4.8",
-    "rc-editor-mention": "^0.1.0",
+    "rc-editor-mention": "^0.1.10",
     "rc-form": "~0.17.1",
     "rc-input-number": "~2.5.14",
     "rc-menu": "~4.12.4",