Mention Improvement

+ add `getSuggestionContainer` callback function, which allow users modify the container element of suggestions dropdown. + the suggestions dropdown will mount on `document.body` defaultly, instead of on editor. + close ant-design#3588
RaoHai · Oct 31, 2016 · c5a043b · c5a043b
1 parent 037d739
commit c5a043b
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 69 deletions.
diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md
@@ -44,7 +44,7 @@ const AsyncMention = React.createClass({
     const { suggestions, loading } = this.state;
     return (
       <Mention
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}

diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md
@@ -22,7 +22,7 @@ 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: 'Dva', type: 'Javascript', icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png' },
   { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
 ];
 
@@ -53,7 +53,7 @@ const CustomNavMention = React.createClass({
     const { suggestions } = this.state;
     return (
       <Mention
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
       />

diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md
@@ -27,7 +27,7 @@ function onSelect(suggestion) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: 500, height: 100 }}
+    style={{ width: '100%', height: 100 }}
     onChange={onChange}
     defaultValue={toEditorState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}

diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
@@ -55,7 +55,7 @@ let App = React.createClass({
       <Form horizontal>
         <FormItem
           id="control-mention"
-          label="Top programmers"
+          label="Top coders"
           labelCol={{ span: 6 }}
           wrapperCol={{ span: 14 }}
         >

diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
@@ -52,7 +52,7 @@ const CustomNavMention = React.createClass({
     return (
       <Mention
         placeholder="@someone"
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
         onSelect={onSelect}

diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md
@@ -23,7 +23,7 @@ function onChange(editorState) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: 500, height: 100 }}
+    style={{ width: '100%', height: 100 }}
     onChange={onChange}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
     multiLines

diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
@@ -1,6 +1,5 @@
 ---
 category: Components
-cols: 1
 type: Views
 title: Mention
 ---
@@ -45,6 +44,7 @@ When need to mention someone or something.
 | defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
 | 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.ready |
 
 ### Nav props
 

diff --git a/components/mention/index.tsx b/components/mention/index.tsx
@@ -17,6 +17,7 @@ export interface MentionProps {
   multiLines?: Boolean;
   prefix?: string;
   placeholder?: string;
+  getSuggestionContainer?: Function;
 }
 
 export interface MentionState {

diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
@@ -1,7 +1,6 @@
 ---
 category: Components
 subtitle: 提及
-cols: 1
 type: Views
 title: Mention
 ---
@@ -45,6 +44,7 @@ title: Mention
 | placeHolder | 输入框默认文字 | string | null |
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
+| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
 
 ### Nav props
 

diff --git a/components/mention/style/index.less b/components/mention/style/index.less
@@ -35,76 +35,77 @@
     height: auto;
     padding: 4px 7px;
   }
+}
 
-  .@{ant-prefix}-mention-dropdown {
-    margin-top: 1.5em;
-    max-height: 250px;
-    min-width: 120px;
-    background-color: white;
-    box-shadow: @box-shadow-base;
-    border-radius: @border-radius-base;
-    box-sizing: border-box;
-    z-index: @zindex-dropdown;
-    left: -9999px;
-    top: -9999px;
-    position: absolute;
-    outline: none;
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: @font-size-base;
-    &-notfound.@{ant-prefix}-mention-dropdown-item {
-      color: #ccc;
+.@{ant-prefix}-mention-dropdown {
+  margin-top: 1.5em;
+  max-height: 250px;
+  min-width: 120px;
+  background-color: white;
+  box-shadow: @box-shadow-base;
+  border-radius: @border-radius-base;
+  box-sizing: border-box;
+  z-index: @zindex-dropdown;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: @font-size-base;
+  &-notfound.@{ant-prefix}-mention-dropdown-item {
+    color: #ccc;
 
-      .@{iconfont-css-prefix}-loading {
-        color: @primary-color;
-      }
+    .@{iconfont-css-prefix}-loading {
+      color: @primary-color;
     }
-    &-item {
-      position: relative;
-      display: block;
-      padding: 7px 16px;
-      font-weight: normal;
-      color: #666;
-      white-space: nowrap;
-      cursor: pointer;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition: background 0.3s ease;
+  }
+  &-item {
+    position: relative;
+    display: block;
+    padding: 7px 16px;
+    font-weight: normal;
+    color: #666;
+    white-space: nowrap;
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    transition: background 0.3s ease;
 
-      &:hover,
-      &.focus,
-      &-active {
-        background-color: tint(@primary-color, 90%);
-      }
+    &:hover,
+    &.focus,
+    &-active {
+      background-color: tint(@primary-color, 90%);
+    }
 
-      &-disabled {
+    &-disabled {
+      color: #ccc;
+      cursor: not-allowed;
+
+      &:hover {
         color: #ccc;
+        background-color: #fff;
         cursor: not-allowed;
-
-        &:hover {
-          color: #ccc;
-          background-color: #fff;
-          cursor: not-allowed;
-        }
       }
+    }
 
-      &-selected {
-        &,
-        &:hover {
-          background-color: @background-color-base;
-          font-weight: bold;
-          color: #666;
-        }
+    &-selected {
+      &,
+      &:hover {
+        background-color: @background-color-base;
+        font-weight: bold;
+        color: #666;
       }
+    }
 
-      &-divider {
-        height: 1px;
-        margin: 1px 0;
-        overflow: hidden;
-        background-color: #e5e5e5;
-        line-height: 0;
-      }
+    &-divider {
+      height: 1px;
+      margin: 1px 0;
+      overflow: hidden;
+      background-color: #e5e5e5;
+      line-height: 0;
     }
   }
 }
+
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "rc-collapse": "~1.6.4",
     "rc-dialog": "~6.4.0",
     "rc-dropdown": "~1.4.8",
-    "rc-editor-mention": "~0.2.2",
+    "rc-editor-mention": "~0.3.0",
     "rc-form": "~1.0.0",
     "rc-input-number": "~2.7.0",
     "rc-menu": "~5.0.1",