@folklore/hooks 0.0.34 → 0.0.36
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 +217 -192
- package/dist/es.js +217 -193
- package/package.json +2 -2
package/dist/cjs.js
CHANGED
|
@@ -423,6 +423,222 @@ 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
|
+
persist = false,
|
|
621
|
+
...opts
|
|
622
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
623
|
+
const {
|
|
624
|
+
ref,
|
|
625
|
+
entry: {
|
|
626
|
+
isIntersecting
|
|
627
|
+
}
|
|
628
|
+
} = useIntersectionObserver(opts);
|
|
629
|
+
const wasIntersecting = react.useRef(isIntersecting);
|
|
630
|
+
if (isIntersecting && !wasIntersecting.current) {
|
|
631
|
+
wasIntersecting.current = isIntersecting;
|
|
632
|
+
}
|
|
633
|
+
const isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
634
|
+
return {
|
|
635
|
+
ref: !persist || !isVisible ? ref : {
|
|
636
|
+
current: null
|
|
637
|
+
},
|
|
638
|
+
visible: isVisible
|
|
639
|
+
};
|
|
640
|
+
}
|
|
641
|
+
|
|
426
642
|
const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
|
|
427
643
|
function useWindowEvent(event, callback) {
|
|
428
644
|
react.useEffect(() => {
|
|
@@ -855,198 +1071,6 @@ function useNativeVideoPlayer(url) {
|
|
|
855
1071
|
};
|
|
856
1072
|
}
|
|
857
1073
|
|
|
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
1074
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1051
1075
|
function useVimeoPlayer(id) {
|
|
1052
1076
|
let {
|
|
@@ -1735,6 +1759,7 @@ exports.useCounter = useCounter;
|
|
|
1735
1759
|
exports.useDailymotionPlayer = useDailymotionPlayer;
|
|
1736
1760
|
exports.useDocumentEvent = useDocumentEvent;
|
|
1737
1761
|
exports.useIntersectionObserver = useIntersectionObserver;
|
|
1762
|
+
exports.useIsVisible = useIsVisible;
|
|
1738
1763
|
exports.useItemsPaginated = useItemsPaginated;
|
|
1739
1764
|
exports.useKeyboard = useKeyboard;
|
|
1740
1765
|
exports.useNativeVideoPlayer = useNativeVideoPlayer;
|
package/dist/es.js
CHANGED
|
@@ -412,6 +412,222 @@ 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
|
+
persist = false,
|
|
610
|
+
...opts
|
|
611
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
612
|
+
const {
|
|
613
|
+
ref,
|
|
614
|
+
entry: {
|
|
615
|
+
isIntersecting
|
|
616
|
+
}
|
|
617
|
+
} = useIntersectionObserver(opts);
|
|
618
|
+
const wasIntersecting = useRef(isIntersecting);
|
|
619
|
+
if (isIntersecting && !wasIntersecting.current) {
|
|
620
|
+
wasIntersecting.current = isIntersecting;
|
|
621
|
+
}
|
|
622
|
+
const isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
623
|
+
return {
|
|
624
|
+
ref: !persist || !isVisible ? ref : {
|
|
625
|
+
current: null
|
|
626
|
+
},
|
|
627
|
+
visible: isVisible
|
|
628
|
+
};
|
|
629
|
+
}
|
|
630
|
+
|
|
415
631
|
const eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
|
|
416
632
|
function useWindowEvent(event, callback) {
|
|
417
633
|
useEffect(() => {
|
|
@@ -844,198 +1060,6 @@ function useNativeVideoPlayer(url) {
|
|
|
844
1060
|
};
|
|
845
1061
|
}
|
|
846
1062
|
|
|
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
1063
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1040
1064
|
function useVimeoPlayer(id) {
|
|
1041
1065
|
let {
|
|
@@ -1718,4 +1742,4 @@ function useWindowSize() {
|
|
|
1718
1742
|
return size;
|
|
1719
1743
|
}
|
|
1720
1744
|
|
|
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 };
|
|
1745
|
+
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.36",
|
|
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": "b7091a7fd55f5eeb84b54d35d2158f18eb23a6cd",
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@folklore/events": "^0.0.5",
|
|
55
55
|
"@folklore/services": "^0.1.38",
|