@mirai/ui 1.0.129 → 1.0.130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +108 -100
- package/build/primitives/Layer/Layer.js +26 -6
- package/build/primitives/Layer/Layer.js.map +1 -1
- package/build/primitives/Layer/__tests__/__snapshots__/Layer.test.js.snap +6 -2
- package/build/primitives/Layer/helpers/getElementLayout.js +4 -1
- package/build/primitives/Layer/helpers/getElementLayout.js.map +1 -1
- package/build/primitives/Layer/helpers/getLayerPosition.js +5 -4
- package/build/primitives/Layer/helpers/getLayerPosition.js.map +1 -1
- package/package.json +1 -1
|
@@ -40,133 +40,137 @@ exports[`component:<Menu> prop:options & visible 1`] = `
|
|
|
40
40
|
</button>
|
|
41
41
|
</span>
|
|
42
42
|
<div
|
|
43
|
-
class="layer
|
|
43
|
+
class="layer"
|
|
44
44
|
style="left: 0px; top: 0px;"
|
|
45
45
|
>
|
|
46
46
|
<div
|
|
47
|
-
class="
|
|
47
|
+
class="menu visible"
|
|
48
48
|
>
|
|
49
49
|
<div
|
|
50
|
-
class="
|
|
50
|
+
class="pressable option divider"
|
|
51
51
|
>
|
|
52
|
-
<
|
|
53
|
-
class="
|
|
52
|
+
<div
|
|
53
|
+
class="view row wide content"
|
|
54
54
|
>
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
<span
|
|
56
|
+
class="text paragraph label"
|
|
57
|
+
>
|
|
58
|
+
Lorem Ipsum...
|
|
59
|
+
</span>
|
|
60
|
+
</div>
|
|
57
61
|
</div>
|
|
58
|
-
</div>
|
|
59
|
-
<div
|
|
60
|
-
class="pressable option value"
|
|
61
|
-
>
|
|
62
62
|
<div
|
|
63
|
-
class="
|
|
63
|
+
class="pressable option value"
|
|
64
64
|
>
|
|
65
|
-
<
|
|
66
|
-
class="
|
|
65
|
+
<div
|
|
66
|
+
class="view row wide content"
|
|
67
67
|
>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
height="1em"
|
|
71
|
-
stroke="currentColor"
|
|
72
|
-
stroke-width="0"
|
|
73
|
-
viewBox="0 0 24 24"
|
|
74
|
-
width="1em"
|
|
75
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
68
|
+
<span
|
|
69
|
+
class="icon headline-3 icon"
|
|
76
70
|
>
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
71
|
+
<svg
|
|
72
|
+
fill="currentColor"
|
|
73
|
+
height="1em"
|
|
74
|
+
stroke="currentColor"
|
|
75
|
+
stroke-width="0"
|
|
76
|
+
viewBox="0 0 24 24"
|
|
77
|
+
width="1em"
|
|
78
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
79
|
+
>
|
|
80
|
+
<path
|
|
81
|
+
d="M0 0h24v24H0V0z"
|
|
82
|
+
fill="none"
|
|
83
|
+
/>
|
|
84
|
+
<path
|
|
85
|
+
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
86
|
+
/>
|
|
87
|
+
</svg>
|
|
88
|
+
</span>
|
|
89
|
+
<span
|
|
90
|
+
class="text paragraph label"
|
|
91
|
+
>
|
|
92
|
+
Item 1
|
|
93
|
+
</span>
|
|
94
|
+
</div>
|
|
91
95
|
</div>
|
|
92
|
-
</div>
|
|
93
|
-
<div
|
|
94
|
-
class="pressable option value disabled"
|
|
95
|
-
data-testid="two"
|
|
96
|
-
>
|
|
97
96
|
<div
|
|
98
|
-
class="
|
|
97
|
+
class="pressable option value disabled"
|
|
98
|
+
data-testid="two"
|
|
99
99
|
>
|
|
100
|
-
<
|
|
101
|
-
class="
|
|
100
|
+
<div
|
|
101
|
+
class="view row wide content"
|
|
102
102
|
>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
height="1em"
|
|
106
|
-
stroke="currentColor"
|
|
107
|
-
stroke-width="0"
|
|
108
|
-
viewBox="0 0 24 24"
|
|
109
|
-
width="1em"
|
|
110
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
103
|
+
<span
|
|
104
|
+
class="icon headline-3 icon"
|
|
111
105
|
>
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
106
|
+
<svg
|
|
107
|
+
fill="currentColor"
|
|
108
|
+
height="1em"
|
|
109
|
+
stroke="currentColor"
|
|
110
|
+
stroke-width="0"
|
|
111
|
+
viewBox="0 0 24 24"
|
|
112
|
+
width="1em"
|
|
113
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
114
|
+
>
|
|
115
|
+
<path
|
|
116
|
+
d="M0 0h24v24H0V0z"
|
|
117
|
+
fill="none"
|
|
118
|
+
/>
|
|
119
|
+
<path
|
|
120
|
+
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
121
|
+
/>
|
|
122
|
+
</svg>
|
|
123
|
+
</span>
|
|
124
|
+
<span
|
|
125
|
+
class="text paragraph label"
|
|
126
|
+
>
|
|
127
|
+
Item 2
|
|
128
|
+
</span>
|
|
129
|
+
</div>
|
|
126
130
|
</div>
|
|
127
|
-
</div>
|
|
128
|
-
<div
|
|
129
|
-
class="pressable option value divider"
|
|
130
|
-
>
|
|
131
131
|
<div
|
|
132
|
-
class="
|
|
132
|
+
class="pressable option value divider"
|
|
133
133
|
>
|
|
134
|
-
<
|
|
135
|
-
class="
|
|
134
|
+
<div
|
|
135
|
+
class="view row wide content"
|
|
136
136
|
>
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
<span
|
|
138
|
+
class="text paragraph label"
|
|
139
|
+
>
|
|
140
|
+
Item 3
|
|
141
|
+
</span>
|
|
142
|
+
</div>
|
|
139
143
|
</div>
|
|
140
|
-
</div>
|
|
141
|
-
<div
|
|
142
|
-
class="pressable option value"
|
|
143
|
-
>
|
|
144
144
|
<div
|
|
145
|
-
class="
|
|
145
|
+
class="pressable option value"
|
|
146
146
|
>
|
|
147
|
-
<
|
|
148
|
-
class="
|
|
149
|
-
>
|
|
150
|
-
Item 4
|
|
151
|
-
</span>
|
|
152
|
-
<button
|
|
153
|
-
class="pressable button small"
|
|
147
|
+
<div
|
|
148
|
+
class="view row wide content"
|
|
154
149
|
>
|
|
155
|
-
|
|
156
|
-
|
|
150
|
+
<span
|
|
151
|
+
class="text paragraph label"
|
|
152
|
+
>
|
|
153
|
+
Item 4
|
|
154
|
+
</span>
|
|
155
|
+
<button
|
|
156
|
+
class="pressable button small"
|
|
157
|
+
>
|
|
158
|
+
Add
|
|
159
|
+
</button>
|
|
160
|
+
</div>
|
|
157
161
|
</div>
|
|
158
|
-
</div>
|
|
159
|
-
<div
|
|
160
|
-
class="pressable option"
|
|
161
|
-
>
|
|
162
162
|
<div
|
|
163
|
-
class="
|
|
163
|
+
class="pressable option"
|
|
164
164
|
>
|
|
165
|
-
<
|
|
166
|
-
class="
|
|
165
|
+
<div
|
|
166
|
+
class="view row wide content"
|
|
167
167
|
>
|
|
168
|
-
|
|
169
|
-
|
|
168
|
+
<button
|
|
169
|
+
class="pressable button"
|
|
170
|
+
>
|
|
171
|
+
Add
|
|
172
|
+
</button>
|
|
173
|
+
</div>
|
|
170
174
|
</div>
|
|
171
175
|
</div>
|
|
172
176
|
</div>
|
|
@@ -195,9 +199,13 @@ exports[`component:<Menu> prop:title 1`] = `
|
|
|
195
199
|
</button>
|
|
196
200
|
</span>
|
|
197
201
|
<div
|
|
198
|
-
class="layer
|
|
202
|
+
class="layer"
|
|
199
203
|
style="left: 0px; top: 0px;"
|
|
200
|
-
|
|
204
|
+
>
|
|
205
|
+
<div
|
|
206
|
+
class="menu visible"
|
|
207
|
+
/>
|
|
208
|
+
</div>
|
|
201
209
|
</DocumentFragment>
|
|
202
210
|
`;
|
|
203
211
|
|
|
@@ -50,6 +50,21 @@ var Layer = function Layer(_ref) {
|
|
|
50
50
|
position = _useState2[0],
|
|
51
51
|
setPosition = _useState2[1];
|
|
52
52
|
(0, _react.useLayoutEffect)(function () {
|
|
53
|
+
var content = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current;
|
|
54
|
+
if (!content || typeof ResizeObserver === 'undefined') return;
|
|
55
|
+
var observer = new ResizeObserver(calcPosition);
|
|
56
|
+
observer.observe(content);
|
|
57
|
+
return function () {
|
|
58
|
+
return observer.unobserve(content);
|
|
59
|
+
};
|
|
60
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
+
}, []);
|
|
62
|
+
(0, _react.useLayoutEffect)(function () {
|
|
63
|
+
return calcPosition();
|
|
64
|
+
},
|
|
65
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
66
|
+
[centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible]);
|
|
67
|
+
var calcPosition = function calcPosition() {
|
|
53
68
|
var _getScrollParent;
|
|
54
69
|
var _componentRef$current = componentRef.current;
|
|
55
70
|
_componentRef$current = _componentRef$current === void 0 ? {} : _componentRef$current;
|
|
@@ -78,11 +93,13 @@ var Layer = function Layer(_ref) {
|
|
|
78
93
|
top: "".concat(top, "px")
|
|
79
94
|
});
|
|
80
95
|
onPosition(orientation);
|
|
81
|
-
|
|
82
|
-
}, [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible]);
|
|
96
|
+
};
|
|
83
97
|
var children = _react.default.Children.map(others.children || [], function (child) {
|
|
84
98
|
return child;
|
|
85
99
|
});
|
|
100
|
+
var className = others.className,
|
|
101
|
+
contentStyle = others.style;
|
|
102
|
+
var createWrapper = className || contentStyle;
|
|
86
103
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
87
104
|
"data-testid": others['data-testid'],
|
|
88
105
|
ref: componentRef
|
|
@@ -91,12 +108,15 @@ var Layer = function Layer(_ref) {
|
|
|
91
108
|
return name !== _LayerContent.LayerContent.name;
|
|
92
109
|
})), (forceRender || visible) && /*#__PURE__*/_react.default.createElement("div", {
|
|
93
110
|
ref: contentRef,
|
|
94
|
-
className: (0, _helpers.styles)(_LayerModule.default.layer, !visible && _LayerModule.default.hidden
|
|
95
|
-
style: _objectSpread(
|
|
96
|
-
},
|
|
111
|
+
className: (0, _helpers.styles)(_LayerModule.default.layer, !visible && _LayerModule.default.hidden),
|
|
112
|
+
style: _objectSpread({}, position)
|
|
113
|
+
}, /*#__PURE__*/_react.default.createElement(createWrapper ? 'div' : _react.default.Fragment, createWrapper ? {
|
|
114
|
+
className: className,
|
|
115
|
+
style: contentStyle
|
|
116
|
+
} : undefined, children === null || children === void 0 ? void 0 : children.find(function (_ref3) {
|
|
97
117
|
var name = _ref3.type.name;
|
|
98
118
|
return name === _LayerContent.LayerContent.name;
|
|
99
|
-
})));
|
|
119
|
+
}))));
|
|
100
120
|
};
|
|
101
121
|
exports.Layer = Layer;
|
|
102
122
|
Layer.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","current","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","find","name","type","LayerContent","styles","
|
|
1
|
+
{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","className","contentStyle","style","createWrapper","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { getElementLayout, getLayerPosition, getScrollParent } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n bottom: forceBottom,\n centered,\n forceRender = true,\n left: forceLeft,\n right: forceRight,\n top: forceTop,\n timestamp,\n visible,\n onPosition = () => {},\n ...others\n}) => {\n const device = useDevice();\n const componentRef = useRef();\n const contentRef = useRef();\n\n const [position, setPosition] = useState();\n\n useLayoutEffect(() => {\n const content = contentRef?.current;\n if (!content || typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(calcPosition);\n observer.observe(content);\n\n return () => observer.unobserve(content);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useLayoutEffect(\n () => calcPosition(),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n );\n\n const calcPosition = () => {\n const { current: { firstChild: componentEl } = {} } = componentRef;\n const { current: contentEl } = contentRef;\n\n if (!componentEl || !contentEl) return setPosition();\n\n const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n const contentLayout = getElementLayout(contentEl);\n\n const {\n left = 0,\n top = 0,\n orientation = {},\n } = getLayerPosition(componentLayout, contentLayout, device, {\n centered,\n forceBottom,\n forceLeft,\n forceRight,\n forceTop,\n });\n\n setPosition({ left: `${left}px`, top: `${top}px` });\n onPosition(orientation);\n };\n\n const children = React.Children.map(others.children || [], (child) => child);\n const { className, style: contentStyle } = others;\n const createWrapper = className || contentStyle;\n\n return (\n <>\n <span data-testid={others['data-testid']} ref={componentRef}>\n {children.find(({ type: { name } }) => name !== LayerContent.name)}\n </span>\n\n {(forceRender || visible) && (\n <div ref={contentRef} className={styles(style.layer, !visible && style.hidden)} style={{ ...position }}>\n {React.createElement(\n createWrapper ? 'div' : React.Fragment,\n createWrapper ? { className, style: contentStyle } : undefined,\n children?.find(({ type: { name } }) => name === LayerContent.name),\n )}\n </div>\n )}\n </>\n );\n};\n\nLayer.propTypes = {\n bottom: PropTypes.bool,\n centered: PropTypes.bool,\n children: PropTypes.node,\n forceRender: PropTypes.bool,\n left: PropTypes.bool,\n right: PropTypes.bool,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}
|
|
@@ -10,11 +10,14 @@ var getElementLayout = function getElementLayout() {
|
|
|
10
10
|
top = element.offsetTop,
|
|
11
11
|
height = element.offsetHeight,
|
|
12
12
|
width = element.offsetWidth;
|
|
13
|
+
var _ref = element.getBoundingClientRect && element.getBoundingClientRect() || {},
|
|
14
|
+
screenTop = _ref.top;
|
|
13
15
|
return {
|
|
14
16
|
left: left,
|
|
15
17
|
top: top,
|
|
16
18
|
height: height,
|
|
17
|
-
width: width
|
|
19
|
+
width: width,
|
|
20
|
+
screenTop: screenTop
|
|
18
21
|
};
|
|
19
22
|
};
|
|
20
23
|
exports.getElementLayout = getElementLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getElementLayout.js","names":["getElementLayout","element","left","offsetLeft","top","offsetTop","height","offsetHeight","width","offsetWidth"],"sources":["../../../../src/primitives/Layer/helpers/getElementLayout.js"],"sourcesContent":["export const getElementLayout = (element = {}) => {\n const { offsetLeft: left, offsetTop: top, offsetHeight: height, offsetWidth: width } = element;\n\n return { left, top, height, width };\n};\n"],"mappings":";;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAqB;EAAA,IAAjBC,OAAO,uEAAG,CAAC,CAAC;EAC3C,IAAoBC,IAAI,GAA+DD,OAAO,CAAtFE,UAAU;IAAmBC,GAAG,GAA+CH,OAAO,CAApEI,SAAS;IAAqBC,MAAM,GAAyBL,OAAO,CAApDM,YAAY;IAAuBC,KAAK,GAAKP,OAAO,CAA9BQ,WAAW;
|
|
1
|
+
{"version":3,"file":"getElementLayout.js","names":["getElementLayout","element","left","offsetLeft","top","offsetTop","height","offsetHeight","width","offsetWidth","getBoundingClientRect","screenTop"],"sources":["../../../../src/primitives/Layer/helpers/getElementLayout.js"],"sourcesContent":["export const getElementLayout = (element = {}) => {\n const { offsetLeft: left, offsetTop: top, offsetHeight: height, offsetWidth: width } = element;\n const { top: screenTop } = (element.getBoundingClientRect && element.getBoundingClientRect()) || {};\n\n return { left, top, height, width, screenTop };\n};\n"],"mappings":";;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAqB;EAAA,IAAjBC,OAAO,uEAAG,CAAC,CAAC;EAC3C,IAAoBC,IAAI,GAA+DD,OAAO,CAAtFE,UAAU;IAAmBC,GAAG,GAA+CH,OAAO,CAApEI,SAAS;IAAqBC,MAAM,GAAyBL,OAAO,CAApDM,YAAY;IAAuBC,KAAK,GAAKP,OAAO,CAA9BQ,WAAW;EAC3E,WAA4BR,OAAO,CAACS,qBAAqB,IAAIT,OAAO,CAACS,qBAAqB,EAAE,IAAK,CAAC,CAAC;IAAtFC,SAAS,QAAdP,GAAG;EAEX,OAAO;IAAEF,IAAI,EAAJA,IAAI;IAAEE,GAAG,EAAHA,GAAG;IAAEE,MAAM,EAANA,MAAM;IAAEE,KAAK,EAALA,KAAK;IAAEG,SAAS,EAATA;EAAU,CAAC;AAChD,CAAC;AAAC"}
|
|
@@ -29,7 +29,9 @@ var getLayerPosition = function getLayerPosition() {
|
|
|
29
29
|
_componentLayout$widt = componentLayout.width,
|
|
30
30
|
componentWidth = _componentLayout$widt === void 0 ? 0 : _componentLayout$widt,
|
|
31
31
|
_componentLayout$heig = componentLayout.height,
|
|
32
|
-
componentHeight = _componentLayout$heig === void 0 ? 0 : _componentLayout$heig
|
|
32
|
+
componentHeight = _componentLayout$heig === void 0 ? 0 : _componentLayout$heig,
|
|
33
|
+
_componentLayout$scre = componentLayout.screenTop,
|
|
34
|
+
screenTop = _componentLayout$scre === void 0 ? componentTop || 0 : _componentLayout$scre;
|
|
33
35
|
var _contentLayout$width = contentLayout.width,
|
|
34
36
|
contentWidth = _contentLayout$width === void 0 ? 0 : _contentLayout$width,
|
|
35
37
|
_contentLayout$height = contentLayout.height,
|
|
@@ -43,9 +45,8 @@ var getLayerPosition = function getLayerPosition() {
|
|
|
43
45
|
left: true
|
|
44
46
|
};
|
|
45
47
|
var top = componentTop + componentHeight - scrollTop;
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
if (contentHeight > gapBottom && gapTop > gapBottom && !forceBottom || forceTop) {
|
|
48
|
+
var gapBottom = height - (screenTop + componentHeight);
|
|
49
|
+
if (contentHeight > gapBottom && screenTop > gapBottom && !forceBottom || forceTop) {
|
|
49
50
|
top = componentTop - contentHeight - scrollTop;
|
|
50
51
|
orientation = _objectSpread(_objectSpread({}, orientation), {}, {
|
|
51
52
|
top: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","scrollTop","top","componentTop","width","componentWidth","height","componentHeight","contentWidth","contentHeight","aline","orientation","
|
|
1
|
+
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","scrollTop","top","componentTop","width","componentWidth","height","componentHeight","screenTop","contentWidth","contentHeight","aline","orientation","gapBottom","gapLeft","gapRight","undefined","right","gapCenter","space","center"],"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"sourcesContent":["export const getLayerPosition = (\n componentLayout = {},\n contentLayout = {},\n device = {},\n { centered, forceBottom, forceLeft, forceRight, forceTop } = {},\n) => {\n const {\n left: componentLeft = 0,\n scrollTop = 0,\n top: componentTop = 0,\n width: componentWidth = 0,\n height: componentHeight = 0,\n screenTop = componentTop || 0,\n } = componentLayout;\n const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n const { height = 0, width = 0 } = device;\n const aline = centered && (forceLeft || forceRight);\n let orientation = { left: true };\n\n let top = componentTop + componentHeight - scrollTop;\n const gapBottom = height - (screenTop + componentHeight);\n if ((contentHeight > gapBottom && screenTop > gapBottom && !forceBottom) || forceTop) {\n top = componentTop - contentHeight - scrollTop;\n orientation = { ...orientation, top: true };\n }\n\n let left = componentLeft;\n const gapLeft = componentLeft + componentWidth;\n const gapRight = width - componentLeft;\n if ((contentWidth > gapRight && gapLeft > gapRight && !forceLeft) || forceRight) {\n left = componentLeft - contentWidth + componentWidth;\n orientation = { ...orientation, left: undefined, right: true };\n }\n\n if (aline) {\n orientation = { ...orientation, left: forceLeft, right: forceRight, top: undefined };\n if (forceLeft && contentWidth > gapLeft && gapRight > gapLeft)\n orientation = { ...orientation, left: undefined, right: true };\n else if (forceRight && contentWidth > gapRight && gapLeft > gapRight)\n orientation = { ...orientation, left: true, right: undefined };\n\n left = orientation.left ? componentLeft - contentWidth : componentLeft + componentWidth;\n top = componentTop - (contentHeight - componentHeight) / 2 - scrollTop;\n } else if (centered) {\n const gapCenter = (componentWidth + contentWidth) / 2;\n const space = (contentWidth - componentWidth) / 2;\n orientation = { ...orientation, left: true, right: undefined };\n\n if (gapLeft > gapRight) {\n left = componentLeft - contentWidth + componentWidth;\n orientation = { ...orientation, left: undefined, right: true };\n }\n if (gapLeft > gapCenter && gapRight > gapCenter) {\n left += space * (gapLeft > gapRight ? 1 : -1);\n orientation = { ...orientation, left: undefined, right: undefined, center: true };\n }\n }\n\n return { left, top, orientation };\n};\n"],"mappings":"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"}
|