intelicoreact 1.2.23 → 1.2.25

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.
Files changed (4) hide show
  1. package/dist/Atomic/UI/Modal/Modal.js +10 -3
  2. package/dist/Atomic/UI/Modal/ModalMobile.scss +0 -3
  3. package/dist/Atomic/UI/Modal/partials/useMobileModal.js +30 -8
  4. package/package.json +1 -1
package/dist/Atomic/UI/Modal/Modal.js CHANGED
@@ -88,9 +88,15 @@ var Modal = function Modal(_ref2) {
88
88
  closeOnEsc = _ref2$closeOnEsc === void 0 ? false : _ref2$closeOnEsc,
89
89
  leftContentOfFooter = _ref2.leftContentOfFooter,
90
90
  testId = _ref2.testId,
91
- noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
92
-
93
- var _useMobileModal = (0, _useMobileModal2.default)(),
91
+ noHeaderCloseBtn = _ref2.noHeaderCloseBtn,
92
+ _ref2$noMobileModalLo = _ref2.noMobileModalLogic,
93
+ noMobileModalLogic = _ref2$noMobileModalLo === void 0 ? false : _ref2$noMobileModalLo;
94
+ var modalRef = (0, _react.useRef)(null);
95
+
96
+ var _useMobileModal = (0, _useMobileModal2.default)({
97
+ modalRef: modalRef,
98
+ noMobileModalLogic: noMobileModalLogic
99
+ }),
94
100
  modalMobileHeaderRef = _useMobileModal.modalMobileHeaderRef,
95
101
  modalMobileBodyRef = _useMobileModal.modalMobileBodyRef,
96
102
  modalMobileFooterRef = _useMobileModal.modalMobileFooterRef,
@@ -135,6 +141,7 @@ var Modal = function Modal(_ref2) {
135
141
  className: isOpen ? 'modal-overlay' : 'hidden',
136
142
  onClick: closeModal
137
143
  }), renderModal( /*#__PURE__*/_react.default.createElement("div", {
144
+ ref: modalRef,
138
145
  style: {
139
146
  width: size
140
147
  },
package/dist/Atomic/UI/Modal/ModalMobile.scss CHANGED
@@ -3,12 +3,9 @@
3
3
  height: 100dvh;
4
4
  width: 100dvw;
5
5
  position: relative;
6
- top: 0;
7
6
  overflow-y: auto;
8
7
  box-sizing: border-box;
9
8
  border-radius: 16px 16px 0 0;
10
- display: flex;
11
- align-items: flex-end;
12
9
 
13
10
  .modal {
14
11
  margin-top: 16px!important;
package/dist/Atomic/UI/Modal/partials/useMobileModal.js CHANGED
@@ -22,8 +22,13 @@ var SCROLL_DIRECTION = {
22
22
  DOWN: 'down'
23
23
  };
24
24
 
25
- function useMobileModal() {
26
- var _modalMobileContainer, _modalMobileContainer2, _modalMobileHeaderRef, _modalMobileHeaderRef2, _modalMobileFooterRef, _modalMobileFooterRef2, _modalMobileFooterRef3, _modalMobileFooterRef4, _modalMobileBodyRef$c, _modalMobileBodyRef$c2;
25
+ function useMobileModal(_ref) {
26
+ var _modalMobileContainer, _modalMobileContainer2, _modalMobileHeaderRef, _modalMobileHeaderRef2, _modalMobileFooterRef, _modalMobileFooterRef2, _modalMobileFooterRef3, _modalMobileFooterRef4, _modalMobileBodyRef$c, _modalMobileBodyRef$c2, _modal$getBoundingCli;
27
+
28
+ var _ref$modalRef = _ref.modalRef,
29
+ modalRef = _ref$modalRef === void 0 ? null : _ref$modalRef,
30
+ _ref$noMobileModalLog = _ref.noMobileModalLogic,
31
+ noMobileModalLogic = _ref$noMobileModalLog === void 0 ? false : _ref$noMobileModalLog;
27
32
 
28
33
  var _useState = (0, _react.useState)(false),
29
34
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -55,6 +60,11 @@ function useMobileModal() {
55
60
  var footerBottom = modalMobileContainerHeight - (modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef = modalMobileFooterRef.current) === null || _modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef2 = _modalMobileFooterRef.getBoundingClientRect()) === null || _modalMobileFooterRef2 === void 0 ? void 0 : _modalMobileFooterRef2.bottom);
56
61
  var footerHeight = modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef3 = modalMobileFooterRef.current) === null || _modalMobileFooterRef3 === void 0 ? void 0 : (_modalMobileFooterRef4 = _modalMobileFooterRef3.getBoundingClientRect()) === null || _modalMobileFooterRef4 === void 0 ? void 0 : _modalMobileFooterRef4.height;
57
62
  var bodyTop = modalMobileBodyRef === null || modalMobileBodyRef === void 0 ? void 0 : (_modalMobileBodyRef$c = modalMobileBodyRef.current) === null || _modalMobileBodyRef$c === void 0 ? void 0 : (_modalMobileBodyRef$c2 = _modalMobileBodyRef$c.getBoundingClientRect()) === null || _modalMobileBodyRef$c2 === void 0 ? void 0 : _modalMobileBodyRef$c2.top;
63
+ var modal = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
64
+ var modalStyle = modal ? modal.currentStyle || window.getComputedStyle(modal) : {};
65
+ var modalHeight = modal ? (modal === null || modal === void 0 ? void 0 : (_modal$getBoundingCli = modal.getBoundingClientRect()) === null || _modal$getBoundingCli === void 0 ? void 0 : _modal$getBoundingCli.height) + parseFloat(modalStyle === null || modalStyle === void 0 ? void 0 : modalStyle.marginTop) : 0;
66
+ var windowHeight = window.screen.availHeight;
67
+ var modalContainer = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current;
58
68
  /* MODALS LOGIC | BEGIN */
59
69
  // Detect Mobile
60
70
 
@@ -77,12 +87,24 @@ function useMobileModal() {
77
87
 
78
88
  (0, _react.useEffect)(function () {
79
89
  setScrollDirection(scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : SCROLL_DIRECTION.DOWN);
80
- }, [scrollTop, scrollTopPrev]);
90
+ }, [scrollTop, scrollTopPrev]); // Dynamic Modal Positioning
91
+
92
+ (0, _react.useEffect)(function () {
93
+ if (modal && modalContainer) {
94
+ if (modalHeight <= windowHeight) {
95
+ modalContainer.style.display = 'flex';
96
+ modalContainer.style.alignItems = 'flex-end';
97
+ } else {
98
+ modalContainer.style.removeProperty('display');
99
+ modalContainer.style.removeProperty('align-items');
100
+ }
101
+ }
102
+ }, [modalHeight, windowHeight, modal, modalContainer]);
81
103
  var MODALS_LOGIC = {
82
- IS_HEADER_HIDDEN: !isMobile ? false : footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
83
- IS_HEADER_STICKY: !isMobile ? false : headerTop <= 0,
84
- IS_FOOTER_HIDDEN: !isMobile ? false : bodyTop > 0 || scrollDirection === SCROLL_DIRECTION.UP,
85
- IS_FOOTER_STICKY: !isMobile ? false : footerBottom <= 0
104
+ IS_HEADER_HIDDEN: !isMobile || noMobileModalLogic ? false : footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
105
+ IS_HEADER_STICKY: !isMobile || noMobileModalLogic ? false : headerTop <= 0,
106
+ IS_FOOTER_HIDDEN: !isMobile || noMobileModalLogic ? false : bodyTop > 0 || scrollDirection === SCROLL_DIRECTION.UP,
107
+ IS_FOOTER_STICKY: !isMobile || noMobileModalLogic ? false : footerBottom <= 0
86
108
  };
87
109
  /* MODALS LOGIC | END */
88
110
 
@@ -94,7 +116,7 @@ function useMobileModal() {
94
116
  };
95
117
 
96
118
  var renderModal = function renderModal(modal) {
97
- return isMobile ? renderMobileModal(modal) : modal;
119
+ return isMobile && !noMobileModalLogic ? renderMobileModal(modal) : modal;
98
120
  };
99
121
 
100
122
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.2.23",
3
+ "version": "1.2.25",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [