Fix types
Browse files- src/popover.ts +17 -10
src/popover.ts
CHANGED
@@ -1,6 +1,5 @@
|
|
1 |
import { bringInView } from "./utils";
|
2 |
import { STAGE_PADDING } from "./stage";
|
3 |
-
import { getConfig } from "./config";
|
4 |
|
5 |
export type Side = "top" | "right" | "bottom" | "left";
|
6 |
export type Alignment = "start" | "center" | "end";
|
@@ -58,7 +57,14 @@ export function renderPopover(element: Element) {
|
|
58 |
bringInView(popoverWrapper);
|
59 |
}
|
60 |
|
61 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
62 |
if (!popover?.wrapper) {
|
63 |
return;
|
64 |
}
|
@@ -78,7 +84,7 @@ function calculateTopForLeftRight(
|
|
78 |
alignment: Alignment,
|
79 |
config: {
|
80 |
elementDimensions: DOMRect;
|
81 |
-
popoverDimensions
|
82 |
popoverPadding: number;
|
83 |
popoverArrowDimensions: { width: number; height: number };
|
84 |
}
|
@@ -123,7 +129,7 @@ function calculateLeftForTopBottom(
|
|
123 |
alignment: Alignment,
|
124 |
config: {
|
125 |
elementDimensions: DOMRect;
|
126 |
-
popoverDimensions
|
127 |
popoverPadding: number;
|
128 |
popoverArrowDimensions: { width: number; height: number };
|
129 |
}
|
@@ -168,12 +174,13 @@ export function repositionPopover(element: Element) {
|
|
168 |
return;
|
169 |
}
|
170 |
|
|
|
171 |
// Configure the popover positioning
|
172 |
const requiredAlignment: Alignment = "start";
|
173 |
-
const requiredSide: Side = "left";
|
174 |
const popoverPadding = STAGE_PADDING;
|
175 |
|
176 |
-
const popoverDimensions = getPopoverDimensions()
|
177 |
const popoverArrowDimensions = popover.arrow.getBoundingClientRect();
|
178 |
const elementDimensions = element.getBoundingClientRect();
|
179 |
|
@@ -190,7 +197,7 @@ export function repositionPopover(element: Element) {
|
|
190 |
let isRightOptimal = rightValue >= 0;
|
191 |
|
192 |
const noneOptimal = !isTopOptimal && !isBottomOptimal && !isLeftOptimal && !isRightOptimal;
|
193 |
-
let popoverRenderedSide: Side;
|
194 |
|
195 |
if (requiredSide === "top" && isTopOptimal) {
|
196 |
isRightOptimal = isLeftOptimal = isBottomOptimal = false;
|
@@ -300,15 +307,15 @@ function renderPopoverArrow(alignment: Alignment, side: Side, element: Element)
|
|
300 |
}
|
301 |
|
302 |
const elementDimensions = element.getBoundingClientRect();
|
303 |
-
const popoverDimensions = getPopoverDimensions()
|
304 |
const popoverArrow = popover.arrow;
|
305 |
|
306 |
-
const popoverWidth = popoverDimensions
|
307 |
const windowWidth = window.innerWidth;
|
308 |
const elementWidth = elementDimensions.width;
|
309 |
const elementLeft = elementDimensions.left;
|
310 |
|
311 |
-
const popoverHeight = popoverDimensions
|
312 |
const windowHeight = window.innerHeight;
|
313 |
const elementTop = elementDimensions.top;
|
314 |
const elementHeight = elementDimensions.height;
|
|
|
1 |
import { bringInView } from "./utils";
|
2 |
import { STAGE_PADDING } from "./stage";
|
|
|
3 |
|
4 |
export type Side = "top" | "right" | "bottom" | "left";
|
5 |
export type Alignment = "start" | "center" | "end";
|
|
|
57 |
bringInView(popoverWrapper);
|
58 |
}
|
59 |
|
60 |
+
type PopoverDimensions = {
|
61 |
+
width: number;
|
62 |
+
height: number;
|
63 |
+
realWidth: number;
|
64 |
+
realHeight: number;
|
65 |
+
}
|
66 |
+
|
67 |
+
function getPopoverDimensions(): PopoverDimensions | undefined {
|
68 |
if (!popover?.wrapper) {
|
69 |
return;
|
70 |
}
|
|
|
84 |
alignment: Alignment,
|
85 |
config: {
|
86 |
elementDimensions: DOMRect;
|
87 |
+
popoverDimensions: PopoverDimensions;
|
88 |
popoverPadding: number;
|
89 |
popoverArrowDimensions: { width: number; height: number };
|
90 |
}
|
|
|
129 |
alignment: Alignment,
|
130 |
config: {
|
131 |
elementDimensions: DOMRect;
|
132 |
+
popoverDimensions: PopoverDimensions;
|
133 |
popoverPadding: number;
|
134 |
popoverArrowDimensions: { width: number; height: number };
|
135 |
}
|
|
|
174 |
return;
|
175 |
}
|
176 |
|
177 |
+
// @TODO These values will come from the config
|
178 |
// Configure the popover positioning
|
179 |
const requiredAlignment: Alignment = "start";
|
180 |
+
const requiredSide: Side = "left" as Side;
|
181 |
const popoverPadding = STAGE_PADDING;
|
182 |
|
183 |
+
const popoverDimensions = getPopoverDimensions()!;
|
184 |
const popoverArrowDimensions = popover.arrow.getBoundingClientRect();
|
185 |
const elementDimensions = element.getBoundingClientRect();
|
186 |
|
|
|
197 |
let isRightOptimal = rightValue >= 0;
|
198 |
|
199 |
const noneOptimal = !isTopOptimal && !isBottomOptimal && !isLeftOptimal && !isRightOptimal;
|
200 |
+
let popoverRenderedSide: Side = requiredSide;
|
201 |
|
202 |
if (requiredSide === "top" && isTopOptimal) {
|
203 |
isRightOptimal = isLeftOptimal = isBottomOptimal = false;
|
|
|
307 |
}
|
308 |
|
309 |
const elementDimensions = element.getBoundingClientRect();
|
310 |
+
const popoverDimensions = getPopoverDimensions()!;
|
311 |
const popoverArrow = popover.arrow;
|
312 |
|
313 |
+
const popoverWidth = popoverDimensions.width;
|
314 |
const windowWidth = window.innerWidth;
|
315 |
const elementWidth = elementDimensions.width;
|
316 |
const elementLeft = elementDimensions.left;
|
317 |
|
318 |
+
const popoverHeight = popoverDimensions.height;
|
319 |
const windowHeight = window.innerHeight;
|
320 |
const elementTop = elementDimensions.top;
|
321 |
const elementHeight = elementDimensions.height;
|