test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +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

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

@ -997,7 +997,7 @@ 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) |
@ -1035,6 +1035,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
| optionClassName | `string` | | 选项 CSS 类名 |
| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 |
## 事件表

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

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

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);
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

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

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

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

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

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

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