Chore: modal refactor

src/components/Modal/ModalController.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import ReactDOM from 'react-dom';
+import { provideTheme } from '../ConfigProvider/ConfigProvider';
+
+interface ModalWrapperProps {
+  showModal: <T>(component: React.ComponentType<T>, props: T) => void;
+  hideModal: () => void;
+}
+
+type ModalWrapper<T> = FC<ModalWrapperProps>;
+
+interface Props {
+  children: ModalWrapper<any>;
+}
+
+interface State {
+  component: React.ComponentType<any> | null;
+  props: any;
+}
+
+export class ModalController extends React.Component<Props, State> {
+  modalRoot = document.body;
+  modalNode = document.createElement('div');
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      component: null,
+      props: {},
+    };
+  }
+
+  showModal = (component: React.ComponentType<any>, props: any) => {
+    this.setState({
+      component,
+      props
+    });
+  };
+
+  hideModal = () => {
+    this.modalRoot.removeChild(this.modalNode);
+    this.setState({
+      component: null,
+      props: {},
+    });
+  };
+
+  renderModal() {
+    const { component, props } = this.state;
+    if (!component) {
+      return null;
+    }
+
+    this.modalRoot.appendChild(this.modalNode);
+    const modal = React.createElement(provideTheme(component), props);
+    return ReactDOM.createPortal(modal, this.modalNode);
+  }
+
+  render() {
+    const { children } = this.props;
+    const ChildrenComponent = children;
+
+    return (
+      <>
+        <ChildrenComponent showModal={this.showModal} hideModal={this.hideModal} />
+        {this.renderModal()}
+      </>
+    );
+  }
+}