Merge pull request #259 from modelix/fix-tooltips

fix(react): usage of mui.Tooltip caused an exception

Author: slisson

react-ssr-client/src/components/Base.tsx

@@ -1,4 +1,4 @@
-import React, {Attributes} from 'react'
+import React from 'react'
 import {IViewModel} from "../ViewModel.ts";
 
 export interface IComponent extends IComponentContainer {
@@ -21,21 +21,6 @@ export interface IComponentWrapper {
     component: IComponent
 }
 
-export abstract class ComponentBase<S = {}, SS = any> extends React.Component<IComponentWrapper, S, SS>  {
-    protected renderChildComponents(): (JSX.Element | string)[] {
-        return renderChildComponents(this.props.component)
-    }
-}
-
-function convertComponent(component: IComponent): IComponent {
-    const convertedProps = jsonToProps(component.properties)
-    if (convertedProps === component.properties) return component
-    return {
-        ...component,
-        properties: convertedProps
-    }
-}
-
 function jsonToProps(json: Record<string, any> | undefined): Record<string, any> | undefined {
     if (json === undefined) return json;
 
@@ -63,20 +48,21 @@ function jsonToProps(json: Record<string, any> | undefined): Record<string, any>
     return result
 }
 
-export function createComponentFromJson(component: IComponent | string) {
+export function createComponentFromJson(component: IComponent | string): React.ReactNode {
     if (typeof component == "string") {
         return component
     } else {
         const renderer = componentConstructors.get(component.type);
         if (renderer) {
-            return React.createElement(renderer, { component: convertComponent(component), key: component.key } as IComponentWrapper & Attributes)
+            let convertedProps = jsonToProps(component.properties) ?? {}
+            return React.createElement(renderer, { ...convertedProps, key: component.key }, ...renderChildComponents(component))
         } else {
             return (<span>Unknown component type: "{component.type}"</span>);
         }
     }
 }
 
-function renderChildComponents(parent: IComponentContainer) {
+function renderChildComponents(parent: IComponentContainer): React.ReactNode[] {
     if (parent.children) {
         return parent.children.map(componentData => createComponentFromJson(componentData.component ?? componentData.text!!));
     } else {
@@ -88,13 +74,6 @@ export function renderViewModel(model: IViewModel) {
     return <div>{renderChildComponents(model)}</div>
 }
 
-export class ViewModelRenderer extends React.Component<{ model: IViewModel }> {
-
-    render() {
-        return <>{renderChildComponents(this.props.model)}</>;
-    }
-}
-
 export const componentConstructors: Map<string, any> = new Map();
 
 export function registerComponentConstructor(type: string, ctor: any) {

react-ssr-client/src/components/DefaultComponents.ts

@@ -1,7 +1,6 @@
-import {componentConstructors, IComponentWrapper, registerComponentConstructor} from "./Base.tsx";
+import {componentConstructors, registerComponentConstructor} from "./Base.tsx";
 import * as mui from "@mui/material";
 import * as icons from "@mui/icons-material";
-import {GenericComponent} from "./GenericComponent.tsx";
 import { DataGrid } from '@mui/x-data-grid';
 import Grid2 from "@mui/material/Unstable_Grid2"
 import { SimpleTreeView, RichTreeView, TreeItem, TreeItem2 } from '@mui/x-tree-view';
@@ -58,45 +57,37 @@ const svgTagList = [
     "view",
 ]
 
-export function registerGenericComponent(id: string, elementType: any) {
-    registerComponentConstructor(id, class extends GenericComponent {
-        constructor(props: IComponentWrapper) {
-            super(elementType, props);
-        }
-    });
-}
-
 export function registerDefaultComponents() {
     for (const tagName of htmlTagList) {
-        registerGenericComponent("html." + tagName, tagName)
+        registerComponentConstructor("html." + tagName, tagName)
     }
 
     for (const tagName of svgTagList) {
-        registerGenericComponent("svg." + tagName, tagName)
+        registerComponentConstructor("svg." + tagName, tagName)
     }
 
     for (const id in mui) {
         if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerGenericComponent("mui." + id, (mui as any)[id])
+        registerComponentConstructor("mui." + id, (mui as any)[id])
     }
 
     for (const id in icons) {
         if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerGenericComponent("mui.icons." + id, (icons as any)[id])
+        registerComponentConstructor("mui.icons." + id, (icons as any)[id])
     }
 
-    registerGenericComponent("mui.DataGrid", DataGrid)
-    registerGenericComponent("mui.Grid2", Grid2)
-    registerGenericComponent("mui.SimpleTreeView", SimpleTreeView)
-    registerGenericComponent("mui.RichTreeView", RichTreeView)
-    registerGenericComponent("mui.TreeItem", TreeItem)
-    registerGenericComponent("mui.TreeItem2", TreeItem2)
-    registerGenericComponent("modelix.Dropdown", Dropdown)
-    registerGenericComponent("modelix.ReferenceTargetChooser", ReferenceTargetChooser)
-    registerGenericComponent("modelix.TextField", ModelixTextField)
-    registerGenericComponent("modelix.Spreadsheet", ModelixSpreadsheet)
-    registerGenericComponent("modelix.TextEditor", ModelixTextEditor)
-    registerGenericComponent("modelix.ImageBasedEditor", ModelixImageBasedEditor)
+    registerComponentConstructor("mui.DataGrid", DataGrid)
+    registerComponentConstructor("mui.Grid2", Grid2)
+    registerComponentConstructor("mui.SimpleTreeView", SimpleTreeView)
+    registerComponentConstructor("mui.RichTreeView", RichTreeView)
+    registerComponentConstructor("mui.TreeItem", TreeItem)
+    registerComponentConstructor("mui.TreeItem2", TreeItem2)
+    registerComponentConstructor("modelix.Dropdown", Dropdown)
+    registerComponentConstructor("modelix.ReferenceTargetChooser", ReferenceTargetChooser)
+    registerComponentConstructor("modelix.TextField", ModelixTextField)
+    registerComponentConstructor("modelix.Spreadsheet", ModelixSpreadsheet)
+    registerComponentConstructor("modelix.TextEditor", ModelixTextEditor)
+    registerComponentConstructor("modelix.ImageBasedEditor", ModelixImageBasedEditor)
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", window.location + "../../../known-components", true);