nope/pages/test/test-dynamic-layout.tsx

import { faHatWizard } from "@fortawesome/free-solid-svg-icons";
import * as React from "react";
import DynLayout, {
  IDynamicLayoutProps
} from "../../resources/ui/layout/dynamicLayout";
import TabEntry from "../../resources/ui/layout/tabs";

export interface DynLayoutProps {}

export interface DynLayoutState {}

class TestDynLayoutComponent extends React.Component<
  DynLayoutProps,
  DynLayoutState
> {
  componentDidMount() {
    this.setState({
      layoutSettings: {
        width: process.browser ? window.innerWidth : 1920,
        autoSize: false
      }
    });

    console.log("here", process.browser ? window.innerWidth : 1920);
  }

  constructor(props) {
    super(props);
  }

  render() {
    const settings: IDynamicLayoutProps<any> = {
      components: [
        {
          visible: true,
          component() {
            return <># Test Widget 1 </>;
          },
          gridSettings: {
            h: 5,
            w: 5,
            x: 0,
            y: 0,
            minW: 3,
            maxH: 5,
            minH: 5,
            maxW: 5
          },
          id: "test",
          label: "Test Widget 1",
          props: {},
          hideable: true
        },
        {
          visible: true,
          component() {
            return (
              <TabEntry
                tabs={{
                  active: "-1",
                  allowNewTabs: true,
                  items: []
                }}
              ></TabEntry>
            );
          },
          gridSettings: {
            h: 5,
            w: 10,
            x: 5,
            y: 0,
            minW: 5,
            maxH: 5,
            minH: 5
          },
          id: "test2",
          label: "# Test Widget 2",
          props: {},
          hideable: false,
          bg: "light"
        }
      ],
      layoutSettings: {
        width: process.browser ? window.innerWidth : 1920,
        autoSize: false,
        preventCollision: false,
        cols: 15,
        compactType: "horizontal"
      },
      toolbar: {
        items: [
          {
            type: "link",
            label: "docs",
            ref: "/docs",
            icon: faHatWizard
          }
        ]
      },
      generateData() {
        return {
          content: "hello"
        };
      }
    };

    return React.createElement(DynLayout, settings);
  }
}

export default TestDynLayoutComponent;