UiProvider

UiProvider is used to supply the UI library specific widgets, formatters, form components etc that are used throughout the system.

To use with @prestojs/ui-antd see AntdUiProvider.

import React from 'react';
import { UiProvider, getFormatterForField } from '@prestojs/ui';
import { Input } from 'antd';

const DefaultWidget = ({ input }) => <input {...input} />;
const DefaultFormatter = ({ value }) => value;

function getWidgetForField(field) {
   // Add any app specific customisations here, eg
   // if (field instanceof BooleanField) {
   //    return [CustomBooleanWidget, field.getWidgetProps()];
   // }
   // Otherwise return default widget. If you would prefer an error if no explicit widget defined for
   // a field then don't return anything.
   return [DefaultWidget, field.getWidgetProps()];
}

function getFormatterForField(field) {
    // Add any app specific customisations here, eg
    // if (field instanceof BooleanField) {
    //    return CustomBooleanFormatter;
    // }
    return DefaultFormatter;
}

function FormItemWrapper({ children, label, help, required }) {
    return (
        <div>
            <label>
                {label} {children}
            </label>
            {required ? '(required)' : '(optional)'}
            {help && <span className="help">{help}</span>}
        </div>
    );
}

export default function Root() {
  return (
    <UiProvider
      getFormatterForField={getFormatterForField}
      getWidgetForField={getWidgetForField}
      formItemComponent={FormItemWrapper}
    >
       <YourApp />
    </UiProvider>
  );
}