Dynamic Layout

DynamicLayout is a component, that renders layout from json, based on the map of available components.

Usage

Start

import { DynamicLayout, StructureErrorBoundary } from "wedoio-dynamic-layout";

DynamicLayout

Pass your json structure and componentsMap to DynamicLayout props :

<StructureErrorBoundary>
  <DynamicLayout
    structure={json}
    componentsMap={yourComponentsMap}
    contentKeysMap={contentKeysMap}
  />
</StructureErrorBoundary>

contentKeysMap - list of additional keys (except the "children") by item type, that contain markup (optional)

<StructureErrorBoundary> - is a wrapper component to catch possible structure errors.

DynamicLayout components

For each component, that you want to use in DynamicLayout, a mapProps function must be provided. Its first argument is a structure - component props and the second is a builder function. If your element may have nested element, you should pass them to the builder function.

Note:

• builder function can also be accessed in component props.

• children is supposed to be a collection of elements in json.

The following code is an example of a Block component :

const Block: FC<IBlock> = ({ children }) => {
  return <div>{children}</div>;
};

export default Block;

export const mapBlockProps = (
  { children, ...props }: IBlock,
  builder: any
) => ({
  children: builder(children),
  ...props,
});

Markup

componentsMap initially has component, that allows you to render html markup from string. See the usage example below :

{
  "type": "markup",
  "content": "<p><b>Bold</b> Text</p>"
}

the content is sanitized using the instance of dompurify library. You can set its config using setMarkupConfig method :

import { setMarkupConfig } from "wedoio-dynamic-layout";

See config options on https://github.com/cure53/DOMPurify.

DynamicForm

DynamicForm component is the second built-in component in DynamicLayout. To create a form, add this to your json :

{
  "type": "form",
  "generate_button": true,
  "submitUrl": "www.google.com/submit/",
  "submitPayload": '{"input": {"op": "submit", "data": $data}}',
  "submitMethod":"get" | "post" | "put" | "delete" | "patch";
  "children": [{
    "type": "textfield",
    "label": "Your work email adress",
    "key": "email1",
    "value": "",
    "validation": "string|required|email"
  }]
}

Or using custom Submit element :

{
  "type": "form",
  "generate_button": false,
  "children": [
    {
    "type": "textfield",
    "label": "Your work email adress",
    "key": "email1",
    "value": "",
    "validation": "string|required|email"
  },
  {
    "type": "submit",
    "value": "Sign up",
    "callback": "www.google.com/submit/",
    "payload": "{\"input\": {\"op\": \"submit\", \"data\": $data}}",
    "submitMethod":"get" | "post" | "put" | "delete" | "patch";
    "wrapper": "main"
  }
  ]
}

isInitialValid property sets a similar Formik property

Element of "type":"hidden" can be useful for multy step forms :

  {
    "type": "hidden",
    "key": "step",
    "value": ""
  },

Element of "type":"conditional-form-block" can be used to hide and show form parts depending on the form value :

  {
    "type": "conditional-form-block",
    "effect": "show",
    "values": [
      true
    ],
    "fieldName": "checkbox",
    "children": []
  }

Registring services

To add a submit service you should pass it to DynamicLayout props:

<DynamicLayout callService={yourSubmitFunction} />

Note: you can return structure in yourSubmitFunction to replace layout part. Adjust property wrapper to form values and pass elements id in it. See : Updating layout parts

Adding yup locale

DynamicForm usesyupfor validation. You can set yup locale to provide your own validation messages usingsetLocale method :

import { setLocale } from "wedoio-dynamic-layout";

Updating Layout parts

To replace layout part by elements id you can use useDynamicLayoutContext hook. It can be accessed within any of DynamicLayout components.

import { useDynamicLayoutContext } from "wedoio-dynamic-layout";
...
const { updateLayoutPart } = useDynamicLayoutContext();

updateLayoutPart function recieves argument of type IUpdateLayoutPart:

• id - elements id
• newStructure - new json structure to replace element with

Removing Layout parts

To remove layout part by elements id you can use removeLayoutPart function.

import { useDynamicLayoutContext } from "wedoio-dynamic-layout";
...
const { removeLayoutPart } = useDynamicLayoutContext();

Get parent

To access parent structure by elements getElementParent function.

import { useDynamicLayoutContext } from "wedoio-dynamic-layout";
...
const { getElementParent } = useDynamicLayoutContext();

Demos

The basic usage examples can be found in App.tsx file and components folder.