@telus-uds/components-base 2.5.0 → 3.0.0

package/lib/cjs/ViewportProvider/useViewportListener.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _systemConstants = require("@telus-uds/system-constants");
+var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+// to update on every pixel change during window resize; but we only want rerenders to occur
+// when a viewport threshold has been crossed.
+const lookupViewport = () => _systemConstants.viewports.select(_Dimensions.default.get('window').width);
+
+/**
+ * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
+ * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
+ * is shown to the user. Then bind events to update the viewport if it changes.
+ */
+const useViewportListener = setViewport => {
+  (0, _useSafeLayoutEffect.default)(() => {
+    setViewport(lookupViewport());
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(_systemConstants.viewports.select(window.width));
+    };
+    const listener = _Dimensions.default.addEventListener('change', onChange);
+    return () => {
+      if (typeof listener?.remove === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove();
+        // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+        _Dimensions.default.removeEventListener('change', onChange);
+      }
+    };
+  }, [setViewport]);
+};
+var _default = exports.default = useViewportListener;