test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat popover 新增 containerSelector 用于指定挂载位置 (#4871)

Browse Source
This commit is contained in:
Allen 2022-07-14 13:16:35 +08:00 committed by GitHub
parent 7a5fe8d9bc
commit c2ed461ab8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
docs/zh-CN/components/form/select.md
View File

@ -996,45 +996,46 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 除了支持 [普通表单项属性表](./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) | | 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) | | 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) | | 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) | | 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) | | 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) | | 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) | | 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) | | extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| checkAll | `boolean` | `false` | 是否支持全选 | | checkAll | `boolean` | `false` | 是否支持全选 |
| checkAllLabel | `string` | `全选` | 全选的文字 | | checkAllLabel | `string` | `全选` | 全选的文字 |
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 | | checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
| defaultCheckAll | `boolean` | `false` | 默认是否全选 | | defaultCheckAll | `boolean` | `false` | 默认是否全选 |
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | | creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) | | multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) | | searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) | | 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) | | 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) | | 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) | | 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) | | 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) | | 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) | | 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) | | 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) | | autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
| menuTpl | `string` | | 支持配置自定义菜单 | | menuTpl | `string` | | 支持配置自定义菜单 |
| clearable | `boolean` | | 单选模式下是否支持清空 | | clearable | `boolean` | | 单选模式下是否支持清空 |
| hideSelected | `boolean` | `false` | 隐藏已选选项 | | hideSelected | `boolean` | `false` | 隐藏已选选项 |
| mobileClassName | `string` | | 移动端浮层类名 | | mobileClassName | `string` | | 移动端浮层类名 |
| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 | | selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |
| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 | | searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |
| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 | | columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |
| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 | | leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |
| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 | | leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 | | rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 | | maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) | | overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
| optionClassName | `string` | | 选项 CSS 类名 | | optionClassName | `string` | | 选项 CSS 类名 |
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 |
## 事件表 ## 事件表

18
packages/amis-core/src/components/Overlay.tsx
View File

@ -179,6 +179,7 @@ interface OverlayProps {
rootClose?: boolean; rootClose?: boolean;
onHide?(props: any, ...args: any[]): any; onHide?(props: any, ...args: any[]): any;
container?: React.ReactNode | Function; container?: React.ReactNode | Function;
containerSelector?: string;
target?: React.ReactNode | Function; target?: React.ReactNode | Function;
watchTargetSizeChange?: boolean; watchTargetSizeChange?: boolean;
offset?: [number, number]; 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() { render() {
const { const {
container,
containerPadding, containerPadding,
target, target,
placement, placement,
@ -249,7 +261,9 @@ export default class Overlay extends React.Component<
offset, offset,
...props ...props
} = this.props; } = this.props;
const container = this.getContainerSelector()
? this.getContainerSelector
: this.props.container;
const mountOverlay = props.show || (Transition && !this.state.exited); const mountOverlay = props.show || (Transition && !this.state.exited);
if (!mountOverlay) { if (!mountOverlay) {
// Don't bother showing anything if we don't have to. // Don't bother showing anything if we don't have to.

9
packages/amis-core/src/utils/position.ts
View File

@ -25,6 +25,15 @@ export function position(node: HTMLElement, offsetParent?: HTMLElement) {
const parent: HTMLElement = offsetParent || getOffsetParent(node); const parent: HTMLElement = offsetParent || getOffsetParent(node);
offset = getOffset(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); if (nodeName(parent) !== 'html') parentOffset = getOffset(parent);
const borderTop = String( const borderTop = String(
getComputedStyle(parent).getPropertyValue('border-top-width') || 0 getComputedStyle(parent).getPropertyValue('border-top-width') || 0

9
packages/amis-ui/src/components/Pagination.tsx
View File

@ -86,6 +86,13 @@ export interface BasicPaginationProps {
disabled?: boolean; disabled?: boolean;
hasNext?: boolean; hasNext?: boolean;
/**
* 弹层挂载节点
* @default false
*/
popOverContainerSelector?: string;
onPageChange?: (page: number, perPage?: number) => void; onPageChange?: (page: number, perPage?: number) => void;
} }
export interface PaginationProps export interface PaginationProps
@ -257,6 +264,7 @@ export class Pagination extends React.Component<
className, className,
disabled, disabled,
hasNext, hasNext,
popOverContainerSelector,
translate: __ translate: __
} = this.props; } = this.props;
const {pageNum, perPage} = this.state; const {pageNum, perPage} = this.state;
@ -475,6 +483,7 @@ export class Pagination extends React.Component<
disabled={disabled} disabled={disabled}
value={perPage} value={perPage}
options={selection} options={selection}
popOverContainerSelector={popOverContainerSelector}
onChange={(p: any) => { onChange={(p: any) => {
this.setState({ this.setState({
perPage: p.value, perPage: p.value,

3
packages/amis-ui/src/components/Select.tsx
View File

@ -332,6 +332,7 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
inline: boolean; inline: boolean;
disabled: boolean; disabled: boolean;
popOverContainer?: any; popOverContainer?: any;
popOverContainerSelector?: string;
overlayPlacement?: string; overlayPlacement?: string;
onChange: (value: void | string | Option | Array<Option>) => void; onChange: (value: void | string | Option | Array<Option>) => void;
onFocus?: Function; onFocus?: Function;
@ -933,6 +934,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
valuesNoWrap, valuesNoWrap,
classnames: cx, classnames: cx,
popoverClassName, popoverClassName,
popOverContainerSelector,
checkAll, checkAll,
checkAllLabel, checkAllLabel,
checkAllBySearch, checkAllBySearch,
@ -1201,6 +1203,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
) : ( ) : (
<Overlay <Overlay
container={popOverContainer || this.getTarget} container={popOverContainer || this.getTarget}
containerSelector={popOverContainerSelector}
target={this.getTarget} target={this.getTarget}
placement={overlayPlacement} placement={overlayPlacement}
show show

6
packages/amis/src/renderers/Pagination.tsx
View File

@ -72,6 +72,12 @@ export interface PaginationSchema extends BaseSchema {
disabled?: boolean; disabled?: boolean;
hasNext?: boolean; hasNext?: boolean;
/**
* 弹层挂载节点
* @default false
*/
popOverContainerSelector?: string;
} }
export interface PaginationProps export interface PaginationProps