@thecb/components 7.7.8-beta.4 → 7.7.8-beta.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/dist/index.cjs.js +6 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +6 -10
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/util/useCheckElementsInViewport.js +10 -13
package/dist/index.esm.js
CHANGED
|
@@ -24458,14 +24458,11 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
|
|
|
24458
24458
|
Hook that determines whether every element in an array of DOM selectors is fully present
|
|
24459
24459
|
within the user's current viewport.
|
|
24460
24460
|
|
|
24461
|
-
(elements: Array<String
|
|
24461
|
+
(elements: Array<String>) => Boolean;
|
|
24462
24462
|
|
|
24463
24463
|
Takes an array of strings that correspond to DOM selectors. Examples:
|
|
24464
24464
|
"#submit-button", ".module-small", "h2.alert-title"
|
|
24465
24465
|
|
|
24466
|
-
Also takes a handler function (such as a useState updater) to receive the Boolean
|
|
24467
|
-
that the hook generates
|
|
24468
|
-
|
|
24469
24466
|
The document query function will return the *first* element in the document that matches
|
|
24470
24467
|
the string given.
|
|
24471
24468
|
|
|
@@ -24475,13 +24472,10 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
|
|
|
24475
24472
|
This will return the first element that matches *any* of the provided selectors
|
|
24476
24473
|
|
|
24477
24474
|
If every element in the array is fully within the viewport, function returns true
|
|
24478
|
-
|
|
24479
|
-
Calls the provided handler function with the Boolean result
|
|
24480
24475
|
*/
|
|
24481
24476
|
|
|
24482
24477
|
var useCheckElementsInViewport = function useCheckElementsInViewport() {
|
|
24483
24478
|
var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
24484
|
-
var handler = arguments.length > 1 ? arguments[1] : undefined;
|
|
24485
24479
|
|
|
24486
24480
|
var _useState = useState(false),
|
|
24487
24481
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -24492,15 +24486,17 @@ var useCheckElementsInViewport = function useCheckElementsInViewport() {
|
|
|
24492
24486
|
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
24493
24487
|
useEffect$1(function () {
|
|
24494
24488
|
elements.forEach(function (element) {
|
|
24489
|
+
console.log("element is", element);
|
|
24495
24490
|
var domEl = document.querySelector(element);
|
|
24496
|
-
|
|
24491
|
+
console.log("domEl is", domEl);
|
|
24492
|
+
var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect();
|
|
24497
24493
|
|
|
24498
|
-
if (boundingBox.top >= 0 && boundingBox.left >= 0 && boundingBox.right <= viewportWidth && boundingBox.bottom <= viewportHeight) {
|
|
24494
|
+
if ((boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.top) >= 0 && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.left) >= 0 && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.right) <= viewportWidth && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.bottom) <= viewportHeight) {
|
|
24499
24495
|
setElementsVisible(true);
|
|
24500
24496
|
}
|
|
24501
24497
|
});
|
|
24502
24498
|
}, [elements, viewportWidth, viewportHeight]);
|
|
24503
|
-
|
|
24499
|
+
return elementsVisible;
|
|
24504
24500
|
};
|
|
24505
24501
|
|
|
24506
24502
|
|