@folklore/hooks 0.0.34 → 0.0.35
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/cjs.js +219 -192
- package/dist/es.js +219 -193
- package/package.json +2 -2
package/dist/cjs.js
CHANGED
|
@@ -423,6 +423,224 @@ function useDocumentEvent(event, callback) {
|
|
|
423
423
|
}, [event, callback]);
|
|
424
424
|
}
|
|
425
425
|
|
|
426
|
+
const observersCache = new Map();
|
|
427
|
+
function getOptionsKey(_ref) {
|
|
428
|
+
let {
|
|
429
|
+
root = null,
|
|
430
|
+
rootMargin,
|
|
431
|
+
threshold = null
|
|
432
|
+
} = _ref;
|
|
433
|
+
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
434
|
+
}
|
|
435
|
+
function createObserver(Observer) {
|
|
436
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
437
|
+
let subscribers = [];
|
|
438
|
+
const addSubscriber = (element, callback) => {
|
|
439
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
440
|
+
if (currentSubscriber !== null) {
|
|
441
|
+
return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? {
|
|
442
|
+
...it,
|
|
443
|
+
callbacks: [...it.callbacks, callback]
|
|
444
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
445
|
+
}
|
|
446
|
+
return [...subscribers, {
|
|
447
|
+
element,
|
|
448
|
+
callbacks: [callback]
|
|
449
|
+
}];
|
|
450
|
+
};
|
|
451
|
+
const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? {
|
|
452
|
+
...it,
|
|
453
|
+
callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
|
|
454
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
455
|
+
const onUpdate = entries => {
|
|
456
|
+
entries.forEach(entry => {
|
|
457
|
+
subscribers.forEach(_ref2 => {
|
|
458
|
+
let {
|
|
459
|
+
element,
|
|
460
|
+
callbacks
|
|
461
|
+
} = _ref2;
|
|
462
|
+
if (element === entry.target) {
|
|
463
|
+
callbacks.forEach(callback => {
|
|
464
|
+
callback(entry);
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
});
|
|
468
|
+
});
|
|
469
|
+
};
|
|
470
|
+
const observer = new Observer(onUpdate, options);
|
|
471
|
+
const unsubscribe = function (element) {
|
|
472
|
+
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
473
|
+
subscribers = removeSubscriber(element, callback);
|
|
474
|
+
if (typeof observer.unobserve === 'undefined') {
|
|
475
|
+
observer.disconnect();
|
|
476
|
+
subscribers.forEach(subscriber => {
|
|
477
|
+
observer.observe(subscriber.element);
|
|
478
|
+
});
|
|
479
|
+
return;
|
|
480
|
+
}
|
|
481
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
482
|
+
if (currentSubscriber === null) {
|
|
483
|
+
observer.unobserve(element);
|
|
484
|
+
}
|
|
485
|
+
};
|
|
486
|
+
const subscribe = (element, callback) => {
|
|
487
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
488
|
+
subscribers = addSubscriber(element, callback);
|
|
489
|
+
if (currentSubscriber === null) {
|
|
490
|
+
observer.observe(element);
|
|
491
|
+
}
|
|
492
|
+
};
|
|
493
|
+
return {
|
|
494
|
+
subscribe,
|
|
495
|
+
unsubscribe,
|
|
496
|
+
observer
|
|
497
|
+
};
|
|
498
|
+
}
|
|
499
|
+
function getObserver() {
|
|
500
|
+
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
501
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
502
|
+
if (Observer === null) {
|
|
503
|
+
return {
|
|
504
|
+
observer: null,
|
|
505
|
+
subscribe: () => {},
|
|
506
|
+
unsubscribe: () => {}
|
|
507
|
+
};
|
|
508
|
+
}
|
|
509
|
+
const observerKey = getOptionsKey(options);
|
|
510
|
+
if (!observersCache.has(Observer)) {
|
|
511
|
+
observersCache.set(Observer, {});
|
|
512
|
+
}
|
|
513
|
+
const observers = observersCache.get(Observer);
|
|
514
|
+
if (typeof observers[observerKey] === 'undefined') {
|
|
515
|
+
observers[observerKey] = createObserver(Observer, options);
|
|
516
|
+
observersCache.set(Observer, observers);
|
|
517
|
+
}
|
|
518
|
+
return observers[observerKey];
|
|
519
|
+
}
|
|
520
|
+
function useObserver(Observer) {
|
|
521
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
522
|
+
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
523
|
+
const {
|
|
524
|
+
root = null,
|
|
525
|
+
rootMargin = null,
|
|
526
|
+
threshold: defaultThreshold = null,
|
|
527
|
+
disabled = false
|
|
528
|
+
} = opts;
|
|
529
|
+
const [entry, setEntry] = react.useState(initialEntry);
|
|
530
|
+
const threshold = react.useMemo(() => defaultThreshold, [defaultThreshold]);
|
|
531
|
+
const nodeRef = react.useRef(null);
|
|
532
|
+
const currentElement = react.useRef(null);
|
|
533
|
+
const elementChanged = nodeRef.current !== currentElement.current;
|
|
534
|
+
react.useEffect(() => {
|
|
535
|
+
const {
|
|
536
|
+
current: nodeElement
|
|
537
|
+
} = nodeRef;
|
|
538
|
+
const callback = newEntry => setEntry(newEntry);
|
|
539
|
+
let unsubscribe = null;
|
|
540
|
+
if (nodeElement !== null) {
|
|
541
|
+
const newOpts = {};
|
|
542
|
+
if (root !== null) {
|
|
543
|
+
newOpts.root = root;
|
|
544
|
+
}
|
|
545
|
+
if (rootMargin !== null) {
|
|
546
|
+
newOpts.rootMargin = rootMargin;
|
|
547
|
+
}
|
|
548
|
+
if (threshold !== null) {
|
|
549
|
+
newOpts.threshold = threshold;
|
|
550
|
+
}
|
|
551
|
+
const {
|
|
552
|
+
subscribe,
|
|
553
|
+
unsubscribe: localUnsubscribe
|
|
554
|
+
} = getObserver(Observer, newOpts);
|
|
555
|
+
unsubscribe = localUnsubscribe;
|
|
556
|
+
subscribe(nodeElement, callback);
|
|
557
|
+
}
|
|
558
|
+
currentElement.current = nodeElement;
|
|
559
|
+
return () => {
|
|
560
|
+
if (unsubscribe !== null) {
|
|
561
|
+
unsubscribe(nodeElement, callback);
|
|
562
|
+
}
|
|
563
|
+
};
|
|
564
|
+
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
565
|
+
return {
|
|
566
|
+
ref: nodeRef,
|
|
567
|
+
entry
|
|
568
|
+
};
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
/**
|
|
572
|
+
* Intersection Observer
|
|
573
|
+
*/
|
|
574
|
+
const defaultThreshold = [0, 1.0];
|
|
575
|
+
const intersectionObserverInitialEntry = {
|
|
576
|
+
target: null,
|
|
577
|
+
time: null,
|
|
578
|
+
isVisible: false,
|
|
579
|
+
isIntersecting: false,
|
|
580
|
+
intersectionRatio: 0,
|
|
581
|
+
intersectionRect: null,
|
|
582
|
+
boundingClientRect: null,
|
|
583
|
+
rootBounds: null
|
|
584
|
+
};
|
|
585
|
+
function useIntersectionObserver() {
|
|
586
|
+
let {
|
|
587
|
+
root = null,
|
|
588
|
+
rootMargin = '0px',
|
|
589
|
+
threshold = defaultThreshold,
|
|
590
|
+
disabled = false
|
|
591
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
592
|
+
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
593
|
+
root,
|
|
594
|
+
rootMargin,
|
|
595
|
+
threshold,
|
|
596
|
+
disabled
|
|
597
|
+
}, intersectionObserverInitialEntry);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
/**
|
|
601
|
+
* Resize Observer
|
|
602
|
+
*/
|
|
603
|
+
const resizeObserverInitialEntry = {
|
|
604
|
+
target: null,
|
|
605
|
+
contentRect: null,
|
|
606
|
+
contentBoxSize: null,
|
|
607
|
+
borderBoxSize: null
|
|
608
|
+
};
|
|
609
|
+
function useResizeObserver() {
|
|
610
|
+
let {
|
|
611
|
+
disabled = false
|
|
612
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
613
|
+
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
614
|
+
disabled
|
|
615
|
+
}, resizeObserverInitialEntry);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
function useIsVisible() {
|
|
619
|
+
let {
|
|
620
|
+
rootMargin,
|
|
621
|
+
persist = false
|
|
622
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
623
|
+
const {
|
|
624
|
+
ref,
|
|
625
|
+
entry: {
|
|
626
|
+
isIntersecting
|
|
627
|
+
}
|
|
628
|
+
} = useIntersectionObserver({
|
|
629
|
+
rootMargin
|
|
630
|
+
});
|
|
631
|
+
const wasIntersecting = react.useRef(isIntersecting);
|
|
632
|
+
if (isIntersecting && !wasIntersecting.current) {
|
|
633
|
+
wasIntersecting.current = isIntersecting;
|
|
634
|
+
}
|
|
635
|
+
const isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
636
|
+
return {
|
|
637
|
+
ref: !persist || !isVisible ? ref : {
|
|
638
|
+
current: null
|
|
639
|
+
},
|
|
640
|
+
visible: isVisible
|
|
641
|
+
};
|
|
642
|
+
}
|
|
643
|
+
|
|
426
644
|
const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
|
|
427
645
|
function useWindowEvent(event, callback) {
|
|
428
646
|
react.useEffect(() => {
|
|
@@ -855,198 +1073,6 @@ function useNativeVideoPlayer(url) {
|
|
|
855
1073
|
};
|
|
856
1074
|
}
|
|
857
1075
|
|
|
858
|
-
const observersCache = new Map();
|
|
859
|
-
function getOptionsKey(_ref) {
|
|
860
|
-
let {
|
|
861
|
-
root = null,
|
|
862
|
-
rootMargin,
|
|
863
|
-
threshold = null
|
|
864
|
-
} = _ref;
|
|
865
|
-
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
866
|
-
}
|
|
867
|
-
function createObserver(Observer) {
|
|
868
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
869
|
-
let subscribers = [];
|
|
870
|
-
const addSubscriber = (element, callback) => {
|
|
871
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
872
|
-
if (currentSubscriber !== null) {
|
|
873
|
-
return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? {
|
|
874
|
-
...it,
|
|
875
|
-
callbacks: [...it.callbacks, callback]
|
|
876
|
-
} : it).filter(it => it.callbacks.length > 0);
|
|
877
|
-
}
|
|
878
|
-
return [...subscribers, {
|
|
879
|
-
element,
|
|
880
|
-
callbacks: [callback]
|
|
881
|
-
}];
|
|
882
|
-
};
|
|
883
|
-
const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? {
|
|
884
|
-
...it,
|
|
885
|
-
callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
|
|
886
|
-
} : it).filter(it => it.callbacks.length > 0);
|
|
887
|
-
const onUpdate = entries => {
|
|
888
|
-
entries.forEach(entry => {
|
|
889
|
-
subscribers.forEach(_ref2 => {
|
|
890
|
-
let {
|
|
891
|
-
element,
|
|
892
|
-
callbacks
|
|
893
|
-
} = _ref2;
|
|
894
|
-
if (element === entry.target) {
|
|
895
|
-
callbacks.forEach(callback => {
|
|
896
|
-
callback(entry);
|
|
897
|
-
});
|
|
898
|
-
}
|
|
899
|
-
});
|
|
900
|
-
});
|
|
901
|
-
};
|
|
902
|
-
const observer = new Observer(onUpdate, options);
|
|
903
|
-
const unsubscribe = function (element) {
|
|
904
|
-
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
905
|
-
subscribers = removeSubscriber(element, callback);
|
|
906
|
-
if (typeof observer.unobserve === 'undefined') {
|
|
907
|
-
observer.disconnect();
|
|
908
|
-
subscribers.forEach(subscriber => {
|
|
909
|
-
observer.observe(subscriber.element);
|
|
910
|
-
});
|
|
911
|
-
return;
|
|
912
|
-
}
|
|
913
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
914
|
-
if (currentSubscriber === null) {
|
|
915
|
-
observer.unobserve(element);
|
|
916
|
-
}
|
|
917
|
-
};
|
|
918
|
-
const subscribe = (element, callback) => {
|
|
919
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
920
|
-
subscribers = addSubscriber(element, callback);
|
|
921
|
-
if (currentSubscriber === null) {
|
|
922
|
-
observer.observe(element);
|
|
923
|
-
}
|
|
924
|
-
};
|
|
925
|
-
return {
|
|
926
|
-
subscribe,
|
|
927
|
-
unsubscribe,
|
|
928
|
-
observer
|
|
929
|
-
};
|
|
930
|
-
}
|
|
931
|
-
function getObserver() {
|
|
932
|
-
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
933
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
934
|
-
if (Observer === null) {
|
|
935
|
-
return {
|
|
936
|
-
observer: null,
|
|
937
|
-
subscribe: () => {},
|
|
938
|
-
unsubscribe: () => {}
|
|
939
|
-
};
|
|
940
|
-
}
|
|
941
|
-
const observerKey = getOptionsKey(options);
|
|
942
|
-
if (!observersCache.has(Observer)) {
|
|
943
|
-
observersCache.set(Observer, {});
|
|
944
|
-
}
|
|
945
|
-
const observers = observersCache.get(Observer);
|
|
946
|
-
if (typeof observers[observerKey] === 'undefined') {
|
|
947
|
-
observers[observerKey] = createObserver(Observer, options);
|
|
948
|
-
observersCache.set(Observer, observers);
|
|
949
|
-
}
|
|
950
|
-
return observers[observerKey];
|
|
951
|
-
}
|
|
952
|
-
function useObserver(Observer) {
|
|
953
|
-
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
954
|
-
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
955
|
-
const {
|
|
956
|
-
root = null,
|
|
957
|
-
rootMargin = null,
|
|
958
|
-
threshold: defaultThreshold = null,
|
|
959
|
-
disabled = false
|
|
960
|
-
} = opts;
|
|
961
|
-
const [entry, setEntry] = react.useState(initialEntry);
|
|
962
|
-
const threshold = react.useMemo(() => defaultThreshold, [defaultThreshold]);
|
|
963
|
-
const nodeRef = react.useRef(null);
|
|
964
|
-
const currentElement = react.useRef(null);
|
|
965
|
-
const elementChanged = nodeRef.current !== currentElement.current;
|
|
966
|
-
react.useEffect(() => {
|
|
967
|
-
const {
|
|
968
|
-
current: nodeElement
|
|
969
|
-
} = nodeRef;
|
|
970
|
-
const callback = newEntry => setEntry(newEntry);
|
|
971
|
-
let unsubscribe = null;
|
|
972
|
-
if (nodeElement !== null) {
|
|
973
|
-
const newOpts = {};
|
|
974
|
-
if (root !== null) {
|
|
975
|
-
newOpts.root = root;
|
|
976
|
-
}
|
|
977
|
-
if (rootMargin !== null) {
|
|
978
|
-
newOpts.rootMargin = rootMargin;
|
|
979
|
-
}
|
|
980
|
-
if (threshold !== null) {
|
|
981
|
-
newOpts.threshold = threshold;
|
|
982
|
-
}
|
|
983
|
-
const {
|
|
984
|
-
subscribe,
|
|
985
|
-
unsubscribe: localUnsubscribe
|
|
986
|
-
} = getObserver(Observer, newOpts);
|
|
987
|
-
unsubscribe = localUnsubscribe;
|
|
988
|
-
subscribe(nodeElement, callback);
|
|
989
|
-
}
|
|
990
|
-
currentElement.current = nodeElement;
|
|
991
|
-
return () => {
|
|
992
|
-
if (unsubscribe !== null) {
|
|
993
|
-
unsubscribe(nodeElement, callback);
|
|
994
|
-
}
|
|
995
|
-
};
|
|
996
|
-
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
997
|
-
return {
|
|
998
|
-
ref: nodeRef,
|
|
999
|
-
entry
|
|
1000
|
-
};
|
|
1001
|
-
}
|
|
1002
|
-
|
|
1003
|
-
/**
|
|
1004
|
-
* Intersection Observer
|
|
1005
|
-
*/
|
|
1006
|
-
const defaultThreshold = [0, 1.0];
|
|
1007
|
-
const intersectionObserverInitialEntry = {
|
|
1008
|
-
target: null,
|
|
1009
|
-
time: null,
|
|
1010
|
-
isVisible: false,
|
|
1011
|
-
isIntersecting: false,
|
|
1012
|
-
intersectionRatio: 0,
|
|
1013
|
-
intersectionRect: null,
|
|
1014
|
-
boundingClientRect: null,
|
|
1015
|
-
rootBounds: null
|
|
1016
|
-
};
|
|
1017
|
-
function useIntersectionObserver() {
|
|
1018
|
-
let {
|
|
1019
|
-
root = null,
|
|
1020
|
-
rootMargin = '0px',
|
|
1021
|
-
threshold = defaultThreshold,
|
|
1022
|
-
disabled = false
|
|
1023
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1024
|
-
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
1025
|
-
root,
|
|
1026
|
-
rootMargin,
|
|
1027
|
-
threshold,
|
|
1028
|
-
disabled
|
|
1029
|
-
}, intersectionObserverInitialEntry);
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
|
-
/**
|
|
1033
|
-
* Resize Observer
|
|
1034
|
-
*/
|
|
1035
|
-
const resizeObserverInitialEntry = {
|
|
1036
|
-
target: null,
|
|
1037
|
-
contentRect: null,
|
|
1038
|
-
contentBoxSize: null,
|
|
1039
|
-
borderBoxSize: null
|
|
1040
|
-
};
|
|
1041
|
-
function useResizeObserver() {
|
|
1042
|
-
let {
|
|
1043
|
-
disabled = false
|
|
1044
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1045
|
-
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
1046
|
-
disabled
|
|
1047
|
-
}, resizeObserverInitialEntry);
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
1076
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1051
1077
|
function useVimeoPlayer(id) {
|
|
1052
1078
|
let {
|
|
@@ -1735,6 +1761,7 @@ exports.useCounter = useCounter;
|
|
|
1735
1761
|
exports.useDailymotionPlayer = useDailymotionPlayer;
|
|
1736
1762
|
exports.useDocumentEvent = useDocumentEvent;
|
|
1737
1763
|
exports.useIntersectionObserver = useIntersectionObserver;
|
|
1764
|
+
exports.useIsVisible = useIsVisible;
|
|
1738
1765
|
exports.useItemsPaginated = useItemsPaginated;
|
|
1739
1766
|
exports.useKeyboard = useKeyboard;
|
|
1740
1767
|
exports.useNativeVideoPlayer = useNativeVideoPlayer;
|
package/dist/es.js
CHANGED
|
@@ -412,6 +412,224 @@ function useDocumentEvent(event, callback) {
|
|
|
412
412
|
}, [event, callback]);
|
|
413
413
|
}
|
|
414
414
|
|
|
415
|
+
const observersCache = new Map();
|
|
416
|
+
function getOptionsKey(_ref) {
|
|
417
|
+
let {
|
|
418
|
+
root = null,
|
|
419
|
+
rootMargin,
|
|
420
|
+
threshold = null
|
|
421
|
+
} = _ref;
|
|
422
|
+
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
423
|
+
}
|
|
424
|
+
function createObserver(Observer) {
|
|
425
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
426
|
+
let subscribers = [];
|
|
427
|
+
const addSubscriber = (element, callback) => {
|
|
428
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
429
|
+
if (currentSubscriber !== null) {
|
|
430
|
+
return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? {
|
|
431
|
+
...it,
|
|
432
|
+
callbacks: [...it.callbacks, callback]
|
|
433
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
434
|
+
}
|
|
435
|
+
return [...subscribers, {
|
|
436
|
+
element,
|
|
437
|
+
callbacks: [callback]
|
|
438
|
+
}];
|
|
439
|
+
};
|
|
440
|
+
const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? {
|
|
441
|
+
...it,
|
|
442
|
+
callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
|
|
443
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
444
|
+
const onUpdate = entries => {
|
|
445
|
+
entries.forEach(entry => {
|
|
446
|
+
subscribers.forEach(_ref2 => {
|
|
447
|
+
let {
|
|
448
|
+
element,
|
|
449
|
+
callbacks
|
|
450
|
+
} = _ref2;
|
|
451
|
+
if (element === entry.target) {
|
|
452
|
+
callbacks.forEach(callback => {
|
|
453
|
+
callback(entry);
|
|
454
|
+
});
|
|
455
|
+
}
|
|
456
|
+
});
|
|
457
|
+
});
|
|
458
|
+
};
|
|
459
|
+
const observer = new Observer(onUpdate, options);
|
|
460
|
+
const unsubscribe = function (element) {
|
|
461
|
+
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
462
|
+
subscribers = removeSubscriber(element, callback);
|
|
463
|
+
if (typeof observer.unobserve === 'undefined') {
|
|
464
|
+
observer.disconnect();
|
|
465
|
+
subscribers.forEach(subscriber => {
|
|
466
|
+
observer.observe(subscriber.element);
|
|
467
|
+
});
|
|
468
|
+
return;
|
|
469
|
+
}
|
|
470
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
471
|
+
if (currentSubscriber === null) {
|
|
472
|
+
observer.unobserve(element);
|
|
473
|
+
}
|
|
474
|
+
};
|
|
475
|
+
const subscribe = (element, callback) => {
|
|
476
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
477
|
+
subscribers = addSubscriber(element, callback);
|
|
478
|
+
if (currentSubscriber === null) {
|
|
479
|
+
observer.observe(element);
|
|
480
|
+
}
|
|
481
|
+
};
|
|
482
|
+
return {
|
|
483
|
+
subscribe,
|
|
484
|
+
unsubscribe,
|
|
485
|
+
observer
|
|
486
|
+
};
|
|
487
|
+
}
|
|
488
|
+
function getObserver() {
|
|
489
|
+
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
490
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
491
|
+
if (Observer === null) {
|
|
492
|
+
return {
|
|
493
|
+
observer: null,
|
|
494
|
+
subscribe: () => {},
|
|
495
|
+
unsubscribe: () => {}
|
|
496
|
+
};
|
|
497
|
+
}
|
|
498
|
+
const observerKey = getOptionsKey(options);
|
|
499
|
+
if (!observersCache.has(Observer)) {
|
|
500
|
+
observersCache.set(Observer, {});
|
|
501
|
+
}
|
|
502
|
+
const observers = observersCache.get(Observer);
|
|
503
|
+
if (typeof observers[observerKey] === 'undefined') {
|
|
504
|
+
observers[observerKey] = createObserver(Observer, options);
|
|
505
|
+
observersCache.set(Observer, observers);
|
|
506
|
+
}
|
|
507
|
+
return observers[observerKey];
|
|
508
|
+
}
|
|
509
|
+
function useObserver(Observer) {
|
|
510
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
511
|
+
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
512
|
+
const {
|
|
513
|
+
root = null,
|
|
514
|
+
rootMargin = null,
|
|
515
|
+
threshold: defaultThreshold = null,
|
|
516
|
+
disabled = false
|
|
517
|
+
} = opts;
|
|
518
|
+
const [entry, setEntry] = useState(initialEntry);
|
|
519
|
+
const threshold = useMemo(() => defaultThreshold, [defaultThreshold]);
|
|
520
|
+
const nodeRef = useRef(null);
|
|
521
|
+
const currentElement = useRef(null);
|
|
522
|
+
const elementChanged = nodeRef.current !== currentElement.current;
|
|
523
|
+
useEffect(() => {
|
|
524
|
+
const {
|
|
525
|
+
current: nodeElement
|
|
526
|
+
} = nodeRef;
|
|
527
|
+
const callback = newEntry => setEntry(newEntry);
|
|
528
|
+
let unsubscribe = null;
|
|
529
|
+
if (nodeElement !== null) {
|
|
530
|
+
const newOpts = {};
|
|
531
|
+
if (root !== null) {
|
|
532
|
+
newOpts.root = root;
|
|
533
|
+
}
|
|
534
|
+
if (rootMargin !== null) {
|
|
535
|
+
newOpts.rootMargin = rootMargin;
|
|
536
|
+
}
|
|
537
|
+
if (threshold !== null) {
|
|
538
|
+
newOpts.threshold = threshold;
|
|
539
|
+
}
|
|
540
|
+
const {
|
|
541
|
+
subscribe,
|
|
542
|
+
unsubscribe: localUnsubscribe
|
|
543
|
+
} = getObserver(Observer, newOpts);
|
|
544
|
+
unsubscribe = localUnsubscribe;
|
|
545
|
+
subscribe(nodeElement, callback);
|
|
546
|
+
}
|
|
547
|
+
currentElement.current = nodeElement;
|
|
548
|
+
return () => {
|
|
549
|
+
if (unsubscribe !== null) {
|
|
550
|
+
unsubscribe(nodeElement, callback);
|
|
551
|
+
}
|
|
552
|
+
};
|
|
553
|
+
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
554
|
+
return {
|
|
555
|
+
ref: nodeRef,
|
|
556
|
+
entry
|
|
557
|
+
};
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/**
|
|
561
|
+
* Intersection Observer
|
|
562
|
+
*/
|
|
563
|
+
const defaultThreshold = [0, 1.0];
|
|
564
|
+
const intersectionObserverInitialEntry = {
|
|
565
|
+
target: null,
|
|
566
|
+
time: null,
|
|
567
|
+
isVisible: false,
|
|
568
|
+
isIntersecting: false,
|
|
569
|
+
intersectionRatio: 0,
|
|
570
|
+
intersectionRect: null,
|
|
571
|
+
boundingClientRect: null,
|
|
572
|
+
rootBounds: null
|
|
573
|
+
};
|
|
574
|
+
function useIntersectionObserver() {
|
|
575
|
+
let {
|
|
576
|
+
root = null,
|
|
577
|
+
rootMargin = '0px',
|
|
578
|
+
threshold = defaultThreshold,
|
|
579
|
+
disabled = false
|
|
580
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
581
|
+
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
582
|
+
root,
|
|
583
|
+
rootMargin,
|
|
584
|
+
threshold,
|
|
585
|
+
disabled
|
|
586
|
+
}, intersectionObserverInitialEntry);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/**
|
|
590
|
+
* Resize Observer
|
|
591
|
+
*/
|
|
592
|
+
const resizeObserverInitialEntry = {
|
|
593
|
+
target: null,
|
|
594
|
+
contentRect: null,
|
|
595
|
+
contentBoxSize: null,
|
|
596
|
+
borderBoxSize: null
|
|
597
|
+
};
|
|
598
|
+
function useResizeObserver() {
|
|
599
|
+
let {
|
|
600
|
+
disabled = false
|
|
601
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
602
|
+
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
603
|
+
disabled
|
|
604
|
+
}, resizeObserverInitialEntry);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
function useIsVisible() {
|
|
608
|
+
let {
|
|
609
|
+
rootMargin,
|
|
610
|
+
persist = false
|
|
611
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
612
|
+
const {
|
|
613
|
+
ref,
|
|
614
|
+
entry: {
|
|
615
|
+
isIntersecting
|
|
616
|
+
}
|
|
617
|
+
} = useIntersectionObserver({
|
|
618
|
+
rootMargin
|
|
619
|
+
});
|
|
620
|
+
const wasIntersecting = useRef(isIntersecting);
|
|
621
|
+
if (isIntersecting && !wasIntersecting.current) {
|
|
622
|
+
wasIntersecting.current = isIntersecting;
|
|
623
|
+
}
|
|
624
|
+
const isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
625
|
+
return {
|
|
626
|
+
ref: !persist || !isVisible ? ref : {
|
|
627
|
+
current: null
|
|
628
|
+
},
|
|
629
|
+
visible: isVisible
|
|
630
|
+
};
|
|
631
|
+
}
|
|
632
|
+
|
|
415
633
|
const eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
|
|
416
634
|
function useWindowEvent(event, callback) {
|
|
417
635
|
useEffect(() => {
|
|
@@ -844,198 +1062,6 @@ function useNativeVideoPlayer(url) {
|
|
|
844
1062
|
};
|
|
845
1063
|
}
|
|
846
1064
|
|
|
847
|
-
const observersCache = new Map();
|
|
848
|
-
function getOptionsKey(_ref) {
|
|
849
|
-
let {
|
|
850
|
-
root = null,
|
|
851
|
-
rootMargin,
|
|
852
|
-
threshold = null
|
|
853
|
-
} = _ref;
|
|
854
|
-
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
855
|
-
}
|
|
856
|
-
function createObserver(Observer) {
|
|
857
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
858
|
-
let subscribers = [];
|
|
859
|
-
const addSubscriber = (element, callback) => {
|
|
860
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
861
|
-
if (currentSubscriber !== null) {
|
|
862
|
-
return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? {
|
|
863
|
-
...it,
|
|
864
|
-
callbacks: [...it.callbacks, callback]
|
|
865
|
-
} : it).filter(it => it.callbacks.length > 0);
|
|
866
|
-
}
|
|
867
|
-
return [...subscribers, {
|
|
868
|
-
element,
|
|
869
|
-
callbacks: [callback]
|
|
870
|
-
}];
|
|
871
|
-
};
|
|
872
|
-
const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? {
|
|
873
|
-
...it,
|
|
874
|
-
callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
|
|
875
|
-
} : it).filter(it => it.callbacks.length > 0);
|
|
876
|
-
const onUpdate = entries => {
|
|
877
|
-
entries.forEach(entry => {
|
|
878
|
-
subscribers.forEach(_ref2 => {
|
|
879
|
-
let {
|
|
880
|
-
element,
|
|
881
|
-
callbacks
|
|
882
|
-
} = _ref2;
|
|
883
|
-
if (element === entry.target) {
|
|
884
|
-
callbacks.forEach(callback => {
|
|
885
|
-
callback(entry);
|
|
886
|
-
});
|
|
887
|
-
}
|
|
888
|
-
});
|
|
889
|
-
});
|
|
890
|
-
};
|
|
891
|
-
const observer = new Observer(onUpdate, options);
|
|
892
|
-
const unsubscribe = function (element) {
|
|
893
|
-
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
894
|
-
subscribers = removeSubscriber(element, callback);
|
|
895
|
-
if (typeof observer.unobserve === 'undefined') {
|
|
896
|
-
observer.disconnect();
|
|
897
|
-
subscribers.forEach(subscriber => {
|
|
898
|
-
observer.observe(subscriber.element);
|
|
899
|
-
});
|
|
900
|
-
return;
|
|
901
|
-
}
|
|
902
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
903
|
-
if (currentSubscriber === null) {
|
|
904
|
-
observer.unobserve(element);
|
|
905
|
-
}
|
|
906
|
-
};
|
|
907
|
-
const subscribe = (element, callback) => {
|
|
908
|
-
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
909
|
-
subscribers = addSubscriber(element, callback);
|
|
910
|
-
if (currentSubscriber === null) {
|
|
911
|
-
observer.observe(element);
|
|
912
|
-
}
|
|
913
|
-
};
|
|
914
|
-
return {
|
|
915
|
-
subscribe,
|
|
916
|
-
unsubscribe,
|
|
917
|
-
observer
|
|
918
|
-
};
|
|
919
|
-
}
|
|
920
|
-
function getObserver() {
|
|
921
|
-
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
922
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
923
|
-
if (Observer === null) {
|
|
924
|
-
return {
|
|
925
|
-
observer: null,
|
|
926
|
-
subscribe: () => {},
|
|
927
|
-
unsubscribe: () => {}
|
|
928
|
-
};
|
|
929
|
-
}
|
|
930
|
-
const observerKey = getOptionsKey(options);
|
|
931
|
-
if (!observersCache.has(Observer)) {
|
|
932
|
-
observersCache.set(Observer, {});
|
|
933
|
-
}
|
|
934
|
-
const observers = observersCache.get(Observer);
|
|
935
|
-
if (typeof observers[observerKey] === 'undefined') {
|
|
936
|
-
observers[observerKey] = createObserver(Observer, options);
|
|
937
|
-
observersCache.set(Observer, observers);
|
|
938
|
-
}
|
|
939
|
-
return observers[observerKey];
|
|
940
|
-
}
|
|
941
|
-
function useObserver(Observer) {
|
|
942
|
-
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
943
|
-
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
944
|
-
const {
|
|
945
|
-
root = null,
|
|
946
|
-
rootMargin = null,
|
|
947
|
-
threshold: defaultThreshold = null,
|
|
948
|
-
disabled = false
|
|
949
|
-
} = opts;
|
|
950
|
-
const [entry, setEntry] = useState(initialEntry);
|
|
951
|
-
const threshold = useMemo(() => defaultThreshold, [defaultThreshold]);
|
|
952
|
-
const nodeRef = useRef(null);
|
|
953
|
-
const currentElement = useRef(null);
|
|
954
|
-
const elementChanged = nodeRef.current !== currentElement.current;
|
|
955
|
-
useEffect(() => {
|
|
956
|
-
const {
|
|
957
|
-
current: nodeElement
|
|
958
|
-
} = nodeRef;
|
|
959
|
-
const callback = newEntry => setEntry(newEntry);
|
|
960
|
-
let unsubscribe = null;
|
|
961
|
-
if (nodeElement !== null) {
|
|
962
|
-
const newOpts = {};
|
|
963
|
-
if (root !== null) {
|
|
964
|
-
newOpts.root = root;
|
|
965
|
-
}
|
|
966
|
-
if (rootMargin !== null) {
|
|
967
|
-
newOpts.rootMargin = rootMargin;
|
|
968
|
-
}
|
|
969
|
-
if (threshold !== null) {
|
|
970
|
-
newOpts.threshold = threshold;
|
|
971
|
-
}
|
|
972
|
-
const {
|
|
973
|
-
subscribe,
|
|
974
|
-
unsubscribe: localUnsubscribe
|
|
975
|
-
} = getObserver(Observer, newOpts);
|
|
976
|
-
unsubscribe = localUnsubscribe;
|
|
977
|
-
subscribe(nodeElement, callback);
|
|
978
|
-
}
|
|
979
|
-
currentElement.current = nodeElement;
|
|
980
|
-
return () => {
|
|
981
|
-
if (unsubscribe !== null) {
|
|
982
|
-
unsubscribe(nodeElement, callback);
|
|
983
|
-
}
|
|
984
|
-
};
|
|
985
|
-
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
986
|
-
return {
|
|
987
|
-
ref: nodeRef,
|
|
988
|
-
entry
|
|
989
|
-
};
|
|
990
|
-
}
|
|
991
|
-
|
|
992
|
-
/**
|
|
993
|
-
* Intersection Observer
|
|
994
|
-
*/
|
|
995
|
-
const defaultThreshold = [0, 1.0];
|
|
996
|
-
const intersectionObserverInitialEntry = {
|
|
997
|
-
target: null,
|
|
998
|
-
time: null,
|
|
999
|
-
isVisible: false,
|
|
1000
|
-
isIntersecting: false,
|
|
1001
|
-
intersectionRatio: 0,
|
|
1002
|
-
intersectionRect: null,
|
|
1003
|
-
boundingClientRect: null,
|
|
1004
|
-
rootBounds: null
|
|
1005
|
-
};
|
|
1006
|
-
function useIntersectionObserver() {
|
|
1007
|
-
let {
|
|
1008
|
-
root = null,
|
|
1009
|
-
rootMargin = '0px',
|
|
1010
|
-
threshold = defaultThreshold,
|
|
1011
|
-
disabled = false
|
|
1012
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1013
|
-
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
1014
|
-
root,
|
|
1015
|
-
rootMargin,
|
|
1016
|
-
threshold,
|
|
1017
|
-
disabled
|
|
1018
|
-
}, intersectionObserverInitialEntry);
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1021
|
-
/**
|
|
1022
|
-
* Resize Observer
|
|
1023
|
-
*/
|
|
1024
|
-
const resizeObserverInitialEntry = {
|
|
1025
|
-
target: null,
|
|
1026
|
-
contentRect: null,
|
|
1027
|
-
contentBoxSize: null,
|
|
1028
|
-
borderBoxSize: null
|
|
1029
|
-
};
|
|
1030
|
-
function useResizeObserver() {
|
|
1031
|
-
let {
|
|
1032
|
-
disabled = false
|
|
1033
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1034
|
-
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
1035
|
-
disabled
|
|
1036
|
-
}, resizeObserverInitialEntry);
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
1065
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1040
1066
|
function useVimeoPlayer(id) {
|
|
1041
1067
|
let {
|
|
@@ -1718,4 +1744,4 @@ function useWindowSize() {
|
|
|
1718
1744
|
return size;
|
|
1719
1745
|
}
|
|
1720
1746
|
|
|
1721
|
-
export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
|
|
1747
|
+
export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folklore/hooks",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.35",
|
|
4
4
|
"description": "React hooks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "f667640e912d685cae90a8bdb8e391976f5d4969",
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@folklore/events": "^0.0.5",
|
|
55
55
|
"@folklore/services": "^0.1.38",
|