DashboardFormComponent

DashboardFormComponent

@vendure/dashboardform-engine-types.ts

This is the common type for all custom form components registered for:

• custom fields
• configurable operation args
• detail page fields

Here's a simple example:

import { DashboardFormComponent, Input } from '@vendure/dashboard';

const MyComponent: DashboardFormComponent = (props) => {
    return <Input value={props.value}
                  onChange={props.onChange}
                  onBlur={props.onBlur}
                  name={props.name}
                  disabled={props.disabled}
                  ref={props.ref}
                  />;
};

Signature

type DashboardFormComponent = React.ComponentType<DashboardFormComponentProps> & {
    metadata?: DashboardFormComponentMetadata;
}

DashboardFormComponentProps

@vendure/dashboardform-engine-types.ts

Props that get passed to all form input components. They are based on the controller props used by the underlying react-hook-form, i.e.:

export type ControllerRenderProps = {
    onChange: (event: any) => void;
    onBlur: () => void;
    value: any;
    disabled?: boolean;
    name: string;
    ref: RefCallBack;
};

in addition, they can optionally be passed a fieldDef prop if the component is used in the context of a custom field or configurable operation arg.

The fieldDef arg, when present, has the following shape:

export type ConfigurableArgDef = {
    defaultValue: any
    description: string | null
    label: string | null
    list: boolean
    name: string
    required: boolean
    type: string
    ui: any
}

Signature

type DashboardFormComponentProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ControllerRenderProps<TFieldValues, TName> & {
    fieldDef?: ConfigurableFieldDef;
}

DashboardFormComponentMetadata

@vendure/dashboardform-engine-types.ts

Metadata which can be defined on a DashboardFormComponent which provides additional information about how the dashboard should render the component.

The metadata is defined by adding the static property on the component:

Example

export const MyCustomInput: DashboardFormComponent = props => {
  // implementation omitted
}

MyCustomInput.metadata = {
  isListInput: true
}

Signature

type DashboardFormComponentMetadata = {
    isListInput?: boolean | 'dynamic';
    isFullWidth?: boolean;
}

isListInput

property

boolean | 'dynamic'

Defines whether this form component is designed to handle list inputs. If set to 'dynamic', it means the component has internal logic that can handle both lists and single values.

isFullWidth

property

boolean