UNPKG

4.03 kBJavaScriptView Raw
1/*
2 * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16// Popper placement utils
17// ======================
18/** Converts a full placement to one of the four positions by stripping text after the `-`. */
19export function getPosition(placement) {
20 return placement.split("-")[0];
21}
22/** Returns true if position is left or right. */
23export function isVerticalPosition(side) {
24 return ["left", "right"].indexOf(side) !== -1;
25}
26/** Returns the opposite position. */
27export function getOppositePosition(side) {
28 switch (side) {
29 case "top":
30 return "bottom";
31 case "left":
32 return "right";
33 case "bottom":
34 return "top";
35 default:
36 return "left";
37 }
38}
39/** Returns the CSS alignment keyword corresponding to given placement. */
40export function getAlignment(placement) {
41 var align = placement.split("-")[1];
42 switch (align) {
43 case "start":
44 return "left";
45 case "end":
46 return "right";
47 default:
48 return "center";
49 }
50}
51// Popper modifiers
52// ================
53/** Modifier helper function to compute popper transform-origin based on arrow position */
54export function getTransformOrigin(data) {
55 var position = getPosition(data.placement);
56 if (data.arrowElement == null) {
57 return isVerticalPosition(position)
58 ? "".concat(getOppositePosition(position), " ").concat(getAlignment(position))
59 : "".concat(getAlignment(position), " ").concat(getOppositePosition(position));
60 }
61 else {
62 var arrowSizeShift = data.arrowElement.clientHeight / 2;
63 var arrow = data.offsets.arrow;
64 // can use keyword for dimension without the arrow, to ease computation burden.
65 // move origin by half arrow's height to keep it centered.
66 return isVerticalPosition(position)
67 ? "".concat(getOppositePosition(position), " ").concat(arrow.top + arrowSizeShift, "px")
68 : "".concat(arrow.left + arrowSizeShift, "px ").concat(getOppositePosition(position));
69 }
70}
71// additional space between arrow and edge of target
72var ARROW_SPACING = 4;
73/** Popper modifier that offsets popper and arrow so arrow points out of the correct side */
74export var arrowOffsetModifier = function (data) {
75 if (data.arrowElement == null) {
76 return data;
77 }
78 // our arrows have equal width and height
79 var arrowSize = data.arrowElement.clientWidth;
80 // this logic borrowed from original Popper arrow modifier itself
81 var position = getPosition(data.placement);
82 var isVertical = isVerticalPosition(position);
83 var len = isVertical ? "width" : "height";
84 var offsetSide = isVertical ? "left" : "top";
85 var arrowOffsetSize = Math.round(arrowSize / 2 / Math.sqrt(2));
86 // offset popover by arrow size, offset arrow in the opposite direction
87 if (position === "top" || position === "left") {
88 // the "up & back" directions require negative popper offsets
89 data.offsets.popper[offsetSide] -= arrowOffsetSize + ARROW_SPACING;
90 // can only use left/top on arrow so gotta get clever with 100% + X
91 data.offsets.arrow[offsetSide] = data.offsets.popper[len] - arrowSize + arrowOffsetSize;
92 }
93 else {
94 data.offsets.popper[offsetSide] += arrowOffsetSize + ARROW_SPACING;
95 data.offsets.arrow[offsetSide] = -arrowOffsetSize;
96 }
97 return data;
98};
99//# sourceMappingURL=popperUtils.js.map
\No newline at end of file