feat: support Mention[disabled|readOnly] and add some warning(#6004)

#### FEATURES

 * use `ContentState` instead of `EditorState`, selection events won't trigger
   onChange anymore.
 * deprecated `Mention.toEditorState`, instead of `Mention.toContentState`,
 * `Mention.toEditorState` are compatibled, but have a warnning in console.

 #### ISSUES

 * `disabled` and `readOnly` props supported.
 * fixed controlled mode bug.

 * close #5788
 * close #5175
 * close #react-component/editor-mention#7

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(
   <Mention
     style={{ width: '100%', height: 100 }}
     onChange={onChange}
-    defaultValue={toEditorState('@afc163')}
+    defaultValue={toContentState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
     onSelect={onSelect}
   />

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({

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();

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 {
       <Mention
         style={{ width: '100%', height: 100 }}
         onChange={onChange}
-        defaultValue={toEditorState('@afc163')}
+        defaultValue={toContentState('@afc163')}
         suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
         onSelect={onSelect}
         getSuggestionContainer={this.getSuggestionContainer}

components/mention/demo/readonly.md

@@ -0,0 +1,53 @@
+---
+order: 7
+title:
+  zh-CN: 无效或只读
+  en-US: disabled or readOnly
+---
+
+## zh-CN
+
+通过 `disabled` 属性设置是否生效。通过 `readOnly` 属性设置是否只读。
+
+## en-US
+
+Configurate `disabled` and `readOnly`.
+
+````jsx
+import { Mention } from 'antd';
+const { toString } = Mention;
+
+function onChange(editorState) {
+  console.log(toString(editorState));
+}
+
+const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
+
+function App() {
+  return (
+    <div>
+      <div style={{ marginBottom: 10 }}>
+        <Mention
+          style={{ width: '100%' }}
+          onChange={onChange}
+          placeholder="this is disabled Mention"
+          suggestions={users}
+          disabled
+        />
+      </div>
+      <Mention
+        style={{ width: '100%' }}
+        onChange={onChange}
+        placeholder="this is readOnly Mention"
+        suggestions={users}
+        readOnly
+      />
+    </div>
+  );
+}
+
+
+ReactDOM.render(
+  <App />
+, mountNode);
+````

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<string\|Mention.Nav> | [] |
 | 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<string> | '@' |
-| 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
 

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,16 +32,20 @@ export interface MentionState {
 }
 
 export default class Mention extends React.Component<MentionProps, MentionState> {
-  static Nav = Nav;
-  static toString = toString;
-  static toEditorState = toEditorState;
   static getMentions = getMentions;
   static defaultProps = {
     prefixCls: 'ant-mention',
     notFoundContent: '无匹配结果，轻敲空格完成输入',
     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 = {

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<string\|Mention.Nav> | [] |
 | 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<string> | '@' |
 | 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
 

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 {

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",