kamrify commited on
Commit
fd57e7f
·
1 Parent(s): fda839a
Files changed (1) hide show
  1. 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
- function getPopoverDimensions() {
 
 
 
 
 
 
 
62
  if (!popover?.wrapper) {
63
  return;
64
  }
@@ -78,7 +84,7 @@ function calculateTopForLeftRight(
78
  alignment: Alignment,
79
  config: {
80
  elementDimensions: DOMRect;
81
- popoverDimensions?: ReturnType<typeof getPopoverDimensions>;
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?: ReturnType<typeof getPopoverDimensions>;
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?.width;
307
  const windowWidth = window.innerWidth;
308
  const elementWidth = elementDimensions.width;
309
  const elementLeft = elementDimensions.left;
310
 
311
- const popoverHeight = popoverDimensions?.height;
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;