Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"ui:template" schema option

See original GitHub issue

Prerequisites

I have read the documentation;
In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

For more theming control a "ui:template" option would be helpful. From what I can tell this would be a fairly simple matter to integrate three places:

SchemaField
ObjectField
ArrayField

This would build on the work in #304.

Expected behavior

People could use custom templates to customize layout. This would be the most pertinent for objects and arrays, but can only be useful for leaf nodes too.

const uiSchema = {
  "ui:template": GroupedObjectTemplate,
  title: {
    "ui:template": InlineField
  }
  done: {
    "ui:template": ErrorsInTooltip
  },
  comments: {
    "ui:template": InlineArray
  }
};

Alternative 1 - External plugin

Currently as a workaround this behaviour can be (almost) achieved externally. The biggest blocker to making it easier to achieve externally is that the default template objects are not exported.

import React from "react";
// TODO: Would be useful to 
import {
  DefaultObjectFieldTemplate,
  DefaultFieldTemplate,
  DefaultArrayItem
} from "./DefaultTemplates";

export function FieldTemplate(props) {
  const Template = props.uiSchema["ui:template"];
  if (
    Template &&
    // TODO: LV: Seems strange that this is required to be plugged in... oh well
    props.schema.type !== "object" &&
    props.schema.type !== "array"
  ) {
    return <Template {...props} />;
  } else {
    return <DefaultFieldTemplate {...props} />;
  }
}

export const ObjectFieldTemplate = defaultOrComponent(
  DefaultObjectFieldTemplate
);
export const ArrayFieldTemplate = defaultOrComponent(DefaultArrayItem);

function defaultOrComponent(DefaultTemplate) {
  return function(props) {
    const Template = props.uiSchema["ui:template"];
    if (Template) {
      console.error("Can't render", Template, props);
      return <Template {...props} />;
    } else {
      return <DefaultTemplate {...props} />;
    }
  };
}

And then use that on your Form

  import * as UiTemplate from "...";
  
  const fm = <Form
    schema={schema}
    uiSchema={uiSchema}
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")}
    transformErrors={log("transformErrors")}
    liveValidate={true}
    formContext={{
      templates: Templates.GroupTemplates
    }}
    {...UiTemplate}
  >

Alternative 2 - “ui:field”

“ui:field” is very powerful, but it requires too much re-implementation of core behaviour to get right, particularly for things like arrays and objects.

Recommendation

I would recommend tackling this in phases, getting simpler functionality merged in earlier, and complex functionality merged in later.

Phase 1 allow templates as objects

Before: const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;
After: const Template = uiSchema["ui:template"] || registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;

Phase 2 allow templates as strings, add templates to registry, allow custom templates map, add default templates to default registry

Phase 3 themes for other ui libraries