@sydsoft/base 1.47.0 → 1.48.0
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/README.md +8 -1
- package/dist/esm/_lib/baseFunctions.js +25 -38
- package/dist/esm/_lib/inputMask.js +66 -69
- package/dist/esm/_lib/listFunctions.js +12 -13
- package/dist/esm/_lib/storage/cookies.js +20 -21
- package/dist/esm/_lib/storage/encData.js +18 -20
- package/dist/esm/_lib/storage/localStorage.js +10 -10
- package/dist/esm/_lib/storage/sessionStorage.js +10 -10
- package/dist/esm/_lib/useInterval.js +5 -5
- package/dist/esm/alert/index.js +28 -30
- package/dist/esm/box/Box.js +6 -7
- package/dist/esm/box/BoxContent.js +2 -4
- package/dist/esm/box/BoxFooter.js +6 -4
- package/dist/esm/box/BoxHeader.js +6 -5
- package/dist/esm/countDown/index.js +28 -33
- package/dist/esm/dateTime/index.js +25 -31
- package/dist/esm/form/Button.js +28 -22
- package/dist/esm/form/Checkbox.js +7 -8
- package/dist/esm/form/Dialog.js +47 -34
- package/dist/esm/form/Form.js +3 -5
- package/dist/esm/form/FormOlustur.js +15 -17
- package/dist/esm/form/Input.js +57 -56
- package/dist/esm/form/Label.js +2 -4
- package/dist/esm/form/SearchableInput.js +77 -89
- package/dist/esm/form/UploadBase.js +30 -32
- package/dist/esm/grid/index.js +40 -41
- package/dist/esm/icon/icons.js +1 -1
- package/dist/esm/icon/index.js +16 -8
- package/dist/esm/menu/index.js +14 -16
- package/dist/esm/modal/index.js +14 -16
- package/dist/esm/popover/index.js +100 -100
- package/dist/esm/tooltip/index.js +117 -34
- package/package.json +12 -6
- package/dist/esm/alert/index.module.css +0 -119
- package/dist/esm/grid/index.module.css +0 -805
- package/dist/esm/menu/index.module.css +0 -92
- package/dist/esm/modal/index.module.css +0 -77
- /package/dist/esm/{box/Box.module.css → Box.module.css} +0 -0
- /package/dist/esm/{popover/index.module.css → index.module.css} +0 -0
- /package/dist/esm/{form/styles → styles}/Button.module.css +0 -0
- /package/dist/esm/{form/styles → styles}/Input.module.css +0 -0
- /package/dist/esm/{form/styles → styles}/Label.module.css +0 -0
- /package/dist/esm/{form/styles → styles}/SearchableInput.module.css +0 -0
package/dist/esm/menu/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign, __rest } from "tslib";
|
|
2
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
/**
|
|
4
3
|
* @author : izzetseydaoglu
|
|
@@ -10,23 +9,22 @@ import { Dialog } from '../form';
|
|
|
10
9
|
import { Popover } from '../popover';
|
|
11
10
|
import Link from 'next/link';
|
|
12
11
|
import styles from './index.module.css';
|
|
13
|
-
export
|
|
14
|
-
|
|
15
|
-
var withIconComponent = useMemo(function () {
|
|
12
|
+
export const Menu = memo(function MemoFunction({ menu, className, style, withIcon = 'auto' }) {
|
|
13
|
+
const withIconComponent = useMemo(() => {
|
|
16
14
|
if (withIcon === true)
|
|
17
15
|
return true;
|
|
18
16
|
if (withIcon === false)
|
|
19
17
|
return false;
|
|
20
|
-
return Object.values(menu).some(
|
|
18
|
+
return Object.values(menu).some((item) => 'icon' in item && !!item.icon);
|
|
21
19
|
}, [menu, withIcon]);
|
|
22
|
-
|
|
23
|
-
return Object.values(menu).some(
|
|
20
|
+
const withRightComponent = useMemo(() => {
|
|
21
|
+
return Object.values(menu).some((item) => 'rightComponent' in item && !!item.rightComponent);
|
|
24
22
|
}, [menu]);
|
|
25
|
-
|
|
23
|
+
const handleClick = (item, e) => {
|
|
26
24
|
if (!item.onClick)
|
|
27
25
|
return;
|
|
28
26
|
if (item.dialog) {
|
|
29
|
-
Dialog(
|
|
27
|
+
Dialog({ ...item.dialog }).then((result) => {
|
|
30
28
|
if (result && item.onClick) {
|
|
31
29
|
item.onClick(e);
|
|
32
30
|
}
|
|
@@ -36,17 +34,17 @@ export var Menu = memo(function MemoFunction(_a) {
|
|
|
36
34
|
item.onClick(e);
|
|
37
35
|
}
|
|
38
36
|
};
|
|
39
|
-
return (_jsx("ul", { className:
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
return (_jsx("ul", { className: `smenu ${styles.ul} ${className || ''}`, style: style, children: Object.values(menu).map((item, key) => {
|
|
38
|
+
const { fullComponent, icon, title, rightComponent, seperator, href, style, itemProps, type, items, menuProps, subMenuPopoverProps, ...other } = item;
|
|
39
|
+
const hasSubmenu = type === 'submenu' && Array.isArray(items) && items.length > 0;
|
|
42
40
|
if (fullComponent)
|
|
43
41
|
return React.cloneElement(fullComponent, { key: key });
|
|
44
42
|
if (seperator)
|
|
45
|
-
return _jsx("li",
|
|
46
|
-
|
|
43
|
+
return _jsx("li", { className: styles.seperator, style: style, ...itemProps, ...other }, key);
|
|
44
|
+
const Component = (_jsxs(_Fragment, { children: [withIconComponent && _jsx("div", { className: styles.menuicon, children: icon }), _jsx("div", { className: styles.menutitle, children: title }), withRightComponent && _jsx("div", { className: styles.rightmenu, children: rightComponent })] }));
|
|
47
45
|
if (hasSubmenu) {
|
|
48
|
-
return (_jsx(Popover,
|
|
46
|
+
return (_jsx(Popover, { component: _jsx("li", { style: style, ...itemProps, ...other, children: Component }), position: "right-top", ...(subMenuPopoverProps || {}), children: _jsx(Menu, { menu: items, ...(menuProps || {}) }) }, key));
|
|
49
47
|
}
|
|
50
|
-
return (_jsx("li",
|
|
48
|
+
return (_jsx("li", { style: style, onClick: (e) => handleClick(item, e), ...itemProps, ...other, children: href ? _jsx(Link, { href: href, children: Component }) : Component }, key));
|
|
51
49
|
}) }));
|
|
52
50
|
});
|
package/dist/esm/modal/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
/**
|
|
4
3
|
* Copyright (c) 2023
|
|
@@ -8,59 +7,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
7
|
import { memo, useEffect, useRef, useState } from "react";
|
|
9
8
|
import ReactDOM from "react-dom";
|
|
10
9
|
import styles from "./index.module.css";
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
useEffect(function () {
|
|
10
|
+
export const Modal = memo(function MemoFunction({ refModal = null, children, open = false, close, keepMounted = false, fullScreen = false, hideBackdrop = true, hideEsc = false, hideCloseButton = false, modalStyle, backdropStyle, vertialAlign = "center", horizontalAlign = "center" }) {
|
|
11
|
+
const [modalDiv, setModalDiv] = useState(null);
|
|
12
|
+
const ref = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
16
14
|
if (refModal)
|
|
17
15
|
refModal.current = ref.current;
|
|
18
16
|
}, [ref.current]);
|
|
19
|
-
|
|
17
|
+
const onClose = () => {
|
|
20
18
|
if (close)
|
|
21
19
|
close();
|
|
22
20
|
};
|
|
23
|
-
|
|
21
|
+
const checkHideBackDrop = (e) => {
|
|
24
22
|
if (open && ref.current && !ref.current.contains(e.target))
|
|
25
23
|
onClose();
|
|
26
24
|
};
|
|
27
|
-
|
|
25
|
+
const checkESC = (e) => {
|
|
28
26
|
if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape")
|
|
29
27
|
onClose();
|
|
30
28
|
};
|
|
31
|
-
useEffect(
|
|
29
|
+
useEffect(() => {
|
|
32
30
|
if (open) {
|
|
33
31
|
if (hideBackdrop)
|
|
34
32
|
window.addEventListener("mousedown", checkHideBackDrop);
|
|
35
33
|
if (hideEsc)
|
|
36
34
|
window.addEventListener("keydown", checkESC);
|
|
37
35
|
}
|
|
38
|
-
return
|
|
36
|
+
return () => {
|
|
39
37
|
if (hideBackdrop)
|
|
40
38
|
window.removeEventListener("mousedown", checkHideBackDrop);
|
|
41
39
|
if (hideEsc)
|
|
42
40
|
window.removeEventListener("keydown", checkESC);
|
|
43
41
|
};
|
|
44
42
|
});
|
|
45
|
-
useEffect(
|
|
43
|
+
useEffect(() => {
|
|
46
44
|
if (!modalDiv) {
|
|
47
|
-
|
|
45
|
+
const modalDivCheck = document.getElementById("smodal");
|
|
48
46
|
if (modalDivCheck) {
|
|
49
47
|
setModalDiv(modalDivCheck);
|
|
50
48
|
}
|
|
51
49
|
else {
|
|
52
|
-
|
|
50
|
+
const div = document.createElement("div");
|
|
53
51
|
div.setAttribute("id", "smodal");
|
|
54
52
|
document.body.appendChild(div);
|
|
55
53
|
setModalDiv(div);
|
|
56
54
|
}
|
|
57
55
|
}
|
|
58
|
-
return
|
|
56
|
+
return () => {
|
|
59
57
|
onClose();
|
|
60
58
|
};
|
|
61
59
|
}, []);
|
|
62
60
|
if ((!keepMounted && !open) || typeof window === "undefined")
|
|
63
61
|
return null;
|
|
64
|
-
|
|
62
|
+
const Component = (_jsx("div", { className: `${styles.backdrop} ${open ? styles.backdrop_open : ""}`, style: { alignItems: vertialAlign, justifyContent: horizontalAlign, ...backdropStyle }, children: _jsxs("div", { ref: ref, className: `smodal ${styles.modal} ${fullScreen ? styles.fullscreen : ""}`, style: modalStyle, children: [!hideCloseButton && (_jsx("div", { className: `close ${styles.close_fixed}`, children: _jsx("div", { className: styles.close, onClick: onClose, children: "\u2715" }) })), children] }) }));
|
|
65
63
|
return modalDiv ? ReactDOM.createPortal(Component, modalDiv) : null;
|
|
66
64
|
});
|
|
@@ -3,27 +3,25 @@
|
|
|
3
3
|
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
4
|
* @version : 2026-02-10 16:12:35
|
|
5
5
|
*/
|
|
6
|
-
import { __assign, __rest } from "tslib";
|
|
7
6
|
import { cloneElement, memo, useEffect, useRef } from 'react';
|
|
8
7
|
import { createRoot } from 'react-dom/client';
|
|
9
8
|
import styles from './index.module.css';
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
useEffect(function () {
|
|
9
|
+
export const Popover = memo(function MemoFunction({ children, component, position = 'top', arrow = false, distance = 5, removeWhenClickInside = false, hideBackdrop = true, fade = true, arrowColor = 'auto', hover = false, hoverCloseDelay = 120, keepMounted = false, ...other }) {
|
|
10
|
+
const refComponent = useRef(null);
|
|
11
|
+
const closeTimer = useRef(null);
|
|
12
|
+
const hoverCloseTimer = useRef(null);
|
|
13
|
+
const popoverRef = useRef(null);
|
|
14
|
+
const rootRef = useRef(null);
|
|
15
|
+
const zIndexRef = useRef(null);
|
|
16
|
+
useEffect(() => {
|
|
19
17
|
if (typeof window === 'undefined')
|
|
20
18
|
return;
|
|
21
|
-
return
|
|
19
|
+
return () => {
|
|
22
20
|
popoverSil(false);
|
|
23
21
|
};
|
|
24
22
|
}, []);
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
const checkHideBackDrop = (e) => {
|
|
24
|
+
const spopover = popoverRef.current;
|
|
27
25
|
if (!spopover)
|
|
28
26
|
return;
|
|
29
27
|
if (!((e === null || e === void 0 ? void 0 : e.target) instanceof Node)) {
|
|
@@ -33,50 +31,50 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
33
31
|
if (!spopover.contains(e.target))
|
|
34
32
|
popoverSil();
|
|
35
33
|
};
|
|
36
|
-
|
|
34
|
+
const popoverEkle = (e) => {
|
|
37
35
|
var _a, _b;
|
|
38
36
|
if (popoverRef.current && keepMounted) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
const popover = popoverRef.current;
|
|
38
|
+
const target = e.currentTarget;
|
|
39
|
+
const wasVisible = popover.classList.contains(styles.visible);
|
|
42
40
|
(_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.call(_a, children);
|
|
43
|
-
applyArrowColor(
|
|
44
|
-
popoverPosition({ target
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
applyArrowColor(popover);
|
|
42
|
+
popoverPosition({ target, position: position });
|
|
43
|
+
popover.style.zIndex = String(nextPopoverZIndex());
|
|
44
|
+
popover.classList.remove(styles.closing);
|
|
45
|
+
popover.classList.add(styles.visible);
|
|
48
46
|
if (!wasVisible) {
|
|
49
47
|
if (hideBackdrop) {
|
|
50
48
|
window.addEventListener('mousedown', checkHideBackDrop);
|
|
51
49
|
window.addEventListener('blur', checkHideBackDrop);
|
|
52
50
|
}
|
|
53
51
|
if (removeWhenClickInside)
|
|
54
|
-
|
|
52
|
+
popover.addEventListener('mouseup', popoverGecikmeliSil);
|
|
55
53
|
if (hover) {
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
popover.addEventListener('mouseenter', clearHoverClose);
|
|
55
|
+
popover.addEventListener('mouseleave', scheduleHoverClose);
|
|
58
56
|
}
|
|
59
57
|
incrementBodyPopover();
|
|
60
58
|
}
|
|
61
59
|
return;
|
|
62
60
|
}
|
|
63
61
|
popoverSil(false);
|
|
64
|
-
|
|
62
|
+
const popover = document.createElement('div');
|
|
65
63
|
popover.classList.add('spopover', styles.popover);
|
|
66
|
-
|
|
64
|
+
const zIndex = nextPopoverZIndex();
|
|
67
65
|
zIndexRef.current = zIndex;
|
|
68
66
|
document.body.appendChild(popover);
|
|
69
67
|
// ReactDOM.render(children, popover)
|
|
70
|
-
|
|
68
|
+
const root = createRoot(popover);
|
|
71
69
|
root.render(children);
|
|
72
70
|
popoverRef.current = popover;
|
|
73
71
|
rootRef.current = root;
|
|
74
|
-
|
|
72
|
+
const target = e.currentTarget;
|
|
75
73
|
refComponent.current && refComponent.current.classList.add('spopover_active');
|
|
76
|
-
setTimeout(
|
|
74
|
+
setTimeout(() => {
|
|
77
75
|
var _a;
|
|
78
76
|
applyArrowColor(popover);
|
|
79
|
-
popoverPosition({ target
|
|
77
|
+
popoverPosition({ target, position: position });
|
|
80
78
|
popover.style.zIndex = String((_a = zIndexRef.current) !== null && _a !== void 0 ? _a : zIndex);
|
|
81
79
|
popover.classList.add(styles.visible);
|
|
82
80
|
}, 100);
|
|
@@ -92,11 +90,10 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
92
90
|
}
|
|
93
91
|
incrementBodyPopover();
|
|
94
92
|
};
|
|
95
|
-
|
|
96
|
-
if (animate === void 0) { animate = true; }
|
|
93
|
+
const popoverSil = (animate = true) => {
|
|
97
94
|
refComponent.current && refComponent.current.classList.remove('spopover_active');
|
|
98
|
-
|
|
99
|
-
|
|
95
|
+
const check = popoverRef.current;
|
|
96
|
+
const wasVisible = !!(check === null || check === void 0 ? void 0 : check.classList.contains(styles.visible));
|
|
100
97
|
if (check) {
|
|
101
98
|
if (removeWhenClickInside)
|
|
102
99
|
check.removeEventListener('mouseup', popoverGecikmeliSil);
|
|
@@ -110,10 +107,10 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
110
107
|
window.clearTimeout(hoverCloseTimer.current);
|
|
111
108
|
if (!fade || !animate) {
|
|
112
109
|
if (!keepMounted) {
|
|
113
|
-
|
|
114
|
-
window.setTimeout(
|
|
110
|
+
const root = rootRef.current;
|
|
111
|
+
window.setTimeout(() => {
|
|
115
112
|
var _a;
|
|
116
|
-
(_a =
|
|
113
|
+
(_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
|
|
117
114
|
}, 0);
|
|
118
115
|
check.remove();
|
|
119
116
|
popoverRef.current = null;
|
|
@@ -126,10 +123,10 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
126
123
|
}
|
|
127
124
|
else if (!check.classList.contains(styles.closing)) {
|
|
128
125
|
check.classList.add(styles.closing);
|
|
129
|
-
closeTimer.current = window.setTimeout(
|
|
126
|
+
closeTimer.current = window.setTimeout(() => {
|
|
130
127
|
var _a;
|
|
131
128
|
if (!keepMounted) {
|
|
132
|
-
|
|
129
|
+
const root = rootRef.current;
|
|
133
130
|
(_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
|
|
134
131
|
check.remove();
|
|
135
132
|
popoverRef.current = null;
|
|
@@ -149,55 +146,54 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
149
146
|
if (wasVisible)
|
|
150
147
|
decrementBodyPopover();
|
|
151
148
|
};
|
|
152
|
-
|
|
153
|
-
|
|
149
|
+
const popoverGecikmeliSil = () => setTimeout(() => popoverSil(), 100);
|
|
150
|
+
const clearHoverClose = () => {
|
|
154
151
|
if (hoverCloseTimer.current)
|
|
155
152
|
window.clearTimeout(hoverCloseTimer.current);
|
|
156
153
|
hoverCloseTimer.current = null;
|
|
157
154
|
};
|
|
158
|
-
|
|
155
|
+
const scheduleHoverClose = () => {
|
|
159
156
|
clearHoverClose();
|
|
160
|
-
hoverCloseTimer.current = window.setTimeout(
|
|
157
|
+
hoverCloseTimer.current = window.setTimeout(() => popoverSil(), hoverCloseDelay);
|
|
161
158
|
};
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
var popover = popoverRef.current;
|
|
159
|
+
const popoverPosition = ({ target, position }) => {
|
|
160
|
+
const popover = popoverRef.current;
|
|
165
161
|
if (popover) {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
if (side === 'top' && targetPosition.top -
|
|
162
|
+
const arrowMargin = arrow ? 5 : 0;
|
|
163
|
+
const margin = distance + arrowMargin;
|
|
164
|
+
const { side: preferredSide, align: preferredAlign } = normalizePosition(position);
|
|
165
|
+
const targetPosition = target.getBoundingClientRect();
|
|
166
|
+
const popoverPosition = popover.getBoundingClientRect();
|
|
167
|
+
const style = [];
|
|
168
|
+
let side = preferredSide;
|
|
169
|
+
if (side === 'top' && targetPosition.top - popoverPosition.height - margin < 0)
|
|
174
170
|
side = 'bottom';
|
|
175
|
-
if (side === 'bottom' && targetPosition.bottom +
|
|
171
|
+
if (side === 'bottom' && targetPosition.bottom + popoverPosition.height + margin > window.innerHeight)
|
|
176
172
|
side = 'top';
|
|
177
|
-
if (side === 'left' && targetPosition.left -
|
|
173
|
+
if (side === 'left' && targetPosition.left - popoverPosition.width - margin < 0)
|
|
178
174
|
side = 'right';
|
|
179
|
-
if (side === 'right' && targetPosition.right +
|
|
175
|
+
if (side === 'right' && targetPosition.right + popoverPosition.width + margin > window.innerWidth)
|
|
180
176
|
side = 'left';
|
|
181
177
|
if (side === 'top')
|
|
182
|
-
style.push('top:' + (targetPosition.top -
|
|
178
|
+
style.push('top:' + (targetPosition.top - popoverPosition.height - margin) + 'px');
|
|
183
179
|
if (side === 'bottom')
|
|
184
180
|
style.push('top:' + (targetPosition.bottom + margin) + 'px');
|
|
185
181
|
if (side === 'left')
|
|
186
|
-
style.push('left:' + (targetPosition.left -
|
|
182
|
+
style.push('left:' + (targetPosition.left - popoverPosition.width - margin) + 'px');
|
|
187
183
|
if (side === 'right')
|
|
188
184
|
style.push('left:' + (targetPosition.right + margin) + 'px');
|
|
189
|
-
|
|
185
|
+
let alignClass = 'center';
|
|
190
186
|
if (side === 'top' || side === 'bottom') {
|
|
191
|
-
|
|
187
|
+
const { left, alignClass: resolvedAlign } = resolveHorizontalAlign(preferredAlign, targetPosition, popoverPosition);
|
|
192
188
|
alignClass = resolvedAlign;
|
|
193
189
|
style.push('left:' + left + 'px');
|
|
194
190
|
}
|
|
195
191
|
else {
|
|
196
|
-
|
|
192
|
+
const { top, alignClass: resolvedAlign } = resolveVerticalAlign(preferredAlign, targetPosition, popoverPosition);
|
|
197
193
|
alignClass = resolvedAlign;
|
|
198
|
-
style.push('top:' +
|
|
194
|
+
style.push('top:' + top + 'px');
|
|
199
195
|
}
|
|
200
|
-
|
|
196
|
+
const classNames = ['spopover', styles.popover, arrow ? styles.arrow : '', fade ? '' : styles.noFade, sideClass[side], alignClassMap[alignClass]].filter(Boolean);
|
|
201
197
|
popover.className = classNames.join(' ');
|
|
202
198
|
popover.setAttribute('style', style.join(';'));
|
|
203
199
|
applyArrowColor(popover);
|
|
@@ -210,12 +206,12 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
210
206
|
return;
|
|
211
207
|
}
|
|
212
208
|
if (arrowColor === 'auto') {
|
|
213
|
-
|
|
214
|
-
|
|
209
|
+
const targetEl = (_a = popoverEl.firstElementChild) !== null && _a !== void 0 ? _a : popoverEl;
|
|
210
|
+
let bg = window.getComputedStyle(targetEl).backgroundColor;
|
|
215
211
|
if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
|
|
216
|
-
|
|
217
|
-
if (
|
|
218
|
-
bg = window.getComputedStyle(
|
|
212
|
+
const parent = targetEl.parentElement;
|
|
213
|
+
if (parent)
|
|
214
|
+
bg = window.getComputedStyle(parent).backgroundColor;
|
|
219
215
|
}
|
|
220
216
|
if (bg)
|
|
221
217
|
popoverEl.style.setProperty('--popover-arrow-color', bg);
|
|
@@ -224,15 +220,15 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
224
220
|
popoverEl.style.setProperty('--popover-arrow-color', arrowColor);
|
|
225
221
|
}
|
|
226
222
|
function incrementBodyPopover() {
|
|
227
|
-
|
|
228
|
-
|
|
223
|
+
const body = document.body;
|
|
224
|
+
const count = Number(body.dataset.spopoverCount || '0') + 1;
|
|
229
225
|
body.dataset.spopoverCount = String(count);
|
|
230
226
|
if (count > 0)
|
|
231
227
|
body.classList.add('spopover_open');
|
|
232
228
|
}
|
|
233
229
|
function decrementBodyPopover() {
|
|
234
|
-
|
|
235
|
-
|
|
230
|
+
const body = document.body;
|
|
231
|
+
const count = Math.max(0, Number(body.dataset.spopoverCount || '0') - 1);
|
|
236
232
|
if (count === 0) {
|
|
237
233
|
delete body.dataset.spopoverCount;
|
|
238
234
|
body.classList.remove('spopover_open');
|
|
@@ -242,25 +238,29 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
242
238
|
}
|
|
243
239
|
}
|
|
244
240
|
function nextPopoverZIndex() {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
241
|
+
const body = document.body;
|
|
242
|
+
const current = Number(body.dataset.spopoverZIndex || '10000');
|
|
243
|
+
const next = current + 1;
|
|
248
244
|
body.dataset.spopoverZIndex = String(next);
|
|
249
245
|
return next;
|
|
250
246
|
}
|
|
251
|
-
|
|
247
|
+
const componentProps = {
|
|
248
|
+
ref: refComponent,
|
|
249
|
+
onClick: (e) => {
|
|
252
250
|
var _a, _b;
|
|
253
251
|
(_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
254
252
|
popoverEkle(e);
|
|
255
|
-
}
|
|
253
|
+
},
|
|
254
|
+
...other
|
|
255
|
+
};
|
|
256
256
|
if (hover) {
|
|
257
|
-
componentProps.onMouseEnter =
|
|
257
|
+
componentProps.onMouseEnter = (e) => {
|
|
258
258
|
var _a, _b;
|
|
259
259
|
(_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
260
260
|
clearHoverClose();
|
|
261
261
|
popoverEkle(e);
|
|
262
262
|
};
|
|
263
|
-
componentProps.onMouseLeave =
|
|
263
|
+
componentProps.onMouseLeave = (e) => {
|
|
264
264
|
var _a, _b;
|
|
265
265
|
(_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
266
266
|
scheduleHoverClose();
|
|
@@ -268,31 +268,31 @@ export var Popover = memo(function MemoFunction(_a) {
|
|
|
268
268
|
}
|
|
269
269
|
return cloneElement(component, componentProps);
|
|
270
270
|
});
|
|
271
|
-
|
|
271
|
+
const sideClass = {
|
|
272
272
|
top: styles.top,
|
|
273
273
|
bottom: styles.bottom,
|
|
274
274
|
left: styles.left,
|
|
275
275
|
right: styles.right
|
|
276
276
|
};
|
|
277
|
-
|
|
277
|
+
const alignClassMap = {
|
|
278
278
|
start: styles.alignStart,
|
|
279
279
|
center: styles.alignCenter,
|
|
280
280
|
end: styles.alignEnd
|
|
281
281
|
};
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
282
|
+
const FADE_DURATION = 160;
|
|
283
|
+
const normalizePosition = (position) => {
|
|
284
|
+
const [side, rawAlign] = position.split('-');
|
|
285
285
|
if (side === 'top' || side === 'bottom') {
|
|
286
|
-
|
|
287
|
-
return { side
|
|
286
|
+
const align = rawAlign === 'left' || rawAlign === 'right' ? rawAlign : 'center';
|
|
287
|
+
return { side, align };
|
|
288
288
|
}
|
|
289
|
-
|
|
290
|
-
return { side
|
|
289
|
+
const align = rawAlign === 'top' || rawAlign === 'bottom' ? rawAlign : 'center';
|
|
290
|
+
return { side, align };
|
|
291
291
|
};
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
292
|
+
const resolveHorizontalAlign = (align, target, popover) => {
|
|
293
|
+
const clamp = 2;
|
|
294
|
+
let left = 0;
|
|
295
|
+
let alignClass = 'center';
|
|
296
296
|
if (align === 'left') {
|
|
297
297
|
left = target.left;
|
|
298
298
|
alignClass = 'start';
|
|
@@ -313,12 +313,12 @@ var resolveHorizontalAlign = function (align, target, popover) {
|
|
|
313
313
|
left = window.innerWidth - popover.width - clamp;
|
|
314
314
|
alignClass = 'end';
|
|
315
315
|
}
|
|
316
|
-
return { left
|
|
316
|
+
return { left, alignClass };
|
|
317
317
|
};
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
318
|
+
const resolveVerticalAlign = (align, target, popover) => {
|
|
319
|
+
const clamp = 2;
|
|
320
|
+
let top = 0;
|
|
321
|
+
let alignClass = 'center';
|
|
322
322
|
if (align === 'top') {
|
|
323
323
|
top = target.top;
|
|
324
324
|
alignClass = 'start';
|
|
@@ -339,5 +339,5 @@ var resolveVerticalAlign = function (align, target, popover) {
|
|
|
339
339
|
top = window.innerHeight - popover.height - clamp;
|
|
340
340
|
alignClass = 'end';
|
|
341
341
|
}
|
|
342
|
-
return { top
|
|
342
|
+
return { top, alignClass };
|
|
343
343
|
};
|