Merge pull request ant-design#2259 from RaoHai/MentionComponent

 Mention Component

components/index.tsx

@@ -48,3 +48,6 @@ export { Timeline }
 
 import Tooltip from './tooltip';
 export { Tooltip }
+
+import Mention from './mention';
+export { Mention };

components/mention/demo/async.md

@@ -0,0 +1,56 @@
+---
+order: 1
+title: 异步加载
+---
+
+## zh-CN
+
+匹配内容列表为异步返回时。
+
+## en-US
+
+asnyc
+
+````jsx
+
+import { Mention } from 'antd';
+
+const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
+const AsyncMention = React.createClass({
+  getInitialState() {
+    return {
+      suggestions: [],
+      loading: false,
+    };
+  },
+  fetchSuggestions(value, callback) {
+    setTimeout(() => {
+      callback(users.filter(item => item.indexOf(value) !== -1));
+    }, 500);
+  },
+  onSearchChange(value) {
+    this.fetchSuggestions(value, (suggestions) => {
+      this.setState({
+        suggestions,
+        loading: false,
+      });
+    });
+    this.setState({
+      loading: true,
+    });
+  },
+  render() {
+    const { suggestions, loading } = this.state;
+    return (<Mention
+      loading={loading}
+      suggestions={suggestions}
+      onSearchChange={this.onSearchChange}
+    />);
+  },
+});
+
+ReactDOM.render(
+  <AsyncMention />,
+  mountNode
+);
+````

components/mention/demo/avatar.md

@@ -0,0 +1,66 @@
+---
+order: 3
+title: 头像
+---
+
+## zh-CN
+
+自定义建议（含头像）
+
+注意，自定义建议时，onSearchChange 必须不能为空。
+
+## en-US
+
+Customize suggestions
+
+````jsx
+
+import { Mention } from 'antd';
+const Nav = Mention.Nav;
+
+const webFrameworks = [
+  { name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg' },
+  { name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png' },
+  { name: 'Laravel', type: 'PHP', icon: 'http://laravel-china.org/assets/img/laravel-logo.png' },
+  { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
+];
+
+const CustomNavMention = React.createClass({
+  getInitialState() {
+    return {
+      suggestions: [],
+      loading: false,
+    };
+  },
+  onSearchChange(value) {
+    const searchValue = value.toLowerCase();
+    const filtered = webFrameworks.filter(item =>
+      item.name.toLowerCase().indexOf(searchValue) !== -1
+    );
+
+    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} />
+          {suggestion.name} - {suggestion.type}
+        </span>
+      </Nav>);
+    this.setState({
+      suggestions,
+    });
+  },
+  render() {
+    const { suggestions, loading } = this.state;
+    return (<Mention
+      loading={loading}
+      suggestions={suggestions}
+      onSearchChange={this.onSearchChange}
+    />);
+  },
+});
+
+ReactDOM.render(
+  <CustomNavMention />,
+  mountNode
+);
+````

components/mention/demo/basic.md

@@ -0,0 +1,32 @@
+---
+order: 0
+title: 基本使用
+---
+
+## zh-CN
+
+基本使用
+
+## en-US
+
+Basic usage.
+
+````jsx
+
+import { Mention } from 'antd';
+const { toString, toEditorState } = Mention;
+
+
+function onChange(editorState) {
+  console.log(toString(editorState));
+}
+
+ReactDOM.render(
+  <Mention
+    onChange={onChange}
+    defaultValue={toEditorState('@afc163')}
+    suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
+  />,
+  mountNode
+);
+````

components/mention/demo/customTag.md

@@ -0,0 +1,63 @@
+---
+order: 2
+title: 自定义建议
+---
+
+## zh-CN
+
+自定义建议
+
+注意，自定义建议时，onSearchChange 必须不能为空。
+
+## en-US
+
+Customize suggestions
+
+````jsx
+import { Mention } from 'antd';
+const Nav = Mention.Nav;
+
+const webFrameworks = [
+  { name: 'React', type: 'JavaScript' },
+  { name: 'Angular', type: 'JavaScript' },
+  { name: 'Laravel', type: 'PHP', disabled: true },
+  { name: 'Flask', type: 'Python' },
+  { name: 'Django', type: 'Python' },
+];
+
+const CustomNavMention = React.createClass({
+  getInitialState() {
+    return {
+      suggestions: [],
+      loading: false,
+    };
+  },
+  onSearchChange(value) {
+    const searchValue = value.toLowerCase();
+    const filtered = webFrameworks.filter(item =>
+      item.name.toLowerCase().indexOf(searchValue) !== -1
+    );
+
+    const suggestions = filtered.map(suggestion =>
+      <Nav value={suggestion.name} >
+        <span>{suggestion.name} - {suggestion.type} </span>
+      </Nav>);
+    this.setState({
+      suggestions,
+    });
+  },
+  render() {
+    const { suggestions, loading } = this.state;
+    return (<Mention
+      loading={loading}
+      suggestions={suggestions}
+      onSearchChange={this.onSearchChange}
+    />);
+  },
+});
+
+ReactDOM.render(
+  <CustomNavMention />,
+  mountNode
+);
+````

components/mention/demo/multilines.md

@@ -0,0 +1,32 @@
+---
+order: 4
+title: 多行
+---
+
+## zh-CN
+
+多行模式，多行模式必须指定高度。
+
+## en-US
+
+Multi lines mode.
+
+````jsx
+
+import { Mention } from 'antd';
+const { toString } = Mention;
+
+function onChange(editorState) {
+  console.log(toString(editorState));
+}
+
+ReactDOM.render(
+  <Mention
+    style={{ width: '100%', height: 200 }}
+    onChange={onChange}
+    suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
+    multiLines
+  />,
+  mountNode
+);
+````

components/mention/index.en-US.md

@@ -0,0 +1,43 @@
+---
+category: Components
+chinese: 提及
+cols: 1
+type: Views
+english: Mention
+---
+
+Mention component。
+
+## When To Use
+
+When need to mention someone or something.
+
+```html
+  <Mention 
+    onChange={onChange}
+    suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']} 
+  />,
+```
+
+## API
+
+### Mention props
+
+| Property     | Description          | Type     | Default       |
+|----------|---------------|----------|--------------|
+| suggestions    | suggestion content | Array<string> or Array<Mention.Nav> | [] |
+| suggestionStyle | style of suggestion container | Objet | {} |
+| onSearchChange | Callback function called when search content changes | function(value:String) | [] |
+| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null |
+| notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
+| loading | loading mode | boolean | false |
+| multiLines | multilines mode | boolean | false |
+| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
+| value | core state of mention | EditorState | null |
+
+### Nav props
+
+| Property     | Description           | Type     | Default       |
+|----------|---------------|----------|--------------|
+| value    | value of suggestion，the value will insert into input filed while selected | string | "" |
+| children | suggestion content | Objet | {} |