test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: Popover shift (#45015)

Browse Source 
* fix: Popover shift

* chore: update snapshot
This commit is contained in:
MadCcc 2023-09-22 15:00:44 +08:00 committed by GitHub
parent 7e1ecf9133
commit 3928ce9fc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/_util/placements.ts
View File

@ -39,11 +39,15 @@ export function getOverflowOptions(
case 'top':
case 'bottom':
baseOverflow.shiftX = arrowOffset.dropdownArrowOffset * 2 + arrowWidth;
baseOverflow.shiftY = true;
baseOverflow.adjustY = true;
break;
case 'left':
case 'right':
baseOverflow.shiftY = arrowOffset.dropdownArrowOffsetVertical * 2 + arrowWidth;
baseOverflow.shiftX = true;
baseOverflow.adjustX = true;
break;
}

104
components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -626,110 +626,6 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
exports[`renders components/popover/demo/arrow.tsx extend context correctly 2`] = `[]`;
exports[`renders components/popover/demo/arrow-point-at-center.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="flex-wrap: wrap;"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Align edge / 边缘对齐
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Arrow points to center / 箭头指向中心
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders components/popover/demo/arrow-point-at-center.tsx extend context correctly 2`] = `
[
"Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated. Please use \`arrow={{ pointAtCenter: true }}\` instead.",
]
`;
exports[`renders components/popover/demo/basic.tsx extend context correctly 1`] = `
Array [
<button

32
components/popover/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -180,38 +180,6 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
</div>
`;
exports[`renders components/popover/demo/arrow-point-at-center.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="flex-wrap:wrap"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Align edge / 边缘对齐
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Arrow points to center / 箭头指向中心
</span>
</button>
</div>
</div>
`;
exports[`renders components/popover/demo/basic.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"

22
components/popover/demo/arrow-point-at-center.tsx
View File

@ -1,22 +0,0 @@
import React from 'react';
import { Button, Popover, Space } from 'antd';
const content = (
<>
<p>Content</p>
<p>Content</p>
</>
);
const App: React.FC = () => (
<Space wrap>
<Popover placement="topLeft" title="Title" content={content}>
<Button>Align edge / 边缘对齐</Button>
</Popover>
<Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
<Button>Arrow points to center / 箭头指向中心</Button>
</Popover>
</Space>
);
export default App;