@folklore/hooks 0.0.61 → 0.0.63

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 +32 -18
  2. package/dist/es.js +32 -18
  3. package/package.json +2 -2
package/dist/cjs.js CHANGED
@@ -1774,36 +1774,50 @@ function useVisualViewport() {
1774
1774
  const [{
1775
1775
  width: viewportWidth,
1776
1776
  height: viewportHeight,
1777
- offsetTop = 0,
1778
- offsetLeft = 0,
1779
- pageLeft = 0,
1780
- pageTop = 0
1777
+ ...viewport
1781
1778
  }, setViewport] = react.useState({
1782
1779
  width: windowWidth,
1783
1780
  height: windowHeight
1784
1781
  });
1782
+ const updateViewport = react.useCallback(function () {
1783
+ let viewPort = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1784
+ const {
1785
+ width: newWidth = 0,
1786
+ height: newHeight = 0,
1787
+ offsetTop: newOffsetTop = 0,
1788
+ offsetLeft: newOffsetLeft = 0,
1789
+ pageLeft: newPageLeft = 0,
1790
+ pageTop: newPageTop = 0
1791
+ } = viewPort || window.visualViewport || {};
1792
+ setViewport({
1793
+ width: newWidth,
1794
+ height: newHeight,
1795
+ offsetTop: newOffsetTop,
1796
+ offsetLeft: newOffsetLeft,
1797
+ pageLeft: newPageLeft,
1798
+ pageTop: newPageTop
1799
+ });
1800
+ }, [setViewport]);
1785
1801
  react.useEffect(() => {
1786
- if (typeof window === 'undefined' || (window.visualViewport || null) === null) {
1802
+ if (typeof window.visualViewport === 'undefined') {
1787
1803
  return () => {};
1788
1804
  }
1789
- function updateViewport(e) {
1790
- setViewport(e.target);
1791
- }
1792
- setViewport(window.visualViewport);
1793
- window.visualViewport.addEventListener('resize', updateViewport);
1794
- window.visualViewport.addEventListener('scroll', updateViewport);
1805
+ const onUpdate = e => {
1806
+ updateViewport(e.target);
1807
+ };
1808
+ updateViewport();
1809
+ window.visualViewport.addEventListener('resize', onUpdate);
1810
+ window.visualViewport.addEventListener('scroll', onUpdate);
1795
1811
  return () => {
1796
- window.visualViewport.removeEventListener('resize', updateViewport);
1797
- window.visualViewport.addEventListener('scroll', updateViewport);
1812
+ window.visualViewport.removeEventListener('resize', onUpdate);
1813
+ window.visualViewport.removeEventListener('scroll', onUpdate);
1798
1814
  };
1799
- }, [setViewport]);
1815
+ }, [updateViewport]);
1800
1816
  return {
1801
1817
  width: viewportWidth || windowWidth,
1802
1818
  height: viewportHeight || windowHeight,
1803
- offsetTop,
1804
- offsetLeft,
1805
- pageLeft,
1806
- pageTop
1819
+ ...viewport,
1820
+ updateViewport
1807
1821
  };
1808
1822
  }
1809
1823
 
package/dist/es.js CHANGED
@@ -1763,36 +1763,50 @@ function useVisualViewport() {
1763
1763
  const [{
1764
1764
  width: viewportWidth,
1765
1765
  height: viewportHeight,
1766
- offsetTop = 0,
1767
- offsetLeft = 0,
1768
- pageLeft = 0,
1769
- pageTop = 0
1766
+ ...viewport
1770
1767
  }, setViewport] = useState({
1771
1768
  width: windowWidth,
1772
1769
  height: windowHeight
1773
1770
  });
1771
+ const updateViewport = useCallback(function () {
1772
+ let viewPort = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1773
+ const {
1774
+ width: newWidth = 0,
1775
+ height: newHeight = 0,
1776
+ offsetTop: newOffsetTop = 0,
1777
+ offsetLeft: newOffsetLeft = 0,
1778
+ pageLeft: newPageLeft = 0,
1779
+ pageTop: newPageTop = 0
1780
+ } = viewPort || window.visualViewport || {};
1781
+ setViewport({
1782
+ width: newWidth,
1783
+ height: newHeight,
1784
+ offsetTop: newOffsetTop,
1785
+ offsetLeft: newOffsetLeft,
1786
+ pageLeft: newPageLeft,
1787
+ pageTop: newPageTop
1788
+ });
1789
+ }, [setViewport]);
1774
1790
  useEffect(() => {
1775
- if (typeof window === 'undefined' || (window.visualViewport || null) === null) {
1791
+ if (typeof window.visualViewport === 'undefined') {
1776
1792
  return () => {};
1777
1793
  }
1778
- function updateViewport(e) {
1779
- setViewport(e.target);
1780
- }
1781
- setViewport(window.visualViewport);
1782
- window.visualViewport.addEventListener('resize', updateViewport);
1783
- window.visualViewport.addEventListener('scroll', updateViewport);
1794
+ const onUpdate = e => {
1795
+ updateViewport(e.target);
1796
+ };
1797
+ updateViewport();
1798
+ window.visualViewport.addEventListener('resize', onUpdate);
1799
+ window.visualViewport.addEventListener('scroll', onUpdate);
1784
1800
  return () => {
1785
- window.visualViewport.removeEventListener('resize', updateViewport);
1786
- window.visualViewport.addEventListener('scroll', updateViewport);
1801
+ window.visualViewport.removeEventListener('resize', onUpdate);
1802
+ window.visualViewport.removeEventListener('scroll', onUpdate);
1787
1803
  };
1788
- }, [setViewport]);
1804
+ }, [updateViewport]);
1789
1805
  return {
1790
1806
  width: viewportWidth || windowWidth,
1791
1807
  height: viewportHeight || windowHeight,
1792
- offsetTop,
1793
- offsetLeft,
1794
- pageLeft,
1795
- pageTop
1808
+ ...viewport,
1809
+ updateViewport
1796
1810
  };
1797
1811
  }
1798
1812
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@folklore/hooks",
3
- "version": "0.0.61",
3
+ "version": "0.0.63",
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": "0a8b9c477678635f7c9c774eac2fea657e723425",
52
+ "gitHead": "3ff38e649f2a87788753de0b5ba53843a68ab202",
53
53
  "dependencies": {
54
54
  "@folklore/events": "^0.0.5",
55
55
  "@folklore/services": "^0.1.40",