Skip to content

feat: Add targetOffset back #327

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Feb 10, 2023
Merged

feat: Add targetOffset back #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion docs/examples/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const builtinPlacements = {
shiftX: 50,
adjustY: true,
},
offset: [0, -50],
offset: [0, 0],
targetOffset: [10, 0],
},
bottomLeft: {
points: ['tl', 'bl'],
Expand Down
41 changes: 28 additions & 13 deletions src/hooks/useAlign.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,23 @@ export default function useAlign(
popupElement.style.top = '0';

// Calculate align style, we should consider `transform` case
const targetRect = Array.isArray(target)
? {
x: target[0],
y: target[1],
width: 0,
height: 0,
}
: target.getBoundingClientRect();
let targetRect: Rect;
if (Array.isArray(target)) {
targetRect = {
x: target[0],
y: target[1],
width: 0,
height: 0,
};
} else {
const rect = target.getBoundingClientRect();
targetRect = {
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
};
}
const popupRect = popupElement.getBoundingClientRect();
const { width, height } = win.getComputedStyle(popupElement);
const { clientWidth, clientHeight } = doc.documentElement;
Expand All @@ -152,6 +161,16 @@ export default function useAlign(
// Placement
const placementInfo: AlignType =
builtinPlacements[placement] || popupAlign || {};

// Offset
const { offset, targetOffset } = placementInfo;
const [popupOffsetX = 0, popupOffsetY = 0] = offset || [];
const [targetOffsetX = 0, targetOffsetY = 0] = targetOffset || [];

targetRect.x += targetOffsetX;
targetRect.y += targetOffsetY;

// Points
const [popupPoint, targetPoint] = placementInfo.points || [];
const targetPoints = splitPoints(targetPoint);
const popupPoints = splitPoints(popupPoint);
Expand All @@ -164,11 +183,7 @@ export default function useAlign(
...placementInfo,
};

// Offset
const { offset } = placementInfo;
const [popupOffsetX = 0, popupOffsetY = 0] = offset || [];

// Placement
// Next Offset
let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;

Expand Down
3 changes: 1 addition & 2 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ export interface AlignType {
* offset target node by offset[0] in x and offset[1] in y.
* If targetOffset contains percentage string value, it is relative to targetNode region.
*/
// zombieJ: removed in major version. Just keep def comment here in case we need it back.
// targetOffset?: number[];
targetOffset?: number[];
/**
* If adjustX field is true, will adjust source node in x direction if source node is invisible.
* If adjustY field is true, will adjust source node in y direction if source node is invisible.
Expand Down