Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select): add getContainer prop #291

Merged
merged 1 commit into from
Oct 10, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/components/src/components/select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const Select: React.FC<SelectProps> = (props: SelectProps) => {
listHeight,
listRowHeight = defaultListRowHeight,
width,
getContainer,
} = props;
const { getPrefixCls } = useContext(ConfigContext);
const prefix = getPrefixCls('select', customizePrefixCls);
Expand Down Expand Up @@ -269,6 +270,7 @@ const Select: React.FC<SelectProps> = (props: SelectProps) => {
placement="bottomLeft"
overlay={list}
overlayClassName={`${prefix}-dropdown`}
getTooltipContainer={getContainer}
>
{trigger}
</Dropdown>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/select/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface SelectProps<VT = Option> {
width?: number;
listHeight?: number;
listRowHeight?: number;
getContainer?: (node: HTMLElement) => HTMLElement;
}

export { Option };
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ group:

| 参数 | 说明 | 类型 | 默认值 |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --------------------- |
| **getPopupContainer** | 浮层渲染父节点,默认渲染到 body 上 | function(triggerNode) | `() => document.body` |
| **getTooltipContainer** | 浮层渲染父节点,默认渲染到 body 上 | function(triggerNode) | `() => document.body` |
| **overlayClassName** | 添加 className | string | `''` |
| **placement** | 气泡框位置, 可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `'top'` |
| **trigger** | 触发行为,可选 hover,focus,click,contextMenu | string\|string[] | `hover` |
Expand Down
23 changes: 12 additions & 11 deletions packages/website/src/components/functional/select/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,15 @@ group:

## 参数说明

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | --------------------------------------------------- | ------------------------------------------------------------------------- | -------- |
| size | select 的大小 | `small` , `medium` , `large` | `medium` |
| options | 同 list Options | `Options[]` | - |
| multiple | 多选 | `boolean` | `false` |
| searchable | 是否可搜索 | `boolean` | `false` |
| onChange | 选择的回调 | `(options: Option[] or Option) => void` | |
| width | select 的宽度 | `number` | - |
| labelRenderer | list Item 的自定义渲染方法, 传入会取消搜索高亮功能 | `(input:string) => (option: Option, isGroup: boolean) => React.ReactNode` | - |
| listHeight | list 高度, 传入会取消 list 动态高度功能 | `number` | - |
| listRowHeight | list item 的高度 | `number` | 44 |
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | --------------------------------------------------- | ------------------------------------------------------------------------- | --------------------- |
| size | select 的大小 | `small` , `medium` , `large` | `medium` |
| options | 同 list Options | `Options[]` | - |
| multiple | 多选 | `boolean` | `false` |
| searchable | 是否可搜索 | `boolean` | `false` |
| onChange | 选择的回调 | `(options: Option[] or Option) => void` | |
| width | select 的宽度 | `number` | - |
| labelRenderer | list Item 的自定义渲染方法, 传入会取消搜索高亮功能 | `(input:string) => (option: Option, isGroup: boolean) => React.ReactNode` | - |
| listHeight | list 高度, 传入会取消 list 动态高度功能 | `number` | - |
| listRowHeight | list item 的高度 | `number` | 44 |
| getContainer | 浮层渲染父节点,默认渲染到 body 上 | function(triggerNode) | `() => document.body` |