From c5a043b4c8122275ecdb69847ef48e3ff2f26b84 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 31 Oct 2016 15:39:03 +0800 Subject: [PATCH] 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 #3588 --- components/mention/demo/async.md | 2 +- components/mention/demo/avatar.md | 4 +- components/mention/demo/basic.md | 2 +- components/mention/demo/controlled.md | 2 +- components/mention/demo/custom-tag.md | 2 +- components/mention/demo/multilines.md | 2 +- components/mention/index.en-US.md | 2 +- components/mention/index.tsx | 1 + components/mention/index.zh-CN.md | 2 +- components/mention/style/index.less | 119 +++++++++++++------------- package.json | 2 +- 11 files changed, 71 insertions(+), 69 deletions(-) diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md index 89e958ad338f..dc0dc465e5c1 100644 --- 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 ( diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index eb674db09a9b..0fc1d17a89e5 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -27,7 +27,7 @@ function onSelect(suggestion) { ReactDOM.render( diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index 548f5e654b4f..e1ca42ebcf44 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -52,7 +52,7 @@ const CustomNavMention = React.createClass({ return ( document.ready | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index d625c56ada47..0db0f29a616e 100644 --- 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 index a878d26328b0..4a2b2bff23b3 100644 --- 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 index 05669deb1bc0..f5b6ebfb585f 100644 --- 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 index f92a85a56ca5..a6f1270f9fbd 100644 --- 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",