mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
feat popover 新增 containerSelector 用于指定挂载位置 (#4871)
This commit is contained in:
Allen
GitHub
parent
7a5fe8d9bc
commit
c2ed461ab8
@ -996,45 +996,46 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../../docs/types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
|
||||
| addApi | [API](../../docs/types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../../docs/types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../../docs/types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| menuTpl | `string` | | 支持配置自定义菜单 |
|
||||
| clearable | `boolean` | | 单选模式下是否支持清空 |
|
||||
| hideSelected | `boolean` | `false` | 隐藏已选选项 |
|
||||
| mobileClassName | `string` | | 移动端浮层类名 |
|
||||
| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |
|
||||
| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |
|
||||
| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |
|
||||
| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |
|
||||
| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |
|
||||
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
|
||||
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
|
||||
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
|
||||
| optionClassName | `string` | | 选项 CSS 类名 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../../docs/types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
|
||||
| addApi | [API](../../docs/types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../../docs/types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../../docs/types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| menuTpl | `string` | | 支持配置自定义菜单 |
|
||||
| clearable | `boolean` | | 单选模式下是否支持清空 |
|
||||
| hideSelected | `boolean` | `false` | 隐藏已选选项 |
|
||||
| mobileClassName | `string` | | 移动端浮层类名 |
|
||||
| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |
|
||||
| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |
|
||||
| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |
|
||||
| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |
|
||||
| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |
|
||||
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
|
||||
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
|
||||
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
|
||||
| optionClassName | `string` | | 选项 CSS 类名 |
|
||||
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -179,6 +179,7 @@ interface OverlayProps {
|
||||
rootClose?: boolean;
|
||||
onHide?(props: any, ...args: any[]): any;
|
||||
container?: React.ReactNode | Function;
|
||||
containerSelector?: string;
|
||||
target?: React.ReactNode | Function;
|
||||
watchTargetSizeChange?: boolean;
|
||||
offset?: [number, number];
|
||||
@ -235,9 +236,20 @@ export default class Overlay extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
getContainerSelector() {
|
||||
const containerSelector = this.props.containerSelector;
|
||||
let container = null;
|
||||
|
||||
if (typeof containerSelector === 'string') {
|
||||
container = document.querySelector(containerSelector);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
container,
|
||||
containerPadding,
|
||||
target,
|
||||
placement,
|
||||
@ -249,7 +261,9 @@ export default class Overlay extends React.Component<
|
||||
offset,
|
||||
...props
|
||||
} = this.props;
|
||||
|
||||
const container = this.getContainerSelector()
|
||||
? this.getContainerSelector
|
||||
: this.props.container;
|
||||
const mountOverlay = props.show || (Transition && !this.state.exited);
|
||||
if (!mountOverlay) {
|
||||
// Don't bother showing anything if we don't have to.
|
||||
|
||||
@ -25,6 +25,15 @@ export function position(node: HTMLElement, offsetParent?: HTMLElement) {
|
||||
const parent: HTMLElement = offsetParent || getOffsetParent(node);
|
||||
offset = getOffset(node);
|
||||
|
||||
if (parent === node) {
|
||||
return {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: offset.width,
|
||||
height: offset.height
|
||||
};
|
||||
}
|
||||
|
||||
if (nodeName(parent) !== 'html') parentOffset = getOffset(parent);
|
||||
const borderTop = String(
|
||||
getComputedStyle(parent).getPropertyValue('border-top-width') || 0
|
||||
|
||||
@ -86,6 +86,13 @@ export interface BasicPaginationProps {
|
||||
disabled?: boolean;
|
||||
|
||||
hasNext?: boolean;
|
||||
|
||||
/**
|
||||
* 弹层挂载节点
|
||||
* @default false
|
||||
*/
|
||||
popOverContainerSelector?: string;
|
||||
|
||||
onPageChange?: (page: number, perPage?: number) => void;
|
||||
}
|
||||
export interface PaginationProps
|
||||
@ -257,6 +264,7 @@ export class Pagination extends React.Component<
|
||||
className,
|
||||
disabled,
|
||||
hasNext,
|
||||
popOverContainerSelector,
|
||||
translate: __
|
||||
} = this.props;
|
||||
const {pageNum, perPage} = this.state;
|
||||
@ -475,6 +483,7 @@ export class Pagination extends React.Component<
|
||||
disabled={disabled}
|
||||
value={perPage}
|
||||
options={selection}
|
||||
popOverContainerSelector={popOverContainerSelector}
|
||||
onChange={(p: any) => {
|
||||
this.setState({
|
||||
perPage: p.value,
|
||||
|
||||
@ -332,6 +332,7 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
|
||||
inline: boolean;
|
||||
disabled: boolean;
|
||||
popOverContainer?: any;
|
||||
popOverContainerSelector?: string;
|
||||
overlayPlacement?: string;
|
||||
onChange: (value: void | string | Option | Array<Option>) => void;
|
||||
onFocus?: Function;
|
||||
@ -933,6 +934,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
valuesNoWrap,
|
||||
classnames: cx,
|
||||
popoverClassName,
|
||||
popOverContainerSelector,
|
||||
checkAll,
|
||||
checkAllLabel,
|
||||
checkAllBySearch,
|
||||
@ -1201,6 +1203,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
) : (
|
||||
<Overlay
|
||||
container={popOverContainer || this.getTarget}
|
||||
containerSelector={popOverContainerSelector}
|
||||
target={this.getTarget}
|
||||
placement={overlayPlacement}
|
||||
show
|
||||
|
||||
@ -72,6 +72,12 @@ export interface PaginationSchema extends BaseSchema {
|
||||
disabled?: boolean;
|
||||
|
||||
hasNext?: boolean;
|
||||
|
||||
/**
|
||||
* 弹层挂载节点
|
||||
* @default false
|
||||
*/
|
||||
popOverContainerSelector?: string;
|
||||
}
|
||||
|
||||
export interface PaginationProps
|
||||
|
||||
Loading…
Reference in New Issue
Block a user