From 01fabac77a692cb1ca0da42db15471e60bdd3839 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 4 Jul 2016 10:31:27 +0800 Subject: [PATCH 01/10] Mention Component --- components/index.tsx | 3 + components/mention/demo/async.md | 56 +++++++++++++++ components/mention/demo/avatar.md | 66 ++++++++++++++++++ components/mention/demo/basic.md | 30 ++++++++ components/mention/demo/customTag.md | 64 +++++++++++++++++ components/mention/demo/multilines.md | 31 +++++++++ components/mention/index.en-US.md | 42 ++++++++++++ components/mention/index.tsx | 97 ++++++++++++++++++++++++++ components/mention/index.zh-CN.md | 43 ++++++++++++ components/mention/style/index.less | 99 +++++++++++++++++++++++++++ components/mention/style/index.tsx | 1 + package.json | 1 + 12 files changed, 533 insertions(+) create mode 100644 components/mention/demo/async.md create mode 100644 components/mention/demo/avatar.md create mode 100644 components/mention/demo/basic.md create mode 100644 components/mention/demo/customTag.md create mode 100644 components/mention/demo/multilines.md create mode 100644 components/mention/index.en-US.md create mode 100644 components/mention/index.tsx create mode 100644 components/mention/index.zh-CN.md create mode 100644 components/mention/style/index.less create mode 100644 components/mention/style/index.tsx diff --git a/components/index.tsx b/components/index.tsx index 6ad621be9f..5723cca7f7 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -48,3 +48,6 @@ export { Timeline } import Tooltip from './tooltip'; export { Tooltip } + +import Mention from './mention'; +export { Mention }; diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md new file mode 100644 index 0000000000..533be939ee --- /dev/null +++ b/components/mention/demo/async.md @@ -0,0 +1,56 @@ +--- +order: 1 +title: 异步加载 +--- + +## zh-CN + +匹配内容列表为异步返回时。 + +## en-US + +asnyc + +````jsx + +import { Mention } from 'antd'; + +const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']; +const AsyncMention = React.createClass({ + getInitialState() { + return { + suggestions: [], + loading: false, + }; + }, + fetchSuggestions(value, callback) { + setTimeout(() => { + callback(users.filter(item => item.indexOf(value) !== -1)); + }, 500); + }, + onSearchChange(value) { + this.fetchSuggestions(value, (suggestions) => { + this.setState({ + suggestions, + loading: false, + }); + }); + this.setState({ + loading: true, + }); + }, + render() { + const { suggestions, loading } = this.state; + return (); + }, +}); + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md new file mode 100644 index 0000000000..63160d21fb --- /dev/null +++ b/components/mention/demo/avatar.md @@ -0,0 +1,66 @@ +--- +order: 3 +title: 头像 +--- + +## zh-CN + +自定义建议（含头像） + +注意，自定义建议时，onSearchChange 必须不能为空。 + +## en-US + +Customize suggestions + +````jsx + +import { Mention } from 'antd'; +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: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' }, +]; + +const CustomNavMention = React.createClass({ + getInitialState() { + return { + suggestions: [], + loading: false, + }; + }, + onSearchChange(value) { + const searchValue = value.toLowerCase(); + const filtered = webFrameworks.filter(item => + item.name.toLowerCase().indexOf(searchValue) !== -1 + ); + + const suggestions = filtered.map(suggestion => + ); + this.setState({ + suggestions, + }); + }, + render() { + const { suggestions, loading } = this.state; + return (); + }, +}); + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md new file mode 100644 index 0000000000..ae48cec6ea --- /dev/null +++ b/components/mention/demo/basic.md @@ -0,0 +1,30 @@ +--- +order: 0 +title: 基本使用 +--- + +## zh-CN + +基本使用 + +## en-US + +Basic usage. + +````jsx + +import { Mention } from 'antd'; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/mention/demo/customTag.md b/components/mention/demo/customTag.md new file mode 100644 index 0000000000..de9efd0a48 --- /dev/null +++ b/components/mention/demo/customTag.md @@ -0,0 +1,64 @@ +--- +order: 2 +title: 自定义建议 +--- + +## zh-CN + +自定义建议 + +注意，自定义建议时，onSearchChange 必须不能为空。 + +## en-US + +Customize suggestions + +````jsx + +import { Mention } from 'antd'; +const Nav = Mention.Nav; + +const webFrameworks = [ + { name: 'React', type: 'JavaScript' }, + { name: 'Angular', type: 'JavaScript' }, + { name: 'Laravel', type: 'PHP', disabled: true }, + { name: 'Flask', type: 'Python' }, + { name: 'Django', type: 'Python' }, +]; + +const CustomNavMention = React.createClass({ + getInitialState() { + return { + suggestions: [], + loading: false, + }; + }, + onSearchChange(value) { + const searchValue = value.toLowerCase(); + const filtered = webFrameworks.filter(item => + item.name.toLowerCase().indexOf(searchValue) !== -1 + ); + + const suggestions = filtered.map(suggestion => + ); + this.setState({ + suggestions, + }); + }, + render() { + const { suggestions, loading } = this.state; + return (); + }, +}); + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md new file mode 100644 index 0000000000..7d82a2262f --- /dev/null +++ b/components/mention/demo/multilines.md @@ -0,0 +1,31 @@ +--- +order: 4 +title: 多行 +--- + +## zh-CN + +多行模式，多行模式必须指定高度。 + +## en-US + +Multi lines mode. + +````jsx + +import { Mention } from 'antd'; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + , + mountNode +); +```` diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md new file mode 100644 index 0000000000..ddc397806f --- /dev/null +++ b/components/mention/index.en-US.md @@ -0,0 +1,42 @@ +--- +category: Components +chinese: 提及 +cols: 1 +type: Views +english: Mention +--- + +Mention component。 + +## When To Use + +When need to mention someone or something. + +```html + , +``` + +## API + +### Mention props + +| Property | Description | Type | Default | +|----------|---------------|----------|--------------| +| suggestions | suggestion content | Array or Array | [] | +| suggestionStyle | style of suggestion container | Objet | {} | +| onSearchChange | Callback function called when search content changes | function(value:String) | [] | +| onChange | Callback function called when content of input changes | function(value:String) | null | +| notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' | +| loading | loading mode | boolean | false | +| multiLines | multilines mode | boolean | false | +| defaultValue | default value | string | null | + +### Nav props + +| Property | Description | Type | Default | +|----------|---------------|----------|--------------| +| value | value of suggestion，the value will insert into input filed while selected | string | "" | +| children | suggestion content | Objet | {} | diff --git a/components/mention/index.tsx b/components/mention/index.tsx new file mode 100644 index 0000000000..369f180b92 --- /dev/null +++ b/components/mention/index.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import RcMention, { Nav } from 'rc-editor-mention'; +import classnames from 'classnames'; + +export interface MentionProps { + prefixCls: string; + suggestionStyle?: Object; + suggestions?: Array; + onSearchChange?: Function; + onChange?: Function; + notFoundContent?: any; + loading?: Boolean; + multiLines?: Boolean; +} + +export interface MentionState { + suggestions?: Array; + focus?: Boolean; +} + +export default class Mention extends React.Component { + static Nav = Nav; + static defaultProps = { + prefixCls: 'ant-mention', + suggestions: [], + notFoundContent: '无匹配结果，轻敲空格完成输入', + loading: false, + multiLines: false, + }; + constructor(props) { + super(props); + this.state = { + suggestions: props.suggestions, + focus: false, + }; + } + + componentWillReceiveProps(nextProps) { + this.setState({ + suggestions: nextProps.suggestions, + }); + } + + onSearchChange(value) { + console.log('onSearchChange', this.props.onSearchChange); + if (this.props.onSearchChange) { + return this.props.onSearchChange(value); + } + return this.defaultSearchChange(value); + } + + onChange(editorState, textValue) { + if (this.props.onChange) { + this.props.onChange(textValue); + } + } + + defaultSearchChange(value: String): void { + const searchValue = value.toLowerCase(); + const filteredSuggestions = this.props.suggestions.filter( + suggestion => suggestion.toLowerCase().indexOf(searchValue) !== -1 + ); + this.setState({ + suggestions: filteredSuggestions, + }); + } + + render() { + const { className, prefixCls, style, multiLines, defaultValue} = this.props; + let { notFoundContent } = this.props; + + const { suggestions, focus } = this.state; + const cls = classnames({ + [className]: !!className, + ['active']: focus, + }); + + if (this.props.loading) { + notFoundContent = ; + } + + return this.setState({focus: true})} + onBlur={() => this.setState({focus: false})} + suggestions={suggestions} + notFoundContent={notFoundContent} + />; + } +} diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md new file mode 100644 index 0000000000..b42d6ac860 --- /dev/null +++ b/components/mention/index.zh-CN.md @@ -0,0 +1,43 @@ +--- +category: Components +chinese: 提及 +cols: 1 +type: Views +english: Mention +--- + +提及组件。(圈人组件) + +## 何时使用 + +用于在输入中提及某人或某事。 + +```html + , +``` + +## API + +### Mention props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|---------------|----------|--------------| +| suggestions | 建议内容 | Array or Array | [] | +| suggestionStyle | 弹出下拉框样式 | Objet | {} | +| onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] | +| onChange | 输入框内容变化时回调 | function(value:String) | null | +| notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | +| loading | 加载中 | boolean | false | +| multiLines | 多行模式 | boolean | false | +| defaultValue | 默认值 | string | null | + + +### Nav props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|---------------|----------|--------------| +| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" | +| children | 建议内容 | Objet | {} | diff --git a/components/mention/style/index.less b/components/mention/style/index.less new file mode 100644 index 0000000000..7f40f38ac3 --- /dev/null +++ b/components/mention/style/index.less @@ -0,0 +1,99 @@ +@import "../../style/themes/default"; +@import "../../style/mixins/index"; +@import '../../input/style/mixin.less'; + +.ant-mention-wrapper { + position: relative; + display: inline-block; + width: 100%; + &.active { + .ant-mention-editor { + .active; + } + } + .ant-mention-editor { + .input; + padding: 0; + } + .ant-mention-editor-wrapper { + overflow-y: auto; + height: auto; + } + .DraftEditor-editorContainer .public-DraftEditor-content{ + height: auto; + padding: 4px 7px; + } + + .ant-mention-dropdown { + margin-top: 1.5em; + max-height: 250px; + min-width: 120px; + background-color: white; + border: 1px solid @border-color-base; + 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-mention-dropdown-item { + color: #ccc; + + .anticon-loading { + color: @primary-color; + } + } + &-item { + position: relative; + display: block; + padding: 7px 15px; + 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%); + } + + &-disabled { + color: #ccc; + cursor: not-allowed; + + &:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; + } + } + + &-selected { + &, + &:hover { + background-color: #f7f7f7; + font-weight: bold; + color: #666; + } + } + + &-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + background-color: #e5e5e5; + line-height: 0; + } + } + } +} \ No newline at end of file diff --git a/components/mention/style/index.tsx b/components/mention/style/index.tsx new file mode 100644 index 0000000000..d74e52ee9f --- /dev/null +++ b/components/mention/style/index.tsx @@ -0,0 +1 @@ +import './index.less'; diff --git a/package.json b/package.json index 90e69dc9b7..aeb75af105 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "rc-collapse": "~1.6.3", "rc-dialog": "~6.1.1", "rc-dropdown": "~1.4.8", + "rc-editor-mention": "0.0.27", "rc-form": "~0.17.1", "rc-input-number": "~2.5.12", "rc-menu": "~4.12.4", From 1fd4837d255cd780ba3b2e1fdfa20d4ef79af4a2 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 5 Jul 2016 09:48:27 +0800 Subject: [PATCH 02/10] lesslint fix --- components/mention/style/index.less | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/components/mention/style/index.less b/components/mention/style/index.less index 7f40f38ac3..be73b58162 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -6,10 +6,8 @@ position: relative; display: inline-block; width: 100%; - &.active { - .ant-mention-editor { - .active; - } + &.active .ant-mention-editor { + .active; } .ant-mention-editor { .input; @@ -19,7 +17,7 @@ overflow-y: auto; height: auto; } - .DraftEditor-editorContainer .public-DraftEditor-content{ + .DraftEditor-editorContainer .public-DraftEditor-content { height: auto; padding: 4px 7px; } From 8e3d2b823a4f4d1441d9443d9857ef99435383f3 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 5 Jul 2016 11:00:52 +0800 Subject: [PATCH 03/10] improvement after review --- components/mention/demo/customTag.md | 1 - components/mention/index.tsx | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/mention/demo/customTag.md b/components/mention/demo/customTag.md index de9efd0a48..fe59adc88d 100644 --- a/components/mention/demo/customTag.md +++ b/components/mention/demo/customTag.md @@ -14,7 +14,6 @@ title: 自定义建议 Customize suggestions ````jsx - import { Mention } from 'antd'; const Nav = Mention.Nav; diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 369f180b92..2c769b4663 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -10,6 +10,9 @@ export interface MentionProps { onChange?: Function; notFoundContent?: any; loading?: Boolean; + style?: Object; + defaultValue?: string, + className?: string, multiLines?: Boolean; } @@ -66,7 +69,7 @@ export default class Mention extends React.Component } render() { - const { className, prefixCls, style, multiLines, defaultValue} = this.props; + const { className, prefixCls, style, multiLines, defaultValue } = this.props; let { notFoundContent } = this.props; const { suggestions, focus } = this.state; From aea176e0452da28a21931adf63a610b51e6c7826 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 5 Jul 2016 14:16:51 +0800 Subject: [PATCH 04/10] rc-editor-mention version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aeb75af105..5301e69dc5 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "rc-collapse": "~1.6.3", "rc-dialog": "~6.1.1", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "0.0.27", + "rc-editor-mention": "~0.0.27", "rc-form": "~0.17.1", "rc-input-number": "~2.5.12", "rc-menu": "~4.12.4", From 595938f5f228b1abf92123dd0e923201f7bd44db Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 4 Jul 2016 10:31:27 +0800 Subject: [PATCH 05/10] Mention Component --- components/mention/style/index.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/mention/style/index.less b/components/mention/style/index.less index be73b58162..b16bf89f4c 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -6,8 +6,10 @@ position: relative; display: inline-block; width: 100%; - &.active .ant-mention-editor { - .active; + &.active { + .ant-mention-editor { + .active; + } } .ant-mention-editor { .input; @@ -17,6 +19,7 @@ overflow-y: auto; height: auto; } + .DraftEditor-editorContainer .public-DraftEditor-content { height: auto; padding: 4px 7px; From f547a97020018c38aa12e37b8073eec5a72bb98a Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 5 Jul 2016 09:48:27 +0800 Subject: [PATCH 06/10] lesslint fix --- components/mention/style/index.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/mention/style/index.less b/components/mention/style/index.less index b16bf89f4c..07d4048f42 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -6,10 +6,8 @@ position: relative; display: inline-block; width: 100%; - &.active { - .ant-mention-editor { - .active; - } + &.active .ant-mention-editor { + .active; } .ant-mention-editor { .input; From 69da207f3cd07ea22ba07463078bf22a1926f464 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 18 Jul 2016 16:58:08 +0800 Subject: [PATCH 07/10] support value props and controllred mode --- components/mention/demo/basic.md | 2 +- components/mention/demo/multilines.md | 2 +- components/mention/index.en-US.md | 3 ++- components/mention/index.tsx | 2 +- components/mention/index.zh-CN.md | 3 ++- package.json | 2 +- 6 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index ae48cec6ea..b0dcfbb992 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -15,7 +15,7 @@ Basic usage. import { Mention } from 'antd'; -function onChange(value) { +function onChange(editorState, value) { console.log(value); } diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md index 7d82a2262f..9148c408dc 100644 --- a/components/mention/demo/multilines.md +++ b/components/mention/demo/multilines.md @@ -15,7 +15,7 @@ Multi lines mode. import { Mention } from 'antd'; -function onChange(value) { +function onChange(editorState, value) { console.log(value); } diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index ddc397806f..2821aca970 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -28,11 +28,12 @@ When need to mention someone or something. | suggestions | suggestion content | Array or Array | [] | | suggestionStyle | style of suggestion container | Objet | {} | | onSearchChange | Callback function called when search content changes | function(value:String) | [] | -| onChange | Callback function called when content of input changes | function(value:String) | null | +| onChange | Callback function called when content of input changes | function(editorState: EditorState, value:String) | null | | notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' | | loading | loading mode | boolean | false | | multiLines | multilines mode | boolean | false | | defaultValue | default value | string | null | +| value | core state of mention | EditorState | null | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 2c769b4663..85253e26b3 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -54,7 +54,7 @@ export default class Mention extends React.Component onChange(editorState, textValue) { if (this.props.onChange) { - this.props.onChange(textValue); + this.props.onChange(editorState, textValue); } } diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index b42d6ac860..22f2652290 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -28,11 +28,12 @@ english: Mention | suggestions | 建议内容 | Array or Array | [] | | suggestionStyle | 弹出下拉框样式 | Objet | {} | | onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] | -| onChange | 输入框内容变化时回调 | function(value:String) | null | +| onChange | 输入框内容变化时回调 | function(editorState: EditorState, value:String) | null | | notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | | loading | 加载中 | boolean | false | | multiLines | 多行模式 | boolean | false | | defaultValue | 默认值 | string | null | +| value | 值 | EditorState | null | ### Nav props diff --git a/package.json b/package.json index 5301e69dc5..48eb12cd60 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "rc-collapse": "~1.6.3", "rc-dialog": "~6.1.1", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "~0.0.27", + "rc-editor-mention": "0.0.29", "rc-form": "~0.17.1", "rc-input-number": "~2.5.12", "rc-menu": "~4.12.4", From 23df8f750483c458a6fcb0d5eefce90c89c6b9ea Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 18 Jul 2016 17:58:55 +0800 Subject: [PATCH 08/10] tslint fix --- components/mention/index.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 85253e26b3..32e696519e 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -4,15 +4,15 @@ import classnames from 'classnames'; export interface MentionProps { prefixCls: string; - suggestionStyle?: Object; + suggestionStyle?: Object; suggestions?: Array; onSearchChange?: Function; onChange?: Function; notFoundContent?: any; loading?: Boolean; style?: Object; - defaultValue?: string, - className?: string, + defaultValue?: string; + className?: string; multiLines?: Boolean; } @@ -45,7 +45,6 @@ export default class Mention extends React.Component } onSearchChange(value) { - console.log('onSearchChange', this.props.onSearchChange); if (this.props.onSearchChange) { return this.props.onSearchChange(value); } @@ -57,10 +56,10 @@ export default class Mention extends React.Component this.props.onChange(editorState, textValue); } } - + defaultSearchChange(value: String): void { const searchValue = value.toLowerCase(); - const filteredSuggestions = this.props.suggestions.filter( + const filteredSuggestions = this.props.suggestions.filter( suggestion => suggestion.toLowerCase().indexOf(searchValue) !== -1 ); this.setState({ @@ -69,9 +68,9 @@ export default class Mention extends React.Component } render() { - const { className, prefixCls, style, multiLines, defaultValue } = this.props; + const { className, prefixCls, style, multiLines, defaultValue } = this.props; let { notFoundContent } = this.props; - + const { suggestions, focus } = this.state; const cls = classnames({ [className]: !!className, @@ -81,8 +80,8 @@ export default class Mention extends React.Component if (this.props.loading) { notFoundContent = ; } - - return onChange={this.onChange.bind(this)} onFocus={() => this.setState({focus: true})} onBlur={() => this.setState({focus: false})} - suggestions={suggestions} + suggestions={suggestions} notFoundContent={notFoundContent} />; } From 3fe36f458463be6ee8729cbc735876c727153401 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 19 Jul 2016 12:31:03 +0800 Subject: [PATCH 09/10] export `toString` of Mention --- components/mention/demo/basic.md | 5 +++-- components/mention/demo/multilines.md | 5 +++-- components/mention/index.tsx | 7 ++++--- package.json | 2 +- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index b0dcfbb992..e637dc6c01 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -14,9 +14,10 @@ Basic usage. ````jsx import { Mention } from 'antd'; +const { toString } = Mention; -function onChange(editorState, value) { - console.log(value); +function onChange(editorState) { + console.log(toString(editorState)); } ReactDOM.render( diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md index 9148c408dc..4f4356ef4d 100644 --- a/components/mention/demo/multilines.md +++ b/components/mention/demo/multilines.md @@ -14,9 +14,10 @@ Multi lines mode. ````jsx import { Mention } from 'antd'; +const { toString } = Mention; -function onChange(editorState, value) { - console.log(value); +function onChange(editorState) { + console.log(toString(editorState)); } ReactDOM.render( diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 32e696519e..538153694d 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import RcMention, { Nav } from 'rc-editor-mention'; +import RcMention, { Nav, toString } from 'rc-editor-mention'; import classnames from 'classnames'; export interface MentionProps { @@ -23,6 +23,7 @@ export interface MentionState { export default class Mention extends React.Component { static Nav = Nav; + static toString = toString; static defaultProps = { prefixCls: 'ant-mention', suggestions: [], @@ -51,9 +52,9 @@ export default class Mention extends React.Component return this.defaultSearchChange(value); } - onChange(editorState, textValue) { + onChange(editorState) { if (this.props.onChange) { - this.props.onChange(editorState, textValue); + this.props.onChange(editorState); } } diff --git a/package.json b/package.json index 48eb12cd60..f623294594 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "rc-collapse": "~1.6.3", "rc-dialog": "~6.1.1", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "0.0.29", + "rc-editor-mention": "0.0.30", "rc-form": "~0.17.1", "rc-input-number": "~2.5.12", "rc-menu": "~4.12.4", From 3095f58be8ebf2c78b45d1bfa08f04a69350bf3c Mon Sep 17 00:00:00 2001 From: RaoHai Date: Tue, 19 Jul 2016 13:39:05 +0800 Subject: [PATCH 10/10] export toEditorState of `Mention` --- components/mention/demo/basic.md | 5 +++-- components/mention/index.en-US.md | 4 ++-- components/mention/index.tsx | 3 ++- components/mention/index.zh-CN.md | 4 ++-- package.json | 2 +- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index e637dc6c01..45237f2aaf 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -14,7 +14,8 @@ Basic usage. ````jsx import { Mention } from 'antd'; -const { toString } = Mention; +const { toString, toEditorState } = Mention; + function onChange(editorState) { console.log(toString(editorState)); @@ -23,7 +24,7 @@ function onChange(editorState) { ReactDOM.render( , mountNode diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 2821aca970..e56e7644a9 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -28,11 +28,11 @@ When need to mention someone or something. | suggestions | suggestion content | Array or Array | [] | | suggestionStyle | style of suggestion container | Objet | {} | | onSearchChange | Callback function called when search content changes | function(value:String) | [] | -| onChange | Callback function called when content of input changes | function(editorState: EditorState, value:String) | null | +| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null | | notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' | | loading | loading mode | boolean | false | | multiLines | multilines mode | boolean | false | -| defaultValue | default value | string | null | +| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null | | value | core state of mention | EditorState | null | ### Nav props diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 538153694d..9a84e9955f 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import RcMention, { Nav, toString } from 'rc-editor-mention'; +import RcMention, { Nav, toString, toEditorState } from 'rc-editor-mention'; import classnames from 'classnames'; export interface MentionProps { @@ -24,6 +24,7 @@ export interface MentionState { export default class Mention extends React.Component { static Nav = Nav; static toString = toString; + static toEditorState = toEditorState; static defaultProps = { prefixCls: 'ant-mention', suggestions: [], diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md index 22f2652290..240b27553f 100644 --- a/components/mention/index.zh-CN.md +++ b/components/mention/index.zh-CN.md @@ -28,11 +28,11 @@ english: Mention | suggestions | 建议内容 | Array or Array | [] | | suggestionStyle | 弹出下拉框样式 | Objet | {} | | onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] | -| onChange | 输入框内容变化时回调 | function(editorState: EditorState, value:String) | null | +| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null | | notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | | loading | 加载中 | boolean | false | | multiLines | 多行模式 | boolean | false | -| defaultValue | 默认值 | string | null | +| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null | | value | 值 | EditorState | null | diff --git a/package.json b/package.json index f623294594..887634a406 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "rc-collapse": "~1.6.3", "rc-dialog": "~6.1.1", "rc-dropdown": "~1.4.8", - "rc-editor-mention": "0.0.30", + "rc-editor-mention": "^0.1.0", "rc-form": "~0.17.1", "rc-input-number": "~2.5.12", "rc-menu": "~4.12.4",