diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index 898255811f..eb674db09a 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -21,12 +21,17 @@ function onChange(editorState) { console.log(toString(editorState)); } +function onSelect(suggestion) { + console.log('onSelect', suggestion); +} + ReactDOM.render( , mountNode); ```` diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index 16af74ed72..548f5e654b 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -27,6 +27,9 @@ const webFrameworks = [ { name: 'Django', type: 'Python' }, ]; +function onSelect(suggestion) { + console.log('onSelect', suggestion); +} const CustomNavMention = React.createClass({ getInitialState() { return { @@ -48,9 +51,11 @@ const CustomNavMention = React.createClass({ const { suggestions } = this.state; return ( ); }, diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 632776b84c..311d5a6daa 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -37,12 +37,14 @@ When need to mention someone or something. | suggestionStyle | style of suggestion container | Object | {} | | onSearchChange | Callback function called when search content changes | function(value:String) | [] | | onChange | Callback function called when content of input changes | function(editorState: EditorState) | null | +| onSelect | Callback function called when select from suggestions | function(suggestion: String) | null | | notFoundContent| suggestion when suggestions empty | string | '无匹配结果,轻敲空格完成输入' | | loading | loading mode | boolean | false | | multiLines | multilines mode | boolean | false | | prefix | character which will trigger Mention to show mention list | string | '@' | | 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 | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index dde509af07..9a11dcc104 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -16,6 +16,7 @@ export interface MentionProps { className?: string; multiLines?: Boolean; prefix?: string; + placeholder?: string; } export interface MentionState { diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index 502c4495fa..a878d26328 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -37,10 +37,12 @@ title: Mention | suggestionStyle | 弹出下拉框样式 | Object | {} | | onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] | | onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null | +| onSelect | 下拉框选择建议时回调 | function(suggestion: String) | null | | notFoundContent| 未找到时的内容 | string | '无匹配结果,轻敲空格完成输入' | | loading | 加载中 | boolean | false | | multiLines | 多行模式 | boolean | false | | prefix | 触发弹出下拉框的字符 | string | '@' | +| placeHolder | 输入框默认文字 | string | null | | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null | | value | 值 | EditorState | null | diff --git a/components/mention/style/index.less b/components/mention/style/index.less index b59a7012be..6f16025f1a 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -19,7 +19,18 @@ overflow-y: auto; height: auto; } - + .public-DraftEditorPlaceholder-root { + position: absolute; + .public-DraftEditorPlaceholder-inner { + color: #ccc; + opacity: 1; + outline: none; + white-space: pre-wrap; + word-wrap: break-word; + height: auto; + padding: 4px 7px; + } + } .DraftEditor-editorContainer .public-DraftEditor-content { height: auto; padding: 4px 7px;