lunatk / protobuf-auto-form Goto Github PK

Field Override Pattern Using Child Component

Abstract

This document describes a new mechanism for providing field-specific attributes via special child component, namely AutoFormField. With field-specific attributes (e.g., label, disabled, and render), you can override how each field should be rendered.

Background

Generally, protobuf definition itself is not containing enough information for constructing user-friendly UI. For example, message field name tends to be in form of programming terminologies, making it hard to be understood by the end-user not familiar with programming.
It is necessary for developers being able to provide such additional information to AutoForm.

In React UI framework ecosystem, this is usually done through component props. However, the object passed as props becomes too verbose when the field hierarchy is complicated. In order to make it neat and idiomatic, child component can be used to target a specific field of the form.

Proposal

You can put AutoForm.Field as a child of AutoForm. AutoForm.Field has a required prop name, indicating which field of the current form should be associated with it.

Consider rendering protobuf message below.

message Article {
  id: int32
  title: string
  content: string
}

Say we do not want our end-users to edit id field, since it will be auto-generated.
We can achieve this by specifying disabled attribute of the id field like the code below.

<AutoForm messageType="Article" ... >
  <AutoForm.Field name="id" disabled />
</AutoForm>

Here, AutoForm.Field does not actually render any elements, it just delivers attributes to each field. Other fields not specified through AutoForm.Field will be rendered just like the default. Note that AutoForm.Field does not change ordering of the fields.

Nested Field

WIP

Repeated and Map

WIP

In most of my use case, most of the props props AutoForm shares common values (e.g., namespace).

It'd better create factory function that takes these common props, and return the component with defaultized props.