@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.
Files changed (3) hide show
  1. package/dist/cjs.js +219 -192
  2. package/dist/es.js +219 -193
  3. 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.34",
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": "07dfa3d9148ae3329f8e92667e589cad925703e8",
52
+ "gitHead": "f667640e912d685cae90a8bdb8e391976f5d4969",
53
53
  "dependencies": {
54
54
  "@folklore/events": "^0.0.5",
55
55
  "@folklore/services": "^0.1.38",