test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Merge branch 'RaoHai-mention-suggestion-fixed'

Browse Source
This commit is contained in:
Meck 2016-11-02 15:07:49 +08:00
commit ae5f8c1a04
12 changed files with 123 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/mention/demo/async.md
View File

@ -44,7 +44,7 @@ const AsyncMention = React.createClass({
const { suggestions, loading } = this.state;
return (
<Mention
style={{ width: 500, height: 100 }}
style={{ width: '100%', height: 100 }}
loading={loading}
suggestions={suggestions}
onSearchChange={this.onSearchChange}

4
components/mention/demo/avatar.md
View File

@ -22,7 +22,7 @@ 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: 'Dva', type: 'Javascript', icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png' },
{ name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
];
@ -53,7 +53,7 @@ const CustomNavMention = React.createClass({
const { suggestions } = this.state;
return (
<Mention
style={{ width: 500, height: 100 }}
style={{ width: '100%', height: 100 }}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
/>

2
components/mention/demo/basic.md
View File

@ -27,7 +27,7 @@ function onSelect(suggestion) {
ReactDOM.render(
<Mention
style={{ width: 500, height: 100 }}
style={{ width: '100%', height: 100 }}
onChange={onChange}
defaultValue={toEditorState('@afc163')}
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}

2
components/mention/demo/controlled.md
View File

@ -55,7 +55,7 @@ let App = React.createClass({
<Form horizontal>
<FormItem
id="control-mention"
label="Top programmers"
label="Top coders"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>

2
components/mention/demo/custom-tag.md
View File

@ -52,7 +52,7 @@ const CustomNavMention = React.createClass({
return (
<Mention
placeholder="@someone"
style={{ width: 500, height: 100 }}
style={{ width: '100%', height: 100 }}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
onSelect={onSelect}

2
components/mention/demo/multilines.md
View File

@ -23,7 +23,7 @@ function onChange(editorState) {
ReactDOM.render(
<Mention
style={{ width: 500, height: 100 }}
style={{ width: '100%', height: 100 }}
onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
multiLines

47
components/mention/demo/popupContainer.md Normal file
View File

@ -0,0 +1,47 @@
---
order: 6
title:
zh-CN: 建议渲染父节点
en-US: SuggestionContainer
---
## zh-CN
指定提示渲染的父节点。
## en-US
To set the container of the suggestion.
````jsx
import { Mention, Popover, Button } from 'antd';
const { toString, toEditorState } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
function onSelect(suggestion) {
console.log('onSelect', suggestion);
}
const PopoverContainer = React.createClass({
getSuggestionContainer() {
return this.popover.getPopupDomNode();
},
render() {
const mention = (<Mention
style={{ width: '100%', height: 100 }}
onChange={onChange}
defaultValue={toEditorState('@afc163')}
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
onSelect={onSelect}
getSuggestionContainer={this.getSuggestionContainer}
/>);
return (<Popover trigger="click" content={mention} title="Title" ref={popover => this.popover = popover}>
<Button type="primary">Click Me</Button>
</Popover>);
},
});
ReactDOM.render(<PopoverContainer />, mountNode);
````

2
components/mention/index.en-US.md
View File

@ -1,6 +1,5 @@
---
category: Components
cols: 1
type: Views
title: Mention
---
@ -45,6 +44,7 @@ When need to mention someone or something.
| 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 |
| 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 |
### Nav props

1
components/mention/index.tsx
View File

@ -17,6 +17,7 @@ export interface MentionProps {
multiLines?: Boolean;
prefix?: string;
placeholder?: string;
getSuggestionContainer?: Function;
}
export interface MentionState {

2
components/mention/index.zh-CN.md
View File

@ -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

129
components/mention/style/index.less
View File

@ -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 {
.@{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;
}
}
&-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%);
}
&-disabled {
color: #ccc;
cursor: not-allowed;
.@{iconfont-css-prefix}-loading {
color: @primary-color;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&-item {
position: relative;
display: block;
padding: 7px 16px;
font-weight: normal;
color: #666;
white-space: nowrap;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
&-selected {
&,
&:hover {
background-color: @background-color-base;
font-weight: bold;
color: #666;
}
}
&-divider {
height: 1px;
margin: 1px 0;
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: @background-color-base;
font-weight: bold;
color: #666;
}
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
background-color: #e5e5e5;
line-height: 0;
}
}
}

2
package.json
View File

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