use resize observer in formview

packages/web/src/utility/resizeObserver.ts

@@ -0,0 +1,47 @@
+import _ from 'lodash';
+
+export default function resizeObserver(node, observerEnabled) {
+  const measure = () => {
+    const rect = node.getBoundingClientRect();
+
+    node.dispatchEvent(
+      new CustomEvent('resize', {
+        detail: {
+          width: rect.width,
+          height: rect.height,
+        },
+      })
+    );
+  };
+
+  let resizeObserver = null;
+
+  function doUpdate() {
+    if (observerEnabled && !resizeObserver) {
+      resizeObserver = new window['ResizeObserver'](() => {
+        measure();
+      });
+      resizeObserver.observe(node);
+    }
+    if (!observerEnabled && resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  }
+
+  doUpdate();
+  if (observerEnabled) measure();
+
+  return {
+    destroy() {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    },
+    update(value) {
+      observerEnabled = value;
+      doUpdate();
+    },
+  };
+}