@terraware/web-components 1.0.2 → 1.0.5

package/utils/useDeviceInfo.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactResponsive = require("react-responsive");
+
+/**
+ * This function returns properties on device type.
+ *
+ * {
+ *   type: 'desktop' | 'tablet' | 'mobile',
+ *   orientation: 'portrait' | 'landscape',
+ *   isDesktop: <boolean>,
+ *   isTablet: <boolean>,
+ *   isMobile: <boolean>,
+ *   isRetina: <boolean>,
+ * }
+ *
+ * Clients can use whichever properties they see fit.
+ *
+ * This function also acceps a callback function to be called
+ * if there's a change in any of our interested device properties.
+ */
+var useDeviceInfo = function useDeviceInfo() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      onChange = _ref.onChange;
+
+  var deviceChangeCallback = function deviceChangeCallback(matches) {
+    if (matches && onChange) {
+      onChange();
+    }
+  };
+
+  var isDesktop = (0, _reactResponsive.useMediaQuery)({
+    minWidth: 1024
+  }, undefined, deviceChangeCallback);
+  var isTablet = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: 1023,
+    minWidth: 768
+  }, undefined, deviceChangeCallback);
+  var isMobile = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: 767
+  }, undefined, deviceChangeCallback);
+  var isPortrait = (0, _reactResponsive.useMediaQuery)({
+    orientation: 'portrait'
+  }, undefined, deviceChangeCallback);
+  var isRetina = (0, _reactResponsive.useMediaQuery)({
+    query: '(min-resolution: 2dppx)'
+  }, undefined, deviceChangeCallback);
+
+  var getDeviceType = function getDeviceType() {
+    if (isTablet) {
+      return 'tablet';
+    }
+
+    if (isMobile) {
+      return 'mobile';
+    }
+
+    return 'desktop';
+  };
+
+  var getDeviceOrientation = function getDeviceOrientation() {
+    if (isPortrait) {
+      return 'portrait';
+    }
+
+    return 'landscape';
+  };
+
+  return {
+    type: getDeviceType(),
+    orientation: getDeviceOrientation(),
+    isRetina: isRetina,
+    isDesktop: isDesktop,
+    isTablet: isTablet,
+    isMobile: isMobile,
+    isPortrait: isPortrait,
+    isLandscape: !isPortrait
+  };
+};
+
+var _default = useDeviceInfo;
+exports.default = _default;