CardView - inferno utils

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/button.ts

@@ -0,0 +1,10 @@
+import type { Properties as ButtonProperties } from '@js/ui/button';
+import dxButton from '@js/ui/button';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Button extends InfernoWrapper<ButtonProperties, dxButton> {
+  protected getComponentFabric(): typeof dxButton {
+    return dxButton;
+  }
+}

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/template_wrapper.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/ban-types */
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { Component, createRef } from 'inferno';
+
+interface TemplateType<T> {
+  render: (args: { model: T; container: dxElementWrapper }) => void;
+}
+
+// eslint-disable-next-line max-len
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+export function TemplateWrapper<TProps = {}>(template: TemplateType<TProps>) {
+  return class Template extends Component<TProps> {
+    private readonly ref = createRef<HTMLDivElement>();
+
+    private renderTemplate(): void {
+      $(this.ref.current!).empty();
+      template.render({
+        container: $(this.ref.current!),
+        model: this.props,
+      });
+    }
+
+    public render(): JSX.Element {
+      return <div ref={this.ref}></div>;
+    }
+
+    public componentDidUpdate(): void {
+      this.renderTemplate();
+    }
+
+    public componentDidMount(): void {
+      this.renderTemplate();
+    }
+  };
+}

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/widget_wrapper.tsx

@@ -0,0 +1,54 @@
+import type DOMComponent from '@js/core/dom_component';
+import type { InfernoNode, RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+interface WithRef<TComponent> {
+  componentRef?: RefObject<TComponent>;
+}
+
+export abstract class InfernoWrapper<
+  TProperties,
+  TComponent extends DOMComponent<TProperties>,
+> extends Component<TProperties & WithRef<TComponent>> {
+  protected readonly ref = createRef<HTMLDivElement>();
+
+  protected component?: TComponent;
+
+  protected abstract getComponentFabric(): new (
+    element: Element, options: TProperties
+  ) => TComponent;
+
+  public render(): InfernoNode {
+    return <div ref={this.ref}></div>;
+  }
+
+  private updateComponentRef(): void {
+    if (this.props.componentRef) {
+      // @ts-expect-error
+      this.props.componentRef.current = this.component;
+    }
+  }
+
+  protected updateComponentOptions(prevProps: TProperties, props: TProperties): void {
+    Object.keys(props as object).forEach((key) => {
+      if (props[key] !== prevProps[key]) {
+        this.component?.option(key, props[key]);
+      }
+    });
+  }
+
+  public componentDidMount(): void {
+    // eslint-disable-next-line no-new, @typescript-eslint/no-non-null-assertion
+    this.component = new (this.getComponentFabric())(this.ref.current!, this.props);
+    this.updateComponentRef();
+  }
+
+  public componentDidUpdate(prevProps: TProperties): void {
+    this.updateComponentOptions(prevProps, this.props);
+    this.updateComponentRef();
+  }
+
+  public componentWillUnmount(): void {
+    this.component?.dispose();
+  }
+}