Antd UI

This module provides UI components for displaying and editing data using the antd library.

---

Installation

yarn add @prestojs/ui @prestojs/ui-antd antd

Usage

Below is an example of setting up ui-antd using AntdUiProvider - see there for the full list of props you can pass through.

See UiProvider for more detail on how UI integrations work at a high level.

import React from 'react';
import { DatePicker, TimePicker } from 'antd';
import { AntdUiProvider, getWidgetForField as antdGetWidgetForField } from '@prestojs/ui-antd';

/**
 * This is optional but recommended. You can provide any customisations to widgets
 * here. If you choose not to provide this `AntdUiProvider` will call `antdGetWidgetForField`
 * directly.
 */
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) {
        // Alternatively you could return a default widget here
        throw new Error(`No widget set for ${field}`);
    }
    return widget;
}

export default function Root() {
    return (
        <AntdUiProvider
            // This is optional but the recommended pattern for providing your own widgets with a fallback
            getWidgetForField={getWidgetForField}
            // This is optional; if you use no date based widgets you can exclude this
            datePickerComponent={DatePicker}
            // This is optional; if you use no time based widgets you can exclude this
            timePickerComponent={TimePicker}
        >
            <YourApp />
        </AntdUiProvider>
    );
}

The above example shows how to configure an app that is going to use date or time based widgets (eg. DateWidget or TimeWidget). You must explicitly pass datePickerComponent and timePickerComponent to define what widget to use. This is to allow customisation of the underlying date library to use for the component. The default provided by antd is to use moment but often this is undesirable. The recommended approach from antd is to outlined in their replace moment documentation.