Pass a Fields component through Form children

[danielweinmann]

This component would:

• Render all fields in the schema precisely as if we hadn't passed children to the form. This is useful because sometimes we just want to customize the errors, the button, or the overall form layout. But not the fields. In this situation, we're currently forced to render all fields manually.
• If we pass children to it, we only pass the Fields we want to customize, but it will render all form fields in the same order as the schema. This will allow us to customize only the fields we want and rely on the convention for the rest.

This should not change the current Form children render logic. It will only add this option to make our forms even DRYer.

[darlantc]

This would be awesome!

I just wrote this form code to hide one field based on the value of the other. I would love to focus only on it and leave the schema doing the ordering thing to me for the rest of them.

{({ Errors, Field, watch }) => {
  return (
    <>
      {getFieldsToRender().map((name) => (
        <Field key={name} name={name} />
      ))}
      <Errors />
    </>
  );

  function getFieldsToRender() {
    const paymentSourceValue = watch("paymentSource");
    const isCreditCard = paymentSourceValue?.startsWith("creditCard");

    return [
      "accountId",
      "id",
      "type",
      "value",
      "isConfirmed",
      "date",
      "description",
      "categoryId",
      "paymentSource",
      isCreditCard && "creditCardInvoiceSlug",
      "isIgnored",
      "observation",
      "tags",
    ].filter(Boolean);
  }
}}