1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports.default = usePopperMarginModifiers;
|
7 |
|
8 | var _react = require("react");
|
9 |
|
10 | var _hasClass = _interopRequireDefault(require("dom-helpers/hasClass"));
|
11 |
|
12 | var _ThemeProvider = require("./ThemeProvider");
|
13 |
|
14 | function getMargins(element) {
|
15 | var styles = window.getComputedStyle(element);
|
16 | var top = parseFloat(styles.marginTop) || 0;
|
17 | var right = parseFloat(styles.marginRight) || 0;
|
18 | var bottom = parseFloat(styles.marginBottom) || 0;
|
19 | var left = parseFloat(styles.marginLeft) || 0;
|
20 | return {
|
21 | top: top,
|
22 | right: right,
|
23 | bottom: bottom,
|
24 | left: left
|
25 | };
|
26 | }
|
27 |
|
28 | function usePopperMarginModifiers() {
|
29 | var overlayRef = (0, _react.useRef)(null);
|
30 | var margins = (0, _react.useRef)(null);
|
31 | var popoverClass = (0, _ThemeProvider.useBootstrapPrefix)(undefined, 'popover');
|
32 | var dropdownMenuClass = (0, _ThemeProvider.useBootstrapPrefix)(undefined, 'dropdown-menu');
|
33 | var callback = (0, _react.useCallback)(function (overlay) {
|
34 | if (!overlay || !((0, _hasClass.default)(overlay, popoverClass) || (0, _hasClass.default)(overlay, dropdownMenuClass))) return;
|
35 | margins.current = getMargins(overlay);
|
36 | overlay.style.margin = '0';
|
37 | overlayRef.current = overlay;
|
38 | }, [popoverClass, dropdownMenuClass]);
|
39 | var offset = (0, _react.useMemo)(function () {
|
40 | return {
|
41 | name: 'offset',
|
42 | options: {
|
43 | offset: function offset(_ref) {
|
44 | var placement = _ref.placement;
|
45 | if (!margins.current) return [0, 0];
|
46 | var _margins$current = margins.current,
|
47 | top = _margins$current.top,
|
48 | left = _margins$current.left,
|
49 | bottom = _margins$current.bottom,
|
50 | right = _margins$current.right;
|
51 |
|
52 | switch (placement.split('-')[0]) {
|
53 | case 'top':
|
54 | return [0, bottom];
|
55 |
|
56 | case 'left':
|
57 | return [0, right];
|
58 |
|
59 | case 'bottom':
|
60 | return [0, top];
|
61 |
|
62 | case 'right':
|
63 | return [0, left];
|
64 |
|
65 | default:
|
66 | return [0, 0];
|
67 | }
|
68 | }
|
69 | }
|
70 | };
|
71 | }, [margins]);
|
72 |
|
73 | var popoverArrowMargins = (0, _react.useMemo)(function () {
|
74 | return {
|
75 | name: 'popoverArrowMargins',
|
76 | enabled: true,
|
77 | phase: 'main',
|
78 | requiresIfExists: ['arrow'],
|
79 | effect: function effect(_ref2) {
|
80 | var state = _ref2.state;
|
81 |
|
82 | if (!overlayRef.current || !state.elements.arrow || !(0, _hasClass.default)(overlayRef.current, popoverClass) || !state.modifiersData['arrow#persistent']) {
|
83 | return undefined;
|
84 | }
|
85 |
|
86 | var _getMargins = getMargins(state.elements.arrow),
|
87 | top = _getMargins.top,
|
88 | right = _getMargins.right;
|
89 |
|
90 | var padding = top || right;
|
91 | state.modifiersData['arrow#persistent'].padding = {
|
92 | top: padding,
|
93 | left: padding,
|
94 | right: padding,
|
95 | bottom: padding
|
96 | };
|
97 | state.elements.arrow.style.margin = '0';
|
98 | return function () {
|
99 | if (state.elements.arrow) state.elements.arrow.style.margin = '';
|
100 | };
|
101 | }
|
102 | };
|
103 | }, [popoverClass]);
|
104 | return [callback, [offset, popoverArrowMargins]];
|
105 | }
|
106 |
|
107 | module.exports = exports["default"]; |
\ | No newline at end of file |