@micromag/core 0.3.812 → 0.3.814

package/es/hooks.js

@@ -17,6 +17,7 @@ import raf from 'raf';
 import createDebug from 'debug';
 import isString from 'lodash/isString';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
+import { useWindowSize } from '@folklore/hooks';
 import { match } from 'css-mediaquery';
 import { useIntl } from 'react-intl';
 import dayjs from 'dayjs';
@@ -2093,30 +2094,8 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
   };
 };
-var getWindowSize = function getWindowSize() {
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth : null,
-    height: typeof window !== 'undefined' ? window.innerHæeight : null
-  };
-};
 var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
-  var _useState3 = useState(getWindowSize()),
-    _useState4 = _slicedToArray(_useState3, 2),
-    windowSize = _useState4[0],
-    setWindowSize = _useState4[1];
-  useEffect(function () {
-    var onResize = function onResize() {
-      return setWindowSize(getWindowSize());
-    };
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', onResize);
-    }
-    return function () {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', onResize);
-      }
-    };
-  }, [setWindowSize]);
+  var windowSize = useWindowSize();
   return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
 };
 
@@ -2144,20 +2123,34 @@ function useSpringValue(wantedProgress, immediate, params) {
   return immediate ? wantedProgress : progress;
 }
 
-function useSupportsWebp() {
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    supportsWebp = _useState2[0],
-    setSupportsWebp = _useState2[1];
-  useEffect(function () {
+function checkWebpSupport() {
+  return new Promise(function (resolve) {
     var img = document.createElement('img');
     img.onload = function () {
-      setSupportsWebp(img.width > 0 && img.height > 0);
+      resolve(img.width > 0 && img.height > 0);
     };
     img.onerror = function () {
-      setSupportsWebp(false);
+      resolve(false);
     };
     img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp() {
+  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    supportsWebp = _useState2[0],
+    setSupportsWebp = _useState2[1];
+  useEffect(function () {
+    var canceled = false;
+    checkWebpSupport().then(function (newSupport) {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return function () {
+      canceled = true;
+    };
   }, []);
   return supportsWebp;
 }
@@ -2190,7 +2183,8 @@ var useSwipe = function useSwipe() {
   var index = useRef(0);
   var lockedAxis = useRef(null);
   var hasWidth = width !== null;
-  var windowWidth = typeof window !== 'undefined' && !hasWidth ? window.innerWidth : null;
+  var _useWindowSize = useWindowSize(),
+    windowWidth = _useWindowSize.width;
   var currentWidth = hasWidth ? width : windowWidth;
   var count = items.length;
   var getItem = useCallback(function () {

package/lib/hooks.js

@@ -19,6 +19,7 @@ var raf = require('raf');
 var createDebug = require('debug');
 var isString = require('lodash/isString');
 var contexts = require('@micromag/core/contexts');
+var hooks = require('@folklore/hooks');
 var cssMediaquery = require('css-mediaquery');
 var reactIntl = require('react-intl');
 var dayjs = require('dayjs');
@@ -2095,30 +2096,8 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
   };
 };
-var getWindowSize = function getWindowSize() {
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth : null,
-    height: typeof window !== 'undefined' ? window.innerHæeight : null
-  };
-};
 var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
-  var _useState3 = react.useState(getWindowSize()),
-    _useState4 = _slicedToArray(_useState3, 2),
-    windowSize = _useState4[0],
-    setWindowSize = _useState4[1];
-  react.useEffect(function () {
-    var onResize = function onResize() {
-      return setWindowSize(getWindowSize());
-    };
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', onResize);
-    }
-    return function () {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', onResize);
-      }
-    };
-  }, [setWindowSize]);
+  var windowSize = hooks.useWindowSize();
   return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
 };
 
@@ -2146,20 +2125,34 @@ function useSpringValue(wantedProgress, immediate, params) {
   return immediate ? wantedProgress : progress;
 }
 
-function useSupportsWebp() {
-  var _useState = react.useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    supportsWebp = _useState2[0],
-    setSupportsWebp = _useState2[1];
-  react.useEffect(function () {
+function checkWebpSupport() {
+  return new Promise(function (resolve) {
     var img = document.createElement('img');
     img.onload = function () {
-      setSupportsWebp(img.width > 0 && img.height > 0);
+      resolve(img.width > 0 && img.height > 0);
     };
     img.onerror = function () {
-      setSupportsWebp(false);
+      resolve(false);
     };
     img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp() {
+  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var _useState = react.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    supportsWebp = _useState2[0],
+    setSupportsWebp = _useState2[1];
+  react.useEffect(function () {
+    var canceled = false;
+    checkWebpSupport().then(function (newSupport) {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return function () {
+      canceled = true;
+    };
   }, []);
   return supportsWebp;
 }
@@ -2192,7 +2185,8 @@ var useSwipe = function useSwipe() {
   var index = react.useRef(0);
   var lockedAxis = react.useRef(null);
   var hasWidth = width !== null;
-  var windowWidth = typeof window !== 'undefined' && !hasWidth ? window.innerWidth : null;
+  var _useWindowSize = hooks.useWindowSize(),
+    windowWidth = _useWindowSize.width;
   var currentWidth = hasWidth ? width : windowWidth;
   var count = items.length;
   var getItem = react.useCallback(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.812",
+    "version": "0.3.814",
     "private": false,
     "description": "",
     "keywords": [
@@ -130,6 +130,7 @@
         "@babel/runtime": "^7.13.10",
         "@folklore/fetch": "^0.1.17",
         "@folklore/forms": "~0.0.23",
+        "@folklore/hooks": "^0.0.83",
         "@folklore/routes": "^0.2.36",
         "@folklore/services": "^0.1.24",
         "@folklore/size": "^0.1.20",
@@ -167,5 +168,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "34ea72adfaffec7c33e328b9c46301cd18cbde83"
+    "gitHead": "96d19c8ede8dc2e8c051ba118975258e061a8da2"
 }