diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index 0fc1d17a89e5..f216ec81678e 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -15,10 +15,10 @@ Basic usage. ````jsx import { Mention } from 'antd'; -const { toString, toEditorState } = Mention; +const { toString, toContentState } = Mention; -function onChange(editorState) { - console.log(toString(editorState)); +function onChange(contentState) { + console.log(toString(contentState)); } function onSelect(suggestion) { @@ -29,7 +29,7 @@ ReactDOM.render( diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md index acca508b5f04..4cf0c1b997b2 100644 --- a/components/mention/demo/controllder-simple.md +++ b/components/mention/demo/controllder-simple.md @@ -15,11 +15,11 @@ Controlled mode. ````jsx import { Mention } from 'antd'; -const { toEditorState } = Mention; +const { toContentState } = Mention; class App extends React.Component { state = { - value: toEditorState('@afc163'), + value: toContentState('@afc163'), } handleChange = (editorState) => { this.setState({ diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md index 24e7dc060ebb..bdd915b4fdfa 100644 --- a/components/mention/demo/controlled.md +++ b/components/mention/demo/controlled.md @@ -15,12 +15,12 @@ Controlled mode, for example, to work with `Form`. ````jsx import { Mention, Form, Button } from 'antd'; -const { toEditorState, getMentions } = Mention; +const { toContentState, getMentions } = Mention; const FormItem = Form.Item; class App extends React.Component { state = { - initValue: toEditorState('@afc163'), + initValue: toContentState('@afc163'), } handleReset = (e) => { e.preventDefault(); diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md index 456683a4e481..b79bed5e184c 100644 --- a/components/mention/demo/popupContainer.md +++ b/components/mention/demo/popupContainer.md @@ -15,7 +15,7 @@ To set the container of the suggestion. ````jsx import { Mention, Popover, Button } from 'antd'; -const { toString, toEditorState } = Mention; +const { toString, toContentState } = Mention; function onChange(editorState) { console.log(toString(editorState)); @@ -34,7 +34,7 @@ class PopoverContainer extends React.Component { +
+ +
+ + + ); +} + + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 5d139c28e604..2351b6572acc 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -23,9 +23,10 @@ When need to mention someone or something. | API | Description | Type | |----------|---------------|----------|--------------| -| toString | convert EditorState to string | Function(editorState: EditorState): string | -| toEditorState | convert string to EditorState | Function(value: string): EditorState | -| getMentions | get mentioned people in current editorState | Function(editorState: EditorState): string[] | +| toString | convert ContentState to string | Function(contentState: ContentState): string | +| toContentState (recommended) | convert string to ContentState | Function(value: string): ContentState | +| toEditorState (Backward compatible) | convert string to ContentState | Function(value: string): ContentState | +| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string[] | ### Mention props @@ -35,18 +36,20 @@ When need to mention someone or something. | suggestions | suggestion content | Array | [] | | suggestionStyle | style of suggestion container | object | {} | | onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | [] | -| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null | +| onChange | Callback function called when content of input changes | function(contentState: ContentState) | null | | onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | 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 or Array | '@' | -| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null | -| value | core state of mention | EditorState | null | +| defaultValue | default value | ContentState, you can use `Mention.toContentState` or `Mention.toEditorState` to convert text to `ContentState` | null | +| value | core state of mention | ContentState | 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 | functione) | null | | onBlur | Callback function called when mention component blur | function(e) | null | +| readOnly | Tell if the input is readonly. | boolean | false | +| disabled | Tell if the input is disabled. | boolean | false | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 3c1a583a020f..b975d8f7d472 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -22,6 +22,8 @@ export interface MentionProps { getSuggestionContainer?: (triggerNode: Element) => HTMLElement; onFocus?: Function; onBlur?: Function; + readOnly?: boolean; + disabled?: boolean; } export interface MentionState { @@ -30,9 +32,6 @@ export interface MentionState { } export default class Mention extends React.Component { - static Nav = Nav; - static toString = toString; - static toEditorState = toEditorState; static getMentions = getMentions; static defaultProps = { prefixCls: 'ant-mention', @@ -40,6 +39,13 @@ export default class Mention extends React.Component loading: false, multiLines: false, }; + static Nav = Nav; + static toString = toString; + static toContentState = toEditorState; + static toEditorState = text => { + console.warn('Mention.toEditorState is deprecated. Use toContentState instead.'); + return toEditorState(text); + } constructor(props) { super(props); this.state = { diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index a4602ce3d9cb..f6ce5c1e7a5c 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -24,9 +24,10 @@ title: Mention | API | 说明 | 类型 | |----------|---------------|----------| -| toString | 把 EditorState 转成字符串 | Function(editorState: EditorState): string | -| toEditorState | 把字符串转成 EditorState | Function(value: string): EditorState | -| getMentions | 获取当前 editorState 中提到的人的列表 | Function(editorState: EditorState): string[] | +| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string | +| toContentState(推荐) | 把字符串转成 ContentState | Function(value: string): ContentState | +| toEditorState(兼容) | 把字符串转成 ContentState | Function(value: string): ContentState | +| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string[] | ### Mention props @@ -35,18 +36,20 @@ title: Mention | suggestions | 建议内容 | Array | [] | | suggestionStyle | 弹出下拉框样式 | object | {} | | onSearchChange | 输入框中 @ 变化时回调 | function(value:string, trigger: string) | [] | -| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null | +| onChange | 输入框内容变化时回调 | function(contentState: ContentState) | null | | onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null | | notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | | loading | 加载中 | boolean | false | | multiLines | 多行模式 | boolean | false | | prefix | 触发弹出下拉框的字符 | string or Array | '@' | | placeholder | 输入框默认文字 | string | null | -| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null | -| value | 值 | EditorState | null | +| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 或 `Mention.toEditorState(text)` 把文字转换成 ContentState | null | +| value | 值 | ContentState | null | | getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| function() | () => document.body | | onFocus | 获得焦点时回调 | function(e) | null | | onBlur | 失去焦点时回调 | function(e) | null | +| readOnly | 是否只读. | boolean | false | +| disabled | 是否禁用状态. | boolean | false | ### Nav props diff --git a/components/mention/style/index.less b/components/mention/style/index.less index ae1701b4d9a0..6f26731d1c46 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -18,9 +18,12 @@ height: auto; } } - &.@{mention-prefix-cls}-active .@{mention-prefix-cls}-editor { + &.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor { .active; } + &.disabled .@{mention-prefix-cls}-editor { + .disabled(); + } .public-DraftEditorPlaceholder-root { position: absolute; .public-DraftEditorPlaceholder-inner { diff --git a/package.json b/package.json index 0820f707b92e..ff955dc247cd 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "rc-collapse": "~1.7.0", "rc-dialog": "~6.5.0", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "~0.5.2", + "rc-editor-mention": "~0.6.11", "rc-form": "~1.3.0", "rc-input-number": "~3.4.4", "rc-menu": "~5.0.9",