Expose onFocus and onBlur callback of Mention

+ close ant-design#4163
RaoHai · Dec 7, 2016 · 1f1e812 · 1f1e812
1 parent 1f36734
commit 1f1e812
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
@@ -45,6 +45,8 @@ When need to mention someone or something.
 | value | core state of mention | EditorState | null |
 | placeHolder | placeholder of input | string | null |
 | getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative.  | Function() | () => document.body |
+| onFocus | Callback function called when mention component get focus |  function() | null |
+| onBlur | Callback function called when mention component blur | function() | nul |
 
 ### Nav props
 

diff --git a/components/mention/index.tsx b/components/mention/index.tsx
@@ -19,6 +19,8 @@ export interface MentionProps {
   prefix?: string;
   placeholder?: string;
   getSuggestionContainer?: Function;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface MentionState {
@@ -73,7 +75,22 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       suggestions: filteredSuggestions,
     });
   }
-
+  onFocus = () => {
+    this.setState({
+      focus: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  }
+  onBlur = () => {
+    this.setState({
+      focus: false,
+    });
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  }
   render() {
     const { className = '', prefixCls, loading } = this.props;
     const { suggestions, focus } = this.state;
@@ -91,8 +108,8 @@ export default class Mention extends React.Component<MentionProps, MentionState>
         className={cls}
         onSearchChange={this.onSearchChange}
         onChange={this.onChange}
-        onFocus={() => this.setState({ focus: true })}
-        onBlur={() => this.setState({ focus: false })}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         suggestions={suggestions}
         notFoundContent={notFoundContent}
       />

diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
@@ -45,6 +45,8 @@ title: Mention
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
 | getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
+| onFocus | 获得焦点时回调 |  function() | null |
+| onBlur | 失去焦点时回调 | function() | nul |
 
 ### Nav props