getWidgetForField

Returns the default widget to use for any given Field. This is the glue between the ViewModel fields and the specific antd UI form components to use.

Depending on Field, this will return either a FieldWidget component directly, or an array like [FieldWidget, props] where props is the default props that would be applied to said widget.

This should be passed to UiProvider which will provide the function to components like FieldWidget.

See FieldWidget for where this function typically gets called from.

NOTE The widget components here are loaded using React.lazy. Your build must support this otherwise it is recommended to implement your own version (you can copy this implementation as a starting point).

If you are using nextjs React.lazy is not supported - you can switch it out for next/dynamic.

Simple usage:

import { UiProvider, getFormatterForField } from '@prestojs/ui';
import {
  FormWrapper,
  getWidgetForField as antdGetWidgetForField,
  FormItemWrapper,
} from '@prestojs/ui-antd';
function getWidgetForField(field) {
  const widget = antdGetWidgetForField(field);
  // If ui-antd doesn't provide a widget fall back to a default
  // You can add your own customisations here too (eg. override widgets
  // for specific fields or add support for new fields)
  if (!widget) {
    return DefaultWidget;
  }
  return widget;
}
export default () => (
  <UiProvider
    getWidgetForField={getWidgetForField}
    getFormatterForField={getFormatterForField}
    formItemComponent={FormItemWrapper}
    formComponent={FormWrapper}
  >
    <YourApp />
  </UiProvider>
);