feat(react): Initial implementations of controller required elements. (#16817)

react/src/components/createControllerComponent.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { attachEventProps } from './utils'
+import { ensureElementInBody, dashToPascalCase } from './utils';
+
+export function createControllerComponent<T, E extends HTMLElement, C extends HTMLElement>(tagName: string, controllerTagName: string) {
+  const displayName = dashToPascalCase(tagName);
+
+  type IonicReactInternalProps = {
+    forwardedRef?: React.RefObject<E>;
+    children?: React.ReactNode;
+    show: boolean
+  }
+
+  return class ReactControllerComponent extends React.Component<T & IonicReactInternalProps> {
+    element: E;
+    controllerElement: C;
+
+    constructor(props: T & IonicReactInternalProps) {
+      super(props);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+
+    async componentDidMount() {
+      this.controllerElement = ensureElementInBody<C>(controllerTagName);
+      await (this.controllerElement as any).componentOnReady();
+    }
+
+    async componentDidUpdate(prevProps: T & IonicReactInternalProps) {
+      if (prevProps.show !== this.props.show && this.props.show === true) {
+        const { children, show, ...cProps} = this.props as any;
+
+        this.element = await (this.controllerElement as any).create(cProps);
+        await (this.element as any).present();
+
+        attachEventProps(this.element, cProps);
+      }
+      if (prevProps.show !== this.props.show && this.props.show === false) {
+        return await (this.element as any).dismiss();
+      }
+    }
+
+    render(): null {
+      return null;
+    }
+  }
+}
+