@expressms/smartapp-ui 2.8.0-alpha.5 → 2.8.0-alpha.6
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/main//321/201omponents/DraggablePopup/DraggablePopup.d.ts +1 -1
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js +19 -15
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js.map +1 -1
- package/build/main//321/201omponents/DraggablePopup/types.d.ts +8 -3
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IDraggablePopupProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const DraggablePopup: ({ draggableZoneRef, popupContent, isPopupOpen, handleClose, popupCoords, title, bottomContent, dropZonePadding,
|
|
3
|
+
declare const DraggablePopup: ({ draggableZoneRef, popupContent, isPopupOpen, handleClose, popupCoords, title, bottomContent, dropZonePadding, offsetScrollY, onChangeCoords, offsetPopupByClick, }: IDraggablePopupProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
4
|
export default DraggablePopup;
|
|
@@ -21,31 +21,34 @@ var DEFAULT_DRAGGABLE_PADDING = {
|
|
|
21
21
|
right: 20,
|
|
22
22
|
left: 20,
|
|
23
23
|
};
|
|
24
|
-
var
|
|
25
|
-
var
|
|
24
|
+
var OFFSET_POPUP_X_BY_CLICK = 30;
|
|
25
|
+
var OFFSET_POPUP_Y_BY_CLICK = 10;
|
|
26
26
|
var DEFAULT_POPUP_POSITION = { x: 40, y: 40 };
|
|
27
27
|
var DraggablePopup = function (_a) {
|
|
28
|
-
var draggableZoneRef = _a.draggableZoneRef, popupContent = _a.popupContent, isPopupOpen = _a.isPopupOpen, handleClose = _a.handleClose, popupCoords = _a.popupCoords, _b = _a.title, title = _b === void 0 ? ' ' : _b, bottomContent = _a.bottomContent, _c = _a.dropZonePadding, dropZonePadding = _c === void 0 ? DEFAULT_DRAGGABLE_PADDING : _c, _d = _a.
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
28
|
+
var draggableZoneRef = _a.draggableZoneRef, popupContent = _a.popupContent, isPopupOpen = _a.isPopupOpen, handleClose = _a.handleClose, popupCoords = _a.popupCoords, _b = _a.title, title = _b === void 0 ? ' ' : _b, bottomContent = _a.bottomContent, _c = _a.dropZonePadding, dropZonePadding = _c === void 0 ? DEFAULT_DRAGGABLE_PADDING : _c, _d = _a.offsetScrollY, offsetScrollY = _d === void 0 ? 0 : _d, onChangeCoords = _a.onChangeCoords, _e = _a.offsetPopupByClick, offsetPopupByClick = _e === void 0 ? { offsetPopupXByClick: OFFSET_POPUP_X_BY_CLICK, offsetPopupYByClick: OFFSET_POPUP_Y_BY_CLICK } : _e;
|
|
29
|
+
var _f = useState(null), draggableZoneInfo = _f[0], setDraggableZoneInfo = _f[1];
|
|
30
|
+
var _g = useState(null), popupPosition = _g[0], setPopupPosition = _g[1];
|
|
31
|
+
var _h = useState(false), isDraggable = _h[0], setIsDraggable = _h[1];
|
|
32
|
+
var _j = useState(false), isOutside = _j[0], setIsOutside = _j[1];
|
|
33
|
+
var _k = useState(false), wasDraggable = _k[0], setWasDraggable = _k[1];
|
|
33
34
|
var popupRef = useRef(null);
|
|
34
35
|
useEffect(function () {
|
|
35
36
|
var topPadding = dropZonePadding.top, bottomPadding = dropZonePadding.bottom, leftPadding = dropZonePadding.left, rightPadding = dropZonePadding.right;
|
|
37
|
+
var draggableZoneRefCurrent = draggableZoneRef.current;
|
|
36
38
|
var popupRefCurrent = popupRef.current;
|
|
37
39
|
var updatePosition = function () {
|
|
38
|
-
if (!
|
|
40
|
+
if (!draggableZoneRefCurrent || !popupRefCurrent || !popupCoords)
|
|
39
41
|
return;
|
|
40
|
-
var _a =
|
|
42
|
+
var _a = draggableZoneRefCurrent.getBoundingClientRect(), zoneWidth = _a.width, zoneHeight = _a.height, topOffsetByPage = _a.top, leftOffsetByPage = _a.left;
|
|
41
43
|
var _b = popupRefCurrent.getBoundingClientRect(), popupWidth = _b.width, popupHeight = _b.height;
|
|
42
44
|
var x = popupCoords.x, y = popupCoords.y;
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
+
var offsetPopupXByClick = offsetPopupByClick.offsetPopupXByClick, offsetPopupYByClick = offsetPopupByClick.offsetPopupYByClick;
|
|
46
|
+
var currentOffsetY = wasDraggable ? 0 : offsetPopupXByClick - topOffsetByPage;
|
|
47
|
+
var currentOffsetX = wasDraggable ? 0 : offsetPopupYByClick - leftOffsetByPage;
|
|
45
48
|
var newX = Math.min(x + currentOffsetX, zoneWidth - popupWidth - Math.max(rightPadding, leftPadding));
|
|
46
49
|
var newY = Math.min(y + currentOffsetY, zoneHeight - popupHeight - Math.max(topPadding, bottomPadding));
|
|
47
50
|
setPopupPosition({ x: newX, y: newY });
|
|
48
|
-
var currentZoneHeight = zoneHeight +
|
|
51
|
+
var currentZoneHeight = zoneHeight + offsetScrollY;
|
|
49
52
|
setDraggableZoneInfo({
|
|
50
53
|
width: zoneWidth,
|
|
51
54
|
height: currentZoneHeight,
|
|
@@ -62,7 +65,7 @@ var DraggablePopup = function (_a) {
|
|
|
62
65
|
resizeObserver.disconnect();
|
|
63
66
|
};
|
|
64
67
|
/* eslint-disable-next-line */
|
|
65
|
-
}, [isPopupOpen, draggableZoneRef, popupRef, popupCoords,
|
|
68
|
+
}, [isPopupOpen, draggableZoneRef, popupRef, popupCoords, dropZonePadding, offsetScrollY, wasDraggable]);
|
|
66
69
|
useEffect(function () {
|
|
67
70
|
var checkIfClickedOutside = function (e) {
|
|
68
71
|
if (isPopupOpen && popupRef.current && !popupRef.current.contains(e.target) && !isOutside)
|
|
@@ -78,14 +81,15 @@ var DraggablePopup = function (_a) {
|
|
|
78
81
|
var onDragStop = function (_a) {
|
|
79
82
|
var x = _a.x, y = _a.y;
|
|
80
83
|
setIsDraggable(false);
|
|
84
|
+
!wasDraggable && setWasDraggable(true);
|
|
81
85
|
onChangeCoords({ x: x, y: y });
|
|
82
86
|
setPopupPosition({ x: x, y: y });
|
|
83
87
|
};
|
|
84
88
|
var onDragStart = function () { return setIsDraggable(true); };
|
|
85
89
|
var handleMouseLeave = function () { return isDraggable && setIsOutside(true); };
|
|
86
90
|
var handleMouseEnter = function () { return setIsOutside(false); };
|
|
87
|
-
var
|
|
88
|
-
return (_jsx("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width: width, height: height }, className: "smartapp-draggable-popup" }, { children: _jsx(Draggable, __assign({ onStart: onDragStart, onStop: function (_, data) { return onDragStop(data); }, position: popupPosition || DEFAULT_POPUP_POSITION, bounds: { top: top, right: right, left: left, bottom: bottom } }, { children: _jsx("div", __assign({ ref: popupRef, className: classNames('smartapp-draggable-popup__popup-container', { invisible: !popupPosition }) }, { children: _jsx(Modal, { isModalOpen: isPopupOpen, content: popupContent, isPopup: true, handleCloseModal: handleClose, title: title, bottomContent: bottomContent, className: "smartapp-draggable-popup__popup-container--modal" }) })) })) })));
|
|
91
|
+
var _l = draggableZoneInfo || {}, width = _l.width, height = _l.height, top = _l.top, bottom = _l.bottom, right = _l.right, left = _l.left;
|
|
92
|
+
return (_jsx("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width: width, height: height }, className: "smartapp-draggable-popup" }, { children: _jsx(Draggable, __assign({ onStart: onDragStart, onStop: function (_, data) { return onDragStop(data); }, position: popupPosition || DEFAULT_POPUP_POSITION, bounds: { top: top, right: right, left: left, bottom: bottom } }, { children: _jsx("div", __assign({ ref: popupRef, className: classNames('smartapp-draggable-popup__popup-container', { 'invisible-content': !popupPosition }) }, { children: _jsx(Modal, { isModalOpen: isPopupOpen, content: popupContent, isPopup: true, handleCloseModal: handleClose, title: title, bottomContent: bottomContent, className: "smartapp-draggable-popup__popup-container--modal" }) })) })) })));
|
|
89
93
|
};
|
|
90
94
|
export default DraggablePopup;
|
|
91
95
|
//# sourceMappingURL=DraggablePopup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggablePopup.js","sourceRoot":"","sources":["../../../../src/сomponents/DraggablePopup/DraggablePopup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,SAA4B,MAAM,iBAAiB,CAAA;AAC1D,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,0BAA0B,CAAA;AAWjC,IAAM,yBAAyB,GAAG;IAChC,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;CACT,CAAA;AAED,IAAM,
|
|
1
|
+
{"version":3,"file":"DraggablePopup.js","sourceRoot":"","sources":["../../../../src/сomponents/DraggablePopup/DraggablePopup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { ReactElement, RefObject } from 'react';
|
|
2
2
|
export type TPopupPosition = {
|
|
3
3
|
x: number;
|
|
4
4
|
y: number;
|
|
@@ -9,8 +9,12 @@ type TDraggablePadding = {
|
|
|
9
9
|
left: number;
|
|
10
10
|
right: number;
|
|
11
11
|
};
|
|
12
|
+
type TOffsetPopupByClick = {
|
|
13
|
+
offsetPopupXByClick: number;
|
|
14
|
+
offsetPopupYByClick: number;
|
|
15
|
+
};
|
|
12
16
|
export interface IDraggablePopupProps {
|
|
13
|
-
draggableZoneRef:
|
|
17
|
+
draggableZoneRef: RefObject<HTMLDivElement | null>;
|
|
14
18
|
popupCoords: TPopupPosition;
|
|
15
19
|
popupContent: ReactElement;
|
|
16
20
|
isPopupOpen: boolean;
|
|
@@ -18,7 +22,8 @@ export interface IDraggablePopupProps {
|
|
|
18
22
|
title?: string;
|
|
19
23
|
bottomContent?: ReactElement;
|
|
20
24
|
dropZonePadding?: TDraggablePadding;
|
|
21
|
-
|
|
25
|
+
offsetScrollY?: number;
|
|
26
|
+
offsetPopupByClick?: TOffsetPopupByClick;
|
|
22
27
|
onChangeCoords: (coords: TPopupPosition) => void;
|
|
23
28
|
}
|
|
24
29
|
export {};
|