Panel Composition

We will do a component that uses several existing components. In this case we want to implement a new component that forces the user to check a box accepting their responsibility before editing a value.

import * as React from "react";
import { Model, _ } from "@flowable/forms";

const definition = {
  extraSettings: {
    layoutDefinition: {
      rows: [
        {
          cols: [
            {
              type: "boolean",
              label: "I know what I'm doing",
              value: "{{heKnows}}",
              size: 6,
            },
            {
              type: "text",
              value: "{{txtVal}}",
              enabled: "{{heKnows}}",
              size: 6,
            },
          ],
        },
      ],
    },
  },
};

export class PanelComposition extends Model.FormComponent {
  render() {
    const Panel = this.props.Components.panel;
    return (
      <div className="flw__container">
        This is the panel composition example
        <Panel {...this.props} />
      </div>
    );
  }
  static $resolve(
    unresolved: Model.Column,
    scope: Model.Payload,
    addData: Model.Payload,
    Components: Model.ComponentStore
  ) {
    const resolve = Components.panel.$resolve;
    return resolve({ ...unresolved, ...definition }, scope, addData, Components);
  }
}

Now in the resolve function we are enriching the definition by adding more components inside the extraSettings.layoutDefinition. The $resolve function has the responsibility of resolving its children. The Panel will resolve recursively its children and it will will traverse and instantiate the corresponding components inside its render function.